JSFiddle - React, Tailwind, and code Playground

by luka kupunia

HTML

<div id="kfn-scroll" class="kfn_scroll-el">
    <img  class="kfn_scroll-el" src="https://picsum.photos/id/79/1000/700" alt=""><img src="https://picsum.photos/id/79/1000/700" alt=""><img src="https://picsum.photos/id/79/1000/700" alt=""><img src="https://picsum.photos/id/79/1000/700" alt=""><img src="https://picsum.photos/id/79/1000/700" alt=""><img src="https://picsum.photos/id/79/1000/700" alt=""><img src="https://picsum.photos/id/79/1000/700" alt=""><img src="https://picsum.photos/id/79/1000/700" alt="">
</div>

JavaScript

(function(root, factory) {
    'use strict';

    if (typeof define === 'function' && define.amd) {
        define([], factory);
    }
    else if (typeof exports === 'object') {
        module.exports = factory();
    }
    else {
        root.kfn_scroll = factory();
    }
}(this, (function() {

    'use strict';
    
        var defaults = {
            wrapper: '#kfn_scroll',
            targets : '.kfn_scroll-el',
            wrapperSpeed: 0.08,
            targetSpeed: 0.02,
            targetPercentage: 0.1
        };

        var requestAnimationFrame = 
            window.requestAnimationFrame || window.mozRequestAnimationFrame ||
            window.webkitRequestAnimationFrame || window.msRequestAnimationFrame;
            window.requestAnimationFrame = requestAnimationFrame;
        var cancelAnimationFrame = window.cancelAnimationFrame || window.mozCancelAnimationFrame;

        var extend = function () {

            var extended = {};
            var deep = false;
            var i = 0;
            var length = arguments.length;

            var merge = function (obj) {
                for (var prop in obj) {
                    if (obj.hasOwnProperty(prop)) {
                        extended[prop] = obj[prop];
                    }
                }
            };

            for ( ; i < length; i++ ) {
                var obj = arguments[i];
                merge(obj);
            }

            return extended;

        };
a
        var kfn_scroll = function(){
            this.Targets = [];
            this.TargetsLength = 0;
            this.wrapper = '';
            this.windowHeight = 0;
            this.wapperOffset = 0;
        };
        kfn_scroll.prototype = {
            isAnimate: false,
            isResize : false,
            scrollId: "",
            resizeId: "",
            init : function(options){
                this.settings = extend(defaults, options || {});
                this.wrapper =...