How to make this effect (parallax on scrolling)? - javascript

example https://toccata.com.ua/
How to make this effect (parallax on scrolling)?
#bg { background-size: cover;
background-attachment: scroll;
background-position: top center;
background-image: url(http://toccata.com.ua/uploads/main-bg.jpg);
height: 100vh; width: 100vw; top: 0;
position: fixed; z-index: -2;
/* элемент на заднем плане под body */}
section { background: #fff; }
.container { padding: 0 1rem 0 1rem; }
.image { background: transparent; }
/* в .image больше нет картинки, но сам блок нужен как
распорка, занимающая место. */
.image .container { padding: 30vh 1rem 0 1rem;
text-shadow: 0 0 3px #000, /* тут просто усилил тень */
0 0 3px #000,
0 0 3px #000,
0 0 3px #000; }
/* html { scroll-snap-type: y mandatory; } */
body { margin: 0; padding: 0;
width: 100%; min-height: 100vh;
overflow-x: hidden; color: #333333;
background-color: transparent;
line-height: 1.2; font-weight: normal;
font-style: normal;
/* <body> должен быть прозрачным */ }
h1 { padding: 0; margin: 0;
background: #fff; color: #000;
position: sticky; top: 0;
/* Заголовки сделал прилипающими */ }
.image p { color: #fff; }
section { height: 100vh;
/* Высоту секции поставил по высоте окна, можно поменять */
/* scroll-snap-align: start;
Это принудительно останавливает скрол на нужных местах */}
<section class="image">
<h1>title1</h1>
<div class="container">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Doloremque in provident enim placeat tenetur repudiandae illum consequatur quaerat adipisci autem! Recusandae amet inventore aut modi, itaque eaque incidunt totam nemo.</p>
</div>
</section>
<div id="bg"></div>
<section class="content">
<h1>title2</h1>
<div class="container">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Doloremque in provident enim placeat tenetur repudiandae illum consequatur quaerat adipisci autem! Recusandae amet inventore aut modi, itaque eaque incidunt totam nemo.</p>
</div>
</section>
<section class="content">
<h1>title3</h1>
<div class="container">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Doloremque in provident enim placeat tenetur repudiandae illum consequatur quaerat adipisci autem! Recusandae amet inventore aut modi, itaque eaque incidunt totam nemo.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Doloremque in provident enim placeat tenetur repudiandae illum consequatur quaerat adipisci autem! Recusandae amet inventore aut modi, itaque eaque incidunt totam nemo.</p>
</div>
</section>


You can use the scroll eventlistener in javascript to detect a scroll in the DOM
addEventListener("scroll", () => {
document.querySelector("your css selector").style.setProperty("--scroll", pageYOffset / 10 + "px")
})
Now you can use variable var(--scrol) as a top property to make this effect work

Related

header menu to sidebar toggle not working

I'm tryng to make a responsive header menu . The main idea is that an sidebar will substitute the navigation bar links with the width of the screen and an icon with an onclick function to toggle that sidebar will appear at the header. I made de HTML and CSS, but can't make the JS function to add a class to the navigation menu (to show it) work. BTW i'm a begginer developer, started a month ago and still struggling a lot (the code also has a lot of placeholders and temporary CSS properties
HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Portfolio</title>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Poppins:wght#300;400;700&display=swap" rel="stylesheet">
<link rel="stylesheet" href="style.css">
<script src="script.js" defer></script>
</head>
<body>
<header id="header">
<div id="container">
<nav id="nav-bar">
Placeholder.
<ul id="nav-menu">
<div id="nav"><li><a id="link" href="#about-me">01. Sobre mim</a></li></div>
<div id="nav"><li><a id="link" href="#experience">02. Experiência</a></li></div>
<div id="nav"><li><a id="link" href="#projects">03. Projetos</a></li></div>
<div id="nav"><li><a id="link" href="#contact-me">04. Contato</a></li></div>
<div id="nav"><button id="resume-btn">Currículo</button></li></div>
</ul>
<div class="menu-icon">
<h3 onclick="handleMenuToggle()">&#9776</h3>
</div>
</nav>
</div>
</header>
<main>
<section id="introduction">
<div>
<h2>
Hi, my name is
</h2>
</div>
<div>
<h2>
Placeholder
</h2>
</div>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Odit neque vitae sint illo, excepturi totam quia atque deserunt aut quasi modi molestias dignissimos quibusdam quidem nostrum eligendi, saepe voluptas. Omnis?
</p>
</section>
<section id="about-me">
<h2>01. About me</h2>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Odit neque vitae sint illo, excepturi totam quia atque deserunt aut quasi modi molestias dignissimos quibusdam quidem nostrum eligendi, saepe voluptas. Omnis?
</p>
</section>
<section id="experience">
<h2>02. Experience</h2>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Odit neque vitae sint illo, excepturi totam quia atque deserunt aut quasi modi molestias dignissimos quibusdam quidem nostrum eligendi, saepe voluptas. Omnis?
</p>
</section>
<section id="projects">
<h2>03. Projects</h2>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Odit neque vitae sint illo, excepturi totam quia atque deserunt aut quasi modi molestias dignissimos quibusdam quidem nostrum eligendi, saepe voluptas. Omnis?
</p>
</section>
<section id="contact-me">
<h2>04. Contact me</h2>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Odit neque vitae sint illo, excepturi totam quia atque deserunt aut quasi modi molestias dignissimos quibusdam quidem nostrum eligendi, saepe voluptas. Omnis?
</p>
</section>
</main>
</body>
</html>
CSS:
* {
margin: 0;
padding: 0;
font-family: 'Poppins', sans-serif;
box-sizing: border-box;
}
html {
scroll-behavior: smooth;
}
body {
position: relative;
background-color: rgba(10,25,48,255);
height: 1000px;
}
header {
position: fixed;
top: 0;
width: 100%;
background-color: blueviolet;
}
#container {
width: 1800px;
margin: auto;
}
#nav-bar {
width: 95%;
margin: auto;
min-height: 70px;
display: flex;
justify-content: space-between;
align-items: center;
}
#nav-menu {
display: flex;
justify-content: space-between;
align-items: center;
gap: 60px;
}
#media(max-width:1800px) {
#container {
width: 100%;
}
}
#nav {
margin: auto 30px;
}
.menu-icon {
display: none;
}
#media only screen and (max-width: 900px) {
#nav-menu {
position: fixed;
top: 0;
right: -100%;
display: block;
background-color: brown;
margin: 0;
height: 100%;
box-shadow: -1px -1px 8px #3e3e3e99;
width: 250px;
transition: all 0.8s ease;
}
.show-nav {
right: 0;
}
#nav {
text-align: center;
margin: 20px auto;
}
.menu-icon {
display: block;
margin: auto 0;
padding: 0 20px;
font-size: 30px;
cursor: pointer;
}
}
#link {
margin-right: 15px;
color: white;
text-decoration: none;
transition: color 0.15s;
}
#link:hover {
color: gray;
}
#resume-btn {
font-size: 15px;
color: white;
background-color: rgba(10,25,48,255);
border-color: white;
border-style: solid;
border-radius: 6px;
padding: 10px;
cursor: pointer;
transition: color 0.15s, border-color 0.15s;
}
#resume-btn:hover {
color: gray;
border-color: gray;
}
li {
list-style: none;
}
h2 {
color: white;
}
p {
color: aqua;
}
Javascript:
function handleMenuToggle() {
const navContainer = document.getElementById('nav-menu')
navContainer.classList.toggle('show-nav')
}
Can't make Js onclick function work to toggle sidebar.

