├── README.md ├── jquery.simple-text-rotator.min.js ├── simpletextrotator.css ├── jquery.simple-text-rotator.js ├── demo.html └── LICENSE /README.md: -------------------------------------------------------------------------------- 1 | #Super Simple Text Rotator by Pete R. 2 | A light weight jQuery plugin that will allow you to add a super simple rotating text to your website with little to no markup 3 | Created by [Pete R.](http://www.thepetedesign.com), Founder of [BucketListly](http://www.bucketlistly.com) 4 | 5 | 6 | ## Demo 7 | [View demo](http://peachananr.github.io/simple-text-rotator/demo.html) 8 | 9 | ## Usage 10 | To use this on your website, simply include the latest jQuery library found here together with `jquery.simple-text-rotator.js` and `simpletextrotator.css` into your document's `
`, and all you need is one extra tag for your html document and a function call: 11 | 12 | ````html 13 | Super Simple, Customizable, Light Weight, Easy Text Rotator with Style 14 | ```` 15 | 16 | Put every rotating words inside the `` and separate it with a comma and the script will automatically cycle through each words in order. 17 | 18 | ````javascript 19 | $(".rotate").textrotator({ 20 | animation: "dissolve", // You can pick the way it animates when rotating through words. Options are dissolve (default), fade, flip, flipUp, flipCube, flipCubeUp and spin. 21 | separator: ",", // If you don't want commas to be the separator, you can define a new separator (|, &, * etc.) by yourself using this field. 22 | speed: 2000 // How many milliseconds until the next word show. 23 | }); 24 | ```` 25 | ## Other Resources 26 | - Tutorial (Coming Soon) 27 | -------------------------------------------------------------------------------- /jquery.simple-text-rotator.min.js: -------------------------------------------------------------------------------- 1 | !function(e){var t={animation:"dissolve",separator:",",speed:2e3};e.fx.step.textShadowBlur=function(t){e(t.elem).prop("textShadowBlur",t.now).css({textShadow:"0 0 "+Math.floor(t.now)+"px black"})};e.fn.textrotator=function(n){var r=e.extend({},t,n);return this.each(function(){var t=e(this);var n=[];e.each(t.text().split(r.separator),function(e,t){n.push(t)});t.text(n[0]);var i=function(){switch(r.animation){case"dissolve":t.animate({textShadowBlur:20,opacity:0},500,function(){s=e.inArray(t.text(),n);if(s+1==n.length)s=-1;t.text(n[s+1]).animate({textShadowBlur:0,opacity:1},500)});break;case"flip":if(t.find(".back").length>0){t.html(t.find(".back").html())}var i=t.text();var s=e.inArray(i,n);if(s+1==n.length)s=-1;t.html("");e(""+i+"").appendTo(t);e(""+n[s+1]+"").appendTo(t);t.wrapInner("").find(".rotating").hide().addClass("flip").show().css({"-webkit-transform":" rotateY(-180deg)","-moz-transform":" rotateY(-180deg)","-o-transform":" rotateY(-180deg)",transform:" rotateY(-180deg)"});break;case"flipUp":if(t.find(".back").length>0){t.html(t.find(".back").html())}var i=t.text();var s=e.inArray(i,n);if(s+1==n.length)s=-1;t.html("");e(""+i+"").appendTo(t);e(""+n[s+1]+"").appendTo(t);t.wrapInner("").find(".rotating").hide().addClass("flip up").show().css({"-webkit-transform":" rotateX(-180deg)","-moz-transform":" rotateX(-180deg)","-o-transform":" rotateX(-180deg)",transform:" rotateX(-180deg)"});break;case"flipCube":if(t.find(".back").length>0){t.html(t.find(".back").html())}var i=t.text();var s=e.inArray(i,n);if(s+1==n.length)s=-1;t.html("");e(""+i+"").appendTo(t);e(""+n[s+1]+"").appendTo(t);t.wrapInner("").find(".rotating").hide().addClass("flip cube").show().css({"-webkit-transform":" rotateY(180deg)","-moz-transform":" rotateY(180deg)","-o-transform":" rotateY(180deg)",transform:" rotateY(180deg)"});break;case"flipCubeUp":if(t.find(".back").length>0){t.html(t.find(".back").html())}var i=t.text();var s=e.inArray(i,n);if(s+1==n.length)s=-1;t.html("");e(""+i+"").appendTo(t);e(""+n[s+1]+"").appendTo(t);t.wrapInner("").find(".rotating").hide().addClass("flip cube up").show().css({"-webkit-transform":" rotateX(180deg)","-moz-transform":" rotateX(180deg)","-o-transform":" rotateX(180deg)",transform:" rotateX(180deg)"});break;case"spin":if(t.find(".rotating").length>0){t.html(t.find(".rotating").html())}s=e.inArray(t.text(),n);if(s+1==n.length)s=-1;t.wrapInner("").find(".rotating").hide().text(n[s+1]).show().css({"-webkit-transform":" rotate(0) scale(1)","-moz-transform":"rotate(0) scale(1)","-o-transform":"rotate(0) scale(1)",transform:"rotate(0) scale(1)"});break;case"fade":t.fadeOut(r.speed,function(){s=e.inArray(t.text(),n);if(s+1==n.length)s=-1;t.text(n[s+1]).fadeIn(r.speed)});break}};setInterval(i,r.speed)})}}(window.jQuery) -------------------------------------------------------------------------------- /simpletextrotator.css: -------------------------------------------------------------------------------- 1 | .rotating { 2 | display: inline-block; 3 | -webkit-transform-style: preserve-3d; 4 | -moz-transform-style: preserve-3d; 5 | -ms-transform-style: preserve-3d; 6 | -o-transform-style: preserve-3d; 7 | transform-style: preserve-3d; 8 | -webkit-transform: rotateX(0) rotateY(0) rotateZ(0); 9 | -moz-transform: rotateX(0) rotateY(0) rotateZ(0); 10 | -ms-transform: rotateX(0) rotateY(0) rotateZ(0); 11 | -o-transform: rotateX(0) rotateY(0) rotateZ(0); 12 | transform: rotateX(0) rotateY(0) rotateZ(0); 13 | -webkit-transition: 0.5s; 14 | -moz-transition: 0.5s; 15 | -ms-transition: 0.5s; 16 | -o-transition: 0.5s; 17 | transition: 0.5s; 18 | -webkit-transform-origin-x: 50%; 19 | } 20 | 21 | .rotating.flip { 22 | position: relative; 23 | } 24 | 25 | .rotating .front, .rotating .back { 26 | left: 0; 27 | top: 0; 28 | -webkit-backface-visibility: hidden; 29 | -moz-backface-visibility: hidden; 30 | -ms-backface-visibility: hidden; 31 | -o-backface-visibility: hidden; 32 | backface-visibility: hidden; 33 | } 34 | 35 | .rotating .front { 36 | position: absolute; 37 | display: inline-block; 38 | -webkit-transform: translate3d(0,0,1px); 39 | -moz-transform: translate3d(0,0,1px); 40 | -ms-transform: translate3d(0,0,1px); 41 | -o-transform: translate3d(0,0,1px); 42 | transform: translate3d(0,0,1px); 43 | } 44 | 45 | .rotating.flip .front { 46 | z-index: 1; 47 | } 48 | 49 | .rotating .back { 50 | display: block; 51 | opacity: 0; 52 | } 53 | 54 | .rotating.spin { 55 | -webkit-transform: rotate(360deg) scale(0); 56 | -moz-transform: rotate(360deg) scale(0); 57 | -ms-transform: rotate(360deg) scale(0); 58 | -o-transform: rotate(360deg) scale(0); 59 | transform: rotate(360deg) scale(0); 60 | } 61 | 62 | 63 | 64 | .rotating.flip .back { 65 | z-index: 2; 66 | display: block; 67 | opacity: 1; 68 | 69 | -webkit-transform: rotateY(180deg) translate3d(0,0,0); 70 | -moz-transform: rotateY(180deg) translate3d(0,0,0); 71 | -ms-transform: rotateY(180deg) translate3d(0,0,0); 72 | -o-transform: rotateY(180deg) translate3d(0,0,0); 73 | transform: rotateY(180deg) translate3d(0,0,0); 74 | } 75 | 76 | .rotating.flip.up .back { 77 | -webkit-transform: rotateX(180deg) translate3d(0,0,0); 78 | -moz-transform: rotateX(180deg) translate3d(0,0,0); 79 | -ms-transform: rotateX(180deg) translate3d(0,0,0); 80 | -o-transform: rotateX(180deg) translate3d(0,0,0); 81 | transform: rotateX(180deg) translate3d(0,0,0); 82 | } 83 | 84 | .rotating.flip.cube .front { 85 | -webkit-transform: translate3d(0,0,100px) scale(0.9,0.9); 86 | -moz-transform: translate3d(0,0,100px) scale(0.85,0.85); 87 | -ms-transform: translate3d(0,0,100px) scale(0.85,0.85); 88 | -o-transform: translate3d(0,0,100px) scale(0.85,0.85); 89 | transform: translate3d(0,0,100px) scale(0.85,0.85); 90 | } 91 | 92 | .rotating.flip.cube .back { 93 | -webkit-transform: rotateY(180deg) translate3d(0,0,100px) scale(0.9,0.9); 94 | -moz-transform: rotateY(180deg) translate3d(0,0,100px) scale(0.85,0.85); 95 | -ms-transform: rotateY(180deg) translate3d(0,0,100px) scale(0.85,0.85); 96 | -o-transform: rotateY(180deg) translate3d(0,0,100px) scale(0.85,0.85); 97 | transform: rotateY(180deg) translate3d(0,0,100px) scale(0.85,0.85); 98 | } 99 | 100 | .rotating.flip.cube.up .back { 101 | -webkit-transform: rotateX(180deg) translate3d(0,0,100px) scale(0.9,0.9); 102 | -moz-transform: rotateX(180deg) translate3d(0,0,100px) scale(0.85,0.85); 103 | -ms-transform: rotateX(180deg) translate3d(0,0,100px) scale(0.85,0.85); 104 | -o-transform: rotateX(180deg) translate3d(0,0,100px) scale(0.85,0.85); 105 | transform: rotateX(180deg) translate3d(0,0,100px) scale(0.85,0.85); 106 | } -------------------------------------------------------------------------------- /jquery.simple-text-rotator.js: -------------------------------------------------------------------------------- 1 | /* =========================================================== 2 | * jquery-simple-text-rotator.js v1 3 | * =========================================================== 4 | * Copyright 2013 Pete Rojwongsuriya. 5 | * http://www.thepetedesign.com 6 | * 7 | * A very simple and light weight jQuery plugin that 8 | * allows you to rotate multiple text without changing 9 | * the layout 10 | * https://github.com/peachananr/simple-text-rotator 11 | * 12 | * ========================================================== */ 13 | 14 | !function($){ 15 | 16 | var defaults = { 17 | animation: "dissolve", 18 | separator: ",", 19 | speed: 2000 20 | }; 21 | 22 | $.fx.step.textShadowBlur = function(fx) { 23 | $(fx.elem).prop('textShadowBlur', fx.now).css({textShadow: '0 0 ' + Math.floor(fx.now) + 'px black'}); 24 | }; 25 | 26 | $.fn.textrotator = function(options){ 27 | var settings = $.extend({}, defaults, options); 28 | 29 | return this.each(function(){ 30 | var el = $(this) 31 | var array = []; 32 | $.each(el.text().split(settings.separator), function(key, value) { 33 | array.push(value); 34 | }); 35 | el.text(array[0]); 36 | 37 | // animation option 38 | var rotate = function() { 39 | switch (settings.animation) { 40 | case 'dissolve': 41 | el.animate({ 42 | textShadowBlur:20, 43 | opacity: 0 44 | }, 500 , function() { 45 | index = $.inArray(el.text(), array) 46 | if((index + 1) == array.length) index = -1 47 | el.text(array[index + 1]).animate({ 48 | textShadowBlur:0, 49 | opacity: 1 50 | }, 500 ); 51 | }); 52 | break; 53 | 54 | case 'flip': 55 | if(el.find(".back").length > 0) { 56 | el.html(el.find(".back").html()) 57 | } 58 | 59 | var initial = el.text() 60 | var index = $.inArray(initial, array) 61 | if((index + 1) == array.length) index = -1 62 | 63 | el.html(""); 64 | $("" + initial + "").appendTo(el); 65 | $("" + array[index + 1] + "").appendTo(el); 66 | el.wrapInner("").find(".rotating").hide().addClass("flip").show().css({ 67 | "-webkit-transform": " rotateY(-180deg)", 68 | "-moz-transform": " rotateY(-180deg)", 69 | "-o-transform": " rotateY(-180deg)", 70 | "transform": " rotateY(-180deg)" 71 | }) 72 | 73 | break; 74 | 75 | case 'flipUp': 76 | if(el.find(".back").length > 0) { 77 | el.html(el.find(".back").html()) 78 | } 79 | 80 | var initial = el.text() 81 | var index = $.inArray(initial, array) 82 | if((index + 1) == array.length) index = -1 83 | 84 | el.html(""); 85 | $("" + initial + "").appendTo(el); 86 | $("" + array[index + 1] + "").appendTo(el); 87 | el.wrapInner("").find(".rotating").hide().addClass("flip up").show().css({ 88 | "-webkit-transform": " rotateX(-180deg)", 89 | "-moz-transform": " rotateX(-180deg)", 90 | "-o-transform": " rotateX(-180deg)", 91 | "transform": " rotateX(-180deg)" 92 | }) 93 | 94 | break; 95 | 96 | case 'flipCube': 97 | if(el.find(".back").length > 0) { 98 | el.html(el.find(".back").html()) 99 | } 100 | 101 | var initial = el.text() 102 | var index = $.inArray(initial, array) 103 | if((index + 1) == array.length) index = -1 104 | 105 | el.html(""); 106 | $("" + initial + "").appendTo(el); 107 | $("" + array[index + 1] + "").appendTo(el); 108 | el.wrapInner("").find(".rotating").hide().addClass("flip cube").show().css({ 109 | "-webkit-transform": " rotateY(180deg)", 110 | "-moz-transform": " rotateY(180deg)", 111 | "-o-transform": " rotateY(180deg)", 112 | "transform": " rotateY(180deg)" 113 | }) 114 | 115 | break; 116 | 117 | case 'flipCubeUp': 118 | if(el.find(".back").length > 0) { 119 | el.html(el.find(".back").html()) 120 | } 121 | 122 | var initial = el.text() 123 | var index = $.inArray(initial, array) 124 | if((index + 1) == array.length) index = -1 125 | 126 | el.html(""); 127 | $("" + initial + "").appendTo(el); 128 | $("" + array[index + 1] + "").appendTo(el); 129 | el.wrapInner("").find(".rotating").hide().addClass("flip cube up").show().css({ 130 | "-webkit-transform": " rotateX(180deg)", 131 | "-moz-transform": " rotateX(180deg)", 132 | "-o-transform": " rotateX(180deg)", 133 | "transform": " rotateX(180deg)" 134 | }) 135 | 136 | break; 137 | 138 | case 'spin': 139 | if(el.find(".rotating").length > 0) { 140 | el.html(el.find(".rotating").html()) 141 | } 142 | index = $.inArray(el.text(), array) 143 | if((index + 1) == array.length) index = -1 144 | 145 | el.wrapInner("").find(".rotating").hide().text(array[index + 1]).show().css({ 146 | "-webkit-transform": " rotate(0) scale(1)", 147 | "-moz-transform": "rotate(0) scale(1)", 148 | "-o-transform": "rotate(0) scale(1)", 149 | "transform": "rotate(0) scale(1)" 150 | }) 151 | break; 152 | 153 | case 'fade': 154 | el.fadeOut(settings.speed, function() { 155 | index = $.inArray(el.text(), array) 156 | if((index + 1) == array.length) index = -1 157 | el.text(array[index + 1]).fadeIn(settings.speed); 158 | }); 159 | break; 160 | } 161 | }; 162 | setInterval(rotate, settings.speed); 163 | }); 164 | } 165 | 166 | }(window.jQuery); 167 | 168 | 169 | -------------------------------------------------------------------------------- /demo.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 |Created by Pete R., Founder of BucketListly
392 |Turn this:
393 |Super <span class="rotate">Simple, Customizable, Light Weight, Easy</span> Text Rotator with Style
394 | into these..
395 |