html link and slider conflict - javascript

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);
})

Related

JavaScript getBoundingClientRect Returns 0

html,body{
height: 100%;
}
body{
margin: 0;
background-color: #0f0f0f;
color: white;
font-family: 'Ubuntu', sans-serif;
display: grid;
grid-template-columns: 1fr 8fr;
}
header{
height: 5vh;
grid-column: 1/3;
grid-row:1/2 ;
background-color: black;
z-index: 2;
display: block;
}
section{
position: relative;
display: flex;
flex-direction: column;
min-height: 300px;
}
.TopContent{
height: 70vh;
grid-column: 1/3;
grid-row:2/3 ;
background-color: white;
z-index: 1;
}
.Content{
grid-column: 1/3;
}
.TopNavigation{
display: flex;
flex-direction: column;
}
.TopNavBtn{
background-color: #000000;
text-align: center;
vertical-align: middle;
color: white;
margin: 0px;
border: 0px;
height: 5vh;
width: 90px;
font-size: 25px;
transition-duration: 0.3s;
}
.TopNavBtn:hover{
height: 7vh;
font-size: 27px;
background-color: #272727;
font-weight: bold;
}
.Navigation{
grid-column: 1/2;
background-color: #0f0f0f;
}
.Divider{
aspect-ratio: 900/300;
width: 100%;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
.Grad1
{
background-image: url("img/svg/Grad1.svg");
}
.Grad2
{
background-image: url("img/svg/Grad2.svg");
}
.Grad3
{
background-image: url("img/svg/Grad3.svg");
}
.Grad4
{
background-image: url("img/svg/Grad4.svg");
}
.RGrad1
{
background-image: url("img/svg/RGrad1.svg");
}
.RGrad2
{
background-image: url("img/svg/RGrad2.svg");
}
.RGrad3
{
background-image: url("img/svg/RGrad3.svg");
}
.RGrad4
{
background-image: url("img/svg/RGrad4.svg");
}
.b{
background-color: #015657;
}
.g{
background-color: #303030;
}
.w{
background-color: white;
}
#keyframes logo {
0%{background-image: url("img/grass.png");}
25% {background-image: url("img/dia.png");}
50%{background-image: url("img/spawner1.png");}
75%{background-image: url("img/oak1.png");}
100%{background-image: url("img/grass.png");}
}
.logo{
background-image: url("grass.png");
background-repeat: no-repeat;
width: 200px;
height: 200px;
animation-name:logo;
animation-duration: 10s;
animation-play-state:paused ;
animation-iteration-count:infinite ;
align-items: center;
align-content: center;
margin: auto;
}
.logo:hover{
animation-play-state:running ;
}
<!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">
<link rel="stylesheet" type="text/css" href="Project.css"/>
<title>Document</title>
</head>
<body >
<header id="TNav">
<nav class="TopNavigation" id="xdd">
<button class="TopNavBtn">xd</button>
</nav>
</header>
<article class="TopContent">
<div class="logo"></div>
</article>
<nav class="Navigation">
</nav>
<article class="Content">
<section class=" b" >
<p>Aliquid, ab? Quod nulla aliquam libero placeat et distinctio fugit maiores quisquam odit illo repellat, provident modi. Placeat, maiores facere, ut dolorem assumenda amet alias natus, expedita sit mollitia minima?</p>
</section>
<div class="Divider Grad1" ></div>
<section class=" g">
<p>Aliquid, ab? Quod nulla aliquam libero placeat et distinctio fugit maiores quisquam odit illo repellat, provident modi. Placeat, maiores facere, ut dolorem assumenda amet alias natus, expedita sit mollitia minima?</p>
</section>
<div class="Divider RGrad1" ></div>
<section class="b">
<p>Tenetur mollitia esse omnis rem voluptatum, quaerat, delectus nulla quasi similique deleniti tempora a libero ducimus, sit asperiores fugiat temporibus error. Alias consectetur sit odio? Praesentium, reiciendis dicta. Ducimus, consequatur.</p>
</section>
<div class="Divider Grad2" ></div>
<section class="g">
<p>Debitis sed ullam assumenda quasi! Quibusdam, laudantium minus cum delectus quasi facilis, quam amet alias ex, voluptatibus cumque ratione praesentium laborum sint nemo eaque sunt tempora qui ad odio consequatur!</p>
</section >
<div class="Divider RGrad2" ></div>
<section class="b">
<p>Autem ratione tempora officiis reprehenderit, voluptatem rem sit quas veritatis! Aspernatur rerum nam architecto ex voluptates earum illo rem quia, culpa quaerat fuga voluptatibus impedit eaque iste sint nostrum facilis!</p>
</section>
<div class="Divider Grad3" ></div>
<section class="g">
<p>Autem ratione tempora officiis reprehenderit, voluptatem rem sit quas veritatis! Aspernatur rerum nam architecto ex voluptates earum illo rem quia, culpa quaerat fuga voluptatibus impedit eaque iste sint nostrum facilis!</p>
</section>
<div class="Divider RGrad3" ></div>
<section class="b">
<p>Autem ratione tempora officiis reprehenderit, voluptatem rem sit quas veritatis! Aspernatur rerum nam architecto ex voluptates earum illo rem quia, culpa quaerat fuga voluptatibus impedit eaque iste sint nostrum facilis!</p>
</section>
</article>
<script>
let NavBar = document.getElementById("xdd");
let bound = NavBar.getBoundingClientRect();
window.onscroll= function (){
console.log("scrolled")
console.log(bound)
if(bound.top >=0)
{
}
else
{
console.log("isnt")
}
}
// to check if the DOM is loaded
document.addEventListener("DOMContentLoaded", (event) =>{
console.log("ready");
})
</script>
</body>
</html>
I am trying to detected whether an Elemnt is inside the Viewport. When i looked this up, i was directed to usimg getBoundingClientRect to get its location relative to the Viewport.
However, when i tried implementing this solution, it didnt work, as this always returned a DOMRect with the x,y, top and left values being 0 and the others staying constant no matter where i scroll.
The html element(s) i want to get the location of:
<header id="TNav">
<nav class="TopNavigation" id="xdd">
<button class="TopNavBtn">xd</button>
</nav>
</header>
Its CSS:
header{
height: 5vh;
grid-column: 1/3;
grid-row:1/2 ;
background-color: black;
z-index: 2;
display: block;
}
.TopNavigation{
display: flex;
flex-direction: column;
}
The JS code:
let NavBar = document.getElementById("xdd");
let bound = NavBar.getBoundingClientRect();
window.onscroll= function (){
console.log("scrolled")
console.log(bound)
if(bound.top >=0)
{
}
else
{
console.log("isnt")
}
}
// to check if the DOM is loaded
document.addEventListener("DOMContentLoaded", (event) =>{
console.log("ready");
})
the code is implemented at the very bottom of the <body>.
I tried testing if the DOM is loaded and changing which element i read the location of.
Here is what the the getBoundingClientRect() returns:

Thanks to user Unmitigated, i now have the answer:
The let bound = NavBar.getBoundingClientRect had to be moved inside the window.onscroll event handler, like so:
<script>
let NavBar = document.getElementById("xdd");
window.onscroll= function (){
let bound = NavBar.getBoundingClientRect();
console.log("scrolled")
console.log(bound)
if(bound.top >=0)
{
}
else
{
console.log("isnt")
}
}
// to check if the DOM is loaded
document.addEventListener("DOMContentLoaded", (event) =>{
console.log("ready");
})
</script>

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>

How to make this effect (parallax on scrolling)?

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

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.

Background "Jumps" on revealing sidebar with content

I am trying to make a sidebar that reveals on pressing a button.
Everything works fine until I put some content in the sidebar. The background jumps when the sidebar is revealed.
Here is sample code:
document.getElementById('btn').addEventListener('click', ()=>{
let sidebar = document.getElementById('sidebar');
sidebar.style.width = '40vw';
let p = document.querySelector('#sidebar p');
p.style.display = 'block';
})
*{
margin: 0;
padding: 0;
}
#main{
display: flex;
}
#sec1{
width: 60vw;
height: 100vh;
background: red;
}
#sec2{
width: 40vw;
height: 100vh;
background-color: #bdd9d4;
}
#sidebar{
width: 0;
height: 100vh;
position: absolute;
top: 0;
right:0;
z-index: 1;
transition: width .5s;
background: green;
}
#sidebar p{
display: none;
}
<div id="main">
<div id="sec1">
<button id="btn">Open Sidebar</button>
</div>
<div id="sec2">
</div>
</div>
<div id="sidebar">
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Laboriosam sapiente amet similique? Architecto dolor, nulla neque natus incidunt labore dignissimos? Mollitia reprehenderit rerum unde iusto, consequatur explicabo molestiae cumque vero!</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Reprehenderit doloremque sit delectus exercitationem reiciendis? Sunt, dolore ut cum, quod aliquam porro et similique, deleniti voluptatum neque maiores sed! Optio, fugit ipsam sequi quae incidunt pariatur hic deleniti! Eos atque vel praesentium delectus necessitatibus illo, iste officia modi nobis, est voluptatem sequi a quo quae quidem labore architecto magni aspernatur? Doloremque, libero fugiat accusantium asperiores aspernatur officiis numquam velit ullam dolore aliquam vitae tenetur, eaque vel deleniti! Eum magni officiis nihil?</p>
</div>
How do I stop the Jump without removing the content?
I also tried playing with variations of display and visibility to hide the elements.