You're so close to getting this to work. You just need to change one line in your CSS to make it work (see the working demo below):
/* add #nav-menu to this declaration */
#nav-menu.show-nav {
right: 0;
}
The issue is CSS specificity. Because you've used an ID to declare the right property at -100%, even when you add the show-nav class to the element, the class alone in the declaration doesn't have enough specificity to override the right property value.
Learn more about css specificity here.
function handleMenuToggle() {
const navContainer = document.getElementById('nav-menu')
navContainer.classList.toggle('show-nav')
}
* {
margin: 0;
padding: 0;
font-family: 'Poppins', sans-serif;
box-sizing: border-box;
}
html {
scroll-behavior: smooth;
}
body {
position: relative;
background-color: rgba(10,25,48,255);
height: 1000px;
}
header {
position: fixed;
top: 0;
width: 100%;
background-color: blueviolet;
}
#container {
width: 1800px;
margin: auto;
}
#nav-bar {
width: 95%;
margin: auto;
min-height: 70px;
display: flex;
justify-content: space-between;
align-items: center;
}
#nav-menu {
display: flex;
justify-content: space-between;
align-items: center;
gap: 60px;
}
#media(max-width:1800px) {
#container {
width: 100%;
}
}
#nav {
margin: auto 30px;
}
.menu-icon {
display: none;
}
#media only screen and (max-width: 900px) {
#nav-menu {
position: fixed;
top: 0;
right: -100%;
display: block;
background-color: brown;
margin: 0;
height: 100%;
box-shadow: -1px -1px 8px #3e3e3e99;
width: 250px;
transition: all 0.8s ease;
}
#nav-menu.show-nav {
right: 0;
}
#nav {
text-align: center;
margin: 20px auto;
}
.menu-icon {
display: block;
margin: auto 0;
padding: 0 20px;
font-size: 30px;
cursor: pointer;
}
}
#link {
margin-right: 15px;
color: white;
text-decoration: none;
transition: color 0.15s;
}
#link:hover {
color: gray;
}
#resume-btn {
font-size: 15px;
color: white;
background-color: rgba(10,25,48,255);
border-color: white;
border-style: solid;
border-radius: 6px;
padding: 10px;
cursor: pointer;
transition: color 0.15s, border-color 0.15s;
}
#resume-btn:hover {
color: gray;
border-color: gray;
}
li {
list-style: none;
}
h2 {
color: white;
}
p {
color: aqua;
}
<header id="header">
<div id="container">
<nav id="nav-bar">
Placeholder.
<ul id="nav-menu">
<div id="nav"><li><a id="link" href="#about-me">01. Sobre mim</a></li></div>
<div id="nav"><li><a id="link" href="#experience">02. Experiência</a></li></div>
<div id="nav"><li><a id="link" href="#projects">03. Projetos</a></li></div>
<div id="nav"><li><a id="link" href="#contact-me">04. Contato</a></li></div>
<div id="nav"><button id="resume-btn">Currículo</button></li></div>
</ul>
<div class="menu-icon">
<h3 onclick="handleMenuToggle()">&#9776</h3>
</div>
</nav>
</div>
</header>
<main>
<section id="introduction">
<div>
<h2>
Hi, my name is
</h2>
</div>
<div>
<h2>
Placeholder
</h2>
</div>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Odit neque vitae sint illo, excepturi totam quia atque deserunt aut quasi modi molestias dignissimos quibusdam quidem nostrum eligendi, saepe voluptas. Omnis?
</p>
</section>
<section id="about-me">
<h2>01. About me</h2>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Odit neque vitae sint illo, excepturi totam quia atque deserunt aut quasi modi molestias dignissimos quibusdam quidem nostrum eligendi, saepe voluptas. Omnis?
</p>
</section>
<section id="experience">
<h2>02. Experience</h2>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Odit neque vitae sint illo, excepturi totam quia atque deserunt aut quasi modi molestias dignissimos quibusdam quidem nostrum eligendi, saepe voluptas. Omnis?
</p>
</section>
<section id="projects">
<h2>03. Projects</h2>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Odit neque vitae sint illo, excepturi totam quia atque deserunt aut quasi modi molestias dignissimos quibusdam quidem nostrum eligendi, saepe voluptas. Omnis?
</p>
</section>
<section id="contact-me">
<h2>04. Contact me</h2>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Odit neque vitae sint illo, excepturi totam quia atque deserunt aut quasi modi molestias dignissimos quibusdam quidem nostrum eligendi, saepe voluptas. Omnis?
</p>
</section>
</main>

Effect on horizontal scroll

I created this horizontal scroll using only CSS (working only on Chrome because of the scroll style).
* {
-webkit-box-sizing: border-box;
box-sizing: border-box;
font-family: 'Nunito', sans-serif;
}
::-webkit-scrollbar {
height: 0;
width: 0;
}
::-webkit-scrollbar-button {
height: 0;
width: 0;
}
h2 {
margin: 0;
}
p {
font-size: 1.25em;
letter-spacing: 0.56px;
line-height: 32px;
}
.container {
background-color: #000;
bottom: 0;
height: 100vh;
left: 0;
margin: auto;
position: absolute;
right: 0;
top: 0;
width: 100vw;
}
.horScroll {
background-color: #abc;
height: 100vw;
overflow-x: hidden;
overflow-y: auto;
position: absolute;
-ms-scroll-snap-type: mandatory;
scroll-snap-type: mandatory;
-ms-scroll-snap-points-y: repeat(100vw);
scroll-snap-points-y: repeat(100vw);
-ms-scroll-snap-type: y mandatory;
scroll-snap-type: y mandatory;
-webkit-transform: translateX(-100%) rotate(-90deg);
-ms-transform: translateX(-100%) rotate(-90deg);
transform: translateX(-100%) rotate(-90deg);
-webkit-transform-origin: top right;
-ms-transform-origin: top right;
transform-origin: top right;
width: 100vh;
}
.item {
background-color: #e4e4e4;
height: 100vw;
position: -webkit-sticky;
position: sticky;
scroll-snap-align: start;
top: 0;
width: 100vh;
}
.horScroll > div:nth-of-type(2n) {
background-color: #333;
color: #fff;
}
.item-inner {
height: 100vh;
max-height: 100vh;
overflow: scroll;
padding: 40px;
-webkit-transform: rotate(90deg) translateX(-100vh);
-ms-transform: rotate(90deg) translateX(-100vh);
transform: rotate(90deg) translateX(-100vh);
-webkit-transform-origin: bottom left;
-ms-transform-origin: bottom left;
transform-origin: bottom left;
width: 100vw;
}
.item-content {
height: 100%;
}
<div class="container">
<div class="horScroll">
<div class="item">
<div class="item-inner">
<div class="item-content">
<h2>Item 1</h2>
<div>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ad tempora ducimus tenetur facilis magnam assumenda atque? Minus molestiae hic consectetur voluptatibus maxime, a eum laudantium explicabo similique, iure dignissimos quae.</p>
</div>
</div>
</div>
</div>
<div class="item">
<div class="item-inner">
<div class="item-content">
<h2>Item 2</h2>
<div>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ad tempora ducimus tenetur facilis magnam assumenda atque? Minus molestiae hic consectetur voluptatibus maxime, a eum laudantium explicabo similique, iure dignissimos quae.</p>
</div>
</div>
</div>
</div>
<div class="item">
<div class="item-inner">
<div class="item-content">
<h2>Item 3</h2>
<div>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ad tempora ducimus tenetur facilis magnam assumenda atque? Minus molestiae hic consectetur voluptatibus maxime, a eum laudantium explicabo similique, iure dignissimos quae.</p>
</div>
</div>
</div>
</div>
<div class="item">
<div class="item-inner">
<div class="item-content">
<h2>Item 4</h2>
<div>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ad tempora ducimus tenetur facilis magnam assumenda atque? Minus molestiae hic consectetur voluptatibus maxime, a eum laudantium explicabo similique, iure dignissimos quae.</p>
</div>
</div>
</div>
</div>
<div class="item">
<div class="item-inner">
<div class="item-content">
<h2>Item 5</h2>
<div>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ad tempora ducimus tenetur facilis magnam assumenda atque? Minus molestiae hic consectetur voluptatibus maxime, a eum laudantium explicabo similique, iure dignissimos quae.</p>
</div>
</div>
</div>
</div>
<div class="item">
<div class="item-inner">
<div class="item-content">
<h2>Item 6</h2>
<div>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ad tempora ducimus tenetur facilis magnam assumenda atque? Minus molestiae hic consectetur voluptatibus maxime, a eum laudantium explicabo similique, iure dignissimos quae.</p>
</div>
</div>
</div>
</div>
</div>
</div>
It works as expected. Now I'm trying to create an extra effect in JavaScript.
I want that when the next item is coming, there will be a change in opacity, scale or similar effect on the previous item showing that it is "fading out". It is a transition effect between two items. In this case I'm trying opacity.
In the reverse direction the opposite will happen: a "fade in" on the item that had disappeared.
Inside the forEach() loop I could identify what item is being scrolled at the moment (as you can check in the console.log), but now I'm not getting the opacity calculation right. I have a few factors to consider like the current item and current scroll position.
var widthBase = window.innerWidth;
window.addEventListener("resize", function() {
widthBase = window.innerWidth;
})
var items = document.querySelectorAll(".item");
document.querySelector(".horScroll").addEventListener("scroll", function(e) {
items.forEach(function(item, i) {
var currentScroll = e.target.scrollTop;
if (currentScroll >= widthBase * (i) && currentScroll < widthBase * (i + 1)) {
console.log("item index: " + i + ", scroll position: " + currentScroll);
// item.querySelector(".item-content").style.opacity = ? // opacity calculation value
}
})
})
I've tried item.querySelector(".item-content").style.opacity = (widthBase * (i + 1))/currentScroll - 1, but it works partially. Some other variations also failed. I'm missing something.
In addition, I think that a loop through all the items in each scroll is not performative, but I couldn't think of anything different.

