Elementor COOL Image Scrolling Effect with Text Reveal

CSS Class Used In the Video

aka-scroll-effect
aka-scroll-effect-images
aka-scroll-effect-content
aka-scroll-effect-text

Code Snippet for Image Scrolling Effect:

<style>
body{
    --smooth-scroll: true;
}
body,
[data-elementor-type="wp-page"]{
    overflow-x: hidden;
}

.aka-scroll-effect-images .elementor-widget-image,
.aka-scroll-effect-images img{
    max-width: unset !important;
}

html.elementor-html .aka-scroll-effect-content{
    z-index: 100;
}

.aka-scroll-effect-content > .elementor-element:not(.aka-scroll-effect-text) > *{
    opacity: 0;
    transform: translateY(50%);
    transition: 0.6s;
}

.aka-scroll-effect-text p:last-child{
    margin: 0;
}

.aka-scroll-effect-content .aka-scroll-effect-text .word{
    display: inline-block;
    overflow: hidden;
}

.aka-scroll-effect-content .aka-scroll-effect-text .inner-word{
    display: inline-block;
    transform: translateY(100%);
    transition: all 0.6s ease calc(var(--delay)*0.08s);
}

html.elementor-html .aka-scroll-effect-content > .elementor-element > *,
.aka-scroll-effect-content > .elementor-element.reveal > *,
.aka-scroll-effect-content .aka-scroll-effect-text.reveal .inner-word{
    opacity: 1;
    transform: translateY(0);
}

@media(max-width: 767px){
.aka-scroll-effect-images .elementor-widget-image{
    transition: 0.8s;
}
.aka-scroll-effect-images > .e-con.moved > .e-con:nth-child(1) .elementor-widget-image,
.aka-scroll-effect-images > .e-container.moved > .e-container:nth-child(1) .elementor-widget-image{
    transform: translateX(-140px);
}
.aka-scroll-effect-images > .e-con.moved > .e-con:nth-child(2) .elementor-widget-image,
.aka-scroll-effect-images > .e-container.moved > .e-container:nth-child(2) .elementor-widget-image{
    transform: translateX(140px);
}
}
</style>

<script>
if (typeof jQuery == "undefined") {
    var script = document.createElement("script");
    script.src = "https://code.jquery.com/jquery-2.2.4.min.js";
    document.head.appendChild(script);
}
</script>

<script src="https://unpkg.com/[email protected]/dist/lenis.min.js"></script>

<script>
(function($){

if(!window.akaNonce){

window.akaNonce = true;

var selector = '.aka-scroll-effect',
    contents = [],
    windowHeight,
    windowHalfHeight,
    windowWidth;

function init(){
    $(selector).each(function(i){
        contents[i] = $(this).find('.aka-scroll-effect-content').children();
    });
}

function updateCardsPosition(){
    var windowTop = $(window).scrollTop();

    $(selector).each(function(){
        $(this).find('.aka-scroll-effect-images').each(function(i){

            var container = $(this),
            containerTop = container.offset().top,
            containerHeight = container.outerHeight(),
            startPoint = (i === 0) ? containerTop - windowHalfHeight : containerTop - windowHeight,
            endPoint = containerTop + containerHeight - windowHalfHeight,
            progress = (windowTop - startPoint) / (endPoint - startPoint);

            progress = Math.max(0, Math.min(1, progress));

            if(windowWidth > 767){

                var config = {
                    leftX: [-600, -700, -300],
                    rightX: [600, 700, 300],
                    leftRotate: [-20, -15, -25],
                    rightRotate: [20, 15, 25],
                    y: [80, -120, -250]
                };

                container.children('.e-con, .e-container').each(function(index){

                    var i = index % config.leftX.length,
                    leftCard = $(this).find('.elementor-widget-image').eq(0),
                    rightCard = $(this).find('.elementor-widget-image').eq(1);

                    leftCard.css('transform', 
                        `translate(${progress * config.leftX[i]}px, ${progress * config.y[i]}px) rotate(${progress * config.leftRotate[i]}deg)`
                    );

                    rightCard.css('transform', 
                        `translate(${progress * config.rightX[i]}px, ${progress * config.y[i]}px) rotate(${progress * config.rightRotate[i]}deg)`
                    );
                });

            } else {

                container.children('.e-con, .e-container').each(function(){
                    var c = $(this),
                    image = c.find('.elementor-widget-image'),
                    top = c[0].getBoundingClientRect().top;

                    image.removeAttr('style');
                    c.toggleClass('moved', top < windowHalfHeight);
                });
            }
        });
    });
}

function wrapWords(){
    $('.aka-scroll-effect-text p').each(function(){

        var el = $(this),
        text = el.text(),
        words = text.match(/\S+|\s+/g) || [],
        html = '';

        words.forEach(function(w){
            if(/\s+/.test(w)){
                html += w;
            } else {
                html += `<span class="word"><span class="inner-word">${w}</span></span>`;
            }
        });

        el.html(html);

        var spans = el.find('.word'),
        prevTop = null,
        delay = 0;

        spans.each(function(){
            var top = $(this).offset().top;
            delay = prevTop === null ? 0 : (top > prevTop ? delay + 1 : delay);
            this.style.setProperty('--delay', delay);
            prevTop = top;
        });
    });
}

function revealContent(){
    $(selector).each(function(i){
        contents[i].each(function(){
            var content = $(this),
            top = content[0].getBoundingClientRect().top,
            trigger = windowWidth > 767 ? 0.85 : 0.65;

            content.toggleClass('reveal', top < windowHeight * trigger);
        });
    });
}

$(document).ready(function(){

    init();
    wrapWords();

    // 🔥 FAST + SMOOTH (optimized Lenis)
    if(getComputedStyle(document.body).getPropertyValue('--smooth-scroll') === 'true'){
        var lenis = new Lenis({
            duration: 0.6,
            easing: (t) => 1 - Math.pow(1 - t, 3),
            smoothWheel: true,
            smoothTouch: false
        });

        function raf(time){
            lenis.raf(time);
            requestAnimationFrame(raf);
        }

        requestAnimationFrame(raf);
    }

});

$(window).on('load scroll resize',function(){
    windowHeight = $(window).height();
    windowHalfHeight = windowHeight / 2;
    windowWidth = $(window).width();

    updateCardsPosition();
    revealContent();
});

$(window).on('load resize', wrapWords);

}

})(jQuery);
</script>