質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

Q&A

解決済

3回答

521閲覧

【質問】webサイトにタイプライタのような効果を加えたい【大募集】

Usagino

総合スコア12

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

0グッド

0クリップ

投稿2018/03/15 06:16

バラバラにならないようにするにはどうしたらいいのか

こんにちわ、普段は学生をしている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

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

m.ts10806

2018/03/15 06:48

タイトルは要件のみを書かれたほうが良いです(急募・急ぎです・困っています などはあまり推奨されません)
miyabi-sun

2018/03/16 01:48

Qiitaからteratailにやってきたんですね。teratailのスレッドは質問に決まりきってるので、5chみたいな装飾タグは不要ですよ
guest

回答3

0

ベストアンサー

webサイトにタイプライタのような効果を加えたい

タイプライターのようなに関してですが、
スクロールのたびに文字が消えて表示されるせんせいみたいなお絵かきボードを想像しているのですか?
そうではなくて、純白の紙に1文字ずつ入力されていく様を想定しているはずです。

じゃあ、スクロールの度に消えてしまっては困りますよね?
1度だけ実行に変えましょう。
これだけである程度目標に近づけそうだと思いますので、まずはこの対応を入れてみてください。

JavaScript

1jQuery(function($) { 2 var enabledTypewriter = false; 3 // 他の宣言 4 5 $(window).scroll(function(){ 6 if (enabledTypewriter) return; 7 enabledTypewriter = true; 8 // 他の処理 9 }) 10});

まぁ、1箇所だけタイプライター風表示を行っても統一感がなく微妙だと思います。
複数箇所対応にする場合は要素やフラグも配列毎に持たせるとか工夫が必要になるかと思いますので、
あれこれ試行錯誤しながら頑張ってみてください。。

投稿2018/03/16 02:04

miyabi-sun

総合スコア21158

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

0

おそらく、スクロールがちょっとでも発生する度に、
タイプの関数が実行されたから、タイプの途中から、新たに次のタイプが実行されごっちゃになったのだと思います。
下記でいかがでしょうか。

javascript

1jQuery(function($) { 2// --------------------------------------------------------------------------- 3 4// スクロールの処理回数、タイミングを制御するための変数 5var typeFlg = true, 6 scrollTimer = null; 7 8 9$(window).scroll(function(){ 10 // スクロール処理が二重発生しないよう、タイマーをクリア 11 if(scrollTimer) { 12 clearTimeout(scrollTimer); 13 } 14 // タイマーをセット(10ミリ秒ごとに関数を実行とする) 15 scrollTimer = setTimeout(function(){ 16 if (typeFlg) { 17 // タイプを実行していい状態なら、実行 18 fadein_type('.split', 40, '.mainbox'); 19 } 20 }, 10); 21}); 22// 初期スクロールのための、初期実行 23fadein_type('.split', 40, '.mainbox'); 24 25function fadein_type(setElm, delaySpeed, object_pass){ 26 var setElm = $(setElm), 27 fadeSpeed = 0; 28 29 var textlength = delaySpeed * $(setElm).text().length; 30 31 setElm.css({ 32 visibility: 'visible' 33 }).children().addBack().contents().each(function() { 34 var elmThis = $(this); 35 if (this.nodeType == 3) { 36 var $this = $(this); 37 $this.replaceWith($this.text().replace(/(\S)/g, '<span class="textSplitLoad">$&</span>')); 38 } 39 }); 40 41 42 var obj_t_pos = $(object_pass).offset().top; 43 var scr_count = $(document).scrollTop() + (window.innerHeight/2); // ディスプレイの半分の高さを追加 44 var count = 0 45 46 if(scr_count > obj_t_pos){ 47 // スクロール条件が整って入れば、一度、タイプの実行をさせないようにする 48 typeFlg = false; 49 splitLength = $('.textSplitLoad').length; 50 setElm.find('.textSplitLoad').each(function(i) { 51 splitThis = $(this); 52 splitTxt = splitThis.text(); 53 splitThis.delay(i * (delaySpeed)) 54 .css({ 55 display: 'inline-block', 56 opacity: '0' 57 }) 58 .animate({ 59 opacity: '1' 60 }, fadeSpeed); 61 }); 62 63 setTimeout(function() { 64 //setElm.html(setText); 65 // 終了したら、タイプの実行を許可にする 66 typeFlg = true; 67 }, splitLength * delaySpeed + fadeSpeed); 68 69 70 } 71 72} 73 // --------------------------------------------------------------------------- 74});

スクロールの関数を外に出し、
スクロールの処理を、タイマーに入れる、
タイプを実行していいかのフラグを設け、
一回のタイプが実行完了するまで、次のタイプを実行させない、
としました。
こちらでは、動作確認できております。

また、setText変数がどこにも定義されていないようだったので、
コメントアウトしています。

投稿2018/03/15 07:59

miyabi_takatsuk

総合スコア9528

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

miyabi-sun

2018/03/16 02:09

手段は別意見だったので別回答をぶら下げたのですが、 原因の箇所は納得しましたので参考にさせていただきました。
miyabi_takatsuk

2018/03/16 02:11

miyabi-sunさん> わざわざありがとうございます! 私も、回答拝見いたしまして、 そういや、そうだよな一回だけ実行にすべきだよな、と納得しました 笑
guest

0

スクロールのたびに先頭から書き換えればいいのでしょうか?

javascript

1$(function(){ 2 var vals=$('.mainbox .split').text().split(""); 3 var timerId; 4 $(window).scroll(function(){ 5 $('.mainbox .split').text(""); 6 clearInterval(timerId); 7 var count=0; 8 timerId=setInterval(function(){ 9 $('.mainbox .split').text($('.mainbox .split').text()+vals[count]); 10 count++; 11 if(vals.length<=count) clearInterval(timerId); 12 },100); 13 }); 14}); 15

投稿2018/03/15 07:53

yambejp

総合スコア114572

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問