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

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

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

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

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

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

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

【index.html】

<h1 class="down-to-top">Welcome</h1>

1	<h1 class="down-to-top">Welcome</h1>

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

【style.css】

.down-to-top {
  opacity: 0;　/*不透明度を指定*/
  transform: translateY(10px); /*transformプロパティの値に関数を指定することで、移動、回転、伸縮、傾斜の設定が可能*/
  transition: all 1s;　/*変化の時間*/
}
.down-to-top.scrollin {
  opacity: 1;
  transform: translateY(0);
}

.down-to-top {

opacity: 0;　/*不透明度を指定*/

transform: translateY(10px); /*transformプロパティの値に関数を指定することで、移動、回転、伸縮、傾斜の設定が可能*/

transition: all 1s;　/*変化の時間*/

}

.down-to-top.scrollin {

opacity: 1;

transform: translateY(0);

}

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

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

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

【jQuery】

$(function(){
    $(window).scroll(function (){
        $('.left-to-right, .down-to-top').each(function(){
            var elemPos = $(this).offset().top;
            var scroll = $(window).scrollTop();
            var windowHeight = $(window).height();
            if (scroll > elemPos - windowHeight + 150){
                $(this).addClass('scrollin');
            }
        });
    });
});

$(function(){

$(window).scroll(function (){

$('.left-to-right, .down-to-top').each(function(){

var elemPos = $(this).offset().top;

var scroll = $(window).scrollTop();

var windowHeight = $(window).height();

if (scroll > elemPos - windowHeight + 150){

$(this).addClass('scrollin');

}

});

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

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

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

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

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

2020.10.08

Blog