Blog

下からふわっとフェードイン

こんにちは。Web制作担当のEです!

前回の更新から空いてしまってすみません(´・ω・)

 

今「サブスクリプションサービス」で掲載しているサンプルサイトをhtmlで置き換えるという作業をしています。

サンプルサイトをみて頂くとわかるようにカーソルを動かすと下からふわっと表示される動きをしています。

これをhtml、cssを使用し似たような動きを表現したいと思います。

 

 

まず、トップにある「Welcome」という文字にクラス名「down-to-top」を付けます。

 

【index.html】

 

cssでは下記のような記述をしています。

 

【style.css】

簡単に説明すると、opacityを0に設定することによって要素を透明にして、

transformをtranslateY(10px)にして10px下にズラしています。

そしてtransitionで要素をふわっと表示させるまでの遷移時間を1秒に設定しています。

 

【jQuery】

jQueryにはこの記述を追加しました。

 

 

これで、スクロールすると「Welcome」の文字が下からふわっと表示されるようになりました!

 

 

結構色んな方がフェードインの書き方を掲載していますが、

私はこの書き方が不具合なく表示されたので記録としてブログに残します!

 

 

 

_

タグ:css,html,JavaScript,jQuery,フェードイン,下からフェードイン

2020.10.08