画面スクロールに合わせて画像がフワッと動きながら出てくるエフェクト

スクロールで画像がフワッと動きながら出てくるエフェクトのデモページ
はこちら。

CSSとjQueryだけで簡単に実現できる。

用意するもの

・moveinimg.js
・moveinimg.css

CSS、JSファイル、画像などのセットをまとめてダウンロードするのはこちら。

moveinimg.zip

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 セットされているが、スクロールするとふわっと表示される。

CSS、JSファイル、画像などのセットをまとめてダウンロードするのはこちら。

moveinimg.zip

 
スクロールしたら途中フワッと浮き出るメニューのデモページ
はこちら。