I'm trying to learn how to use the parallax effect using simple JavaScript and CSS.
my JavaScript is :
window.addEventListener('scroll', function(){
document.getElementById("second").style.left = window.scrollY + 'px';
document.getElementById("third").style.left = window.scrollY + 'px';
})
from my understanding of things, it should make the element called third and second scroll left by the same value as the vertical scroll. But it doesn't work and I can't find what's the problem here.
My whole code is:
* {
scroll-behavior: smooth;
}
body {
size: 100%;
margin-top: 0px;
margin-left: 0px;
}
section {
position: relative;
width: 100%;
height: 100vh;
padding: 100px;
display: flex;
justify-content: center;
align-items: center;
}
section::before {
content: '';
position: absolute;
bottom: 0;
width: 100%;
height: 100px;
background-image: linear-gradient(to bottom right, #350529, #45392c);
z-index: 100;
}
section img {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
object-fit: cover;
}
section img#sixth {
z-index: 10;
}
#text {
position: absolute;
color: white;
white-space: nowrap;
font-size: 7.5vw;
z-index: 9;
}
<section>
<img src="Plan-parallax-1.png" id="first">
<img src="Plan-parallax-2.png" id="second">
<img src="Plan-parallax-3.png" id="third">
<img src="Plan-parallax-4.png" id="fourth">
<img src="Plan-parallax-5.png" id="fifth">
<h2 id="text">Monde parallele</h2>
<img src="Plan-parallax-6.png" id="sixth">
</section>
<script>
window.addEventListener('scroll', function() {
document.getElementById("second").style.left = window.scrollY + 'px';
document.getElementById("third").style.left = window.scrollY + 'px';
})
</script>
If your code is simplified down to just focus on the question of moving an element based on scroll, it works fine. Example included
window.addEventListener('scroll', function() {
document.getElementById("second").style.left = window.scrollY + 'px';
})
* {
scroll-behavior: smooth;
}
section {
position: relative;
width: 100%;
height: 100vh;
padding: 100px;
display: flex;
justify-content: center;
align-items: center;
}
section::before {
content: '';
position: absolute;
bottom: 0;
width: 100%;
height: 100px;
background-image: linear-gradient(to bottom right, #350529, #45392c);
z-index: 100;
}
section img {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
object-fit: cover;
}
<!DOCTYPE html>
<html>
<body style="size: 100%; margin-top: 0px; margin-left: 0px;">
<section>
<img src="https://picsum.photos/600" id="second">
</section>
</body>
</html>
Related
I want to set the animation of the element while scrolling down the page. I want to use only JavaScript to achieve that.
I wanted it to work like this: There is no animation, but when you scroll down to second container, the JS sets the animation and the content inside the container is shown.
The problem is, when I load the page, there is no animation (That's good). When I scroll down, there is still no animation (That's bad!) but when I refresh the page with F5 while being on the bottom of the site, the animation shows up but still not showing my element with blue background.
Here is my full code for this part:
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
}
.main {
display: block;
margin: auto;
height: 1000px;
width: 100%;
background-color: grey;
}
.main-inner1 {
display: block;
margin: auto;
height: 600px;
width: 100%;
background-color: orange;
}
.main-inner2 {
display: block;
margin: auto;
height: 600px;
width: 100%;
background-color: green;
}
.main-inner2-container {
display: block;
position: relative;
height: 50px;
width: 200px;
overflow: hidden;
margin: auto;
}
.main-inner2-content1 {
display: block;
position: absolute;
top: 100%;
margin: auto;
height: 50px;
width: 200px;
background-color: blue;
}
#keyframes FadeIn {
{ from: top: 100%; }
{ to: top: 0; }
}
</style>
<script>
document.addEventListener("DOMContentLoaded", function(){
var y = window.scrollY;
var x = document.querySelector(".main-inner2-container").getBoundingClientRect().top;
if (y >= x) {
document.querySelector(".main-inner2-content1").style.animation = "FadeIn 1s linear 0s 1 forwards";
}
});
</script>
<body>
<div class="main">
<div class="main-inner1"></div>
<div class="main-inner2">
<div class="main-inner2-container">
<div class="main-inner2-content1">
</div>
</div>
</div>
</div>
I'm learning JS so it's important to me to not use any libraries :P
Thanks a lot
I modified your code a bit. You were listening for DOMContentLoaded event which is fired only once (after the DOM is completely loaded), instead of window scroll event.
window.onscroll = function() {
var y = window.scrollY;
var x = document.querySelector(".main-inner2-container").getBoundingClientRect().top;
if (y >= x) {
document.querySelector(".main-inner2-content1").style.animation = "FadeIn 1s linear 0s 1 forwards";
}
}
* {
margin: 0;
padding: 0;
}
.main {
display: block;
margin: auto;
height: 1000px;
width: 100%;
background-color: grey;
}
.main-inner1 {
display: block;
margin: auto;
height: 600px;
width: 100%;
background-color: orange;
}
.main-inner2 {
display: block;
margin: auto;
height: 600px;
width: 100%;
background-color: green;
}
.main-inner2-container {
display: block;
position: relative;
height: 50px;
width: 200px;
overflow: hidden;
margin: auto;
}
.main-inner2-content1 {
display: block;
position: absolute;
top: 100%;
margin: auto;
height: 50px;
width: 200px;
background-color: blue;
}
#keyframes FadeIn {
from { top: 100%; }
to {top: 0; }
}
<div class="main">
<div class="main-inner1"></div>
<div class="main-inner2">
<div class="main-inner2-container">
<div class="main-inner2-content1">
</div>
</div>
</div>
</div>
Also, your syntax for defining keyframe was incorrect. It is
#keyframes FadeIn {
from { top: 100%; }
to {top: 0; }
}
And not
#keyframes FadeIn {
{ from: top: 100%; }
{ to: top: 0; }
}
I want to add a preloader to my website and I have this code:
<div class="loader" ></div>
<script>
document.addEventListener('DOMContentLoaded', function() {
jQuery(function($){
$('.loader').fadeOut('slow');
}); });
</script>
<style>
.elementor-element-edit-mode .loader{
display: none;
}
.loader {
position: fixed;
left: 0px;
top: 0px;
width: 100%;
height: 100%;
z-index: 9999;
background: url('http://ibiza-bar.co.il/wp-content/uploads/2020/04/ibiza-logo.png') 50% 50% no-repeat #fff;
}
</style>
Instead of this simple fadeout effect, I want it to look like curtains closing, just like the following example:
Any idea how to achieve this unique fadeout effect based on the code I have?
Thank you!
Cover the background with a centered white box and let it collapse to 0 width.
setTimeout(() => {
$("#loader .logo").animate({ opacity: 0 }, 1000);
$("#loader .cover").animate({ width: "0%" }, 1000, () => {
$("#loader").hide(); // When animation is complete hide the element.
});
}, 1500);
#bg {
background: url('http://placekitten.com/630/195');
width: 630px;
height: 195px;
position: absolute;
}
#loader {
position: fixed;
height: 100%;
width: 100%;
display: flex;
justify-content: center;
align-items: center;
}
#loader .logo {
background: url('http://ibiza-bar.co.il/wp-content/uploads/2020/04/ibiza-logo.png');
background-repeat: no-repeat;
background-size: contain;
position: absolute;
width: 150px;
height: 150px;
}
#loader .cover {
background: #fff;
width: 100%;
height: 100%;
position: absolute;
}
body { margin: 0 }
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="bg"></div>
<div id="loader">
<div class="cover"></div>
<div class="logo"></div>
</div>
So i am trying to build a scroll indicator using 3 div elements. All code (meaning the 3 div HTML,CSS,JS) seems to work by itself in codepen.io but when i am using Atom with the rest or my project it seems to stop working.
I tried putting the 3 div's first before everything else. All the way to the end. Using other divs as parents but nothing seems to work.
window.onscroll = function() {myFunction()};
function myFunction() {
var winScroll = document.body.scrollTop ||
document.documentElement.scrollTop;
var height = document.documentElement.scrollHeight -
document.documentElement.clientHeight;
var scrolled = (winScroll / height) * 100;
document.getElementById("myBar").style.height = scrolled + "%";
}
*{
padding: 0;
margin: 0
}
/* Global Stylings */
/* ID and Class Stylings */
#containter {
width: 100%;
height: 100vh;
scroll-behavior: smooth;
overflow: auto;
scroll-snap-type: y mandatory;
}
#Landing{
display: flex;
justify-content: space-around;
align-items: center;
background-color: ;
width: 100%;
height: 100vh;
}
#projects {
background-color: ;
width: 100%;
height: 100vh;
}
#gallery {
background-color: ;
width: 100%;
height: 100vh;
}
#logo{
width: 30em;
height: 30em;
}
.scroll {
scroll-snap-align: start;
}
.scrollindicator {
position: fixed;
top: 0;
z-index: -1;
width: 100%;
height: 100%;
background-color: #f1f1f1;
}
.progress-container {
width: 8px;
height: 100%;
background: #ccc;
}
/* The progress bar (scroll indicator) */
.progress-bar {
height: 0%;
background: #4caf50;
width: 8px;
<div id="containter" class="snap">
<div class="progress-container">
<div class="progress-bar" id="myBar"></div>
</div>
</div>
<div id="Landing" class="scroll">
<img id="logo" src="AC-Logo.png" alt="Logo">
</div>
<div id="projects" class="scroll">
</div>
<div id="gallery" class="scroll">
</div>
</div>
<script src="scroll.js">
</script>
</body>
The div ID= myBar should show a progress of scrolling throughout the whole page and should be visible at all times.
Your css styling was wrong. Check out the snippet!
window.onscroll = function() {myFunction()};
function myFunction() {
var winScroll = document.body.scrollTop ||
document.documentElement.scrollTop;
var height = document.documentElement.scrollHeight -
document.documentElement.clientHeight;
var scrolled = (winScroll / height) * 100;
document.getElementById("myBar").style.height = scrolled + "%";
}
*{
padding: 0;
margin: 0
}
/* Global Stylings */
/* ID and Class Stylings */
#containter {
width: 100%;
height: 100vh;
scroll-behavior: smooth;
overflow: auto;
scroll-snap-type: y mandatory;
position: fixed; // Make the bar stick to the left of the screen
}
#Landing{
display: flex;
justify-content: space-around;
align-items: center;
background-color: ;
width: 100%;
height: 100vh;
}
#projects {
background-color: ;
width: 100%;
height: 100vh;
}
#gallery {
background-color: ;
width: 100%;
height: 100vh;
}
#logo{
width: 30em;
height: 30em;
}
.scroll {
scroll-snap-align: start;
}
.scrollindicator {
top: 0;
z-index: -1;
width: 100%;
height: 100%;
background-color: #f1f1f1;
}
.progress-container {
width: 8px;
height: 100%;
position: fixed;
}
/* The progress bar (scroll indicator) */
.progress-bar {
height: 0%;
background: #ccc; // Set color to the actual bar that changes height
width: 8px;
<div id="containter" class="snap">
<div class="progress-container">
<div class="progress-bar" id="myBar"></div>
</div>
</div>
<div id="Landing" class="scroll">
<img id="logo" src="AC-Logo.png" alt="Logo">
</div>
<div id="projects" class="scroll">
</div>
<div id="gallery" class="scroll">
</div>
<script src="scroll.js">
</script>
Add position: fixed to your class progress-container .
Edit : scroll-snap-type wasn't working because your elements weren't included in the container having the property scroll-snap-type: y mandatory; . So I added everything in 'containter', making that css property work again.
Had to change a bit your Javascript so the custom scrollbar should work again.
function myFunction() {
var elem = document.getElementById('containter');
var winScroll = elem.scrollTop;
var height = elem.scrollHeight - document.documentElement.clientHeight;
var scrolled = (winScroll / height) * 100;
document.getElementById("myBar").style.height = scrolled + "%";
}
*{
padding: 0;
margin: 0
}
/* Global Stylings */
/* ID and Class Stylings */
#containter {
width: 100%;
height: 100vh;
scroll-behavior: smooth;
overflow-y: scroll;
scroll-snap-type: y mandatory;
}
#Landing{
display: flex;
justify-content: space-around;
align-items: center;
background-color: red;
width: 100%;
height: 100vh;
}
#projects {
background-color: blue;
width: 100%;
height: 100vh;
}
#gallery {
background-color: pink;
width: 100%;
height: 100vh;
}
#logo{
width: 30em;
height: 30em;
}
.scroll {
scroll-snap-align: start;
}
.scrollindicator {
position: fixed;
top: 0;
z-index: -1;
width: 100%;
height: 100%;
background-color: #f1f1f1;
}
.progress-container {
width: 8px;
height: 100%;
background: #ccc;
position: fixed;
}
/* The progress bar (scroll indicator) */
.progress-bar {
height: 0%;
background: #4caf50;
width: 8px;
}
<body>
<div onscroll="myFunction()" id="containter" class="snap">
<div class="progress-container">
<div class="progress-bar" id="myBar"></div>
</div>
<div id="Landing" class="scroll">
<img id="logo" src="AC-Logo.png" alt="Logo">
</div>
<div id="projects" class="scroll"></div>
<div id="gallery" class="scroll"></div>
</div>
<script src="scroll.js"></script>
</body>
I'm trying to make a simple scroll left and right div on hover. I'm really not sure what I'm doing wrong, I hover, but it only moves the 50 specified in the if statement. Do I need to add some kind of loop while I'm still hovering? Any help would be greatly appreciated.
Basically, I want to be able to hover over the two black boxes right and left and while it's hovered move right or left, when I remove the mouse it should stop.
$("#left").hover(function() {
var leftPos = $('#wrapper').scrollLeft();
$("#wrapper").animate({
scrollLeft: leftPos - 50
}, 1);
});
$("#right").hover(function() {
var leftPos = $('#wrapper').scrollLeft();
$("#wrapper").animate({
scrollLeft: leftPos + 50
}, 1);
});
html,
body {
background-color: #eeeeee;
margin: 0;
overflow-x: scroll;
overflow-y: hidden;
}
#left {
position: absolute;
width: 10vw;
height: 100vh;
top: 0;
left: 0;
z-index: 1;
background-color: black;
}
#right {
position: absolute;
width: 10vw;
height: 100vh;
top: 0;
right: 0;
z-index: 1;
background-color: black;
}
#wrapper {
width: 100%;
height: 100vh;
white-space: nowrap;
overflow-y: hidden;
overflow-x: scroll;
}
#inner_wrap {
width: 4000px;
height: 100vh;
align-items: center;
display: flex;
}
#firstcontent {
align-items: center;
display: flex;
vertical-align: middle;
color: white;
float: left;
margin-left: 20vw;
width: 400px;
height: 250px;
background-color: #2d2d2d;
}
.thumbone {
width: 400px;
height: 250px;
background-color: lightgrey;
display: inline-block;
}
.thumbtwo {
width: 400px;
height: 250px;
background-color: grey;
display: inline-block;
}
<script src="https://corporate3.bdjobs.com/js/jquery.min.js"></script>
<div id="left"></div>
<div id="right"></div>
<div id="wrapper">
<div id="inner_wrap">
<div id="firstcontent">hover or scroll</div>
<div class="thumbone"></div>
<div class="thumbtwo"></div>
<div class="thumbone"></div>
<div class="thumbtwo"></div>
<div class="thumbone"></div>
<div class="thumbtwo"></div>
<div class="thumbone"></div>
<div class="thumbtwo"></div>
</div>
</div>
Link to script
jsfiddle
[also a side note, why does this work only on jsfiddle and no where else?]
Your issue is because the mouseenter and mouseleave events (which underpin the hover() logic) only fire once, when the mouse enters/leaves the targeted element. If you want to repeatedly perform an action whilst the element is over those elements you'll need to implement your own logic.
To achieve this you can use an interval within the mouseenter handler of the hover() to repeatedly shift the scroll position of the required element. Then in the mouseleave you can clear that timer.
Also note that you can DRY up your code by using a common class on both elements along with a data attribute to govern the movement increment per tick of the interval. Try this:
var timer;
$('.hover-scroll').hover(function() {
var increment = $(this).data('pos');
timer = setInterval(function() {
var leftPos = $("#wrapper").scrollLeft();
$("#wrapper").animate({
scrollLeft: leftPos + increment
}, 1);
}, 50);
}, function() {
clearInterval(timer);
});
html,
body {
background-color: #eeeeee;
margin: 0;
overflow-x: scroll;
overflow-y: hidden;
}
#left {
position: absolute;
width: 10vw;
height: 100vh;
top: 0;
left: 0;
z-index: 1;
background-color: black;
}
#right {
position: absolute;
width: 10vw;
height: 100vh;
top: 0;
right: 0;
z-index: 1;
background-color: black;
}
#wrapper {
width: 100%;
height: 100vh;
white-space: nowrap;
overflow-y: hidden;
overflow-x: scroll;
}
#inner_wrap {
width: 4000px;
height: 100vh;
align-items: center;
display: flex;
}
#firstcontent {
align-items: center;
display: flex;
vertical-align: middle;
color: white;
float: left;
margin-left: 20vw;
width: 400px;
height: 250px;
background-color: #2d2d2d;
}
.thumbone {
width: 400px;
height: 250px;
background-color: lightgrey;
display: inline-block;
}
.thumbtwo {
width: 400px;
height: 250px;
background-color: grey;
display: inline-block;
}
<script src="https://corporate3.bdjobs.com/js/jquery.min.js"></script>
<div id="left" class="hover-scroll" data-pos="-50"></div>
<div id="right" class="hover-scroll" data-pos="50"></div>
<div id="wrapper">
<div id="inner_wrap">
<div id="firstcontent">hover or scroll</div>
<div class="thumbone"></div>
<div class="thumbtwo"></div>
<div class="thumbone"></div>
<div class="thumbtwo"></div>
<div class="thumbone"></div>
<div class="thumbtwo"></div>
<div class="thumbone"></div>
<div class="thumbtwo"></div>
</div>
</div>
If you want to speed up or slow down the scroll, change the delay on the interval
When I have loaded my page my containers: '.lightbox-prev, .lightbox-next' load however I only want them to be visible when the '.lightbox-trigger' is clicked.
My HTML:
<div class="lightboxbg"></div>
<div class="lightbox-prev"></div>
<div class="lightbox-next"></div>
<div class="lightbox"></div>
My CSS:
div.lightbox{
position: absolute;
top: 25%;
left: 45%;
background: center no-repeat #fff;
width: 400px;
height: 600px;
padding: 10px;
z-index: 1001;
display: none;
}
div.directionslightbox{
position: absolute;
top: 10%;
left:18%;
background:url("../Map_Background_Web.png"); center;
background-repeat: no-repeat;
background-size: cover;
width: 65%;
height: 80%;
padding: 10px;
z-index: 1001;
display: none;
}
div.lightboxbg{
position: absolute;
top: 0px;
left: 0px;
width: 100%;
height: 100%;
background: rgba(255,255,255,0.5);
z-index: 1000;
display: none;
}
.lightbox-prev, .lightbox-next {
position: absolute;
top: 0;
bottom: 0;
width: 250px;
background: center no-repeat red;
z-index: 1001;
cursor: pointer;
}
.lightbox-prev {
left: 0;
background-image: url("../previous.png");
}
.lightbox-next {
right: 0;
background-image: url("../next.png");
}
My JS:
<script type="text/javascript">
var lightboxcounter;
$(document).ready(function(){
$('.lightbox-trigger').click(function() {
lightboxcounter = $(this).attr('data-counter');
var image = $(this).attr('data-img')
$('.lightbox').css('background-image', 'url(' + image + ')');
$('.lightboxbg, .lightbox, .lightbox-prev, .lightbox-next').fadeIn(800);
});
$('.lightboxbg').click(function() {
$('.lightboxbg, .lightbox, .lightbox-prev, .lightbox-next').fadeOut(800);
});
$('.lightbox-prev').click(function() {
lightboxcounter--;
$('.lightbox-trigger[data-counter="'+lightboxcounter+'"]').click();
});
$('.lightbox-next').click(function() {
lightboxcounter++;
console.log(lightboxcounter);
$('.lightbox-trigger[data-counter="'+lightboxcounter+'"]').click();
});
});
</script>
If anyone could help, I would most appreciate it, it's been bugging me all day!
Cheers
You are already using fadeIn to display the controls so all you need to do is hide them initially.
Add this to your CSS...
.lightbox-prev, .lightbox-next {
display: none;
}