 |
 |
前号へ
このコーナーでは、テンプレートのカスタマイズについて、実際のサンプルページを元に紹介していきます。
皆さん、こんにちは。おちゃのこネットの刑部です。
今回のデザイン道場は、画面をスクロールして画像位置にきた時にフェードイン表示する方法をご紹介します。
※JavaScriptを利用します。
 |
|
 |
 |
デザイン管理→スタイルシートの編集から下記の指定をコピーして貼り付けて下さい。
※貼り付け位置は、最下部にお願い致します。
<div class="fadein show"><img src="https://cafe-responsive.ocnk.net/data/cafe-responsive/image/003.jpg" width="600" /></div>
<script>
$(function(){
$(window).on('load scroll', function() {
var winScroll = $(window).scrollTop();
var winHeight = $(window).height();
var scrollPos = winScroll + (winHeight * 0.8);
$(".show").each(function() {
if($(this).offset().top < scrollPos) {
$(this).css({opacity: 1, transform: 'translate(0, 0)'});
}
});
});
});
</script>
.fadein {
opacity: 0;
transform: translateY(20px);
transition: all 1.3s 0s ease-out;
}
Copyright (C) 2004-2006 OCHANOKO-NET All Rights Reserved.