I fixed the calculation. First, I had to consider this:
Top position of item is equal to 1.
Bottom position of item is equal to 0.001.
So, current scroll will be X, the value I need for each scroll.
1 and 0.001 are the opacity, transform: scale() or another property with value between 0 and 1.
It must be 0.001 instead of 0, otherwise the calculation will fail. "Top position" also must not be 0, so I will always add 1 to it.
.
Now, using scale instead of opacity, the result would be:
"scale(" + (1 - (currentScroll-((widthBase * i) + 1))*(1-0.55)/(((widthBase * (i + 1)) + 1)-((widthBase * i) + 1))) + ")";
Working snippet:
var widthBase = window.innerWidth;
window.addEventListener("resize", function() {
widthBase = window.innerWidth;
})
var items = document.querySelectorAll(".item");
document.querySelector(".horScroll").addEventListener("scroll", function(e) {
items.forEach(function(item, i) {
var currentScroll = e.target.scrollTop;
if (currentScroll > widthBase * (i) && currentScroll < widthBase * (i + 1)) {
item.querySelector(".item-content").style.transform = "scale(" + (1 - (currentScroll-((widthBase * i) + 1))*(1-0.55)/(((widthBase * (i+1)) + 1)-((widthBase * i) + 1))) + ")";
}
})
})
* {
-webkit-box-sizing: border-box;
box-sizing: border-box;
font-family: 'Nunito', sans-serif;
}
::-webkit-scrollbar {
height: 0;
width: 0;
}
::-webkit-scrollbar-button {
height: 0;
width: 0;
}
h2 {
margin: 0;
}
p {
font-size: 1.25em;
letter-spacing: 0.56px;
line-height: 32px;
}
.container {
background-color: #000;
bottom: 0;
height: 100vh;
left: 0;
margin: auto;
position: absolute;
right: 0;
top: 0;
width: 100vw;
}
.horScroll {
background-color: #abc;
height: 100vw;
overflow-x: hidden;
overflow-y: auto;
position: absolute;
-ms-scroll-snap-type: mandatory;
scroll-snap-type: mandatory;
-ms-scroll-snap-points-y: repeat(100vw);
scroll-snap-points-y: repeat(100vw);
-ms-scroll-snap-type: y mandatory;
scroll-snap-type: y mandatory;
-webkit-transform: translateX(-100%) rotate(-90deg);
-ms-transform: translateX(-100%) rotate(-90deg);
transform: translateX(-100%) rotate(-90deg);
-webkit-transform-origin: top right;
-ms-transform-origin: top right;
transform-origin: top right;
width: 100vh;
}
.item {
background-color: #e4e4e4;
height: 100vw;
position: -webkit-sticky;
position: sticky;
scroll-snap-align: start;
top: 0;
width: 100vh;
}
.horScroll > div:nth-of-type(2n) {
background-color: #333;
color: #fff;
}
.item-inner {
height: 100vh;
max-height: 100vh;
overflow: scroll;
padding: 40px;
-webkit-transform: rotate(90deg) translateX(-100vh);
-ms-transform: rotate(90deg) translateX(-100vh);
transform: rotate(90deg) translateX(-100vh);
-webkit-transform-origin: bottom left;
-ms-transform-origin: bottom left;
transform-origin: bottom left;
width: 100vw;
}
.item-content {
height: 100%;
}
<div class="container">
<div class="horScroll">
<div class="item">
<div class="item-inner">
<div class="item-content">
<h2>Item 1</h2>
<div>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ad tempora ducimus tenetur facilis magnam assumenda atque? Minus molestiae hic consectetur voluptatibus maxime, a eum laudantium explicabo similique, iure dignissimos quae.</p>
</div>
</div>
</div>
</div>
<div class="item">
<div class="item-inner">
<div class="item-content">
<h2>Item 2</h2>
<div>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ad tempora ducimus tenetur facilis magnam assumenda atque? Minus molestiae hic consectetur voluptatibus maxime, a eum laudantium explicabo similique, iure dignissimos quae.</p>
</div>
</div>
</div>
</div>
<div class="item">
<div class="item-inner">
<div class="item-content">
<h2>Item 3</h2>
<div>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ad tempora ducimus tenetur facilis magnam assumenda atque? Minus molestiae hic consectetur voluptatibus maxime, a eum laudantium explicabo similique, iure dignissimos quae.</p>
</div>
</div>
</div>
</div>
<div class="item">
<div class="item-inner">
<div class="item-content">
<h2>Item 4</h2>
<div>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ad tempora ducimus tenetur facilis magnam assumenda atque? Minus molestiae hic consectetur voluptatibus maxime, a eum laudantium explicabo similique, iure dignissimos quae.</p>
</div>
</div>
</div>
</div>
<div class="item">
<div class="item-inner">
<div class="item-content">
<h2>Item 5</h2>
<div>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ad tempora ducimus tenetur facilis magnam assumenda atque? Minus molestiae hic consectetur voluptatibus maxime, a eum laudantium explicabo similique, iure dignissimos quae.</p>
</div>
</div>
</div>
</div>
<div class="item">
<div class="item-inner">
<div class="item-content">
<h2>Item 6</h2>
<div>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ad tempora ducimus tenetur facilis magnam assumenda atque? Minus molestiae hic consectetur voluptatibus maxime, a eum laudantium explicabo similique, iure dignissimos quae.</p>
</div>
</div>
</div>
</div>
</div>
</div>
Unfortunately, I didn't change the iteration on each scroll, which affects the performance a little bit.

Side Menu alpha not working over body tag

