ライブラリを使って 手軽に要素を動かしてみた
WEB制作技術の引き出しを増やすため、自分なりにアレンジしたコードをアウトプットすることにしました。 その中でも特に勉強になったコードを紹介します。 コピペで使えるようになっているので、あなたのサイトで使っていただけるとうれしいです。 あくまでデザインの一例にすぎないので、調整してオリジナルのデザインを作ってみてください！
Animate.css × jquery.inview
様々な動きのパターンを集めたCSSライブラリ「Animate.css」と、要素が画面に入ったら動く「jquery.inview」というJavaScriptライブラリを組み合わせて、スクロールで手軽に要素を動かす方法を解説します。
See the Pen リンクをクリックすると、背景が暗くなり動画や画像やテキストを表示 by Web Navigator (@web-navigator) on CodePen.
jQueryとCSSを組み合わせて動かす
See the Pen jQueryとCSSを組み合わせて動かす by Web Navigator (@web-navigator) on CodePen.
次回の予定
「画面を開いたり」「スクロールしたり」といったきっかけを与えて動くアニメーションをCSSとjQueryを組み合わせて作ってみます ＼＼\\٩( ‘ω’ )و //／／
WEB制作技術の引き出しを増やすため、自分なりにアレンジしたコードをアウトプットすることにしました。
その中でも特に勉強になったコードを紹介します。
コピペで使えるようになっているので、あなたのサイトで使っていただけるとうれしいです。
あくまでデザインの一例にすぎないので、調整してオリジナルのデザインを作ってみてください！
Animate.css × jquery.inview
様々な動きのパターンを集めたCSSライブラリ「Animate.css」と、要素が画面に入ったら動く「jquery.inview」というJavaScriptライブラリを組み合わせて、スクロールで手軽に要素を動かす方法を解説します。
リンクをクリックすると、背景が暗くなり動画や画像やテキストを表示
See the Pen
リンクをクリックすると、背景が暗くなり動画や画像やテキストを表示 by Web Navigator (@web-navigator)
on CodePen.
「Rerun」を押してスクロールして動きを確かめてね！↑
jQueryとCSSを組み合わせて動かす
See the Pen
jQueryとCSSを組み合わせて動かす by Web Navigator (@web-navigator)
on CodePen.
「Rerun」を押してスクロールして動きを確かめてね！↑
次回の予定
「画面を開いたり」「スクロールしたり」といったきっかけを与えて動くアニメーションをCSSとjQueryを組み合わせて作ってみます ＼＼\\٩( ‘ω’ )و //／／
