JSFiddle - React, Tailwind, and code Playground

by luka kupunia

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/102/three.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/2.1.2/TweenMax.min.js"></script>
<div id="kfn">
  <div id="bo">
  <div id="test">
    <div class="box" data-id="0"><span>DISCOVER</span></div>
    <div class="box" data-id="1"><span>FOOD</span></div>
    <div class="box" data-id="2"><span>WINE</span></div>
    <div class="box" data-id="3" style="display: none;">4</div>
    <!-- <div id="box" data-id="3">4</div> -->

    <style>
        .box {
            font-size: 40px;
            display: inline-block;
            float: left;
            height: 50%;
            z-index: 10;
            padding-left: 45px;
            font-size: 50px;
            color: darkblue;
            font-weight: bold;
            width: 33.3%;
            bottom: 0;
            position: absolute;
            border-left: 1px solid white;
            transition: .5s;
        }
        .box span {
            display: inline-block;
            transition: .5s;
            backface-visibility: hidden;
            pointer-events: none;
        }
        .box:hover span {
            transform: translateY(50px);
        }
        .box:nth-child(1){
            padding-left: 90px;
        }
        .box:nth-child(2){
            left: 33.3%;
        }
        .box:nth-child(3){
            left: 66%;
        }
        #box {
            padding: 40px;
            background: red;
            font-size: 40px;
            display: inline-block;
            float: left;
        }
        #test {
            width: 100vw;
            height: 100vh;
        }
    </style>

    <div class="container"></div>
</div>
    <img src="http://picsum.photos/1200/900" alt="">
  </div>
</div>

CSS

body {
  overflow-x: hidden;
}
* {
  box-sizing: border-box;
}
div#kfn {
  width: 100%;
  position: fixed;
}
div#kfn div#bo {
  width: 100%;
  height: 400vh;
  background: linear-gradient(white,black)
}
.container {
  width: 100%;
  height: 500px;
}

JavaScript

var mobileDetect = (navigator.userAgent.match(/Android|BlackBerry|iPhone|iPad|iPod|Opera Mini|IEMobile/i)) ? true : false ;

(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;

        };

        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){
         ...