Develop Reference

javascript moving a div left and right

I made this mini game and I want that my "player" named div to move to left and right inside of the "game" div but I'm stuck. Can someone help me? I think my error is inside of the JavaScript file... Also if my "player" div moves, will my "gun" div move with it too?
let modifier = 50;
let player = document.getElementById('player');
window.addEventListener('keydown', (event) => {
const {
style
} = player;
switch (event.key) {
case 'ArrowRight':
style.left = `${parseInt(style.left) - modifier}px`;
break;
case 'ArrowLeft':
style.left = `${parseInt(style.left) + modifier}px`;
break;
}
});
body {
margin: 0;
padding: 0;
background-color: mediumblue;
height: 800px;
overflow: hidden;
}
p {
font-size: 48pt;
color: black;
font-family: fantasy;
font-weight: bold;
position: relative;
left: 300px;
top: -50px;
}
.game {
width: 800px;
height: 500px;
position: center;
border: 14px solid darkblue;
border-radius: 5px;
margin-left: 300px;
margin-top: -100px;
background-color: black;
}
#player {
height: 20px;
width: 40px;
background-color: firebrick;
border-radius: 2px;
position: relative;
top: 470px;
left: 400px;
}
#gun {
position: relative;
height: 40px;
width: 10px;
background-color: firebrick;
top: -20px;
left: 15px;
border-radius: 2px;
}
#bullet {
position: relative;
background-color: darkorange;
width: 8px;
height: 20px;
top: 0;
left: 1px;
animation: shoot 0.7s linear;
}
#keyframes shoot {
0% {
top: 0px;
}
100% {
top: -470px;
}
}
<p>Galaxy Invaders</p>
<div class="game">
<div id="player">
<div id="gun">
<div id="bullet"></div>
</div>
</div>
<div id="enemy"></div>
</div>
<script src="js.js"></script>

You need to use getComputedStyle: https://developer.mozilla.org/en-US/docs/Web/API/Window/getComputedStyle
let modifier = 50;
let player = document.getElementById('player');
window.addEventListener('keydown', (event) => {
switch (event.key) {
case 'ArrowRight':
player.style.left = (parseInt(getComputedStyle(player).left) + modifier) + "px";
break;
case 'ArrowLeft':
player.style.left = (parseInt(getComputedStyle(player).left) - modifier) + "px";
break;
}
});
body {
margin: 0;
padding: 0;
background-color: mediumblue;
height: 800px;
overflow: hidden;
}
p {
font-size: 48pt;
color: black;
font-family: fantasy;
font-weight: bold;
position: relative;
left: 300px;
top: -50px;
}
.game {
width: 800px;
height: 500px;
position: center;
border: 14px solid darkblue;
border-radius: 5px;
margin-left: 300px;
margin-top: -100px;
background-color: black;
}
#player {
height: 20px;
width: 40px;
background-color: firebrick;
border-radius: 2px;
position: relative;
top: 470px;
left: 400px;
}
#gun {
position: relative;
height: 40px;
width: 10px;
background-color: firebrick;
top: -20px;
left: 15px;
border-radius: 2px;
}
#bullet {
position: relative;
background-color: darkorange;
width: 8px;
height: 20px;
top: 0;
left: 1px;
animation: shoot 0.7s linear;
}
#keyframes shoot {
0% {
top: 0px;
}
100% {
top: -470px;
}
}
<p>Galaxy Invaders</p>
<div class="game">
<div id="player">
<div id="gun">
<div id="bullet"></div>
</div>
</div>
<div id="enemy"></div>
</div>

HTML elements CSS property values acquired by .style aswell as per getComputedStyle() will be returned by Javascript as strings like 10px for div { left: 10px}, containing unit types depending on the CSS property.
You will have to substract the unit types from those strings and then your parseInt should work:
parseInt(style.left.replace('px', ''))

How to delay something thats just a possibility

