JSFiddle - React, Tailwind, and code Playground

by Alen Doe

HTML

<link rel="stylesheet" href="http://tympanus.net/Development/Windy/css/windy.css">
<link rel="stylesheet" href="http://tympanus.net/Development/Windy/css/demo.css">
<link rel="stylesheet" href="http://tympanus.net/Development/Windy/css/style1.css">
<script src="http://tympanus.net/Development/Windy/js/modernizr.custom.79639.js"></script>
<script src="http://tympanus.net/Development/Windy/js/jquery.windy.js"></script>
<div class="windy-demo">
    <ul id="wi-el" class="wi-container">
        <li>
            <img src="http://tympanus.net/Development/Windy/images/demo1//15.jpg" alt="image15" />
             <h4>Блок 1</h4>

            <p>Quinoa marfa banksy nostrud brunch bushwick PBR. Mcsweeney's bushwick banksy.</p>
        </li>
        <li>
            <img src="http://tympanus.net/Development/Windy/images/demo1//16.jpg" alt="image16" />
             <h4>Блок 2</h4>

            <p>Brunch fugiat locavore, swag photo booth keffiyeh labore small batch.</p>
        </li>
        <li>
            <img src="http://tympanus.net/Development/Windy/images/demo1//17.jpg" alt="image17" />
             <h4>Блок 3</h4>

            <p>Helvetica wayfarers ea enim, street art you probably haven't heard of.</p>
        </li>
        <li>
            <img src="http://tympanus.net/Development/Windy/images/demo1//18.jpg" alt="image18" />
             <h4>Блок 4</h4>

            <p>Semiotics ennui VHS high life you probably haven't heard of them sed craft beer.</p>
        </li>
        <li>
            <img src="http://tympanus.net/Development/Windy/images/demo1//20.jpg" alt="image20" />
             <h4>Последний блок 5!</h4>

            <p>Kale chips enim eiusmod narwhal, magna before they sold out locavore.</p>
        </li>
    </ul>
    <nav>	<span id="nav-prev">prev</span>
	<span id="nav-next">next</span>

    </nav>
</div>

JavaScript

;(function ($, window, undefined) {

    'use strict';

    // global
    var Modernizr = window.Modernizr;

    $.Windy = function (options, element) {

        this.$el = $(element);
        this._init(options);

    };

    // the options
    $.Windy.defaults = {
        // if we want to specify a selector that triggers the next() function. example: '#wi-nav-next'.
        nextEl: '',
        // if we want to specify a selector that triggers the prev() function.
        prevEl: '',
        // rotation and translation boundaries for the items transitions
        boundaries: {
            rotateX: {
                min: 40,
                max: 90
            },
            rotateY: {
                min: -15,
                max: 15
            },
            rotateZ: {
                min: -10,
                max: 10
            },
            translateX: {
                min: -200,
                max: 200
            },
            translateY: {
                min: -400,
                max: -200
            },
            translateZ: {
                min: 250,
                max: 550
            }
        }
    };

    $.Windy.prototype = {

        _init: function (options) {

            // options
            this.options = $.extend(true, {}, $.Windy.defaults, options);

            // [url]https://github.com/twitter/bootstrap/issues/2870[/url]
            this.transEndEventNames = {
                'WebkitTransition': 'webkitTransitionEnd',
                    'MozTransition': 'transitionend',
                    'OTransition': 'oTransitionEnd',
                    'msTransition': 'MSTransitionEnd',
                    'transition': 'transitionend'
            };
            this.transEndEventName = this.transEndEventNames[Modernizr.prefixed('transition')];

            this.$items = this.$el.children('li');
            this.itemsCount = this.$items.length;

            this.resetTransformStr = 'translateX( 0px ) translateY( 0px ) translateZ( 0px )...