【苦手克服】パララックスサイトを作ってみよう その2

CSS
スポンサーリンク

こんにちは朱夏です。

前回に続いて、パララックスサイトを作っていきます。
今回は、フェードインやスライドして表示される視覚効果を実装できる様にしていきます。

1.フェードインで表示
まずは、スクロールしていくとフェードインで表示されるような効果を作っていきたいと思います。
完全なパララックスサイトでなくても、LPの写真の表示などでも使われていることがあるので、覚えておいて損はなさそうです。

最初に、効果を付ける要素を作っておきます。
Bootstrapのカードを使います。
ポラロイドカメラで撮った写真の様な見た目のカードを作る事が出来ます。

コンテンツ1に以下を追加します。

 

 

次に、CSSにこちらを追記します。

 

次はJavascriptです。
今回はCSSで動きを付けているので、表示した後の固定のためにJSが使われているようです。
classを追加して、後から読み込まれたスタイルを優先する仕様を使った固定方法ですね。

 

2.スライドで表示
横からスライドして来て定位置で止まるという効果を付けていきたいと思います。
これは、フェードインの時の発展形で作れました。

まず、スライドさせたい要素にclassを指定します。
今回は”effect-sride”としました。

そして、CSSに以下の追記をします。

 

Javascriptには、先程と同じようにclassを追加する記述を追記します。

 

これで、スクロールしてくると右からスライドしてくるように出来ました。
フェードインしていないので先程のものより簡単に実装できた感じです。

 

まだまだ続きます
また長くなりそうなので、今回はこのくらいにしておきます。
次回は、要素毎にスクロールの速度を変化させる効果を付けてみようと思います。今回は以上となります。

タイトルとURLをコピーしました