【JavaScript】ページのスクロールに合わせて要素を動かす［ScrollReveal］の使い方
ページをスクロールさせて、非表示だった特定の要素がウィンドウ内に入ってきたときに、指定したアニメーションエフェクト付きで表示させるスクリプト［ScrollReveal］を紹介します。 以下の公式配布サイトのデモを見れば何が起きているのか一目瞭然ですね。 ScrollReveal : http://scrollrevealjs.org 要素がviewportに現れたタイミングで様々な表示処理を施すことができます。 なお各エフェクトや表示のタイミングはオプション設定で詳細に指定可能です。 ［ScrollReveal］の導入方法はカンタンです。 まずはGitHubから必要なファイルをダウンロードしてきます。 https://github.com/jlmakes/scrollreveal.js 「Download ZIP」というボタンをクリックすればスグにダウンロードがはじまります。 入手したzi
パララックス効果が秀逸なWebサイト＆作り方まとめ
今更感がこの上ないですが「パララックス」をうまく取り入れたWebサイトをまとめて紹介します。パララックスは、5年くらい前からWebデザインのトレンドとしてなんだかんだで取り上げられ続けていますね。2017 Design Trendsでもピックアップされています。 この記事の後半では作り方も解説しています。参考にしてみてくださいませ。 1. パララックスとは？ パララックス（parallax）は英語で「視差」という意味があります。ざっくりというと「部分ごとに動くスピードや、動く方向に差をつける」というイメージです。Webデザインでは、スクロール効果としてパララックスがよく取り入れられます。 緑の部分と、背後の黒の部分で動くスピードが違うことが分かるかと思います。このように差をつけることで、奥行き感を出したり、目を引くようなデザインにすることができる…というわけです。 パララックスの例 実際に
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
