スクロールしたら画像が下からふぉあ〜んと出てくる効果を
参考にさせて頂いたサイトです
効果を出すためのJavaScrptやCSS、レスポンシブデザインに対応するためにコードを使わせていただいたり、参考にさせていただいています。
ありがとうございます。
きっかけ
ブラウザを上にスクロールしたら下から出てくる画像やコンテンツなどが、ふぉあ〜ん、ふぉあ〜んと出てくる効果が面白いな〜、試しに作ってみたいなーと漠然と思っていたのですが、ちょっと機会があり勉強のために作ってみました。
まだ解析途中で（僕にはとても難しい・・・）すが、なんとかふぉあ〜んの効果が出来るようになりました。
Demo
ダウンロード
コードなど(抜粋)
Javascript
メニューが一番上に来たら固定にする処理も入っています。（navFix()）
;(function () {
// Animations
var contentWayPoint = function() {
var i = 0;
$('.animate-box').waypoint( function( direction ) {
if( direction === 'down' && !$(this.element).hasClass('animated') ) {
i++;
$(this.element).addClass('item-animate');
setTimeout(function(){
$('body .animate-box.item-animate').each(function(k){
var el = $(this);
setTimeout( function () {
el.addClass('fadeInUp animated');
el.removeClass('item-animate');
}, k * 200, 'easeInOutExpo' );
});
}, 100);
}
} , { offset: '85%' } );
};
var navFix = function() {
$('#nav').waypoint( function() {
$('body #nav').removeClass('nav_init')
$('body #nav').addClass('nav_fix')
}, { offset: 0 } );
$('#nav').waypoint( function() {
$('body #nav').removeClass('nav_fix')
$('body #nav').addClass('nav_init')
}, { offset: 1 } );
};
// Document on load.
$(function(){
contentWayPoint();
navFix();
});
}());
CSS
animate.cssが必要です。
あと以下のコードが意外と大切だった。
.animate-box {
opacity: 0;
}
- animate-boxでクラスを定義してある要素を初めは透明にしておく
- offset: ‘85%’ 上から見て85%の位置に来たらJavascriptの処理が実行される
こういう流れなのかな。
