function element_how_premium_video_preloader() {
if (!is_front_page() ) {
return; /* run on front page only */
}
if (\Elementor\Plugin::$instance->editor->is_edit_mode() || \Elementor\Plugin::$instance->preview->is_preview_mode() ) {
return; /* don't run while in the editor */
}
?>
<div class="preloader_container">
<svg class="preloader_animated_logo" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 196 119.1"><path d="M10.1,114.1v1.7c0,2.1-1,3.3-3,3.3s-3-1.2-3-3.3v-6.7c0-2.1,1-3.3,3-3.3s3,1.2,3,3.3v1.3H8.2 v-1.4c0-0.9-0.4-1.3-1.1-1.3s-1.1,0.3-1.1,1.3v7c0,0.9,0.4,1.3,1.1,1.3s1.1-0.3,1.1-1.3v-1.8L10.1,114.1z"></path><path d="M20.8,109.1c0-2.1,1.1-3.3,3.1-3.3s3.1,1.2,3.1,3.3v6.7c0,2.1-1.1,3.3-3.1,3.3 s-3.1-1.2-3.1-3.3V109.1z M22.9,116c0,0.9,0.4,1.3,1.1,1.3s1.1-0.4,1.1-1.3v-7c0-0.9-0.4-1.3-1.1-1.3s-1.1,0.3-1.1,1.3V116z"></path><path d="M39.8,109.5L39.8,109.5l0,9.4h-1.8v-13h2.6l2.1,7.8h0V106h1.8v13h-2.1L39.8,109.5z"></path><path d="M58.2,105.8c2,0,3,1.2,3,3.3v0.4h-1.9v-0.5c0-0.9-0.4-1.3-1-1.3s-1,0.3-1,1.3 c0,0.9,0.4,1.7,1.7,2.8c1.7,1.5,2.2,2.6,2.2,4.1c0,2.1-1,3.3-3,3.3s-3-1.2-3-3.3V115h1.9v0.9c0,0.9,0.4,1.3,1.1,1.3 s1.1-0.3,1.1-1.3c0-0.9-0.4-1.6-1.7-2.8c-1.7-1.5-2.2-2.6-2.2-4.1C55.2,107,56.3,105.8,58.2,105.8"></path><path d="M71.5,106h6.3v1.8h-2.1v11.1h-2v-11.1h-2.1V106z"></path><path d="M92.6,118.9c-0.2-0.5-0.2-1.1-0.2-1.6v-2c0-1.2-0.4-1.7-1.3-1.7h-0.7v5.3h-2v-13h3.1 c2.1,0,3,1,3,3v1c0.1,1.1-0.4,2.1-1.3,2.6v0c1,0.4,1.3,1.4,1.3,2.8v2c0,0.5,0,1.1,0.2,1.6L92.6,118.9z M90.3,107.8v4h0.8 c0.8,0,1.2-0.3,1.2-1.4v-1.3c0-0.9-0.3-1.3-1-1.3L90.3,107.8z"></path><path d="M107.3,106v10c0,0.9,0.4,1.3,1,1.3s1.1-0.3,1.1-1.3v-10h1.9v9.9c0,2.1-1,3.3-3,3.3 s-3-1.2-3-3.3V106H107.3z"></path><path d="M128.3,114.1v1.7c0,2.1-1,3.3-3,3.3s-3-1.2-3-3.3v-6.7c0-2.1,1-3.3,3-3.3s3,1.2,3,3.3v1.3h-1.9 v-1.4c0-0.9-0.4-1.3-1.1-1.3s-1.1,0.3-1.1,1.3v7c0,0.9,0.4,1.3,1.1,1.3s1.1-0.3,1.1-1.3v-1.8L128.3,114.1z"></path><path d="M138.6,106h6.3v1.8h-2.1v11.1h-2v-11.1h-2.1L138.6,106z"></path><rect id="Rectangle_121" x="155.4" y="106" width="2" height="13"></rect><path d="M168.4,109.1c0-2.1,1.1-3.3,3.1-3.3s3.1,1.2,3.1,3.3v6.7c0,2.1-1.1,3.3-3.1,3.3 s-3.1-1.2-3.1-3.3V109.1z M170.5,116c0,0.9,0.4,1.3,1.1,1.3s1.1-0.4,1.1-1.3v-7c0-0.9-0.4-1.3-1.1-1.3s-1.1,0.3-1.1,1.3V116z"></path><path d="M187.4,109.5L187.4,109.5l0,9.4h-1.8v-13h2.6l2.1,7.8h0V106h1.8v13h-2.1L187.4,109.5z"></path><path d="M0,34.4c0-12.8,6.7-20.1,19.1-20.1s19.1,7.3,19.1,20.1v41.6c0,12.8-6.7,20.1-19.1,20.1 S0,88.7,0,75.9V34.4z M12.6,76.7c0,5.7,2.5,7.9,6.5,7.9s6.5-2.2,6.5-7.9V33.6c0-5.7-2.5-7.9-6.5-7.9s-6.5,2.2-6.5,7.9V76.7z"></path><path d="M49.5,11h-11V0h11V11z M46.5,15.2H59v79.9H46.5V15.2z M66.9,11h-11V0h11V11z"></path><path d="M84.8,63.2l-3.9,7.3v24.5H68.4V15.2h12.6v34.6h0.2l16.2-34.6h12.6L92.5,50.8l17.5,44.3H97 L84.8,63.2z"></path><path d="M114,34.4c0-12.8,6.7-20.1,19.1-20.1s19.1,7.3,19.1,20.1v41.6c0,12.8-6.7,20.1-19.1,20.1 S114,88.7,114,75.9V34.4z M126.6,76.7c0,5.7,2.5,7.9,6.5,7.9s6.5-2.2,6.5-7.9V33.6c0-5.7-2.5-7.9-6.5-7.9s-6.5,2.2-6.5,7.9V76.7z"></path><path d="M177.4,14.3c12.2,0,18.5,7.3,18.5,20.1v2.5H184v-3.3c0-5.7-2.3-7.9-6.3-7.9s-6.3,2.2-6.3,7.9 c0,5.8,2.5,10.2,10.7,17.3c10.5,9.2,13.8,15.9,13.8,25c0,12.8-6.4,20.1-18.7,20.1s-18.7-7.3-18.7-20.1V71h11.9v5.7 c0,5.7,2.5,7.8,6.5,7.8s6.5-2.1,6.5-7.8c0-5.8-2.5-10.2-10.7-17.3c-10.5-9.2-13.8-15.9-13.8-25C158.9,21.6,165.2,14.3,177.4,14.3"></path></svg>
</div>
<style>
.preloader_logo_on_page {
opacity: 0;
}
.preloader_nav_icon,
.preloader_nav_item,
.preloader_cta_on_page {
opacity: 0;
transition: opacity 0.6s;
}
.preloader_cta_on_page {
transition: opacity 0.6s 1.9s;
}
.preloader_is_ready .preloader_nav_icon,
.preloader_is_ready .preloader_nav_item,
.preloader_is_ready .preloader_cta_on_page {
opacity: 1;
}
.preloader_image_on_page::after,
.preloader_heading_on_page::after {
content: '';
position: absolute;
width: 100%;
height: 110%;
top: -10%;
left: 0;
background-color: #221E1F;
transition: transform 1.1s cubic-bezier(0.475, 0.000, 0.175, 1.000);
transform-origin: 0% 100%;
z-index: 4;
}
.preloader_is_ready .preloader_image_on_page::after {
transform: scaleX(0);
}
.preloader_is_ready .preloader_heading_on_page::after {
transform: scaleY(0);
transition-delay: 0.9s;
}
.preloader_container {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 9998;
display: flex;
justify-content: center;
align-items: center;
transition: opacity 0.6s;
}
.preloader_animated_logo {
animation: fadeLogoIn 0.4s both;
transform-origin: 0 0;
transition: transform 1.16s cubic-bezier(0.475, 0.000, 0.175, 1.000);
width: 300px;
fill: #a6a097;
z-index: 9998;
}
@keyframes fadeLogoIn {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
</style>
<script>
(function () {
document.documentElement.style.overflow = "hidden";
let shownDelayPassed = false;
let abortPreloader = false;
setTimeout(function () {
shownDelayPassed = true;
}, 700);
/* if window.scrollY > 100, then remove the preloader and add class preloader_is_ready to the documentElement */
setTimeout(function () {
if (window.scrollY > 100) {
let preloader = document.querySelector(".preloader_container");
document.documentElement.classList.add("preloader_is_ready");
preloader.remove();
abortPreloader = true;
document.documentElement.style.removeProperty('overflow');
setTimeout(function () {
let preloader_logo = document.querySelector(".preloader_logo_on_page");
preloader_logo.style.opacity = "1";
}, 300);
}
}, 10);
window.addEventListener("load", function () {
if (abortPreloader) return; /* don't run the preloader if the preloader has been aborted */
let preloader = document.querySelector(".preloader_container");
let preloader_logo = document.querySelector(".preloader_logo_on_page");
let preloader_animated_logo = document.querySelector(".preloader_animated_logo");
let preloader_cta_on_page = document.querySelector(".preloader_cta_on_page");
if (shownDelayPassed) {
animateLogo()
document.documentElement.classList.add("preloader_is_ready");
} else {
setTimeout(function () {
animateLogo()
document.documentElement.classList.add("preloader_is_ready");
}, 700);
}
function animateLogo() {
/* calculate the exact position and width of the preloader_logo , then transform the preloader_animated_logo to the exact position and width */
let preloader_logo_position = preloader_logo.getBoundingClientRect();
let preloader_logo_width = preloader_logo_position.width;
let preloader_logo_top = preloader_logo_position.top;
let preloader_logo_left = preloader_logo_position.left;
let preloader_animated_logo_position = preloader_animated_logo.getBoundingClientRect();
let preloader_animated_logo_width = preloader_animated_logo_position.width;
let preloader_animated_logo_top = preloader_animated_logo_position.top;
let preloader_animated_logo_left = preloader_animated_logo_position.left;
/* calculate to get the scale of the preloader_animated_logo */
let preloader_animated_logo_scale = preloader_logo_width / preloader_animated_logo_width;
/* transform the preloader_animated_logo to the exact position and width */
preloader_animated_logo.style.transform = "translate(" + (preloader_logo_left - preloader_animated_logo_left) + "px, " + (preloader_logo_top - preloader_animated_logo_top) + "px) scale(" + preloader_animated_logo_scale + ")";
}
preloader_animated_logo.addEventListener("transitionend", function () {
setTimeout(function () {
preloader_logo.style.opacity = "1";
document.documentElement.style.removeProperty('overflow');
preloader.remove();
}, 600);
}, { once: true });
});
}());
</script>
<?php
}
add_action('wp_head', 'element_how_premium_video_preloader');
