自動テキストトランジション効果を実現する方法_html/css_WEB-ITnose

この投稿は、u013546284 によって、2014-01-25 15:06:38 に最終編集されました

http://www.w3schools.com/cssref/tryit.asp?filename=trycss3_transition
上記の W3C Web サイトの移行効果には、以下が必要ですマウスの動き 一番上に行くと変わります。
http://www.cheapmortgages.com/

ディスカッションに返信(解決策)

<pre id="test">

There were 51,193 Mortgage Approvals in September totalling £7.25 Billion 

<script> var index = 0; var word = document.getElementById("show").innerHTML; function type() { document.getElementById("test").innerText = word.substring(0, index++); } setInterval(type,200);</script>
テスト済み

<pre id="test">

There were 51,193 Mortgage Approvals in September totalling £7.25 Billion 

<script> var index = 0; var word = document.getElementById("show").innerHTML; function type() { document.getElementById("test").innerText = word.substring(0, index++); } setInterval(type,200);</script>
測定済み
用事があるので、今夜チェックしてみます。文字を 1 つずつ出力するのは...

ヒントを教えてください。これは div です。CSS スタイルのオーバーフローは非表示になっています
JS を使用して幅を変更し、効果を滑らかにするために、window.requestAnimationFrame を使用できます。 (幅を変更する関数) リフレッシュ レートを画面と同じにする

ヒントを教えてください。これは div であり、CSS スタイルのオーバーフローは非表示になっています

効果を実現するには、JS を介して幅を変更します。 window.requestAnimationFrame（幅を変更する関数）を使用して、リフレッシュレートを画面と同じにすることができます
このWebサイトのソースコードを見たところ、このWebサイトで使用されている方法は、白い背景のdivでカバーしてからです。効果を実現するには、それを移動します。実装はもう少し複雑です

ヒントを与えておきます。これは div であり、CSS スタイルのオーバーフローは非表示になっています
滑らかにするために、その効果は JS を通じて幅を変更することで実現されます。 、 window.requestAnimationFrame（幅を変更する関数）を使用して、リフレッシュレートを画面と同じにすることができます。 このWebサイトで使用されている方法は、白のdivで覆うことです。背景を追加してから移動して効果を実現します。実装は少し複雑です

自動再生については、JS コードを div コードの下に配置し、window.requestAnimationFrame (幅を変更する関数) を記述するだけです。

また、JS を使用したくない場合は、CSS3 アニメーションを使用できますが、下位バージョンのブラウザとの互換性は良くありません

<pre id="test">

There were 51,193 Mortgage Approvals in September totalling £7.25 Billion 

<script> var index = 0; var word = document.getElementById("show").innerHTML; function type() { document.getElementById("test").innerText = word.substring(0, index++); } setInterval(type,200);</script>


ヒントを与えます、これはdiv、CSSスタイルのオーバーフローは非表示になります

効果はJSを通じて幅を変更することで実現され、滑らかさのために使用できます。 window.requestAnimationFrame（幅を変更する関数）を使用して、リフレッシュレートを画面と同じにします

見てみましたこのウェブサイトで使用されている方法は、白い背景の div で覆い、それを移動することです。実装はもう少し簡単です

自動の場合は。再生するには、JS コードを div コードの下に配置し、その中に window.requestAnimationFrame (幅を変更する関数) を直接記述するだけです

また、JS を使用したくない場合は、CSS3 アニメーションを使用して実現できますただし、以前のバージョンのブラウザとの互換性は良好ではありません
ありがとうございます!!!!