So i'm making a website, and i have a sort of a slider menu from top, and when i hover over a button everything appears, but when i hover out it doesn't disappear. In my js code i had to delay the disappearance with setTimeout() because there's a small gap between the button and the menu. So if someone would know how to make it disappear while keeping the timer thing so it doesn't disappear when going from button to the menu i'd be insanely grateful. Thanks in advance. Here's the code:
var timeout;
function mouseOver(){
document.getElementById('menu-roll').style.display = 'block';
timeout = setTimeout(function(){document.getElementById('menu-roll').style.display = 'none';}, 3000);
}
function mouseOut(){
clearTimeout(timeout);
}
:root{
--backg-primary: #ffeaa7;
--backg-islands: #2d3436;
--nav-wrapper: #4d0404;
--nav-wrapper-hover: #F79F1F;
--menu-roll: rgba(247, 159, 31, 0.95);
}
*{
margin: 0;
padding: 0;
}
body{
font-family: Verdana, Geneva, Tahoma;
scroll-behavior: smooth;
}
#video-wrapper{
height: 100vh;
width: 100%;
}
#navbar{
background-color: var(--nav-wrapper);
position: fixed;
width: 100%;
transition: top 0.3s;
top: 0;
overflow: visible;
z-index: 7;
}
#navbar a{
float: left;
display: block;
color: white;
text-align: center;
padding: 15px;
text-decoration: none;
letter-spacing: 1.5px;
}
#navbar a:hover{
transition: background-color .25s ease, color .25s ease;
background-color: var(--nav-wrapper-hover);
color: var(--nav-wrapper);
}
#logo-wrapper{
background: white;
margin: 0 auto;
border: 3.85px solid var(--nav-wrapper);
box-shadow: 0 0 10px #333;
position: relative;
animation: slideup 3s;
width: 200px;
height: 200px;
border-radius: 45%;
}
#keyframes slideup{
0%{
top: 150px;
}
100%{
top: 0;
}
}
#menu-wrapper{
width: 700px;
height: 103px;
background: var(--nav-wrapper);
margin: 0 auto;
border-radius: 50px;
position: relative;
z-index: 8;
}
#logo-wrapper img{
border-radius: 45%;
width: 190px;
height: 190px;
margin: 0 auto;
padding-left: 4px;
}
#video{
position: fixed;
min-width: 100%;
min-height: auto;
}
#menu-roll{
position: absolute;
z-index: 4;
background: var(--nav-wrapper-hover);
width: 150px;
top: 60px;
padding: 15px;
left: 2%;
display: none;
}
#menu-roll #design-line-menu-roll{
height: 4px;
width: 90%;
margin: 0 auto;
background: var(--nav-wrapper);
margin-bottom: 10px;
}
#menu-roll a{
text-decoration: none;
font-size: 1.35em;
text-align: left;
color: var(--nav-wrapper);
font-family: 'Poppins', sans-serif;
}
#menu-roll a:hover{
text-decoration: underline;
}
ul{
list-style-type: none;
}
#h1-menu-tandoor{
color: white;
left: -100%;
top: 12%;
font-size: 1.5em;
z-index: 1;
position: absolute;
opacity: 1.0;
animation: textopacity 3.2s;
}
#keyframes textopacity{
0%, 90%{
opacity: 0.0;
}
100%{
opacity: 1.0;
}
}
#h1-menu-restaurace{
color: white;
left: 110%;
top: 14.5%;
font-size: 1.4em;
z-index: 1;
position: absolute;
opacity: 1.0;
animation: textopacitytwo 3.2s;
}
#keyframes textopacitytwo{
0%, 90%{
opacity: 0.0;
}
100%{
opacity: 1.0;
}
}
#information-section{
background: var(--backg-primary);
z-index: 5;
position: relative;
}
#introduction{
padding-top: 50px;
z-index: 5;
position: relative;
text-align: left;
overflow: hidden;
width: 45%;
padding: 50px;
background: #444;
margin: 10px;
box-shadow: 0 0 10px #333;
}
#introduction h1{
font-size: 3em;
padding-bottom: 10px;
color: #edf3f8;
}
#introduction h3{
font-size: 1.75em;
border-bottom: 2px solid var(--nav-wrapper);
padding-bottom: 15px;
color: var(--blend-in-text);
}
#introduction p{
color: #edf3f8;
font-size: 1.25em;
padding: 15px 0;
letter-spacing: 1px;
}
#divider{
width: 100%;
height: 40px;
background: var(--nav-wrapper);
position: relative;
z-index: 6;
}
#intro-photos{
position: relative;
z-index: 6;
height: 10px;
}
.first-photo{
width: 36.5%;
height: auto;
left: 62%;
position: relative;
top: -400px;
z-index: 4;
box-shadow: 0 0 10px #333;
border-radius: 50%;
align-items: center;
border: 1px solid rgb(255, 218, 104);
background: rgb(255, 218, 104);
}
#services-info{
height: 407px;
}
#services-photo{
top: 50px;
}
#media screen and (max-width: 700px){
.first-photo{
left: 12%;
margin: 0 auto;
top: 40px;
width: 76.5%;
padding-top: 15px;
border-radius: 0;
}
#introduction{
width: 60%;
margin: 0 auto;
}
#divider{
margin-bottom: 10px;
}
#services-info{
height: 800px;
}
#services-photo{
top: 470px;
position: relative;
}
}
<section id="video-wrapper">
<ul id="navbar">
<li id="menu-hover-roll" onmouseover="mouseOver()" onmouseout="mouseOut()">
Menu
<ul id="menu-roll">
<div id="design-line-menu-roll"></div>
<li>Polední menu</li>
<li>Jídelní lístek</li>
<li>Nápoje</li>
</ul>
</li>
</ul>
<video id="video" autoplay muted loop>
<source src="styles/720p.mp4" type="video/mp4">
</video>
<div id="menu-wrapper">
<div id="logo-wrapper">
<div id="h1-menu-tandoor">
<h1>Tandoor</h1>
</div>
<div id="h1-menu-restaurace">
<h1>Restaurace</h1>
</div>
<img src="styles/tndrlogo.jpg">
</div>
</div>
<div id="menu-roll">
<div id="design-line-menu-roll"></div>
<ul>
<li>
Polední menu
</li>
<li>
Menu
</li>
<li>
Nápojový lístek
</li>
</ul>
</div>
</section>

