So if you follow along in the video, I refer to this blog post for you to enter code at ...
So if you follow along in the video, I refer to this blog post for you to enter code at ...
So if you follow along in the video, I refer to this blog post for you to enter code at ...
So if you follow along in the video, I refer to this blog post for you to enter code at ...
So if you follow along in the video, I refer to this blog post for you to enter code at certain points, so below is everything you will need!
You can download the complete template here
Some Mask Examples I Used In The Tutorial
Website to free videos to make into gifs
Online Gif Creator
The Following are the css class names I used in the tutorial:
custom-viewport-mask-image
The Following code goes into the Slider Container (reboot-slider):
<script>
(function($) {
$(document).ready(function() {
const $maskImages = $('.custom-viewport-mask-image');
$maskImages.css({
'opacity': '0',
'transition': 'opacity 0.3s ease'
});
const observer = new IntersectionObserver((entries) => {
entries.forEach(entry => {
if (entry.isIntersecting) {
const $target = $(entry.target);
const $elementorElement = $target.find('.elementor-widget-container');
$target.css('opacity', '1');
const backgroundImage = $elementorElement.css('background-image');
if (backgroundImage && backgroundImage !== 'none') {
let cleanUrl = backgroundImage.replace(/^url\(["']?/, '').replace(/["']?\)$/, '');
cleanUrl = cleanUrl + `?t=${Date.now()}`;
$target.css({
'mask-image': `url(${cleanUrl})`,
'mask-size': 'cover',
'mask-repeat': 'no-repeat',
'mask-position': 'center',
});
}
observer.unobserve(entry.target);
}
});
}, {
threshold: 0.2
});
$maskImages.each(function() {
observer.observe(this);
});
});
})(jQuery);
</script>