JSFiddle - React, Tailwind, and code Playground

by tjerabek

HTML

<div id="window">
    <div class="page page1 active" id="page1">
        <h1>Hello</h1>
        <a href="#page2" class="move next">Next &raquo;</a>
    </div>
    <div class="page page2" id="page2">
        <h2>world</h2>
        <a href="#page1" class="move prev">&laquo; Prev</a>
    </div>
</div>

CSS

body{
    background: #1e1e1e;
    font-family: Arial;
}
.page{
    position: absolute;
    width: 100%;
    height: 100%;
    
    color: white;
    
    -webkit-transition: all 0.5s ease-in-out;
    -moz-transition: all 0.5s ease-in-out;
    -ms-transition: all 0.5s ease-in-out;
    -o-transition: all 0.5s ease-in-out;
    transition: all 0.5s ease-in-out;
    
    text-align: center;
    
    opacity: 0;
}
.page.active{
    opacity: 1;
}
h1, h2{
    font-size: 800%;
    padding-top: 150px;
    font-family: Georgia;
    text-shadow: 0px 4px 0px #121212;
    font-weight: bold;
}
.page1{
    left: 0%;
}
.page2{
    left: 100%;
}
a{
    color: white;
    opacity: 0.8;
    -webkit-transition: all 0.2s ease;
    -moz-transition: all 0.2s ease;
    -ms-transition: all 0.2s ease;
    -o-transition: all 0.2s ease;
    transition: all 0.2s ease;
}
a:hover{
    opacity: 1;

}

JavaScript

(function($) {
    $.Mover = function(el, radius, options) {
        var base = this;

        base.$el = $(el);
        base.el = el;

        base.$el.data("Mover", base);

        base.init = function() {
            if (typeof(pageClassName) === "undefined" || pageClassName === null) pageClassName = "page";
            if (typeof(moveClassName) === "undefined" || moveClassName === null) moveClassName = "move";

            base.radius = radius;

            base.options = $.extend({}, $.Mover.defaultOptions, options);

            base.$el.find('.' + moveClassName + '.prev').click(function() {
                base.move(false);
                return false;
            });
            base.$el.find('.' + moveClassName + '.next').click(function() {
                base.move(true);
                return false;
            });
        };

        base.move = function(isNext) {
            base.$el.find('.' + pageClassName + '.active').removeClass('active');
            base.$el.find('.' + pageClassName).each(function() {
                var w = parseInt($(this).css('left'));

                if (isNext) {
                    w = w - 100;
                } else {
                    w = w + 100;
                }

                $(this).css('left', w + '%');

                if (w == 0) {
                    $(this).addClass('active');
                }
            });
        };

        base.init();
    };



    $.Mover.defaultOptions = {
        pageClassName: "page",
        moveClassName: "move"
    };

    $.fn.Mover = function(radius, options) {
        return this.each(function() {
            (new $.Mover(this, radius, options));
        });
    };

})(jQuery);

$(document).ready(function() {
    $('#window').Mover();
});