最近、遊び心が溢れるインタラクティブなウェブサイトが多くなってきました。見ているだけで楽しくなるウェブサイトは、気がついたら一番下までスクロールしていて、そのサイトの内容を読んでしまっています。今回、そんなインタラクティブでも、よく見かけるスクロールをして表示範囲に入ったときに実行されるアニメーションの作り方をご紹介します。スクロール判定の作り方スクロール判定は、CSSのみではできないため、javaScriptを使用して作成します。以下、スクロール判定のソースコードになります。scrollChk();});</script>このソースは、「scroll-animation」というClassに「active」を付与します。これだけで、スクロール時のイベント実行の作成は完了です。イベントに合わせてCSSでアニメーションまず、試しに以下のようなHTMLを設置しましょう。fadein">Hello!</div>次にCSSの定義をします。1;}たったこれだけで以下のようにスクロールでフェードインするアニメーションができました。CodePen.とても簡単ですね。あとはCSSの書き方次第で、好きなアニメーションを作ることができます。以下は参考程度にアップしておきます。1.下からフェードインHTMLを書きます。fadein-bottom">Hello!</div>CSSを書きます。CodePen.2.左からフェードインHTMLを書きます。fadein-left">Hello!</div>CSSを書きます。1;}さっきよりは変化がありますね。CodePen.3.ズームインHTMLを書きます。zoomin">Hello!</div>CSSを書きます。100%;}こんな簡単な書き方だけで、ちょっとした動きが付けられます。CodePen.4.左から順に文字を表示HTMLを書きます。World!!</span></div>CSSを書きます。0%;}左からフェードインこちらの方がキレイですね。CodePen.5.ぼんやりフェードインHTMLを書きます。World!!</span></div>CSSを書きます。}}キーフレームを使えば、アニメーションのバリエーションも増えますね。み込みの実装方法2019.02.19Web制作・ホームページ制作Canvasを使ったカッコいいドットアニメーション背景にも使えるCanvasのカッコいいドットアニメーションを6つご紹介します。最新技術、PWAとは?通常のHTMLとネイティブアプリの違いについてスマホサイトは当たり前、そんなの世の中で、どうスマホ対応すれば他の企業と差別化できるか。考えたとき、今ホットな施策「PWA対応」はいいかもしれない。