I'm not sure that I understand everything but take a look at this code.
var timeout;
function mouseOver() {
document.getElementById('menu-roll').style.display = 'block';
clearTimeout(timeout);
}
function mouseOut() {
timeout = setTimeout(function() {
document.getElementById('menu-roll').style.display = 'none';
}, 1000);
}
:root {
--backg-primary: #ffeaa7;
--backg-islands: #2d3436;
--nav-wrapper: #4d0404;
--nav-wrapper-hover: #F79F1F;
--menu-roll: rgba(247, 159, 31, 0.95);
}
* {
margin: 0;
padding: 0;
}
body {
font-family: Verdana, Geneva, Tahoma;
scroll-behavior: smooth;
}
#video-wrapper {
height: 100vh;
width: 100%;
}
#navbar {
background-color: var(--nav-wrapper);
position: fixed;
width: 100%;
transition: top 0.3s;
top: 0;
overflow: visible;
z-index: 7;
}
#navbar a {
float: left;
display: block;
color: white;
text-align: center;
padding: 15px;
text-decoration: none;
letter-spacing: 1.5px;
}
#navbar a:hover {
transition: background-color .25s ease, color .25s ease;
background-color: var(--nav-wrapper-hover);
color: var(--nav-wrapper);
}
#logo-wrapper {
background: white;
margin: 0 auto;
border: 3.85px solid var(--nav-wrapper);
box-shadow: 0 0 10px #333;
position: relative;
animation: slideup 3s;
width: 200px;
height: 200px;
border-radius: 45%;
}
#keyframes slideup {
0% {
top: 150px;
}
100% {
top: 0;
}
}
#menu-wrapper {
width: 700px;
height: 103px;
background: var(--nav-wrapper);
margin: 0 auto;
border-radius: 50px;
position: relative;
z-index: 8;
}
#logo-wrapper img {
border-radius: 45%;
width: 190px;
height: 190px;
margin: 0 auto;
padding-left: 4px;
}
#video {
position: fixed;
min-width: 100%;
min-height: auto;
}
#menu-roll {
position: absolute;
z-index: 4;
background: var(--nav-wrapper-hover);
width: 150px;
top: 60px;
padding: 15px;
left: 2%;
display: none;
}
#menu-roll #design-line-menu-roll {
height: 4px;
width: 90%;
margin: 0 auto;
background: var(--nav-wrapper);
margin-bottom: 10px;
}
#menu-roll a {
text-decoration: none;
font-size: 1.35em;
text-align: left;
color: var(--nav-wrapper);
font-family: 'Poppins', sans-serif;
}
#menu-roll a:hover {
text-decoration: underline;
}
ul {
list-style-type: none;
}
#h1-menu-tandoor {
color: white;
left: -100%;
top: 12%;
font-size: 1.5em;
z-index: 1;
position: absolute;
opacity: 1.0;
animation: textopacity 3.2s;
}
#keyframes textopacity {
0%,
90% {
opacity: 0.0;
}
100% {
opacity: 1.0;
}
}
#h1-menu-restaurace {
color: white;
left: 110%;
top: 14.5%;
font-size: 1.4em;
z-index: 1;
position: absolute;
opacity: 1.0;
animation: textopacitytwo 3.2s;
}
#keyframes textopacitytwo {
0%,
90% {
opacity: 0.0;
}
100% {
opacity: 1.0;
}
}
#information-section {
background: var(--backg-primary);
z-index: 5;
position: relative;
}
#introduction {
padding-top: 50px;
z-index: 5;
position: relative;
text-align: left;
overflow: hidden;
width: 45%;
padding: 50px;
background: #444;
margin: 10px;
box-shadow: 0 0 10px #333;
}
#introduction h1 {
font-size: 3em;
padding-bottom: 10px;
color: #edf3f8;
}
#introduction h3 {
font-size: 1.75em;
border-bottom: 2px solid var(--nav-wrapper);
padding-bottom: 15px;
color: var(--blend-in-text);
}
#introduction p {
color: #edf3f8;
font-size: 1.25em;
padding: 15px 0;
letter-spacing: 1px;
}
#divider {
width: 100%;
height: 40px;
background: var(--nav-wrapper);
position: relative;
z-index: 6;
}
#intro-photos {
position: relative;
z-index: 6;
height: 10px;
}
.first-photo {
width: 36.5%;
height: auto;
left: 62%;
position: relative;
top: -400px;
z-index: 4;
box-shadow: 0 0 10px #333;
border-radius: 50%;
align-items: center;
border: 1px solid rgb(255, 218, 104);
background: rgb(255, 218, 104);
}
#services-info {
height: 407px;
}
#services-photo {
top: 50px;
}
#media screen and (max-width: 700px) {
.first-photo {
left: 12%;
margin: 0 auto;
top: 40px;
width: 76.5%;
padding-top: 15px;
border-radius: 0;
}
#introduction {
width: 60%;
margin: 0 auto;
}
#divider {
margin-bottom: 10px;
}
#services-info {
height: 800px;
}
#services-photo {
top: 470px;
position: relative;
}
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="styles/index.css">
<link rel="shortcut icon" href="styles/favicon.ico.png" />
<title>Tandoor</title>
</head>
<body>
<section id="video-wrapper">
<ul id="navbar">
<li id="menu-hover-roll" onmouseover="mouseOver()" onmouseout="mouseOut()">
Menu
<ul id="menu-roll">
<div id="design-line-menu-roll"></div>
<li>Polední menu</li>
<li>Jídelní lístek</li>
<li>Nápoje</li>
</ul>
</li>
</ul>
<video id="video" autoplay muted loop>
<source src="styles/720p.mp4" type="video/mp4">
</video>
<div id="menu-wrapper">
<div id="logo-wrapper">
<div id="h1-menu-tandoor">
<h1>Tandoor</h1>
</div>
<div id="h1-menu-restaurace">
<h1>Restaurace</h1>
</div>
<img src="styles/tndrlogo.jpg">
</div>
</div>
<div id="menu-roll">
<div id="design-line-menu-roll"></div>
<ul>
<li>
Polední menu
</li>
<li>
Menu
</li>
<li>
Nápojový lístek
</li>
</ul>
</div>
</section>
</body>
</html>

How to create an iOS style dragging using HammerJS and CSS?

