スクロールしたらふわっと表示されるやつ作ってみたよ
はじめに
縦長系のサイトで下にスクロールしていくとふわっと内容が表示されるのってカッコ良くないっすか？
注意事項
ジャバスクリプトを使うので必ずテストが必要です
htmlを作ろう
まずはふわっと表示させたい内容を作りましょう
<p class="animation text1">ふわっと表示される</p> <p class="animation text2">スクロールで見えると</p> <p class="animation text3">ふわっと表示されます</p>
ふわっとさせたい内容に「animation」というクラスをつけておきます。
cssを作ろう
次は装飾です。この部分は皆さまの好きにしてやってください。
<style type="text/css">
.text1{
font-size:16px;
line-height:200%;
margin-top:800px;
}
.text2{
font-size:20px;
line-height:200%;
margin-top:400px;
}
.text3{
font-size:30px;
line-height:200%;
margin-top:400px;
}
.fadeInDown {
-webkit-animation-fill-mode:both;
-ms-animation-fill-mode:both;
animation-fill-mode:both;
-webkit-animation-duration:1s;
-ms-animation-duration:1s;
animation-duration:1s;
-webkit-animation-name: fadeInDown;
animation-name: fadeInDown;
visibility: visible !important;
}
@-webkit-keyframes fadeInDown {
0% { opacity: 0; -webkit-transform: translateY(-20px); }
100% { opacity: 1; -webkit-transform: translateY(0); }
}
@keyframes fadeInDown {
0% { opacity: 0; -webkit-transform: translateY(-20px); -ms-transform: translateY(-20px); transform: translateY(-20px); }
100% { opacity: 1; -webkit-transform: translateY(0); -ms-transform: translateY(0); transform: translateY(0); }
}
</style>
さいごにjavascriptを入れる
さいごにjavascriptを入れれば完成です。
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<script>
$('.animation').css('visibility','hidden');
$(window).scroll(function(){
var windowHeight = $(window).height(),
topWindow = $(window).scrollTop();
$('.animation').each(function(){
var targetPosition = $(this).offset().top;
if(topWindow > targetPosition - windowHeight + 50){
$(this).addClass("fadeInDown");
}
});
});
</script>
デモを用意しました
では、実際にどんな動くをするのかデモをご用意させていただきましたのでご確認ください。
以上でふわっと表示したらごっつカッコええやんの説明を終了いたします。
さいごに
しょぼいサイトも良くなる？
ジャバスクリプトを使ってスクロールするとコンテンツをふわっと表示させると、いつものコンテンツもなんだか見栄えが良く感じませんか？
私個人は最近知ったのですが、海外サイトでよく使われていたらしいですね。
本当に情報収集全然してなかったのでダメっすね。
稼げる副業として何かコンテンツを探しているのですが、見つける時間がなくなってきた・・・