I have a side navigation menu on my site. When pressed, it calls a JavaScript function that changes the alpha channel of the body tag. For some reason only part of the screen's alpha channel is changing (section, img, bootstrap containers are not). The section tag has a class that gives it a background color, I'm thinking this might be the issue. Which would be the smart way to get this working?
This is the code I'm using for the alpha management:
/* Set the width of the side navigation to 250px */
function openNav() {
document.getElementById("mySidenav").style.width = "350px";
document.body.style.background = "rgba(0,0,0,0.4)";
}
/* Set the width of the side navigation to 0 */
function closeNav() {
document.getElementById("mySidenav").style.width = "0";
document.body.style.background = "rgba(0,0,0,0)";
}
The html goes like this:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Cripto Frog</title>
<link rel="stylesheet" href="styles.css">
<link href="https://fonts.googleapis.com/css?family=Rammetto+One" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Lora" rel="stylesheet">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script defer src="https://use.fontawesome.com/releases/v5.0.8/js/all.js"></script>
<script src="sidebar.js"></script>
</head>
<main>
<header>
<span class="menu_burger" onclick="openNav()"><i class="fas fa-align-justify"></i></i></span>
<img src="img/frog.jpg" alt="">
</header>
<body>
<!-- Side Menu -->
<div id="mySidenav" class="sidenav">
×
TOP_TEN_COINS
ALT_COINS
WHITE_PAPERS
YOUTUBERS
EXCHANGES
NEWS_SITES
CONTACTO
<section class="nav_divididor"></section>
<section class="nav_footer">hlkjhlkjhlk</section>
</div>
<section class="primera_section"><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laboriosam doloremque excepturi molestias aut fuga ullam aliquid minus dolores voluptatem non, beatae placeat soluta libero eos et delectus nemo minima iusto.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quasi error aspernatur officiis, sint fugiat unde quos labore laborum cupiditate voluptates, totam sunt ut quod praesentium omnis et consequuntur sapiente incidunt?Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fugit iure eveniet a voluptas cumque! Eos qui, iusto neque, fugit praesentium totam soluta eius laudantium cupiditate dolorem dignissimos ut minus veritatis.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nulla earum soluta nesciunt dicta officia reprehenderit autem, molestias explicabo et accusamus, officiis nostrum cumque perspiciatis suscipit veniam molestiae fuga tenetur modi!Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptate itaque atque molestiae, id fugit, quidem hic rem cum praesentium dolor perspiciatis nostrum sapiente enim corrupti doloremque aliquam voluptas cumque omnis.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aperiam iusto dolor nostrum voluptate quos consectetur facere, quia, earum non, tenetur, officia laboriosam cumque suscipit itaque nobis obcaecati. Facilis veritatis, repudiandae.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laboriosam doloremque excepturi molestias aut fuga ullam aliquid minus dolores voluptatem non, beatae placeat soluta libero eos et delectus nemo minima iusto.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quasi error aspernatur officiis, sint fugiat unde quos labore laborum cupiditate voluptates, totam sunt ut quod praesentium omnis et consequuntur sapiente incidunt?Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fugit iure eveniet a voluptas cumque! Eos qui, iusto neque, fugit praesentium totam soluta eius laudantium cupiditate dolorem dignissimos ut minus veritatis.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nulla earum soluta nesciunt dicta officia reprehenderit autem, molestias explicabo et accusamus, officiis nostrum cumque perspiciatis suscipit veniam molestiae fuga tenetur modi!Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptate itaque atque molestiae, id fugit, quidem hic rem cum praesentium dolor perspiciatis nostrum sapiente enim corrupti doloremque aliquam voluptas cumque omnis.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aperiam iusto dolor nostrum voluptate quos consectetur facere, quia, earum non, tenetur, officia laboriosam cumque suscipit itaque nobis obcaecati. Facilis veritatis, repudiandae.p</p>
</section>
<!-- Use any element to open the sidenav -->
</body>
<span onclick="openNav()">open</span>
</main>
<!-- Use any element to open the sidenav -->
<span onclick="openNav()">open</span>
</html>
css file
/* Secciones */
html{
margin-top: 0px;
/*overflow: hidden; */
}
body{
/* overflow-x: hidden;*/
}
p{
font-family: 'Lora';
font-style: normal;
font-weight: 700;
}
fieldset {
font-family: 'Lora';
font-style: normal;
font-weight: 100;
}
.nav_footer{
height: 90%;
background-color: black; /* Black*/
color: white;
display: flex;
align-items: flex-end;
/*overflow-x: hidden; */
}
.nav_divididor{
width: 100%;
background-color: #388E3C;
height: 12px;
}
.primera_section{
width: 100%;
height: 700px;
background-color: #FFFFFF; /* Black*/
}
.segunda_section{
width: 100%;
height: 700px;
background-color: #C8E6C9; /* Black*/
}
.tercera_section{
width: 100%;
height: 700px;
background-color: #BDBDBD; /* Black*/
}
.divisoria {
width: 100%;
background-color: black;
height: 2px;
}
.menu_burger{
position: absolute;
top:2;
}
/* The side navigation menu */
.sidenav {
height: 100%; /* 100% Full-height */
width: 0; /* 0 width - change this with JavaScript */
position: fixed; /* Stay in place */
z-index: 1; /* Stay on top */
top: 0; /* Stay at the top */
left: 0;
background-color: white; /* Dark Green*/
overflow-x: hidden; /* Disable horizontal scroll */
padding-top: 60px; /* Place content 60px from the top */
transition: 0.8s; /* 0.5 second transition effect to slide in the sidenav */
}
.sidenav::-webkit-scrollbar {
display: none;
}
/* The navigation menu links */
.sidenav a {
font-family: 'Lora';
font-style: normal;
font-weight: 700;
padding: 8px 8px 8px 32px;
text-decoration: none;
font-size: 25px;
color: black;
display: block;
transition: 0.3s;
}
/* When you mouse over the navigation links, change their color */
.sidenav a:hover {
color: grey;
}
/* Position and style the close button (top right corner) */
.sidenav .closebtn {
position: absolute;
top: 0;
right: 25px;
font-size: 36px;
margin-left: 50px;
}
/* Style page content - use this if you want to push the page content to the right when you open the side navigation */
#main {
transition: margin-left .5s;
padding: 20px;
}
/* On smaller screens, where height is less than 450px, change the style of the sidenav (less padding and a smaller font size) */
#media screen and (max-height: 450px) {
.sidenav {padding-top: 15px;}
.sidenav a {font-size: 18px;}
}

html link and slider conflict

