コンテンツ
- 01.ページのbodyタグにコードを追加します
- 02.ディスプレイのスタイリング
- 03.グリッチの表示
- 04.すべてを保持する
- 05.グリッチの実行
- 06.正常に戻る
- 今すぐGenerateNewYorkのチケットを入手してください
注目を集め、それを維持するための優れた方法は、オフからあなたの才能を披露するWebサイトレイアウトを作成することです（まともなWebサイトビルダーがビルドを支援できます）。ウクライナのウェブエージェンシーVintageのサイトは、この好例であり、ガラス粒子から構築された脈動するロゴとホバーするとアクティブになる素敵なグリッチの目を引く組み合わせで、VRデザインポートフォリオにあなたを引き込みます。
- Webアニメーション：コードは必要ありません
控えめに使用された単純なグリッチ効果は、サイトに視覚的な興味を少しだけ追加することができ、驚くほど簡単に実装できます。方法は次のとおりです。
複雑なウェブサイトを念頭に置いていますか？あなたのウェブホスティングが仕事に任されていることを確認してください。また、デザインファイルをクラウドストレージに安全に保管してください。
ファイルをダウンロードする このチュートリアルでは。
01.ページのbodyタグにコードを追加します
単純なグリッチ効果の作成は、非常に多くの異なる方法で行うことができます。ここでは、テキストの上にアニメーションGIFを配置して、ディスプレイでオンとオフを切り替えます。まず、このコードをページのbodyタグに追加します。
div id = "holder" onmouseover = "glitch（）"> div id = "glitch"> / div> WEB br> PRODUCT- br> ION / div>
02.ディスプレイのスタイリング
コンテンツは、WorkSansと呼ばれるGoogleFontsの特定の書体を使用します。そこからリンクを取得し、ヘッドセクションに配置します。次に、CSSをスタイルタグまたは別のCSSファイルに追加します。ページは白のテキストで黒くなり、ホルダーはテキスト用にスタイルアップされます。
本文{背景：＃000; font-family：「WorkSans」、sans-serif;色：#fff; } #holder {font-size：6em;幅：500px;高さ：300px;マージン：0自動;位置：相対; }
03.グリッチの表示
グリッチ効果は、テキストの真上に配置される背景画像になります。ここで重要なのは、不透明度をゼロに下げて非表示にし、ユーザーがテキストを操作するまで表示されないようにすることです。
#glitch {位置：絶対;上：0;左：0; z-index：10;幅：100％;高さ：100％;背景：url（glitch.gif）;不透明度：0; }
04.すべてを保持する
本文セクションの最後にスクリプトタグを追加し、ドキュメント内の「グリッチ」divへのキャッシュされた参照を作成します。次に、「over」という名前の変数がfalseに設定されます。これは、ユーザーがテキスト上を移動するとオンとオフになります。
var gl = document.getElementById（ "glitch"）; var over = false;
05.グリッチの実行
グリッチ関数は、マウスがテキスト上を移動したときに呼び出されます。グリッチが実行されていない場合は、グリッチの可視性がオンになり、1秒半後にオフになります。これを試して、乱数を使用して予測不可能にすることができます。
function glitch（）{if（over == false）{gl.style.opacity = "1"; setTimeout（function（）{normal（）;}、1500）; }}
06.正常に戻る
グリッチ効果は、ユーザーにとって煩わしすぎるため、そのままにしておくべきではありませんが、インタラクティブな要素としてはうまく機能します。ここで、コードは不透明度をゼロにリセットして、テキストの上に表示されないようにします。
function normal（）{gl.style.opacity = "0"; }
今すぐGenerateNewYorkのチケットを入手してください
3日間のウェブデザインイベントGenerateNewYorkが帰ってきました。 2018年4月25日から27日の間に開催されるヘッドラインスピーカーには、SuperFriendlyのDan Mall、WebアニメーションコンサルタントのVal Head、フルスタックJavaScript開発者のWesBosなどが含まれます。丸一日のワークショップと貴重なネットワーキングの機会もあります-それをお見逃しなく。今すぐGenerateチケットを入手してください。
この記事は、もともとクリエイティブなウェブデザイン雑誌WebDesignerの270号に掲載されました。 ここで270号を購入する または ここでWebDesignerを購読します.
