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>
Related
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>
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; }
}
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;
}
I am coding a loading screen with a div that slowly moves out of the screen. But it is twitching for reasons I do not know.
This is the code I am talking about:
function fadeLoadingScreen() {
$('#loadingBanner').animate({
bottom: "-15%",
opacity: 0
},
2000,
function() {
$('#loadingDiv').hide();
});
}
$(document).ready(function() {
fadeLoadingScreen();
});
#loadingDiv {
position: fixed;
width: 100%;
height: 100%;
background-color: white;
z-index: 10000;
}
#loadingBanner {
background-image: url("http://images.gofreedownload.net/thumps/crown-pattern-banner-erected-europeanstyle-vector-89228.jpg");
background-size: auto 100%;
background-repeat: repeat-x;
position: fixed;
bottom: 0;
height: 15%;
width: 100%;
z-index: 10000;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="loadingDiv">
<div id="loadingBanner"></div>
</div>
https://jsfiddle.net/71btwr2j/
can anyone explain this behavior?
HTML:
<div id="lowerLayer">
<div id="positionLayer">
<div id="imageLayer">
<div id="imageHolder" style="background-image: url('/Images/Loading/ajax-loader.gif');">
</div>
</div>
</div>
</div>
CSS:
#lowerLayer
{
position: fixed;
top: 0px;
left: 0px;
right: 0px;
bottom: 0px;
width: 100%;
height: 100%;
background-color: Green;
cursor: help;
}
#positionLayer
{
position: relative;
margin-top: 80px;
width: 100%;
background-color: Red;
}
#imageLayer
{
position: relative;
width: 450px;
height: 400px;
margin: auto;
background-color: Blue;
background-image: url('../Images/Large-image-holder.png');
}
#imageHolder
{
position: absolute;
left: 25px;
top: 25px;
width: 400px;
height: 300px;
line-height: 300px;
background-position: center;
background-repeat: no-repeat;
background-color: Aqua;
}
JQuery:
$(document).ready(function() {
$("#lowerLayer").click(function() {
$(this).fadeTo("fast", 0, function() {
$(this).hide(0);
});
});
});
});
Edit:
the problem im having us that the click event seems to be applied to all sub divs i just want it to apply to "#lowerLayer"
I think this will solve your problem:
$(document).ready(function() {
$("#lowerLayer").click(function(e) {
// Return if it's a child that's clicked:
if (e.target !== this) {return;}
// Otherwise continue:
$(this).fadeTo("fast", 0, function() {
$(this).hide(0);
});
});
});
});
Leaving event delegation and bubbling aside, since I don't think it is relevant to the actual problem here.
The jQuery hide() method applies display: none to the styles for an element. If an element is not displayed, then none of its descendants are either. Likewise, fadeTo() reduces the opacity, which also has an effect on the descendents of an element.