I use a scroll slider with the mouse or by clicking on image. My problem is that the other links as in the footer or another no longer work. I added "onclick =" window.open (this.href); return false; "but now it's the slide that no longer works when the footer link was clicked.
Appreciate the help
$(function() {
//make functions first
function showSlide(n) {
// unbind event listener to prevent retriggering
$("body").unbind("mousewheel");
currSlide += n;
// make sure currslide does not go out of min or max boundaries
currSlide = currSlide <= 0 ? 0 : currSlide >= $slide.length-1 ? $slide.length-1 : currSlide;
// displacement is window width times current slide number
var displacment = window.innerWidth*currSlide;
// translate slides div across to appropriate slide
$('.slides').css('transform', 'translateX(-'+displacment+'px)');
// give small delay before rebinding event to prevent retriggering
setTimeout(function() {
$("body").bind('mousewheel', mouseEvent);
}, 800);
// change active class on link
$('nav a.active').removeClass('active');
$($('a')[currSlide]).addClass('active');
}
function mouseEvent(e, delta) {
// On upwards scroll, show next slide (+1)
// otherwise on downwards scroll show prev slide (-1)
showSlide(delta >= 0 ? -1 : 1);
e.preventDefault();
}
$('nav a').click(function(e) {
// When link clicked, find slide it points to
var newslide = parseInt($(this).attr('href')[1]);
// find how far it is from current slide
var diff = newslide - currSlide - 1;
showSlide(diff); // show that slide
e.preventDefault();
});
$(window).resize(function(){
// Keep current slide to left of window on resize
var displacment = window.innerWidth*currSlide;
$('.slides').css('transform', 'translateX(-'+displacment+'px)');
});
//declare vars then make things happen
var currSlide = 0; //Keeps track of slide
var $slide = $('.slide'); //all slides
// give active class to first link
$($('nav a')[0]).addClass('active');
//add event listener for mousescroll
$("body").bind('mousewheel', mouseEvent);
})
#import url(http://fonts.googleapis.com/css?family=Open+Sans);
#-webkit-keyframes fill {
0% {
width: 0%;
height: 1px;
}
50% {
width: 100%;
height: 1px;
}
100% {
width: 100%;
height: 100%;
background: #fff;
}
}
#keyframes fill {
0% {
width: 0%;
height: 1px;
}
50% {
width: 100%;
height: 1px;
}
100% {
width: 100%;
height: 100%;
background: #fff;
}
}
#-webkit-keyframes fillColour {
0% {
color: #fff;
}
50% {
color: #fff;
}
100% {
color: #333;
}
}
#keyframes fillColour {
0% {
color: #fff;
}
50% {
color: #fff;
}
100% {
color: #333;
}
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: "Open Sans", sans-serif;
}
html, body{
height:100%;
}
body {
font-size: 100%;
color:#555;
overflow:hidden;
}
[itemprop="logo"] {
float:right;
top:0;
padding: 20px;
}
[itemprop="description"] {
margin-top: 120px;
padding: 20px;
}
[itemprop="name"] {
text-align: right;
padding: 20px;
padding-bottom: 0;
}
[itemprop="faxNumber"] {
padding: 0 20px 0 0;
}
[itemprop="email"] {
padding: 0 20px 0 0;
}
[itemprop="address"] {
padding: 0 20px 0 0;
}
[itemprop="telephone"] {
padding: 0 20px 0 0;
color:#4a974d;
text-decoration: overline;
}
div{
text-align:right;
}
h1 {
font-size: 2.25em;
font-weight: 700;
text-align:center;
padding-top: 20px;
}
h2 {
font-size: 1.25em;
text-align:left;
color:#e7c6c6;
}
#footer {
bottom:0;
width:100%;
height:60px; /* Height of the footer */
margin-top: 20px;
}
#footer p {
color:#555;
text-align:center;
font-size: 12px;
}
#footer a{
color:#555;
text-decoration: none;
border-bottom: dotted 1px #555;
}
nav {
background: #fff;
position: absolute;
z-index: 100;
height: 100vh;
right: 0;
width: 10vw;
font-weight: 300;
font-size: 1rem;
width: 300px;
overflow:scroll;
}
nav ul {
position: absolute;
list-style-type: none;
height: 100vh;
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-webkit-flex-direction: column;
-ms-flex-direction: column;
flex-direction: column;
-webkit-justify-content: space-around;
-ms-flex-pack: distribute;
justify-content: space-around;
}
nav a, nav a:visited, nav a:active {
text-decoration: none;
color: #fff;
}
nav a {
/*position: absolute;*/
-webkit-transition: color 2s, background 1s;
transition: color 2s, background 1s;
padding: 3px;
z-index: 0;
}
nav a.active {
background: rgba(0, 0, 0, 0.9);
}
nav a::before {
content: "";
position: absolute;
height: 0%;
width: 0%;
bottom: 0;
left: 0;
opacity: 1;
background: #555;
z-index: -1;
}
nav img {
width:120px;
float: left;}
#nav-thumbnails {
display: -moz-flex;
display: -webkit-flex;
display: -ms-flex;
display: flex;
-moz-flex-wrap: wrap;
-webkit-flex-wrap: wrap;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
padding: 1em 0.8em;
}
#nav-thumbnails h3{
font-size: 1.25em;
text-align:left;
color:#764a4a;
padding:8px;
}
/*nav a:hover {
-webkit-animation: fillColour 0.7s forwards ease-in-out;
animation: fillColour 0.7s forwards ease-in-out;
}
nav a:hover::before {
-webkit-animation: fill 0.7s forwards ease-in-out;
animation: fill 0.7s forwards ease-in-out;
opacity: 1;
}*/
#media only screen and (max-width: 460px) {
nav {
float: none;
margin-right:0;
width:auto;
border:0;
border-bottom:2px solid #000;
position: absolute;
overflow: scroll;
}
nav a {
padding: 3px;
}
nav a.active {
background: none;
}
nav img {
width: 100%;
}
.slides {
display:none;
}
#footer {
position: inherit;
}
[itemprop="logo"] {
float:right;
top:0;
padding: 20px;
width:120px;
}
}
.slides {
width: 600vw;
height: 100vh;
-webkit-transition: -webkit-transform 0.8s ease;
transition: -webkit-transform 0.8s ease;
transition: transform 0.8s ease;
transition: transform 0.8s ease, -webkit-transform 0.8s ease;
}
.slides .slide {
height: 100vh;
width: 100vw;
background: pink;
float: left;
text-align: center;
background-size: cover;
}
.slides .slide .content {
max-width: 600px;
padding: 20px;
background: rgba(24, 20, 20, 0.35);
/* margin: 35vh 0 0 15vw; */
border-radius: 5px;
position: absolute;
bottom: 0;
}
.slides .slide .content p {
padding: 10px 0;
border-bottom: 1px solid #f2e9e9;
width: 100%;
}
.slides .slide:nth-child(1) {
background-image: url(../img/1.jpg);
}
.slides .slide:nth-child(2) {
background-image: url(../img/2.jpg);
}
.slides .slide:nth-child(3) {
background-image: url(../img/3.jpg);
}
.slides .slide:nth-child(4) {
background-image: url(../img/4.jpg);
}
.slides .slide:nth-child(5) {
background-image: url(../img/5.jpg);
}
.slides .slide:nth-child(6) {
background-image: url(../img/6.jpg);
}
.slides .slide:nth-child(7) {
background-image: url(../img/7.jpg);
}
.slides .slide:nth-child(8) {
background-image: url(../img/8.jpg);
}
.slides .slide:nth-child(9) {
background-image: url(../img/9.jpg);
}
.slides .slide:nth-child(10) {
background-image: url(../img/10.jpg);
}
.slides .slide img {
width: 100%;
}
.slides .slide p {
color:#fff;
text-align:left;
}
#media only screen and (max-width: 900px) {
.slides .slide .content {
width: 300px;
}
.slides .slide .content p {
padding: 0;
border-bottom: 0;
}
}
<!DOCTYPE html>
<html lang="zxx">
<head>
<meta charset="UTF-8">
<title>test</title>
<script src="http://s.codepen.io/assets/libs/modernizr.js" type="text/javascript"></script>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel='stylesheet prefetch' href='http://ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/themes/smoothness/jquery-ui.css'>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<main>
<nav>
<header>
<h1>Pepinière Paris</h1>
<!--snippet pour le seo-->
<div itemscope="" itemtype="http://schema.org/ProfessionalService">
<div itemprop="name">Brewer Digital Marketing</div>
<img itemprop="logo" src="http://img4.hostingpics.net/pics/379486logo.png" alt="logo">
<div itemprop="description">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec aliquam eget eros vitae facilisis. Donec mollis turpis eu lorem imperdiet, vel pellentesque nunc tempor.</div>
<div>Phone:
<span itemprop="telephone">303-406-1053</span>
</div>
<div>Fax:
<span itemprop="faxNumber">555-555-5555</span>
</div>
<div>Email:
<span itemprop="email">brad#mail.com</span>
</div>
<div itemprop="address" itemscope="" itemtype="http://schema.org/PostalAddress">
<span itemprop="streetAddress">1889 Rutherford Ave</span>
P.O. Box: <span itemprop="postOfficeBoxNumber">5555</span>
<span itemprop="addressLocality">Louisville</span>
<span itemprop="postalCode">40205</span>
<span itemprop="addressCountry">USA</span>
</div>
</div>
</header>
<!--section de navigation-->
<section id="nav-thumbnails">
<h3>La pépinière</h3>
<img src="img/1.jpg" alt="image1">
<img src="img/2.jpg" alt="image2">
<img src="img/3.jpg" alt="image3">
<img src="img/4.jpg" alt="image4">
<img src="img/5.jpg" alt="image5">
<img src="img/6.jpg" alt="image6">
</section>
<!--footer-->
<div id="footer"><p>Crédit : pixabay.com</p></div>
</nav>
</main>
<div class="slides">
<div id="1" class="slide">
<div class="content">
<h2>Slide 1</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quibusdam, odit nihil tempora tenetur! Fugit reprehenderit saepe impedit at, expedita nemo nulla hic quia placeat ipsum sint, quis unde fugiat tenetur nobis illum. Nemo laboriosam laudantium aliquam illum fugiat incidunt nostrum, corrupti minus optio. Suscipit obcaecati harum voluptates est quod quasi?</p>
</div>
</div>
<div id="2" class="slide">
<div class="content">
<h2>Slide 2</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quibusdam, odit nihil tempora tenetur! Fugit reprehenderit saepe impedit at, expedita nemo nulla hic quia placeat ipsum sint, quis unde fugiat tenetur nobis illum. Nemo laboriosam laudantium aliquam illum fugiat incidunt nostrum, corrupti minus optio. Suscipit obcaecati harum voluptates est quod quasi?</p>
</div>
</div>
<div id="3" class="slide">
<div class="content">
<h2>Slide 3</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quibusdam, odit nihil tempora tenetur! Fugit reprehenderit saepe impedit at, expedita nemo nulla hic quia placeat ipsum sint, quis unde fugiat tenetur nobis illum. Nemo laboriosam laudantium aliquam illum fugiat incidunt nostrum, corrupti minus optio. Suscipit obcaecati harum voluptates est quod quasi?</p>
</div>
</div>
<div id="4" class="slide">
<div class="content">
<h2>Slide 4</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quibusdam, odit nihil tempora tenetur! Fugit reprehenderit saepe impedit at, expedita nemo nulla hic quia placeat ipsum sint, quis unde fugiat tenetur nobis illum. Nemo laboriosam laudantium aliquam illum fugiat incidunt nostrum, corrupti minus optio. Suscipit obcaecati harum voluptates est quod quasi?</p>
</div>
</div>
<div id="5" class="slide">
<div class="content">
<h2>Slide 5</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quibusdam, odit nihil tempora tenetur! Fugit reprehenderit saepe impedit at, expedita nemo nulla hic quia placeat ipsum sint, quis unde fugiat tenetur nobis illum. Nemo laboriosam laudantium aliquam illum fugiat incidunt nostrum, corrupti minus optio. Suscipit obcaecati harum voluptates est quod quasi?</p>
</div>
</div>
<div id="6" class="slide">
<div class="content">
<h2>Slide 6</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quibusdam, odit nihil tempora tenetur! Fugit reprehenderit saepe impedit at, expedita nemo nulla hic quia placeat ipsum sint, quis unde fugiat tenetur nobis illum. Nemo laboriosam laudantium aliquam illum fugiat incidunt nostrum, corrupti minus optio. Suscipit obcaecati harum voluptates est quod quasi?</p>
</div>
</div>
</div>
<script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script src='http://ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/jquery-ui.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery-mousewheel/3.1.12/jquery.mousewheel.min.js'></script>
<script src="js/index.js"></script>
</body>
</html>

