textflip

by Hakan Ă–zakar

HTML

<div class="container">
    <h1>Lorem ipsum dolor sit amet...</h1>
    
    <button id="def">Default</button>
    <button id="rot_x">RotateX</button>
    <button id="rot_y">RotateY 1250ms</button>
    <button id="rot_linear">RotateX Linear</button>
    <button id="opa_linear">Opacity Linear</button>
    <button id="rnd">Random Animation</button>
</div>

<script>
    $('#def').click(function(){
        $('h1').textflip()
    });
    
    $('#rot_x').click(function(){
        $('h1').textflip({
            animation: 'rotateX'
        });
    });
    
    $('#rot_y').click(function() {
        $('h1').textflip({
            animation: 'rotateY',
            interval: 1250
        });
    });
    
    $('#rot_linear').click(function(){
        $('h1').textflip({
            animation: 'rotateX',
            sequence: 'linear'
        });
    });
    
    $('#opa_linear').click(function(){
        $('h1').textflip({
            sequence: 'linear'
        });
    });

    $('#rnd').click(function(){
        $('h1').textflip({
            animation: 'random'
        });
    });
</script>

CSS

body {
  text-align: center;
}

button {
  border: 1px solid #cccccc;
  background: #f3f3f3;
  padding: 6px 12px;
  border-radius: 3px;
}

.textflip_chr_wrapper {
  display: inline-block;
  padding: 0;
  margin: 0;
  opacity: 0;
  transition: all .75s;
}
.textflip_el_wrapper {
  padding: 0;
  margin: 0;
  filter: alpha(opacity=0);
  opacity: 0;
  transition: all .75s;
}

.tr_0, .rotateZ {
  filter: alpha(opacity=100);
  opacity: 1;
  transform: rotateZ(360deg);
}
.tr_1, .rotateX {
  filter: alpha(opacity=100);
  opacity: 1;
  transform: rotateX(360deg);
}
.tr_2, .rotateY {
  filter: alpha(opacity=100);
  opacity: 1;
  transform: rotateY(360deg);
}
.tr_3, .opacity {
  filter: alpha(opacity=100);
  opacity: 1;
}

JavaScript

(function ($) {
    "use strict";

    var values;

    function init($tf) {
        $tf.data('working', true);
        $tf.each(function () {
            var oHTML = $(this).html();
            var modify = '';
            $(this).contents().filter(function () {
                if (this.nodeType === 3) {
                    var hoy = $(this).text();
                    for (var i = 0; i < hoy.length; i++) {
                        modify += '<span class="textflip_chr_wrapper">' + (hoy[i] == ' ' ? '&nbsp;' : hoy[i]) + '</span>';
                    }
                } else {
                    modify += '<span class="textflip_el_wrapper">' + $('<span />').append($(this).clone()).html() + '</span>';
                }
            });

            trigger($tf, $(this), modify, oHTML);
        });
    }

    function trigger($tf, $ctf, modify, oHTML) {
        $ctf.html(modify);
        var counter = 0;
        var totalTime = values.interval ? values.interval : Math.min(1500, $tf.children('.textflip_el_wrapper, .textflip_chr_wrapper').length * 25);
        $tf.children('.textflip_el_wrapper, .textflip_chr_wrapper').each(function () {
            var $el = $(this);
            counter++;
            var timing = values.sequence == 'random' ? parseInt(Math.random() * totalTime) : counter * (totalTime / $tf.children('.textflip_el_wrapper, .textflip_chr_wrapper').length);
            setTimeout(function () {
                $el.toggleClass(values.animation == 'random' ? 'tr_' + parseInt(Math.random() * 4) : values.animation);

            }, timing);
        });

        setTimeout(function () {
            $tf.html(oHTML);
            $tf.data('working', false);
        }, totalTime + 750);
    }

    /* Plug-in Start */
    $.fn.textflip = function (param) {
        if (this.data('working')) return this;

        values = $.extend({
            interval: 0,
            sequence: 'random',
            animation: 'opacity'
        }, param);

        init(this);

     ...