画面スクロールに合わせて画像がフワッと動きながら出てくるエフェクト
スクロールで画像がフワッと動きながら出てくるエフェクトのデモページ
はこちら。
CSSとjQueryだけで簡単に実現できる。
用意するもの
CSS、JSファイル、画像などのセットをまとめてダウンロードするのはこちら。
moveinimg.js の中身
$(function(){
$(‘.moveinimg’).css(“opacity”,”.1″);
$(window).scroll(function (){
$(‘.moveinimg’).each(function(){
var imgPos = $(this).offset().top;
var scroll = $(window).scrollTop();
var windowHeight = $(window).height();
if (scroll > imgPos – windowHeight + 200){
$(this).animate({
“margin”: “0px”,
“opacity”: “1”
}, 1000);
}
});
});
});
適当な解説：
.moveinimg のclassがついている時にまず画像を半透明にセットする。
(“opacity”,”.1″); の数字を変更することで透過度を変更できる。
if (scroll > imgPos – windowHeight + 200){ これで、画像まで200pxのところまでスクロールすると実行。
$(this).animate({
“margin”: “0px”,
“opacity”: “1”
}, 1000);
で、marginを0pxに、更に透過度を透過なしに、1秒で変更。
moveinimg.css の中身の必要な部分だけ
.movein {
position: relative;
min-height: 210px;
display: block;
}
.moveinimg {
margin-left: -100px;
}
絶対に必要なのが 親要素の .movein にposition:relative;
.moveinimgの初期位置をずらしておく。→ のちのちjQueryで margin:0;に移動させる。
HTMLの<head>と</head>の間で読み込む
<link rel=”stylesheet” type=”text/css” href=”css/moveinimg.css” /><!– moveinimg –>
<script type=”text/javascript” src=”https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js”></script><!– moveinimg –>
<script type=”text/javascript” src=”js/moveinimg.js”></script><!– moveinimg –>
先ほどの、moveinimg.cssとmoveinimg.jsとjqueryを読み込む。
順番に注意。
フワッと表示させるHTMLのメニューの部分
<div class=”movein”>
<p class=”moveinimg”><img src=”img/image1.jpg” alt=”image1″ /></p>
画像は準備すること。
div class=”movein” の画像が最初は、半透明で、margin -100px セットされているが、スクロールするとふわっと表示される。