コンテンツ
ロールオーバーリンクは、特にユーザーが異常なことや独創的なことをしている場合に、ユーザーの注意を引くための優れた方法です。ミドルチャイルドには、他ではめったに見られない素晴らしい効果があり、各文字をキャプチャしてアニメーションで分割します。アニメーションは、訪問者が単語にカーソルを合わせると開始されます。アニメーションは、サンドイッチブランドの遊び心のあるキャラクターを伝えるのに役立ちます。
この記事では、サイトに効果を再現する方法を紹介します。より多くのインスピレーションについては、最高のCSSアニメーションの例へのガイドをご覧ください（それらをコーディングする方法の説明付き）。少し違うものについては、トップのウェブサイトビルダーまたは私たちが選んだ最高のクラウドストレージを試してみてください。また、サイトをより複雑にする場合は、ウェブホスティングが適切であることを確認してください。
01.ロールオーバーテキスト効果
Middle Child Webサイトの優れたテキスト効果の1つは、メニューのロールオーバー効果です。この場合、文字はテキスト上で分割され、わずかに回転します。いくつかの単純なHTMLタグからこれを開始します。
02.CSSを作成する
別のCSSファイルまたはスタイルタグを使用して、次のCSSルールを追加し、本文とラッパーが使用可能な高さ全体を占めるようにすることで、ページをブラウザーのフルサイズで埋めるようにします。
本体{幅：100％;高さ：100％;マージン：0;パディング：0; } .wrapper {表示：グリッド;高さ：100％; }
03.単語を配置します
ザ・ 語 クラスは単語をグリッドの中央に配置します。与えられたテキスト 語 クラスはこれを適用できます。ザ・ アップ クラスは他のすべての文字に適用され、これらは上に移動します。
.word {font-size：3em;マージン：自動自動; } .word .up {display：inline-block;変換：translate3d（0px、0px、0px）rotate（0deg）;移行：すべての0.5秒のイーズインアウト。 }
04.何度も何度も
今、 ダウン クラスは、と非常によく似た設定を共有します アップ しかし、ホバーは上向きの動きを示しています アップ 転がる。見栄えを良くするために、上向きにもわずかに回転させます。
.word .down {display：inline-block;変換：translate3d（0px、0px、0px）rotate（0deg）;移行：すべての0.5秒のイーズインアウト。 } .word：hover .up {変換：translate3d（0px、-8px、0px）rotate（12deg）;色：＃058b05}
05.ホバーダウン
ユーザーがテキストにカーソルを合わせると、downクラスはテキストを下に移動します。 JavaScriptの後半では、テキストは個別のスパンに分割され、クラスは代替スパンに自動的に追加されます。
.word：hover .down {変換：translate3d（0px、8px、0px）rotate（-12deg）;色：＃058b05; }
06.人々のための自動
すべての文字を異なるクラスの交互のスパンに配置する必要があるのは少し面倒なので、JavaScriptでセレクターにクエリを実行し、各文字を取得することでプロセスを自動化します。ここに str 変数は、テキストをループするときに現在の文字を取得します。
スクリプト> var要素= document.querySelectorAll（ ’。word’）; for（var i = 0、l = elements.length; i l; i ++）{var str = elements [i] .textContent; elements [i] .innerHTML = ’’;
07.交互のクラスを追加する
ここで、別のループが各文字を独自のスパン要素に配置し、次のいずれかを追加します。 アップ または ダウン スパンへのクラス。ブラウザでこれを見ると、わずかに回転しながら、テキストが上下に文字ごとに分割されているのがわかります。
ミドルチャイルドのウェブサイトで実際の効果を見ることができます。
for（var j = 0、ll = str.length; j ll; j ++）{var spn = document.createElement（ ’span’）; elements [i] .appendChild（spn）; spn.textContent = str [j]; pos =（j％2）？ '上下'; spn.classList.add（pos）; }} / script>
この記事はもともとクリエイティブなウェブデザイン誌に掲載されました ウェブデザイナー.286号を購入する または 申し込む.
