【CSS/JS】スクロールして到達したときにUIをフワッと出す最低限のコード
ブラウザをスクロールして、目的のUIに到達したときにフワッとアニメーションで表示するという、よくあるあの動きを、プラグインなど使用せず最低限の実装で実現する方法を自分なりにまとめてみました。
(今まではプラグインなどに頼り、なんとなく実装していたので)
CSS
フワッと出るので「fuwa」というクラスにしてみました。ここは適当に変更してください。
*[class^="fuwa"]{
opacity: 0.01;
transition: all 500ms;
}
.fuwa-up {/*下から上に*/
transform: translate(0, 50px);
}
.fuwa-down {/*上から下に*/
transform: translate(0, -50px);
}
.fuwa-left {/*右から左に*/
transform: translate(50px, 0);
}
.fuwa-right {/*左から右に*/
transform: translate(-50px, 0);
}
/* 画面内に入った状態 */
*[class^="fuwa"].scrollin {
opacity: 1;
transform: translate(0, 0);
}
fuwaとだけ記述すると、上下左右の動きの無いシンプルにフェードインで表示されます。また記事の一覧などを遅れて表示させたい場合は以下のスタイル「.fuwa-box」で包みます。
.fuwa-box *[class^="fuwa"]:nth-of-type(1){
-moz-transition-delay: 100ms;
-webkit-transition-delay: 100ms;
-o-transition-delay: 100ms;
-ms-transition-delay: 100ms;
}
.fuwa-box *[class^="fuwa"]:nth-of-type(2){
-moz-transition-delay: 200ms;
-webkit-transition-delay: 200ms;
-o-transition-delay: 200ms;
-ms-transition-delay: 200ms;
}
.fuwa-box *[class^="fuwa"]:nth-of-type(3){
-moz-transition-delay: 300ms;
-webkit-transition-delay: 300ms;
-o-transition-delay: 300ms;
-ms-transition-delay: 300ms;
}
.fuwa-box *[class^="fuwa"]:nth-of-type(4){
-moz-transition-delay: 400ms;
-webkit-transition-delay: 400ms;
-o-transition-delay: 400ms;
-ms-transition-delay: 400ms;
}
.fuwa-box *[class^="fuwa"]:nth-of-type(5){
-moz-transition-delay: 500ms;
-webkit-transition-delay: 500ms;
-o-transition-delay: 500ms;
-ms-transition-delay: 500ms;
}
.fuwa-box *[class^="fuwa"]:nth-of-type(6){
-moz-transition-delay: 600ms;
-webkit-transition-delay: 600ms;
-o-transition-delay: 600ms;
-ms-transition-delay: 600ms;
}
もっとたくさん追加したい場合はnth-of-typeのカッコ内の数と、transition-delayを増やして追加してください。
めんどくさい人はsassで以下のように30個くらい追加しちゃうと楽です
SCSSの場合
.fuwa-box{
@for $i from 1 through 30 {
*[class^="fuwa"]:nth-of-type(#{$i}){
-moz-transition-delay:$i * 100ms;
-webkit-transition-delay:$i * 100ms;
-o-transition-delay:$i * 100ms;
-ms-transition-delay:$i * 100ms;
}
}
}
HTML
HTMLタグは以下のようになります。「.fuwa-box」クラスで包むと遅延して表示されます。
<div class="fuwa">
シンプルなフェードイン
</div>
<div class="fuwa-up">
下から上にフワリ
</div>
<div class="fuwa-down">
上から下にフワリ
</div>
<div class="fuwa-left">
右から左にフワリ
</div>
<div class="fuwa-right">
左から右にフワリ
</div>
<div class="fuwa-box">
<div class="fuwa-up">
遅延して表示
</div>
<div class="fuwa-up">
遅延して表示
</div>
<div class="fuwa-up">
遅延して表示
</div>
<div class="fuwa-up">
遅延して表示
</div>
</div>
JS
javascriptには以下のコードを記述します。スクロールして画面内に入ったら「scrollin」クラスを追加するようにしています。タイミングを微調整したいときはcoef=200の部分を調整してください。
$(function(){
var fuwari = function(){
var coef = 200;//微調整の係数
$('*[class^="fuwa"').each(function(){
var elemPos = $(this).offset().top,
scroll = $(window).scrollTop(),
windowHeight = $(window).height();
if (scroll > elemPos - windowHeight + coef){
$(this).addClass('scrollin');
}
});
}
$(window).scroll(function(e){
fuwari();
}
fuwari();//ページ読み込み直後に一回実行
});