東京都新宿区のWeb制作会社 ウェブラボ株式会社

クリエイターブログ

スクロールの判定とCSSアニメーションを使ってみる

2018.02.26 Posted by

こんにちは、ウェブラボ技術メモです。
今回はjsでスクロールの判定を行い、それに応じてCSSでアニメーションしてみます。

DEMOはこちら

それでは実際に実装していきましょう。

まず、HTMLのbody内でアニメーションを効かせたい要素にクラスを与えます。

■HTML body内

次にhead内でjquery本体を読み込ませ、スクロールの判定を行うjsを記述します。

■HTMLhead内

これでスクロールの応じて、クラス「active」が与えられるようになりました。
最後にクラス「active」を得たとき、CSSでアニメーションさせるように記述します。

■HTMLhead内 CSS部分

対応ブラウザについて確認してみました。
◯ Google Chrome
◯ Firefox
◯ Safari
◯ Opera
◯ Internet Explorer 10+
× Internet Explorer 7、8、9

以上、技術メモでした。

オリエンシートダウンロード

オリエンシートダウンロード

PAGETOP

お問い合わせContact

まずはお気軽にご相談ください。

Web制作・コンサルティング・システム開発に関するお問い合わせ・お見積もり依頼は、
電話・問い合わせフォームより受け付けております。(受付時間:平日9:30〜18:30)

〒160-0004 東京都新宿区四谷4丁目33-2
マーキュリースクエア4F

TEL:03-5366-3277 FAX:03-5366-3278