バラバラにならないようにするにはどうしたらいいのか
こんにちわ、普段は学生をしているusaginonikuです。
趣味でサイトを作っている時に大きな壁にぶち当たりました。
指定の高さに来たら文字をタイプライタのように表示させたいのですが
なぜかこうなってしまいます!
どなたか...スクロールしてもバラバラにならないようにするにはどうしたらいいのか教えてください。。。
よろしくお願いします
HTML:index.html
1<!DOCTYPE html> 2<html> 3 <head> 4 <meta charset="utf-8"> 5 <title>test</title> 6 </head> 7 <body> 8 <header> 9 <div class="headerbox"> 10 header 11 </div> 12 </header> 13 14 <main> 15 <div class="mainbox"> 16 <p class="split">テストテストテストテストテストテストテストテストテストテストテストテストテスト</p> 17 </div> 18 </main> 19 <footer> 20 <div class="footerbox"> 21 </div> 22 </footer> 23 <style media="screen"> 24 header{ 25 display: block; 26 height: 1000px; 27 } 28 .split{ 29 font-size: 30px; 30 } 31 footer{ 32 display: block; 33 height: 1000px; 34 } 35 </style> 36 <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 37 <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script> 38 <script src="script.js"></script> 39 </body> 40</html> 41
javascript:script.js
1jQuery(function($) { 2// --------------------------------------------------------------------------- 3 4 function fadein_type(setElm,delaySpeed,object_pass){ 5 var setElm = $(setElm), 6 fadeSpeed = 0; 7 8 var textlength = delaySpeed * $(setElm).text().length; 9 10 setElm.css({ 11 visibility: 'visible' 12 }).children().addBack().contents().each(function() { 13 var elmThis = $(this); 14 if (this.nodeType == 3) { 15 var $this = $(this); 16 $this.replaceWith($this.text().replace(/(\S)/g, '<span class="textSplitLoad">$&</span>')); 17 } 18 }); 19 20 $(window).scroll(function(){ 21 var obj_t_pos = $(object_pass).offset().top; 22 var scr_count = $(document).scrollTop() + (window.innerHeight/2); // ディスプレイの半分の高さを追加 23 var count = 0 24 25 if(scr_count > obj_t_pos){ 26 27 splitLength = $('.textSplitLoad').length; 28 setElm.find('.textSplitLoad').each(function(i) { 29 splitThis = $(this); 30 splitTxt = splitThis.text(); 31 splitThis.delay(i * (delaySpeed)) 32 .css({ 33 display: 'inline-block', 34 opacity: '0' 35 }) 36 .animate({ 37 opacity: '1' 38 }, fadeSpeed); 39 }); 40 setTimeout(function() { 41 setElm.html(setText); 42 }, splitLength * delaySpeed + fadeSpeed); 43 44 45 } 46 }) 47 } 48 49 fadein_type('.split',40,'.mainbox'); 50 51 // --------------------------------------------------------------------------- 52}); 53
回答3件
あなたの回答
tips
プレビュー