I'm trying to create an iOS 'style' modal sheet that that will popup and then the users can drag it down and the modal sheet will follow the users touch gesture and then it will disappear OFF the screen using HammerJS.
I've managed to create the modal sheet and I have also implemented the HammerJS to a certain extend.
When the user 'swipes' down the modal sheet, it will disappear but it doesn't follow the swipe/touch gesture before it hides. it just disappears which makes it a bit clunky.
$(document).on('click', '.button', function() {
$('.addreFinder').css('bottom', '0');
$('.sheet-backdrop').addClass('backdrop-in');
});
///custom modal sheet///
$('.c-modal').each(function() {
var mc = new Hammer(this);
mc.get('swipe').set({
direction: Hammer.DIRECTION_ALL
});
mc.on("swipedown", function(ev) {
console.log('dragged');
$('.modal-in').css('bottom', '-1850px');
$('.sheet-backdrop').removeClass('backdrop-in');
});
});
.sheet-modal.modal-in {
position: absolute;
bottom: -1850px;
left: 0;
width: 100%;
padding: 20px;
transition: bottom 300ms cubic-bezier(0.17, 0.04, 0.03, 0.94);
display: block;
transform: translate3d(0, 0, 0);
z-index: 13200;
}
.sheet-modal.modal-in,
.sheet-modal.modal-out {
transition-duration: .3s;
}
.demo-sheet-swipe-to-close,
.demo-sheet-swipe-to-step {
--f7-sheet-bg-color: #fff;
--f7-sheet-border-color: transparent;
border-radius: 15px 15px 0 0;
overflow: hidden;
}
.sheet-modal {
position: absolute;
left: 0;
bottom: 0;
width: 100%;
height: 60%;
display: none;
box-sizing: border-box;
transition-property: transform;
transform: translate3d(0, 100%, 0);
background: var(--f7-sheet-bg-color);
z-index: 12500;
will-change: transform;
}
.swipe-handler {
height: 16px;
position: absolute;
left: 0;
width: 100%;
top: 0;
background: #fff;
cursor: pointer;
z-index: 10;
}
.page-content {
will-change: scroll-position;
overflow: auto;
-webkit-overflow-scrolling: touch;
box-sizing: border-box;
height: 100%;
position: relative;
z-index: 1;
padding-top: calc(var(--f7-page-navbar-offset, 0px) + var(--f7-page-toolbar-top-offset, 0px) + var(--f7-page-subnavbar-offset, 0px) + var(--f7-page-searchbar-offset, 0px) + var(--f7-page-content-extra-padding-top, 0px));
padding-bottom: calc(var(--f7-page-toolbar-bottom-offset, 0px) + var(--f7-safe-area-bottom) + var(--f7-page-content-extra-padding-bottom, 0px));
}
.swipe-handler:after {
content: '';
width: 36px;
height: 6px;
position: absolute;
left: 50%;
top: 50%;
margin-left: -18px;
margin-top: -3px;
border-radius: 3px;
background: #666;
}
.block-title-large {
font-size: 20px;
color: #000;
line-height: 40px;
padding: 10px;
margin-top: 20px;
}
.block {
box-sizing: border-box;
position: relative;
z-index: 1;
color: #000;
padding: 10px;
}
.sheet-backdrop.backdrop-in {
visibility: visible;
opacity: 1;
}
.sheet-backdrop {
z-index: 11000;
}
.actions-backdrop,
.custom-modal-backdrop,
.dialog-backdrop,
.popover-backdrop,
.popup-backdrop,
.preloader-backdrop,
.sheet-backdrop {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, .4);
z-index: 13000;
visibility: hidden;
opacity: 0;
transition-duration: .4s;
}
.bbody {
width: 100%;
box-sizing: border-box;
margin-top: 50px;
}
.wrapper {
text-align: center;
position: relative;
height: 80px;
font-size: 0;
top: 50%;
transform: translateY(-50%);
}
.search {
padding: 0 30px;
font-size: 18px;
width: 80%;
max-width: 400px;
height: 80px;
border: 1px solid #b3b3b3;
border-radius: 20px 0 0 20px;
box-sizing: border-box;
font-size: 13px;
vertical-align: top;
display: inline-block;
}
.submit {
cursor: pointer;
border: none;
background: url('data:image/png;base64,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') no-repeat center center, #1e1e20;
background-size: 35px 35px;
border-radius: 0 20px 20px 0;
padding: 15px 25px;
display: inline-block;
width: 20%;
height: 80px;
box-sizing: border-box;
font-size: 13px;
vertical-align: top;
}
.pac-container {
width: 100%;
}
.pac-item {
cursor: pointer;
padding: 0 4px;
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
line-height: 30px;
vertical-align: middle;
text-align: left;
border-top: 1px solid #e6e6e6;
color: #999;
width: 100%;
}
.pac-icon {
width: 15px;
height: 20px;
margin-right: 7px;
margin-top: 6px;
display: inline-block;
vertical-align: top;
background-image: url(https://maps.gstatic.com/mapfiles/api-3/images/autocomplete-icons.png);
background-size: 34px;
}
.pac-icon-marker {
background-position: -1px -161px;
}
.addressFinderTexts>* {
margin-top: 10px;
}
.addressFinderTexts p {
font-size: 12px;
}
.useMyCureentLOcationBtn {
width: 80%;
height: 25px;
line-height: 25px;
display: inline-block;
background: #ffaf06;
color: #fff;
font-size: 12px;
margin-top: 15px;
overflow: hidden;
}
.addressFinderTexts {
width: 100%;
margin-top: 20px;
min-height: 380px;
height: auto;
text-align: center;
padding: 10px;
box-sizing: border-box;
color: #ccc;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/hammer.js/2.0.8/hammer.js"></script>
<div class="sheet-backdrop"></div>
<div class="c-modal sheet-modal demo-sheet-swipe-to-close modal-in addreFinder" id="addressFinder">
<div class="sheet-modal-inner">
<div class="swipe-handler"></div>
<div class="page-content">
<div class="block">
<div class="bbody">
Drag me down to hide me
</div>
</div>
</div>
</div>
</div>
<button class="button">Click Here To show modal</button>
I hope I have explained the situation properly for someone to be able to help me.

Why isn't the background-size or background-repeat property working on my image slider?

I'm making an image slider in my JS and right now I'm just working on the right arrow button and having it cycle up through images in my img folder when that button is clicked. However when I click the arrow to go to the next image, the new image loses a couple properties I have set on it in the CSS; the background size and repeat properties. The fix I found was just adding them back on in the JS.
rightArrow.addEventListener('click', function() {
num++;
img.style.background = 'url(img/fam-' + num + '.jpeg)';
img.style.backgroundRepeat = 'no-repeat'; // Have to add this property back on even though its already in the CSS
img.style.backgroundSize = 'cover'; // Have to add this property back on even though its already in the CSS
})
I don't want to do this though. Why do these properties stop working when I change the image?? Also I can't post my full code here because its too long and and the fiddle link won't be much help because you can't see the images
https://jsfiddle.net/yat5ncmk/3/
const ham = document.querySelector('.nav-box');
const menu = document.querySelector('.menu');
const menuClose = document.querySelector('#menu-close');
const leftArrow = document.querySelector('#left');
const rightArrow = document.querySelector('#right');
const img = document.querySelector('.image-slider');
let num = 1;
ham.addEventListener('click', function() {
ham.classList.add('ham-open');
menu.style.marginLeft = '50px';
})
menuClose.addEventListener('click', function() {
ham.classList.remove('ham-open');
menu.style.marginLeft = '-700px';
})
leftArrow.addEventListener('click', function() {
})
rightArrow.addEventListener('click', function() {
num++;
img.style.background = 'url(img/fam-' + num + '.jpeg)';
img.style.backgroundRepeat = 'no-repeat';
img.style.backgroundSize = 'cover';
})
// window.sr = ScrollReveal();
// sr.reveal('.logo-wrap', {
// duration: 2000,
// origin: 'left',
// });
// sr.reveal('.w1', {
// duration: 2000,
// origin: 'bottom'
// });
// sr.reveal('.w2', {
// duration: 3000,
// origin: 'bottom'
// });
// sr.reveal('.w3', {
// duration: 4000,
// origin: 'bottom'
// });
// sr.reveal('.b1', {
// duration: 2000,
// origin: 'top',
// distance: '50px'
// });
// sr.reveal('.b2', {
// duration: 1500,
// origin: 'top',
// distance: '75px'
// });
// sr.reveal('.b3', {
// duration: 1000,
// origin: 'top',
// distance: '100px'
// });
// sr.reveal('#left', {
// duration: 1000,
// origin: 'top',
// distance: '50px'
// });
// sr.reveal('#right', {
// duration: 1000,
// origin: 'top',
// distance: '50px'
// });
const ham = document.querySelector('.nav-box');
const menu = document.querySelector('.menu');
const menuClose = document.querySelector('#menu-close');
const leftArrow = document.querySelector('#left');
const rightArrow = document.querySelector('#right');
const img = document.querySelector('.image-slider');
let num = 1;
ham.addEventListener('click', function() {
ham.classList.add('ham-open');
menu.style.marginLeft = '50px';
})
menuClose.addEventListener('click', function() {
ham.classList.remove('ham-open');
menu.style.marginLeft = '-700px';
})
leftArrow.addEventListener('click', function() {
})
rightArrow.addEventListener('click', function() {
num++;
img.style.background = 'url(img/fam-' + num + '.jpeg)';
img.style.backgroundRepeat = 'no-repeat'; // Have to add this property back on even though its already in the CSS
img.style.backgroundSize = 'cover'; // Have to add this property back on even though its already in the CSS
})
// window.sr = ScrollReveal();
// sr.reveal('.logo-wrap', {
// duration: 2000,
// origin: 'left',
// });
// sr.reveal('.w1', {
// duration: 2000,
// origin: 'bottom'
// });
// sr.reveal('.w2', {
// duration: 3000,
// origin: 'bottom'
// });
// sr.reveal('.w3', {
// duration: 4000,
// origin: 'bottom'
// });
// sr.reveal('.b1', {
// duration: 2000,
// origin: 'top',
// distance: '50px'
// });
// sr.reveal('.b2', {
// duration: 1500,
// origin: 'top',
// distance: '75px'
// });
// sr.reveal('.b3', {
// duration: 1000,
// origin: 'top',
// distance: '100px'
// });
// sr.reveal('#left', {
// duration: 1000,
// origin: 'top',
// distance: '50px'
// });
// sr.reveal('#right', {
// duration: 1000,
// origin: 'top',
// distance: '50px'
// });
html, body {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.header {
background: url(img/mex-9.jpg);
width: 100%;
height: 100vh;
background-size: cover;
background-attachment: fixed;
background-position: center;
display: flex;
}
.nav-wrap {
flex-basis: 40%;
}
.nav-wrap i {
color: white;
font-size: 2rem;
position: absolute;
right: -33px;
top: 0px;
transition: all .1s ease;
}
.nav-wrap i:hover {
cursor: pointer;
transform: scale(1.15);
}
.nav-box {
margin-left: 50px;
margin-top: 100px;
max-width: 70px;
cursor: pointer;
position: fixed;
z-index: 10;
}
.b1, .b2, .b3 {
width: 70px;
height: 8.5px;
border-radius: 5px;
background-color: #fff;
margin-bottom: 10px;
transition: all .15s ease;
}
.b1 {
background-color: #56ff47;
}
.b3 {
background-color: #ff4c4c;
}
.ham-open .b1 {
background-color: #56ff47;
transform: translateY(100px);
position: relative;
z-index: 1;
}
.ham-open .b2 {
transform: translateY(81.5px);
width: 110px;
position: relative;
left: 60px;
z-index: 0;
}
.ham-open .b3 {
background-color: #ff4c4c;
transform: translateY(63px);
width: 140px;
position: relative;
left: 160px;
z-index: 2;
}
.menu {
display: flex;
border-left: 8px solid #56ff47;
flex-direction: column;
background-color: #fff;
margin-left: -700px;
width: 292px;
padding-top: 10px;
padding-bottom: 10px;
position: fixed;
border-radius: 5px;
top: 225px;
transition: all .15s;
z-index: 10;
}
.menu a {
text-decoration: none;
color: limegreen;
font-family: 'Kumar One Outline';
font-size: 2.3rem;
text-align: center;
margin-top: 12px;
margin-bottom: 12px;
transition: all .5s ease;
}
a:hover {
color: #007001;
}
.info-wrap {
flex-basis: 60%;
}
.info {
font-family: 'Cedarville Cursive';
color: white;
font-weight: bold;
font-size: 4.5rem;
text-align: center;
margin-top: 60px;
}
.logo-wrap {
display: flex;
justify-content: center;
flex-direction: column;
}
.logo-wrap div {
font-family: 'Staatliches';
color: white;
font-size: 13rem;
font-weight: bold;
letter-spacing: 10px;
margin-bottom: -5rem;
position: relative;
margin-left: auto;
margin-right: auto;
}
/*---------------ABOUT---------------*/
.about-section {
background-color: #17a832;
width: 100%;
position: relative;
}
.about-section h1 {
text-align: center;
font-size: 4.5rem;
margin-top: 0;
margin-bottom: 30px;
padding-top: 15px;
color: white;
font-family: 'Cedarville Cursive';
font-weight: bold;
}
.about-line {
width: 350px;
height: 5px;
background-color: #ddae1a;
border-radius: 4px;
position: absolute;
top: 120px;
left: 0;
right: 0;
bottom: 0;
margin: 0 auto;
}
.about-wrap {
display: flex;
padding-bottom: 150px;
}
.about-info, .image-slider-wrap {
flex-basis: 50%;
}
.about-info p {
color: white;
font-family: 'Josefin Sans';
font-size: 2rem;
margin-left: 100px;
margin-bottom: 0;
margin-top: 0;
}
.image-slider {
width: 650px;
height: 400px;
background: url(img/fam-1.jpeg);
background-position: center;
background-size: cover;
background-repeat: no-repeat;
border-radius: 13px;
margin-left: auto;
margin-right: auto;
position: relative;
}
.image-slider i {
color: white;
font-size: 5rem;
position: absolute;
top: 50%;
margin-top: -40px;
transition: all .1s ease;
cursor: pointer;
}
#left {
transform: rotate(-90deg);
left: -30px;
max-width: 50px;
}
#right {
transform: rotate(90deg);
right: -30px;
}
#left:hover {
transform: rotate(-90deg) scale(1.3);
}
#right:hover {
transform: rotate(90deg) scale(1.3);
}
.burrito, .taco, .guac, .nachos, .hot {
position: absolute;
transform: rotate(-45deg);
bottom: -130px;
right: 200px;
width: 300px;
height: 300px;
z-index: 3;
background-repeat: none;
}
.hot {
right: 345px;
width: 240px;
height: 240px;
z-index: 2;
transform: rotate(0deg);
}
.burrito {
bottom: -140px;
right: 180px;
z-index: 1;
}
.nachos {
transform: rotate(0deg);
right: 380px;
width: 165px;
height: 165px;
bottom: -170px;
}
.taco {
transform: rotate(0deg);
width: 220px;
height: 220px;
bottom: -180px;
right: 460px;
}
.guac {
transform: rotate(0deg);
right: 140px;
bottom: -180px;
width: 250px;
height: 250px;
}
.food-wrap {
position: relative;
right: 20px;
}
/*---------------MENU---------------*/
.menu-section {
background-color: #ddae1a;
display: flex;
width: 100%;
top: -100px;
position: relative;
clip-path: polygon(0% 0%, 100% 3%, 100% 100%, 0% 100%);
/*background-image: linear-gradient(4deg, #edb12f 92%, #17a832 92%, #17a832);*/
}
.menu-section h1 {
font-size: 9.5rem;
position: absolute;
top: 30px;
left: 230px;
margin-top: -30px;
padding-top: 15px;
color: white;
font-family: 'Cedarville Cursive';
font-weight: bold;
}
.menu-line {
width: 450px;
height: 5px;
background-color: #17a832;
border-radius: 4px;
position: absolute;
top: 220px;
left: 225px;
}
.column-left, .column-right, .column-middle {
flex-basis: 33.33%;
margin-top: 230px;
padding-bottom: 120px;
}
.column-left {
display: flex;
justify-content: flex-end;
}
.column-left #combo-platter:after {
display: block;
content: "beans and rice included";
color: white;
font-size: 1.5rem;
font-family: 'Josefin Sans';
margin-top: -25px;
}
.column-left h2:not(#combo-platter):after, .column-middle h2:after, .column-right h2:after {
content: "";
display: block;
width: 100%;
height: 2px;
background-color: white;
border-radius: 3px;
margin-top: -25px;
}
.column-middle {
display: flex;
justify-content: center;
}
.column-right {
display: flex;
justify-content: flex-start;
}
.column {
min-width: 420px;
display: flex;
flex-direction: column;
position: relative;
overflow: hidden;
}
.column h2 {
display: inline-block;
align-self: center;
font-family: 'Cedarville Cursive';
color: #17a832;
font-size: 3rem;
}
.row {
font-family: 'Josefin Sans';
font-size: 1.5rem;
}
.row div {
display: flex;
justify-content: space-between;
}
.row div:after {
display: inline-block;
position: absolute;
content: "";
width: 100%;
margin-top: 33px;
border-top: 4px dotted black;
}
.row div p {
background: #ddae1a;
overflow: hidden;
position: relative;
z-index: 1;
padding: 0 6px;
}
.menu-h2 {
text-align: center;
}
.design-left, .design-right {
position: absolute;
}
.design-right {
right: 0;
transform: rotate(180deg);
}
.arrow-right {
width: 0;
height: 0;
border-top: 30px solid transparent;
border-bottom: 30px solid transparent;
border-left: 60px solid green;
position: relative;
top: -10px;
}
.arrow-left {
width: 0;
height: 0;
border-top: 30px solid transparent;
border-bottom: 30px solid transparent;
border-right:60px solid limegreen;
position: relative;
top: 20px;
}
.arrow-top {
width: 0;
height: 0;
border-top: 30px solid transparent;
border-bottom: 30px solid transparent;
border-left: 60px solid #20a04b;
position: relative;
top: -100px;
left: 60px;
}
.top-middle {
position: relative;
top: -110px;
}
.bottom-middle .arrow-left {
top: -40px;
}
.bottom-middle .move {
top: -70px;
}
.bottom {
position: relative;
top: -48px;
}
.bottom .arrow-left {
top: -40px;
}
/*---------------HOURS---------------*/
.hours-section {
background-color: #17a832;
margin-top: -155px;
clip-path: polygon(0% 5%, 4.8% 0%, 95% 0%, 100% 4.8%, 100% 100%, 0% 100%);
position: relative;
}
.hours-section h1 {
text-align: center;
font-size: 5rem;
margin-top: 0;
margin-bottom: 30px;
padding-top: 15px;
color: white;
font-family: 'Cedarville Cursive';
font-weight: bold;
}
.hours-line-left {
width: 750px;
height: 10px;
border-radius: 4px;
background-color: #ff4c4c;
position: absolute;
top: 10%;
left: 50px;
}
.hours-line-right {
width: 750px;
height: 10px;
border-radius: 4px;
background-color: #56ff47;
position: absolute;
top: 10%;
right: 50px;
}
.hours-wrap {
display: flex;
justify-content: center;
padding-bottom: 100px;
}
.hours {
display: flex;
border: 7px solid green;
padding: 25px;
}
.hours div div {
background-color: white;
color: black;
margin-bottom: 20px;
padding: 8px;
font-size: 3rem;
font-family: 'Josefin Sans';
border-right: 10px solid #56ff47;
}
.hours div div:last-child {
margin-bottom: 0;
}
.hours p {
margin: 0;
text-align: center;
}
.hours-open div {
margin-left: 30px;
}
.hours .hours-open p {
padding: 0 5px;
}
.design-wrap-left-side {
position: absolute;
left: 0;
top: 29.8%;
}
.hex-left, .hex-right {
-webkit-clip-path: polygon(47% 5%, 87% 24%, 87% 76%, 47% 95%, 10% 76%, 10% 24%);
width: 165px;
height: 165px;
background-color: limegreen;
top: 152px;
left: -16.5px;
position: absolute;
}
.hex-right {
top: 152px;
right: -16.5px;
}
.hex-inner {
-webkit-clip-path: polygon(47% 5%, 87% 24%, 87% 76%, 47% 95%, 10% 76%, 10% 24%);
width: 135px;
height: 135px;
background-color: #17a832;
position: absolute;
left: 0;
right: 0;
bottom: 0;
top: 0;
margin: auto;
}
.hex-arrow-left, .hex-arrow-right {
width: 0;
height: 0;
border-top: 35px solid transparent;
border-bottom: 35px solid transparent;
border-left: 70px solid limegreen;
position: absolute;
top: 200px;
right: -150px;
}
.design-wrap-right-side {
transform: rotate(180deg);
position: absolute;
right: 0;
bottom: 19.4%;
}
.hours-wrap .design-wrap-left {
transform: rotate(180deg);
position: relative;
top: -80px;
}
.hours-wrap .design-wrap-right {
position: relative;
top: 80px;
}
.design-wrap-left .arrow-top,
.design-wrap-right .arrow-top,
.design-wrap-left-side .arrow-top,
.design-wrap-right-side .arrow-top {
width: 0;
height: 0;
border-top: 30px solid transparent;
border-bottom: 30px solid transparent;
border-left: 60px solid limegreen;
position: relative;
top: -100px;
left: 60px;
}
.change-color {
width: 0;
height: 0;
border-top: 30px solid transparent;
border-bottom: 30px solid transparent;
border-left: 60px solid #6acc66;
position: absolute;
top: -10px;
}
/*---------------FOOTER---------------*/
.contact-section-background {
background-color: #666;
height: 300px;
clip-path: polygon(0% 0%, 10% 30%, 90% 30%, 100% 0%, 100% 100%, 0% 100%);
margin-top: -100px;
}
.contact-section {
display: flex;
background-color: #595959;
margin-top: -225px;
position: relative;
padding-bottom: 18px;
z-index: 1;
}
.contact, .location {
flex-basis: 50%;
display: flex;
flex-direction: column;
align-items: center;
}
.contact h1, .location h1 {
margin: 0;
font-family: 'Cedarville Cursive';
color: white;
font-size: 7rem;
}
.hex {
-webkit-clip-path: polygon(25% 60%, 75% 60%, 100% 100%, 0% 100%);
background-color: #17a832;
transform: rotate(180deg);
width: 300px;
height: 150px;
margin: 0 auto;
position: absolute;
top: 0;
right: 0;
left: 0;
bottom: 0;
z-index: 2;
}
.rhombus {
-webkit-clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
background-color: #17a832;
width: 80px;
height: 80px;
position: absolute;
margin: 0 auto;
top: 60px;
right: 0;
left: 0;
bottom: 0;
z-index: 2;
}
.contact p {
font-family: 'Josefin Sans';
font-size: 2rem;
margin-top: 0;
margin-bottom: 10px;
color: white;
}
.textarea {
position: relative;
min-width: 500px;
}
.contact textarea {
resize: none;
width: 100%;
color: #595959;
margin: 10px;
min-height: 150px;
font-family: 'Josefin Sans';
font-size: 1.5rem;
padding: 5px;
outline: none;
border: none;
background: #474646;
border-radius: 4px;
}
.contact button {
font-size: 1.5rem;
font-family: 'Josefin Sans';
background: darkgrey;
color: #595959;
padding: 4px;
padding-right: 6px;
padding-left: 6px;
border: none;
border-radius: 4px;
cursor: pointer;
position: absolute;
bottom: 10px;
right: -20px;
transition: all .4s ease;
}
.contact button:hover {
color: #ddae1a;
}
.contact-line {
margin-top: 170px;
margin-bottom: 30px;
width: 5px;
border-radius: 3px;
height: 350px;
background: #ddae1a;
position: relative;
}
.links {
display: flex;
position: relative;
max-width: 400px;
top: -5px;
left: 7px;
}
.links i {
font-size: 2.5rem;
margin-right: 15px;
}
.links p {
font-size: 1.5rem;
margin-right: 30px;
margin-top: 8px;
}
#facebook {
color: #3b64ed;
cursor: pointer;
}
#twitter {
color: #5effeb;
cursor: pointer;
}
#yelp {
color: red;
cursor: pointer;
}
.contact-design-wrap-left {
position: absolute;
left: 0;
top: 40px;
max-height: 500px;
}
.contact-design-wrap-right {
position: absolute;
bottom: 40px;
right: 0;
transform: rotate(180deg);
}
.contact-design-wrap-left .bottom {
height: 0;
}
#align {
position: absolute;
left: 70px;
top: -15px;
}
#align2 {
position: absolute;
left: 68px;
top: -5px;
}
.grey {
border-left: 60px solid #666;
}
.light-grey {
border-right: 60px solid #848484;
}
.same {
border-left: 60px solid #848484;
}
.lighter {
border-right: 60px solid #a8a3a3;
}
.map {
position: relative;
top: 50px;
}
.map i {
position: absolute;
color: #ddae1a;
font-size: 4rem;
left: 50%;
margin-left: -24px;
}
.location .map .street-1 {
width: 300px;
position: relative;
top: 80px;
height: 15px;
transform: rotate(90deg);
background-color: #848484;
border-radius: 5px;
}
.location .map .street-2 {
width: 300px;
height: 15px;
position: relative;
top: 65px;
left: 300px;
transform: rotate(90deg);
background-color: #848484;
border-radius: 5px;
}
.location .map .street-3 {
margin-top: 40px;
width: 600px;
position: relative;
top: 30px;
height: 18px;
background-color: #848484;
border-radius: 8px;
}
.street-info {
color: white;
position: absolute;
font-family: 'Josefin Sans';
font-size: 1.2rem;
left: 20px;
padding-top: 3px;
}
.address {
position: absolute;
left: 50%;
top: 75px;
margin-left: -68.5px;
color: #ddae1a;
text-decoration: none;
font-family: 'Josefin Sans';
font-size: 1.2rem;
text-align: center;
}
.address:hover {
color: #ddae1a;
text-decoration: underline;
}
.copyright {
position: absolute;
bottom: 0;
left: 50%;
font-family: 'Josefin Sans';
color: #a8a3a3;
font-size: 1.8rem;
padding-bottom: 5px;
margin: 0 0 0 -253.89px;
}