Jquery is correct, just you need take footer div outside the <nav> tag.
<nav>
<header>
<h1>Pepinière Paris</h1>
<!--snippet pour le seo-->
<div itemscope="" itemtype="http://schema.org/ProfessionalService">
<div itemprop="name">Brewer Digital Marketing</div>
<img itemprop="logo" src="http://img4.hostingpics.net/pics/379486logo.png" alt="logo">
<div itemprop="description">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec aliquam eget eros vitae facilisis. Donec mollis turpis eu lorem imperdiet, vel pellentesque nunc tempor.</div>
<div>Phone:
<span itemprop="telephone">303-406-1053</span>
</div>
<div>Fax:
<span itemprop="faxNumber">555-555-5555</span>
</div>
<div>Email:
<span itemprop="email">brad#mail.com</span>
</div>
<div itemprop="address" itemscope="" itemtype="http://schema.org/PostalAddress">
<span itemprop="streetAddress">1889 Rutherford Ave</span>
P.O. Box: <span itemprop="postOfficeBoxNumber">5555</span>
<span itemprop="addressLocality">Louisville</span>
<span itemprop="postalCode">40205</span>
<span itemprop="addressCountry">USA</span>
</div>
</div>
</header>
<!--section de navigation-->
<section id="nav-thumbnails">
<h3>La pépinière</h3>
<img src="img/1.jpg" alt="image1">
<img src="img/2.jpg" alt="image2">
<img src="img/3.jpg" alt="image3">
<img src="img/4.jpg" alt="image4">
<img src="img/5.jpg" alt="image5">
<img src="img/6.jpg" alt="image6">
</section>
<!--footer-->
</nav>
<div id="footer"><p>Credit : pixabay.com</p></div>
</main>
<div class="slides">
<div id="1" class="slide">
<div class="content">
<h2>Slide 1</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quibusdam, odit nihil tempora tenetur! Fugit reprehenderit saepe impedit at, expedita nemo nulla hic quia placeat ipsum sint, quis unde fugiat tenetur nobis illum. Nemo laboriosam laudantium aliquam illum fugiat incidunt nostrum, corrupti minus optio. Suscipit obcaecati harum voluptates est quod quasi?</p>
</div>
</div>
<div id="2" class="slide">
<div class="content">
<h2>Slide 2</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quibusdam, odit nihil tempora tenetur! Fugit reprehenderit saepe impedit at, expedita nemo nulla hic quia placeat ipsum sint, quis unde fugiat tenetur nobis illum. Nemo laboriosam laudantium aliquam illum fugiat incidunt nostrum, corrupti minus optio. Suscipit obcaecati harum voluptates est quod quasi?</p>
</div>
</div>
<div id="3" class="slide">
<div class="content">
<h2>Slide 3</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quibusdam, odit nihil tempora tenetur! Fugit reprehenderit saepe impedit at, expedita nemo nulla hic quia placeat ipsum sint, quis unde fugiat tenetur nobis illum. Nemo laboriosam laudantium aliquam illum fugiat incidunt nostrum, corrupti minus optio. Suscipit obcaecati harum voluptates est quod quasi?</p>
</div>
</div>
<div id="4" class="slide">
<div class="content">
<h2>Slide 4</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quibusdam, odit nihil tempora tenetur! Fugit reprehenderit saepe impedit at, expedita nemo nulla hic quia placeat ipsum sint, quis unde fugiat tenetur nobis illum. Nemo laboriosam laudantium aliquam illum fugiat incidunt nostrum, corrupti minus optio. Suscipit obcaecati harum voluptates est quod quasi?</p>
</div>
</div>
<div id="5" class="slide">
<div class="content">
<h2>Slide 5</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quibusdam, odit nihil tempora tenetur! Fugit reprehenderit saepe impedit at, expedita nemo nulla hic quia placeat ipsum sint, quis unde fugiat tenetur nobis illum. Nemo laboriosam laudantium aliquam illum fugiat incidunt nostrum, corrupti minus optio. Suscipit obcaecati harum voluptates est quod quasi?</p>
</div>
</div>
<div id="6" class="slide">
<div class="content">
<h2>Slide 6</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quibusdam, odit nihil tempora tenetur! Fugit reprehenderit saepe impedit at, expedita nemo nulla hic quia placeat ipsum sint, quis unde fugiat tenetur nobis illum. Nemo laboriosam laudantium aliquam illum fugiat incidunt nostrum, corrupti minus optio. Suscipit obcaecati harum voluptates est quod quasi?</p>
</div>
</div>
</div>

Add onkeypress="window.open(this.href); return false;" to your code
pixabay.com
Remove below code
$('nav a').click(function(e) {
// When link clicked, find slide it points to
var newslide = parseInt($(this).attr('href')[1]);
// find how far it is from current slide
var diff = newslide - currSlide - 1;
showSlide(diff); // show that slide
e.preventDefault();
});

