画像がフェードインしてからフェードアウトする
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css">
<title>Document</title>
<script src="jquery.min.js"></script>
<script src="https://unpkg.com/masonry-layout@4/dist/masonry.pkgd.min.js"></script>
<script src="https://unpkg.com/imagesloaded@4/imagesloaded.pkgd.min.js"></script>
<script>
$(function(){
var $grid = $('.grid').masonry({
// options
itemSelector: 'none',
columnWidth: '.grid__item',
gutter: 20,
stagger: 30,
percentPosition: true,
visibleStyle: { transform: 'translateY(0)', opacity: 1 },
hiddenStyle: { transform: 'translateY(100px)', opacity: 0 },
});
var msnry = $grid.data('masonry');
$grid.imagesLoaded(function() {
$grid.masonry( 'option', { itemSelector: '.grid__item' });
var $items = $grid.find('.grid__item');
$grid.masonry( 'appended', $items );
});
var nextSlugs = [
'page2.html',
'page3.html'
];
function getPath() {
var slug = nextSlugs[ this.loadCount ];
if( slug ) {
return 'https://www.miso.blog/demo/masonry_infinitescroll/';
}
}
});
</script>
</head>
<body>
<h1>Infinite Scroll - Masonry image grid</h1>
<ul class="grid">
<li class="grid__item fadein"> <img src="sdfsafasfas.png"></li>
<li class="grid__item fadein"> <img src="sdfsafasfas.png"></li>
<li class="grid__item fadein"> <img src="sdfsafasfas.png"></li>
<li class="grid__item fadein"> <img src="sdfsafasfas.png"></li>
<li class="grid__item fadein"> <img src="sdfsafasfas.png"></li>
<li class="grid__item fadein"> <img src="sdfsafasfas.png"></li>
<li class="grid__item fadein"> <img src="sdfsafasfas.png"></li>
<li class="grid__item fadein"> <img src="sdfsafasfas.png"></li>
<li class="grid__item fadein"> <img src="sdfsafasfas.png"></li>
</ul>
</div>
<script>
$(function(){
$(window).scroll(function (){
$('.fadein').each(function(){
var position = $(this).offset().top;
var scroll = $(window).scrollTop();
var windowHeight = $(window).height();
if (scroll > position - windowHeight + 200){
$(this).addClass('active');
}
});
});
});
</script>
</body>
</html>
-------------------------------------------------------------------------------
@charset "utf-8";
body {
font-family: sans-serif;
line-height: 1.4;
font-size: 18px;
padding: 20px;
max-width: 640px;
margin: 0 auto;
}
.grid {
max-width: 1200px;
}
/* reveal grid after images loaded */
.grid.are-images-unloaded {
opacity: 0;
}
.grid__item,
.grid__col-sizer {
width: 27%;
}
.grid__gutter-sizer { width: 2%; }
/* hide by default */
.grid__item {
margin-bottom: 20px;
float: center;
}
.grid__item--height1 { height: 140px; background: #EA0; }
.grid__item--height2 { height: 220px; background: #C25; }
.grid__item--height3 { height: 300px; background: #19F; }
.grid-item--width2 { width: 400px; }
.grid__item img {
display: block;
max-width: 100%;
}
.fadein {
opacity : 0;
transform : translate(0, 100px);
transition : all 1s;
}
.fadein.active{
opacity : 1;
transform : translate(0, 0);
}
何故か画像がフェードアウトして表示されません。
やりたい事は、ある一定の位置にスクロールして調整して
画像を読み込んでフェードインさせて表示させたいのですが
ご教示お願いします。
お礼
一度打ち切りまして新しく立ち上げなおしますね～！ ありがとうございました！
補足
ありがとうございます。 ＣＳＳでの対応の仕方はわかるのですがＪＳでの対応のソースの 書き方がわかりません・・。 初心者なもので・・ ご教授いただければ有難いです・・！