API tools faq
paste
Advertisement
thuechen

3D TEXT

thuechen
Jun 4th, 2015
506
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 6.68 KB | None | 0 0
raw download clone embed print report
  1. <!-- this script got from www.htmlbestcodes.com-Coded by: Richard Enage -->
  2. <html>
  3. <head>
  4. <style type="text/css">
  5. ul.fallingtextrotator{
  6. font-family: 'Orbitron', sans-serif; /* font style. Default uses Google fonts */
  7. text-shadow: 2px 2px #C0F5A9, 3px 3px #C0F5A9, 4px 4px #C0F5A9, 5px 5px #C0F5A9, 6px 6px #C0F5A9;
  8. font-size: 48px; /* font size of text */
  9. color: #217C23;
  10. letter-spacing: 10px;
  11. font-weight: 800;
  12. text-transform: uppercase;
  13. position: relative;
  14. list-style: none;
  15. margin: 0;
  16. padding: 0;
  17. }
  18.  
  19. ul.fallingtextrotator > li{
  20. position: absolute;
  21. opacity: 0;
  22. top: 0;
  23. left: 0;
  24. -moz-transition: all 0.3s ease-in; /* change 0.3s to reflect desired duration of effect on entire sentence (ie: fade in/out) */
  25. -webkit-transition: all 0.3s ease-in;
  26. -o-transition: all 0.3s ease-in;
  27. -ms-transition: all 0.3s ease-in;
  28. transition: all 0.3s ease-in;
  29. }
  30.  
  31. ul.fallingtextrotator > li:nth-of-type(even){
  32. color: #713800;
  33. text-shadow: 2px 2px #FDE0A6, 3px 3px #FDE0A6, 4px 4px #FDE0A6, 5px 5px #FDE0A6, 6px 6px #FDE0A6;
  34. }
  35.  
  36.  
  37. ul.fallingtextrotator > li span[class*="char"]{
  38. display: inline-block;
  39. }
  40.  
  41. ul.fallingtextrotator > li.dropdown span[class*="char"]{
  42. opacity: 0;
  43. -moz-transform: translateY(300px) rotateZ(120deg); /* drop down and rotate */
  44. -webkit-transform: translateY(300px) rotateZ(120deg);
  45. transform: translateY(300px) rotateZ(120deg);
  46. -moz-transition: all 0.3s ease-in; /* change 0.3s to reflect desired duration of each word/letter dropping down */
  47. -webkit-transition: all 0.3s ease-in;
  48. -o-transition: all 0.3s ease-in;
  49. -ms-transition: all 0.3s ease-in;
  50. transition: all 0.3s ease-in;
  51. }
  52. </style>
  53. <head>
  54. <body>
  55. <ul id="headline" class="fallingtextrotator" style="height:2em">
  56. <li>Welcome to my site</li>
  57. <li>design by : Richard Enage</li>
  58. <li>a simple message</li>
  59. <li>to my girlfriend</li>
  60. </ul>
  61. <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
  62. <script src="http://www.htmlbestcodes.com/javascripts/jquery.lettering-0.6.1.min.js"></script>
  63. <script type="text/javascript">
  64. (function($){
  65. var defaults = {pause:2000, ontextchange:function(msgindex, msg, $eachchar){}, cycles:1}
  66. var transitionsupport = typeof $(document.documentElement).css('transition') != 'undefined'
  67.  
  68. $.fn.fallingtextrotator = function(options){
  69.  
  70. return this.each(function(){
  71. var s = $.extend({}, defaults, options)
  72. var $t = $(this),
  73. wordgroup = [], // array holding collection of either words or chars (depending on setting)
  74. curli = 0,
  75. cyclescount = {cur:0, max:0}
  76. var $lis = $t.find('>li').each(function(i){
  77. var $this = $(this)
  78. .data('wrapperinfo', {wrapitem:i, transduration:$(this).css('transitionDuration'), currenttransition:0, wordcount:0})
  79. .lettering('words').children('span').lettering().end()
  80. wordgroup.push( $this.find('span[class*="char"]') )
  81. $this.data('wrapperinfo').wordcount = wordgroup[i].length
  82. })
  83. cyclescount.max = $lis.length * s.cycles // get number of literations before rotator should stop
  84.  
  85. $t.on('transitionend webkitTransitionEnd', function(e){
  86. var $target = $(e.target),
  87. $targetParent = $target.offsetParent()
  88. if (/transform/i.test(e.originalEvent.propertyName) && $targetParent.hasClass('dropdown')){
  89. $targetParent.data('wrapperinfo').currenttransition += 1
  90. if ($targetParent.data('wrapperinfo').currenttransition == $targetParent.data('wrapperinfo').wordcount){
  91. $targetParent.data('wrapperinfo').currenttransition = 0
  92. wordgroup[curli].css({transitionDelay:'0ms'})
  93. $targetParent.css({opacity:0, transitionDuration:'0ms'}).removeClass('dropdown')
  94. s.ontextchange( curli, $targetParent.text(), wordgroup[curli] )
  95. curli = (curli < wordgroup.length-1)? curli + 1 : 0
  96. setTimeout(function(){rotatetext()}, 50)
  97. }
  98. }
  99. })
  100.  
  101.  
  102. function dropword(){
  103. if (transitionsupport && !window.opera){
  104. for (var i=0; i<wordgroup[curli].length; i++){
  105. var delay = Math.round( Math.random() * 1000 ) +'ms'
  106. wordgroup[curli].eq(i).css('transitionDelay', delay )
  107. }
  108. $lis.eq(curli).addClass('dropdown')
  109. }
  110. else{
  111. $lis.eq(curli).css({opacity:0})
  112. curli = (curli < wordgroup.length-1)? curli + 1 : 0
  113. rotatetext()
  114. }
  115. }
  116.  
  117. function rotatetext(){
  118. var $curli = $lis.eq(curli)
  119. $curli.css({opacity:1, transitionDuration:$curli.data('wrapperinfo').transduration})
  120. if (s.cycles==0 || cyclescount.cur++ < cyclescount.max-1){
  121. setTimeout(function(){
  122. dropword()
  123. }, s.pause)
  124. }
  125. }
  126.  
  127. rotatetext()
  128. })
  129. }
  130.  
  131. })(jQuery)
  132. </script>
  133.  
  134. <script>
  135. jQuery(function(){ // on DOM load
  136. $('#headline').fallingtextrotator({
  137. pause: 3000,
  138. cycles: 2,
  139. ontextchange:function(msgindex, msg, eachchar){
  140. }
  141. })
  142. })
  143. </script>
  144. <br/>
  145. <div style="clear:both"></div><div><a target="_blank" href="http://www.facebook.com.com/thuechen"><span style="font-size: 8pt; text-decoration: none">click me</span></a></div>
  146. </body>
  147. </html>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement
Public Pastes
Advertisement
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy.  OK, I Understand
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!