JSFiddle - React, Tailwind, and code Playground

by Louis Walch

HTML

Scroll Down....

<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>

Slide:
<div data-script="ScrollConditionalAnimate" animate-effect="slide" style="height:250px; width:300px; overflow:hidden; position:relative;">
    <img class="animate" src="http://placekitten.com/600/250" />    
</div>

<br/><br/><br/><br/><br/>

Zoom:

<div data-script="ScrollConditionalAnimate" animate-effect="zoom" style="height:250px; width:300px; overflow:hidden; position:relative;">
    <img class="animate" src="http://placekitten.com/600/250" />    
</div>

<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>

CSS

IMG.animate {
    position:absolute;
    top:0; 
    left:0;
      
}

JavaScript

var RLP = RLP || {};

RLP.Invoke = function(element, command, options) {
	if (command.length && RLP.hasOwnProperty(command)) {
		(RLP[command]).call($(element), options);
	}
};


RLP.ScrollConditionalAnimate = function() {
    
    console.log('ScrollConditionalAnimate');
    
    var debug         = $('#debug');
    
    var container     = $(this);
    var image         = container.find('.animate');
    var effect        = container.attr('animate-effect') || 'slide';

    var container_w, 
        container_h, 
        container_top, 
        container_bottom,
        image_w, 
        image_h,
        slide_end,
        window_h;

    var onResize      = function() {
        
        window_h          = $W.height();
        
        container_w       = container.width();
        container_h       = container.height();

        image_w           = image.width();    
        image_h           = image.height();  
        slide_end         = (container_w-image_w) * -1;
        
        container_top     = container.offset().top;
        container_bottom  = container_top + container_h;
        
        // Make sure we trigger scroll after everything is set to fix any alignment issues
        $W.trigger('scroll');       
    
    };

    var onScroll     = function() {

        var scroll_top     = $W.scrollTop();
        var scroll_bottom  = scroll_top + window_h;

        // Make sure this element is in the viewport
        if ((container_top < scroll_top) || (container_top > scroll_bottom)) return;
        
        var offset         = container_top - scroll_top;
        var percentage     = 1 - (offset / window_h);       
                
        console.log('YES: offset:'+offset+' / percentage:'+percentage);
        
        if (effect == 'zoom') {
            // ZOOM IT
            var scale = (1 + percentage);
            image.css('transform', 'scale(' + scale + ')')
        } else {
            // SLIDE IT
            if (percentage > .50) return;
         ...