add this code to your js file.
$('#nav-thumbnails a').click(function(e) {
var newslide = parseInt($(this).attr('href')[1]);
var diff = newslide - currSlide - 1; showSlide(diff);
e.preventDefault();
});
$(function() {
//make functions first
function showSlide(n) {
// unbind event listener to prevent retriggering
$("body").unbind("mousewheel");
currSlide += n;
// make sure currslide does not go out of min or max boundaries
currSlide = currSlide <= 0 ? 0 : currSlide >= $slide.length-1 ? $slide.length-1 : currSlide;
// displacement is window width times current slide number
var displacment = window.innerWidth*currSlide;
// translate slides div across to appropriate slide
$('.slides').css('transform', 'translateX(-'+displacment+'px)');
// give small delay before rebinding event to prevent retriggering
setTimeout(function() {
$("body").bind('mousewheel', mouseEvent);
}, 800);
// change active class on link
$('nav a.active').removeClass('active');
$($('a')[currSlide]).addClass('active');
}
function mouseEvent(e, delta) {
// On upwards scroll, show next slide (+1)
// otherwise on downwards scroll show prev slide (-1)
showSlide(delta >= 0 ? -1 : 1);
e.preventDefault();
}
$('#nav-thumbnails a').click(function(e) { var newslide = parseInt($(this).attr('href')[1]); var diff = newslide - currSlide - 1; showSlide(diff); e.preventDefault(); });
$(window).resize(function(){
// Keep current slide to left of window on resize
var displacment = window.innerWidth*currSlide;
$('.slides').css('transform', 'translateX(-'+displacment+'px)');
});
//declare vars then make things happen
var currSlide = 0; //Keeps track of slide
var $slide = $('.slide'); //all slides
// give active class to first link
$($('nav a')[0]).addClass('active');
//add event listener for mousescroll
$("body").bind('mousewheel', mouseEvent);
})
#import url(http://fonts.googleapis.com/css?family=Open+Sans);
#-webkit-keyframes fill {
0% {
width: 0%;
height: 1px;
}
50% {
width: 100%;
height: 1px;
}
100% {
width: 100%;
height: 100%;
background: #fff;
}
}
#keyframes fill {
0% {
width: 0%;
height: 1px;
}
50% {
width: 100%;
height: 1px;
}
100% {
width: 100%;
height: 100%;
background: #fff;
}
}
#-webkit-keyframes fillColour {
0% {
color: #fff;
}
50% {
color: #fff;
}
100% {
color: #333;
}
}
#keyframes fillColour {
0% {
color: #fff;
}
50% {
color: #fff;
}
100% {
color: #333;
}
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: "Open Sans", sans-serif;
}
html, body{
height:100%;
}
body {
font-size: 100%;
color:#555;
overflow:hidden;
}
[itemprop="logo"] {
float:right;
top:0;
padding: 20px;
}
[itemprop="description"] {
margin-top: 120px;
padding: 20px;
}
[itemprop="name"] {
text-align: right;
padding: 20px;
padding-bottom: 0;
}
[itemprop="faxNumber"] {
padding: 0 20px 0 0;
}
[itemprop="email"] {
padding: 0 20px 0 0;
}
[itemprop="address"] {
padding: 0 20px 0 0;
}
[itemprop="telephone"] {
padding: 0 20px 0 0;
color:#4a974d;
text-decoration: overline;
}
div{
text-align:right;
}
h1 {
font-size: 2.25em;
font-weight: 700;
text-align:center;
padding-top: 20px;
}
h2 {
font-size: 1.25em;
text-align:left;
color:#e7c6c6;
}
#footer {
bottom:0;
width:100%;
height:60px; /* Height of the footer */
margin-top: 20px;
}
#footer p {
color:#555;
text-align:center;
font-size: 12px;
}
#footer a{
color:#555;
text-decoration: none;
border-bottom: dotted 1px #555;
}
nav {
background: #fff;
position: absolute;
z-index: 100;
height: 100vh;
right: 0;
width: 10vw;
font-weight: 300;
font-size: 1rem;
width: 300px;
overflow:scroll;
}
nav ul {
position: absolute;
list-style-type: none;
height: 100vh;
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-webkit-flex-direction: column;
-ms-flex-direction: column;
flex-direction: column;
-webkit-justify-content: space-around;
-ms-flex-pack: distribute;
justify-content: space-around;
}
nav a, nav a:visited, nav a:active {
text-decoration: none;
color: #fff;
}
nav a {
/*position: absolute;*/
-webkit-transition: color 2s, background 1s;
transition: color 2s, background 1s;
padding: 3px;
z-index: 0;
}
nav a.active {
background: rgba(0, 0, 0, 0.9);
}
nav a::before {
content: "";
position: absolute;
height: 0%;
width: 0%;
bottom: 0;
left: 0;
opacity: 1;
background: #555;
z-index: -1;
}
nav img {
width:120px;
float: left;}
#nav-thumbnails {
display: -moz-flex;
display: -webkit-flex;
display: -ms-flex;
display: flex;
-moz-flex-wrap: wrap;
-webkit-flex-wrap: wrap;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
padding: 1em 0.8em;
}
#nav-thumbnails h3{
font-size: 1.25em;
text-align:left;
color:#764a4a;
padding:8px;
}
/*nav a:hover {
-webkit-animation: fillColour 0.7s forwards ease-in-out;
animation: fillColour 0.7s forwards ease-in-out;
}
nav a:hover::before {
-webkit-animation: fill 0.7s forwards ease-in-out;
animation: fill 0.7s forwards ease-in-out;
opacity: 1;
}*/
#media only screen and (max-width: 460px) {
nav {
float: none;
margin-right:0;
width:auto;
border:0;
border-bottom:2px solid #000;
position: absolute;
overflow: scroll;
}
nav a {
padding: 3px;
}
nav a.active {
background: none;
}
nav img {
width: 100%;
}
.slides {
display:none;
}
#footer {
position: inherit;
}
[itemprop="logo"] {
float:right;
top:0;
padding: 20px;
width:120px;
}
}
.slides {
width: 600vw;
height: 100vh;
-webkit-transition: -webkit-transform 0.8s ease;
transition: -webkit-transform 0.8s ease;
transition: transform 0.8s ease;
transition: transform 0.8s ease, -webkit-transform 0.8s ease;
}
.slides .slide {
height: 100vh;
width: 100vw;
background: pink;
float: left;
text-align: center;
background-size: cover;
}
.slides .slide .content {
max-width: 600px;
padding: 20px;
background: rgba(24, 20, 20, 0.35);
/* margin: 35vh 0 0 15vw; */
border-radius: 5px;
position: absolute;
bottom: 0;
}
.slides .slide .content p {
padding: 10px 0;
border-bottom: 1px solid #f2e9e9;
width: 100%;
}
.slides .slide:nth-child(1) {
background-image: url(../img/1.jpg);
}
.slides .slide:nth-child(2) {
background-image: url(../img/2.jpg);
}
.slides .slide:nth-child(3) {
background-image: url(../img/3.jpg);
}
.slides .slide:nth-child(4) {
background-image: url(../img/4.jpg);
}
.slides .slide:nth-child(5) {
background-image: url(../img/5.jpg);
}
.slides .slide:nth-child(6) {
background-image: url(../img/6.jpg);
}
.slides .slide:nth-child(7) {
background-image: url(../img/7.jpg);
}
.slides .slide:nth-child(8) {
background-image: url(../img/8.jpg);
}
.slides .slide:nth-child(9) {
background-image: url(../img/9.jpg);
}
.slides .slide:nth-child(10) {
background-image: url(../img/10.jpg);
}
.slides .slide img {
width: 100%;
}
.slides .slide p {
color:#fff;
text-align:left;
}
#media only screen and (max-width: 900px) {
.slides .slide .content {
width: 300px;
}
.slides .slide .content p {
padding: 0;
border-bottom: 0;
}
}
<!DOCTYPE html>
<html lang="zxx">
<head>
<meta charset="UTF-8">
<title>test</title>
<script src="http://s.codepen.io/assets/libs/modernizr.js" type="text/javascript"></script>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel='stylesheet prefetch' href='http://ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/themes/smoothness/jquery-ui.css'>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<main>
<nav>
<header>
<h1>Pepinière Paris</h1>
<!--snippet pour le seo-->
<div itemscope="" itemtype="http://schema.org/ProfessionalService">
<div itemprop="name">Brewer Digital Marketing</div>
<img itemprop="logo" src="http://img4.hostingpics.net/pics/379486logo.png" alt="logo">
<div itemprop="description">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec aliquam eget eros vitae facilisis. Donec mollis turpis eu lorem imperdiet, vel pellentesque nunc tempor.</div>
<div>Phone:
<span itemprop="telephone">303-406-1053</span>
</div>
<div>Fax:
<span itemprop="faxNumber">555-555-5555</span>
</div>
<div>Email:
<span itemprop="email">brad#mail.com</span>
</div>
<div itemprop="address" itemscope="" itemtype="http://schema.org/PostalAddress">
<span itemprop="streetAddress">1889 Rutherford Ave</span>
P.O. Box: <span itemprop="postOfficeBoxNumber">5555</span>
<span itemprop="addressLocality">Louisville</span>
<span itemprop="postalCode">40205</span>
<span itemprop="addressCountry">USA</span>
</div>
</div>
</header>
<!--section de navigation-->
<section id="nav-thumbnails">
<h3>La pépinière</h3>
<img src="img/1.jpg" alt="image1">
<img src="img/2.jpg" alt="image2">
<img src="img/3.jpg" alt="image3">
<img src="img/4.jpg" alt="image4">
<img src="img/5.jpg" alt="image5">
<img src="img/6.jpg" alt="image6">
</section>
<!--footer-->
<div id="footer"><p>Crédit : pixabay.com</p></div>
</nav>
</main>
<div class="slides">
<div id="1" class="slide">
<div class="content">
< h2>Slide 1</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quibusdam, odit nihil tempora tenetur! Fugit reprehenderit saepe impedit at, expedita nemo nulla hic quia placeat ipsum sint, quis unde fugiat tenetur nobis illum. Nemo laboriosam laudantium aliquam illum fugiat incidunt nostrum, corrupti minus optio. Suscipit obcaecati harum voluptates est quod quasi?</p>
</div>
</div>
<div id="2" class="slide">
<div class="content">
<h2>Slide 2</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quibusdam, odit nihil tempora tenetur! Fugit reprehenderit saepe impedit at, expedita nemo nulla hic quia placeat ipsum sint, quis unde fugiat tenetur nobis illum. Nemo laboriosam laudantium aliquam illum fugiat incidunt nostrum, corrupti minus optio. Suscipit obcaecati harum voluptates est quod quasi?</p>
</div>
</div>
<div id="3" class="slide">
<div class="content">
<h2>Slide 3</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quibusdam, odit nihil tempora tenetur! Fugit reprehenderit saepe impedit at, expedita nemo nulla hic quia placeat ipsum sint, quis unde fugiat tenetur nobis illum. Nemo laboriosam laudantium aliquam illum fugiat incidunt nostrum, corrupti minus optio. Suscipit obcaecati harum voluptates est quod quasi?</p>
</div>
</div>
<div id="4" class="slide">
<div class="content">
<h2>Slide 4</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quibusdam, odit nihil tempora tenetur! Fugit reprehenderit saepe impedit at, expedita nemo nulla hic quia placeat ipsum sint, quis unde fugiat tenetur nobis illum. Nemo laboriosam laudantium aliquam illum fugiat incidunt nostrum, corrupti minus optio. Suscipit obcaecati harum voluptates est quod quasi?</p>
</div>
</div>
<div id="5" class="slide">
<div class="content">
<h2>Slide 5</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quibusdam, odit nihil tempora tenetur! Fugit reprehenderit saepe impedit at, expedita nemo nulla hic quia placeat ipsum sint, quis unde fugiat tenetur nobis illum. Nemo laboriosam laudantium aliquam illum fugiat incidunt nostrum, corrupti minus optio. Suscipit obcaecati harum voluptates est quod quasi?</p>
</div>
</div>
<div id="6" class="slide">
<div class="content">
<h2>Slide 6</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quibusdam, odit nihil tempora tenetur! Fugit reprehenderit saepe impedit at, expedita nemo nulla hic quia placeat ipsum sint, quis unde fugiat tenetur nobis illum. Nemo laboriosam laudantium aliquam illum fugiat incidunt nostrum, corrupti minus optio. Suscipit obcaecati harum voluptates est quod quasi?</p>
</div>
</div>
</div>
<script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script src='http://ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/jquery-ui.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery-mousewheel/3.1.12/jquery.mousewheel.min.js'></script>
<script src="js/index.js"></script>
</body>
</html>

