Web筋トレも使っているサーバー!ロリポップを使ってみない?

【コピペOK】スクロールでコンテンツにアニメーション◇コーディングテク【デモあり】

Sponser Link

今日はLPを想定して、レスポンシブ対応で、

『スクロールでコンテンツにアニメーション』

のコーディングをやっていきたいと思います。

今日やりたいこと。

①スクロールでコンテンツが右からのスライドで表示される

②左右内側から同時にスライドして表示させる

③左右外側から同時にスライドして表示させる

 

See the Pen
横からスライドしてコンテンツを見せるアニメーション
by studio-0 (@studio-0)
on CodePen.

Sponser Link

①スクロールでコンテンツが右からのスライドで表示される

HTML

これが画像がスライドする前の白い部分です。

CSS

これが画像がスライドする前の白い部分です。
onクラスがついたら、背景白の<div class=”fade__inner fadeInLeft”></div>が右から左に移動します。

overflow: hidden;があるので、画面から消えて行くように見えます。

JavaScript

 

 

Sponser Link

②左右内側から同時にスライドして表示させる

HTML

<li>にfade__boxをつけてます。

CSS

①のcssに追加して

これで画像を並べています。

中央から同時に左右にスライドします。

Sponser Link

③左右外側から同時にスライドして表示させる

HTML

CSS

CSSは①、②とほぼ一緒です。

重なるようにしている分、少し複雑です。

両サイドの外側から画像がスライドしてきます。

一つの動きでも、使い方で色々な見せ方ができますね。

display:flexを使って、align-content: center;で縦の中央で合わせています。

高さを揃えるjs

GitHubの「jquery.matchHeight.js」ページからダウンロードできます。
liabru/jquery-match-height · GitHub

これを使って、左右の<div>の高さを合わせています。

使い方は簡単です。

Sponser Link

完成!

動きのあるコンテンツを作ることができました!

See the Pen
横からスライドしてコンテンツを見せるアニメーション
by studio-0 (@studio-0)
on CodePen.

Sponser Link

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

CAPTCHA