├── gifs ├── flash.gif ├── press.gif ├── rotate.gif └── default.gif ├── .gitattributes ├── package.json ├── LICENSE ├── Example └── Example.html ├── txslider.min.js ├── README.md └── txslider.js /gifs/flash.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hosein2398/TxSlider/master/gifs/flash.gif -------------------------------------------------------------------------------- /gifs/press.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hosein2398/TxSlider/master/gifs/press.gif -------------------------------------------------------------------------------- /gifs/rotate.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hosein2398/TxSlider/master/gifs/rotate.gif -------------------------------------------------------------------------------- /gifs/default.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hosein2398/TxSlider/master/gifs/default.gif -------------------------------------------------------------------------------- /.gitattributes: -------------------------------------------------------------------------------- 1 | # Auto detect text files and perform LF normalization 2 | * text=auto 3 | 4 | # Custom for Visual Studio 5 | *.cs diff=csharp 6 | 7 | # Standard to msysgit 8 | *.doc diff=astextplain 9 | *.DOC diff=astextplain 10 | *.docx diff=astextplain 11 | *.DOCX diff=astextplain 12 | *.dot diff=astextplain 13 | *.DOT diff=astextplain 14 | *.pdf diff=astextplain 15 | *.PDF diff=astextplain 16 | *.rtf diff=astextplain 17 | *.RTF diff=astextplain 18 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "txslider", 3 | "version": "1.0.0", 4 | "description": "Javascript library , text slider for web page.", 5 | "main": "index.js", 6 | "scripts": { 7 | "test": "echo \"Error: no test specified\" && exit 1" 8 | }, 9 | "keywords": [ 10 | "text", 11 | "slider", 12 | "text slider", 13 | "Txslider", 14 | "sliding text", 15 | "animating text"], 16 | "author": "Hosein2398", 17 | "license": "MIT", 18 | "repository": "hosein2398/txslider" 19 | } 20 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | The MIT License (MIT) 2 | 3 | Copyright 2015 Andrey Sitnik 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy of 6 | this software and associated documentation files (the "Software"), to deal in 7 | the Software without restriction, including without limitation the rights to 8 | use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of 9 | the Software, and to permit persons to whom the Software is furnished to do so, 10 | subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS 17 | FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR 18 | COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER 19 | IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN 20 | CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE. 21 | -------------------------------------------------------------------------------- /Example/Example.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Document 8 | 9 | 10 | 11 | 21 |

TxSlider