I have made the changes in jquery .You can take below code.
$(function() {
//make functions first
function showSlide(n) {
// unbind event listener to prevent retriggering
$("body").unbind("mousewheel");
currSlide += n;
// make sure currslide does not go out of min or max boundaries
currSlide = currSlide <= 0 ? 0 : currSlide >= $slide.length-1 ? $slide.length-1 : currSlide;
// displacement is window width times current slide number
var displacment = window.innerWidth*currSlide;
// translate slides div across to appropriate slide
$('.slides').css('transform', 'translateX(-'+displacment+'px)');
// give small delay before rebinding event to prevent retriggering
setTimeout(function() {
$("body").bind('mousewheel', mouseEvent);
}, 800);
// change active class on link
$('nav #nav-thumbnails a.active').removeClass('active');
$($('a')[currSlide]).addClass('active');
}
function mouseEvent(e, delta) {
// On upwards scroll, show next slide (+1)
// otherwise on downwards scroll show prev slide (-1)
showSlide(delta >= 0 ? -1 : 1);
e.preventDefault();
}
$('nav #nav-thumbnails a').click(function(e) {
// When link clicked, find slide it points to
var newslide = parseInt($(this).attr('href')[1]);
// find how far it is from current slide
var diff = newslide - currSlide - 1;
showSlide(diff); // show that slide
e.preventDefault();
});
$(window).resize(function(){
// Keep current slide to left of window on resize
var displacment = window.innerWidth*currSlide;
$('.slides').css('transform', 'translateX(-'+displacment+'px)');
});
//declare vars then make things happen
var currSlide = 0; //Keeps track of slide
var $slide = $('.slide'); //all slides
// give active class to first link
$($('nav #nav-thumbnails a')[0]).addClass('active');
//add event listener for mousescroll
$("body").bind('mousewheel', mouseEvent);
})

Dynamic changing height to tallest div on window resize

I am trying to use jQuery to set a set of div to the heigh of the tallest div. I have got the initial function working, where it gets the site and applies it to the rest of the divs on the page.
I also am trying to recalculate the heigh of the div in resize. In the JSfiddle, you can see that when you shrink the text expands out of the card/div.
I have tried to put the function into the resize function however in doesn't re-fire. I'm not sure what i am doing wrong.
I'm a JS beginner, apologies.
HTML
<div class="fluid-container grey-bg">
<div class="container">
<div class="card-default width-25 items">
<div class="content">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Doloremque hic aliquid ea id, perferendis mollitia nam consequatur, ut rerum animi nisi iste, quae provident atque placeat repudiandae impedit delectus sequi.
</div>
</div>
<div class="card-default width-25 spacer items">
<div class="content">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Doloremque ex sed voluptatum rem iste
</div>
</div>
<div class="card-default width-25 spacer items">
<div class="content">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Corporis omnis, quos id quaerat magni nobis blanditiis, esse magnam provident cupiditate harum non! Modi cupiditate earum eos repudiandae impedit nemo repellendus!
</div>
</div>
<div class="card-default width-25 items">
<div class="content">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquid laboriosam magni placeat numquam
</div>
</div>
</div>
</div>
CSS
.card-default {
background-color: #fff;
border-radius: 10px;
color: #333333;
min-height: 100px;
box-shadow: 0px 6px 7px 0px rgba(0, 0, 0, 0.25);
box-sizing: border-box;
padding: 20px 0px;
text-align: center;
margin-bottom: 20px;
display: block;
float: left;
position: relative;
width: 100%;
}
.card-default.width-25 {
width: 23%;
margin-left: 0px;
margin-right: 0px;
padding: 20px 20px;
}
JS
function cardEqualHeight() {
var maxHeight = -1;
$('.items').each(function() {
maxHeight = maxHeight >= $(this).height() ? maxHeight : $(this).height();
});
$('.items .content').each(function() {
$(this).height(maxHeight);
});
}
cardEqualHeight();
https://jsfiddle.net/k3lh4m/7wmfox9m/

Add this to the containter class and don't use your JS function and there you go!
.container {
display: flex;
flex-wrap: wrap;
}
jsfiddle

Categories

Resources