Credit for the base code goes to Maxime Desrosiers at Element.How >> here <<
Also, this tutorial assumes you have a basic understanding of Elementor Pro and its widgets and containers.
Elementor comes with a fantastic Preloader feature that works on every page of your WordPress site, but what if you want something fancy just on the Homepage? Or a Landing Page? Maybe your site logo and tagline, before the screen fades into your beautiful website?
See an example of this >> here <<.
The code Maxime has generously given to us was perfect right out of the box, but I wanted to use an image and text, rather than an animated GIF. I do love editing in Adobe Suite, but I really just wanted to be able to replace the image and text wherever I like, so I came up with the following.
- Start by adding the HTML Widget to the top of your page.
- Next add the below code. It uses the vanilla-preloader class with two new divs in between for the logo that fades in and out, and then the text that fades in and out.
- You must add your image between the quotations that read YOUR IMAGE HERE.
<div class="vanilla-preloader" >
<img decoding="async" id="image_rrp" src="YOUR IMAGE HERE" alt="Image">
<div id="text_rrp">WE LOVE RABBITS!</div>
</div>
- Next add the following CSS underneath the previous code.
- In this section you can change the font family and adjust the size and color. I also added the @media parameters to change the font size on smaller mobile devices.
- The keyframes control the background animation. Mine lasts 8 seconds.
<style>
.vanilla-preloader {
display: visible;
position: fixed;
left: 0px;
top: 0px;
width: 100%;
height: 100%;
z-index: 9999;
transition: 0.4s opacity;
pointer-events:none;
background: 50% 50% no-repeat #000; /* Change the #000 here to your background color of choice for the preloader fullscreen section */
}
.elementor-editor-active .vanilla-preloader {
display: none;
}
#text_rrp, #image_rrp {
font-family:'Bungee', san-serif;
text-align: center;
color:#fff;
font-size: 40px;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
opacity: 0;
transition: opacity 1s;
}
.vanilla-preloader {
-moz-animation: cssAnimation 0s linear 8s forwards;
/* Firefox */
-webkit-animation: cssAnimation 0s linear 8s forwards;
/* Safari and Chrome */
-o-animation: cssAnimation 0s linear 8s forwards;
/* Opera */
animation: cssAnimation 0s linear 8s forwards;
-webkit-animation-fill-mode: forwards;
animation-fill-mode: forwards;
-moz-animation: fadeOut 1s linear 8s forwards;
/* Firefox */
-webkit-animation: fadeOut 1s linear 8s forwards;
/* Safari and Chrome */
-o-animation: fadeOut 1s linear 8s forwards;
/* Opera */
animation: fadeOut 1s linear 8s forwards;
-webkit-animation-fill-mode: forwards;
animation-fill-mode: forwards;
}
@-webkit-keyframes fadeOut {
0% {opacity: 1;}
100% {opacity: 0;
overflow:hidden;
}
}
@keyframes fadeOut {
0% {opacity: 1;}
100% {opacity: 0;
overflow:hidden;
}
}
@media only screen and (max-width: 600px) {
#text_rrp, #image_rrp {
font-size: 15px;
}
}
</style>
- Now we add the Javascript underneath the CSS that controls the text and image fade.
<script>
const text = document.getElementById('image_rrp');
const image = document.getElementById('text_rrp');
function startAnimation() {
text.style.opacity = 1;
setTimeout(() => {
text.style.opacity = 0;
setTimeout(() => {
image.style.opacity = 1;
setTimeout(() => {
image.style.opacity = 0;
document.body.style.backgroundColor = 'rgba(0, 0, 0, 0)';
}, 2000);
}, 2000);
}, 2000);
}
window.onload = startAnimation;
</script>
If you run into issues, you might want to check which plugins are interfering, or if javascript or jquery in another area of the page is interfering.