22 | 23 | 24 | 25 | 26 |
27 | 49 | 50 | 51 | -------------------------------------------------------------------------------- /txslider.min.js: -------------------------------------------------------------------------------- 1 | window.onload=function(){function m(){setTimeout(function(){e.innerHTML=data[tx_conf.stayIn].text,f.innerHTML=""},tx_conf.timer+300),clearInterval(l)}function n(){clearInterval(l)}var b=(document.getElementById("tx").childNodes,document.getElementById("tx")),c=document.createElement("DIV");c.setAttribute("id","tx_slide_main"),b.appendChild(c);var d=document.createElement("DIV");d.setAttribute("id","second"),b.appendChild(d);var i,e=document.getElementById("tx_slide_main"),f=document.getElementById("second"),g=0,h=data.length;if("effect"in tx_conf||(tx_conf.effect="down"),"dir"in tx_conf&&(document.getElementById("tx").style.direction="rtl"),"timer"in tx_conf&&(tx_conf.timer=4),"infinit"in tx_conf&&"stayIn"in tx_conf)throw"Tx_slide error: you cann't use (infinit) and (stayIn) togheter";tx_conf.timer*=1e3,"down"==tx_conf.effect&&(i="#tx_slide2 {opacity: .7;transition: 1s; -webkit-transition: 1s; margin-top: 20px; color: darkturquoise}"),"press"==tx_conf.effect&&(i="#tx_slide2 {opacity: .7;transition: 1s; -webkit-transition: 1s; letter-spacing:-7px; color: darkturquoise}"),"flash"==tx_conf.effect&&(i=" #tx_slide2 {opacity: .7;transition: .1s; -webkit-transition: .1s; -webkit-transform: skewX(360deg);color: darkturquoise}"),"left"==tx_conf.effect&&(i=" #tx_slide2 {opacity: .7;transition: .1s; -webkit-transition: .1s; -webkit-transform: translateX(-400px); -ms-transform: translateX(-400px); transform: translateX(-400px);color: darkturquoise}"),"top"==tx_conf.effect&&(i=" #tx_slide2 {opacity: .7;transition: .1s;-webkit-transform: translate(20px,-100px); -ms-transform: translate(20px,-100px); transform: translate(20px,-100px);color: darkturquoise}"),"rotate"==tx_conf.effect&&(i=" #tx_slide2 {opacity: .7;transition: 1s; -webkit-transform:rotateX(290deg); transform:rotateX(290deg);color: darkturquoise}"),"rotate2"==tx_conf.effect&&(i=" #tx_slide2 {opacity: .7; -webkit-transform:rotateY(280deg); transition: .7s;transform:rotateY(280deg);color: darkturquoise}"),i+="#tx div {color: black;text-decoration: none;display: block;position: absolute;} #tx_slide3 {opacity: .4s; webkit-transition: 1s; transition: 1s;margin-top: 0px;}";var j=document.head||document.getElementsByTagName("head")[0],k=document.createElement("style");k.type="text/css",k.styleSheet?k.styleSheet.cssText=i:k.appendChild(document.createTextNode(i)),j.appendChild(k),f.innerHTML=data[0].text,f.setAttribute("id","tx_slide3"),setTimeout(function(){f.setAttribute("id","tx_slide2")},84*tx_conf.timer/100);var l=setInterval(function(){g+=1,f.innerHTML=data[g].text,f.setAttribute("id","tx_slide3"),f.style.color=data[0].color,g==h-1?tx_conf.infinit||tx_conf.stayIn||n():setTimeout(function(){f.setAttribute("id","tx_slide2")},83*tx_conf.timer/100),g==h-1&&(1==tx_conf.infinit?(g=-1,setTimeout(function(){f.innerHTML=data[0].text},tx_conf.timer)):tx_conf.stayIn&&m())},tx_conf.timer)}; -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Txslider 2 | 3 | Txslider is js library for sliding text on web pages. 4 | 5 | ## Demos 6 | 7 | ##### default effect: 8 | 9 | ![Default text slider](https://raw.githubusercontent.com/hosein2398/TxSlider/master/gifs/default.gif) 10 |
11 | 12 | ##### flash effect: 13 | ![Default text slider](https://raw.githubusercontent.com/hosein2398/TxSlider/master/gifs/flash.gif) 14 |
15 | 16 | ##### press effect: 17 | 18 | ![Default text slider](https://raw.githubusercontent.com/hosein2398/TxSlider/master/gifs/press.gif) 19 |
20 | 21 | ##### rotate effect: 22 | 23 | ![Default text slider](https://raw.githubusercontent.com/hosein2398/TxSlider/master/gifs/rotate.gif) 24 | 25 | ## Installing 26 | 27 | 28 | ## Usage 29 | To put this to work first add this lines of Css (you can add more styles but try not to change 'position' & 'overflow'): 30 | 31 | #tx { 32 | height: 20px; 33 | width: 300px; 34 | position: absolute; 35 | overflow: hidden; 36 | border-bottom: 1px solid black; 37 | } 38 | 39 | Then create a div with id of tx: 40 | 41 |
42 |
43 | 44 | Add your data you want to show in var data: 45 | 46 | var data = [ 47 | { 48 | text: "Hello world" 49 | }, { 50 | text: "Lorem ipsum dolor." 51 | }, { 52 | text: "Numbers 1234567" 53 | }, { 54 | text: "Hosein2398" 55 | }, { 56 | text: "Nice!" 57 | } 58 | ]; 59 | And config it as you wish: 60 | 61 | var tx_conf = { 62 | infinit: true, 63 | effect: "flash", 64 | timer: 2 65 | //dir : "rtl" 66 | //stayIn: 1 67 | } 68 | 69 | ### Paramaters 70 | 71 | >**timer** (string): Sets timer for slider.(default value is 4). 72 | 73 |

74 | 75 | >**infinit** (boolean): Sets the slider to infinite loop. 76 | 77 |

78 | 79 | >**stayIn** (Int): If you want to stay in one slide after that all slides has been shown. (In most cases no effect would be added to last element) 80 | > 81 | > e.g. 4 will stay in forth slide. 82 | 83 |
84 | 85 | * Note : You can not use __infinit__ and __stayIn__ together. 86 | 87 | * Note : If you don't define __infinit__ and __stayIn__ both , then slider would stop sliding in last element. 88 | 89 |
90 | 91 | 92 | > **effect** (string): Sets the effect. list of effects: 93 | >> * down (default) 94 | >> * press 95 | >> * flash 96 | >> * left 97 | >> * top 98 | >> * rotate 99 | >> * rotate2 100 | >> 101 | >**dir** (string): Sets text direction for languages like Persian , Arabic , ... (you don't need this most of the time) 102 | 103 | 104 | 105 | 106 | 107 | -------------------------------------------------------------------------------- /txslider.js: -------------------------------------------------------------------------------- 1 | window.onload = function () { 2 | var here = document.getElementById("tx").childNodes; 3 | var txdiv = document.getElementById("tx"); 4 | var maindiv = document.createElement("DIV"); 5 | maindiv.setAttribute("id", "tx_slide_main"); 6 | txdiv.appendChild(maindiv); 7 | var seconddiv = document.createElement("DIV"); 8 | seconddiv.setAttribute("id", "second"); 9 | txdiv.appendChild(seconddiv); 10 | var first = document.getElementById("tx_slide_main"); 11 | var last = document.getElementById("second"); 12 | var i = 0; 13 | var many = data.length; 14 | var css; 15 | if (!('effect' in tx_conf)) { 16 | tx_conf.effect = "down" 17 | } 18 | if ('dir' in tx_conf) { 19 | document.getElementById("tx").style.direction = "rtl"; 20 | } 21 | if ('timer' in tx_conf) { 22 | tx_conf.timer = 4; 23 | } 24 | if ('infinit' in tx_conf && 'stayIn' in tx_conf) { 25 | throw "Tx_slide error: you cann't use (infinit) and (stayIn) togheter" 26 | } 27 | tx_conf.timer *= 1000; 28 | if (tx_conf.effect == "down") { 29 | css = '#tx_slide2 {opacity: .7;transition: 1s; -webkit-transition: 1s; margin-top: 20px; color: darkturquoise}' 30 | } 31 | if (tx_conf.effect == "press") { 32 | css = '#tx_slide2 {opacity: .7;transition: 1s; -webkit-transition: 1s; letter-spacing:-7px; color: darkturquoise}' 33 | } 34 | if (tx_conf.effect == "flash") { 35 | css = ' #tx_slide2 {opacity: .7;transition: .1s; -webkit-transition: .1s; -webkit-transform: skewX(360deg);color: darkturquoise}' 36 | } 37 | if (tx_conf.effect == "left") { 38 | css = ' #tx_slide2 {opacity: .7;transition: .1s; -webkit-transition: .1s; -webkit-transform: translateX(-400px); -ms-transform: translateX(-400px); transform: translateX(-400px);color: darkturquoise}' 39 | } 40 | if (tx_conf.effect == "top") { 41 | css = ' #tx_slide2 {opacity: .7;transition: .1s;-webkit-transform: translate(20px,-100px); -ms-transform: translate(20px,-100px); transform: translate(20px,-100px);color: darkturquoise}' 42 | } 43 | if (tx_conf.effect == "rotate") { 44 | css = ' #tx_slide2 {opacity: .7;transition: 1s; -webkit-transform:rotateX(290deg); transform:rotateX(290deg);color: darkturquoise}' 45 | } 46 | if (tx_conf.effect == "rotate2") { 47 | css = ' #tx_slide2 {opacity: .7; -webkit-transform:rotateY(280deg); transition: .7s;transform:rotateY(280deg);color: darkturquoise}' 48 | } 49 | css += "#tx div {color: black;text-decoration: none;display: block;position: absolute;} #tx_slide3 {opacity: .4s; webkit-transition: 1s; transition: 1s;margin-top: 0px;}" 50 | //starting styles 51 | var head = document.head || document.getElementsByTagName('head')[0] 52 | , style = document.createElement('style'); 53 | style.type = 'text/css'; 54 | if (style.styleSheet) { 55 | style.styleSheet.cssText = css; 56 | } 57 | else { 58 | style.appendChild(document.createTextNode(css)); 59 | } 60 | head.appendChild(style); 61 | //#endig styles 62 | last.innerHTML = data[0].text; 63 | last.setAttribute("id", "tx_slide3"); 64 | setTimeout(function () { 65 | last.setAttribute("id", "tx_slide2"); 66 | }, (tx_conf.timer * 84 / 100)); // time * 84% 67 | var intv = setInterval(function () { 68 | 69 | i += 1; 70 | 71 | last.innerHTML = data[i].text; 72 | last.setAttribute("id", "tx_slide3"); 73 | last.style.color = data[0].color; 74 | if(i == many-1){ 75 | if (!(tx_conf.infinit) && !(tx_conf.stayIn)) 76 | { 77 | 78 | clean(); 79 | } 80 | }else { 81 | setTimeout(function () { 82 | last.setAttribute("id", "tx_slide2"); 83 | }, (tx_conf.timer * 83 / 100)); //time * 83% 84 | } 85 | if (i == many - 1) { 86 | if (tx_conf.infinit == true) { 87 | i = -1; 88 | setTimeout(function () { 89 | last.innerHTML = data[0].text; 90 | }, tx_conf.timer) 91 | 92 | } 93 | else if(tx_conf.stayIn) { 94 | stop(); 95 | 96 | } 97 | 98 | } 99 | 100 | 101 | }, tx_conf.timer); 102 | 103 | function stop() { 104 | setTimeout(function () { 105 | first.innerHTML = data[tx_conf.stayIn].text; 106 | last.innerHTML =""; 107 | }, (tx_conf.timer + 300 )) //time * 87% 108 | clearInterval(intv); 109 | 110 | } 111 | 112 | function clean() { 113 | clearInterval(intv); 114 | } 115 | } --------------------------------------------------------------------------------