Scroll-Reveal
今回は、JavaScriptのScroll-Revealという機能を使ってサイト模写を行いました。
出来上がったサイトがこちら。(pc版のみ)
このScroll-Revealという機能は文字や画像に動きをつけるというものです。
例えば見出しを左から右に動かして定位置に配置する。画像を下から上へ動かして配置するといったものです。
作り方
まずは基礎となるHTML、CSSを記述します。そして、Scroll-Revealというサイトにアクセスします。ガイドからインストールを選択し、scriptタグをコピーします。そして、こちらをHTMLファイルのbody閉じタグ直前に配置します。さらにScroll-Revealのカスタマイズから【ScrollReveal().reveal(‘.tagline’, { delay: 500 });】をコピーします。そして先程のscriptタグの下に記述します。revealの（）内の”内に動かしたい要素を入れます。delayは要素が動くまでの時間を表しますので調整したい方はこちらの数値を変えてください。
実際に動かす方法ですが、dileyの後に 【,origin:’ 動かしたい方向’interval:数値,】を入力します。動かしたい方向はtop,left,right,botomで選択します。 intervalは動き始めるまでの時間となります。
参考動画
今回、参考にさせてもらったのはプログラミングチュートリアルのshinさんのこちらの動画になります。
実際にコードを書きながら動画を進めてくれるので、とても参考になります。こちらの動画を見ながらコーディングをするのをおすすめします。
以前作ったサイトの記事はこちら
コメント