As stated in the previous answers, your content jumps because you are animating the width of the container. The content (text) within it, will always try to fit, and this is why your have this effect.
In order to prevent this, do not animate the width, but animate the position.
#sidebar{
width: 0;
height: 100vh;
position: absolute;
top: 0;
right:0;
z-index: 1;
transition: transform .5s; /* modified */
background: green;
transform: translateX(120%); /* added */
}
#sidebar.showSidebar {
transform: translateX(0);
}
Remove this part from your code:
#sidebar p{
display: none; /* need to remove this from your code */
}
You might also need to add overflow-x: hidden to the Parent Element of your sidebar (in this case, the <body>), if horizontal scrollbars appear.
And this is the only JS required:
document.getElementById('btn').addEventListener('click', function(){
document.getElementById('sidebar').classList.add('showSidebar');
});
To hide the .sidebar again, you just need to remove the .showSidebar class :
document.getElementById('sidebar').classList.remove('showSidebar');
Using transform: translate() within CSS transitions is more efficient than using 'width' or 'right', as it doesn't cause layout/reflow (recalculation of the whole elements' size and/or position). It, along with opacity, are the only two transitionable properties that only affect the 'composition' part of the rendering of the webpage.
high-performance-animations article - the exact same principles apply to transitions also.

The "jump" is caused by the fact that when you click on the button, the offset width of your text can't really fit in the div that is growing. In other words, there is an instant, where the div that contains the text is something like 1px while your text is really bigger. So, there is many solutions including:
Hide the text overflow (it may work but the text will still "dance" while the div is growing)
I was thinking of something like :
#sidebar p{
display: none;
overflow: hidden;
}
Put a delay before displaying the text so the div will have enough time to be wide enough for the text :)
document.getElementById('btn').addEventListener('click', ()=>{
let sidebar = document.getElementById('sidebar');
sidebar.style.width = '40vw';
let div = document.querySelector('#sidebar div');
let text = div.children[0].innerText;
div.children[0].innerText = "";
div.style.display = 'block';
setTimeout(()=>{
div.children[0].innerText = text;
}, 500)
})
*{
margin: 0;
padding: 0;
}
#main{
display: flex;
}
#sec1{
width: 60vw;
height: 100vh;
background: red;
}
#sec2{
width: 40vw;
height: 100vh;
background-color: #bdd9d4;
}
#sidebar{
width: 0;
height: 100vh;
position: absolute;
top: 0;
right:0;
z-index: 1;
transition: width .5s;
background: green;
}
#sidebar div{
display: none;
}
<div id="main">
<div id="sec1">
<button id="btn">Open Sidebar</button>
</div>
<div id="sec2">
</div>
</div>
<div id="sidebar">
<div>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Laboriosam sapiente amet similique? Architecto dolor, nulla neque natus incidunt labore dignissimos? Mollitia reprehenderit rerum unde iusto, consequatur explicabo molestiae cumque vero!</p>
</div>
</div>

I've got a much more elegant solution than my previous attempt which I deleted as it caused an unwanted scrollbar. Simply add a child DIV for the sidebar contents with a fixed width and put overflow hidden on the sidebar. The sidebar can grow in width revealing the fixed width content which is hidden by the overflow. Any good?
document.getElementById('btn').addEventListener('click', ()=>{
let sidebar = document.getElementById('sidebar');
sidebar.style.width = '40vw';
let p = document.querySelector('#sidebar p');
p.style.display = 'block';
})
*{
margin: 0;
padding: 0;
}
#main{
display: flex;
}
#sec1{
width: 60vw;
height: 100vh;
background: red;
}
#sec2{
width: 40vw;
height: 100vh;
background-color: #bdd9d4;
}
#sidebar{
width: 0;
height: 100vh;
position: absolute;
overflow: hidden;
top: 0;
right:0;
z-index: 1;
transition: width .5s;
background: green;
}
#sidebar-contents {
width: 40vw;
}
#sidebar p{
display: none;
}
<div id="main">
<div id="sec1">
<button id="btn">Open Sidebar</button>
</div>
<div id="sec2">
</div>
</div>
<div id="sidebar">
<div id="sidebar-contents">
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Laboriosam sapiente amet similique? Architecto dolor, nulla neque natus incidunt labore dignissimos? Mollitia reprehenderit rerum unde iusto, consequatur explicabo molestiae cumque vero!</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Reprehenderit doloremque sit delectus exercitationem reiciendis? Sunt, dolore ut cum, quod aliquam porro et similique, deleniti voluptatum neque maiores sed! Optio, fugit ipsam sequi quae incidunt pariatur hic deleniti! Eos atque vel praesentium delectus necessitatibus illo, iste officia modi nobis, est voluptatem sequi a quo quae quidem labore architecto magni aspernatur? Doloremque, libero fugiat accusantium asperiores aspernatur officiis numquam velit ullam dolore aliquam vitae tenetur, eaque vel deleniti! Eum magni officiis nihil?</p>
</div>
</div>

Categories

Resources