when you reset the background-image via background, you reset also every other properties.
first thing to do is to reset only background-image not background which is the shorthand for most of the bg properties.
then, you might not need to reset background-size
rightArrow.addEventListener('click', function() {
num++;
img.style.backgroundImage = 'url(img/fam-' + num + '.jpeg)';
})
fiddle uses lorempixel image for demo https://jsfiddle.net/rnxwsf2q/

The background property contains ALL of the background-x subproperties in it.
Just set background-image instead.

Issues with the animation

search increase and decrease in width just when the .search_icon is clicked,because in actual moment its changing size when im clicking .search class.And can someone explaing why these code doesnt work with actual jquery library version,thanks.
https://codepen.io/anon/pen/ENqppw
<div class="search">
<input type="text" class="inp"><span class="search_icon"></span></input>
</div>
$background-color: #2A2E37;
$search-bg-color: #242628;
$icon-color: #00FEDE;
$transition: all 0.5s ease;
.inp{
width: 240px;
height: 60px;
box-shadow: none;
border: none;
background: transparent;
color: #fff;
padding: 20px 0px 20px 45px;
font-size: 40px;
&:focus {
outline: none;
}
}
.search {
width:100px;
height:100px;
background: #3a3a3a;
transition: all 0.7s ease;
margin:50px;
position:absolute;
&.open {
width: 90%;
}
}
.search_icon {
width: 34px;
height: 34px;
border-radius: 40px;
border: 3px solid $icon-color;
display: block;
position: relative;
margin-top:-77px;
margin-left:20px;
transition: $transition;
&:before {
content: '';
width: 3px;
height: 15px;
position: absolute;
right: -2px;
top: 30px;
display: block;
background-color: $icon-color;
transform: rotate(-45deg);
transition: $transition;
}
&:after {
content: '';
width: 3px;
height: 15px;
position: absolute;
right: -12px;
top: 40px;
display: block;
background-color: $icon-color;
transform: rotate(-45deg);
transition: $transition;
}
.open & {
width: 50px;
height: 50px;
border-radius: 60px;
margin-left:95%;
&:before {
transform: rotate(45deg);
right: 23px;
top: 12px;
height: 29px;
}
&:after {
transform: rotate(-45deg);
right: 23px;
top: 12px;
height: 29px;
}
}
}
$(function() {
$('.search').on('click', function() {
$(this).toggleClass('open');
$(this).toggleClass('clicked');
});
});

You can use this instead:
$(function() {
$('.search').on('click', function() { // Expand search on click on it
$(this).addClass('open clicked');
});
$('.search_icon').on('click', function(e) { // Collapse search on click on search icon
e.stopPropagation();
$(this).closest('.search').removeClass('open clicked');
});
});