画像がフェードインしてからフェードアウトする
<!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);
}
何故か画像がフェードアウトして表示されません。
やりたい事は、ある一定の位置にスクロールして調整して
画像を読み込んでフェードインさせて表示させたいのですが
ご教示お願いします。
補足
遅くなりましてすみません・・試してみたのですが最初から表示されていないので下のコンテンツが全て上に上がってしまい画像も表示しませんでした～ 他のソースでやり直したのですがそれではＩＥのみしかフェードインになりませんでした・・・。一度この質問を打ち切りまして新たに質問を立ち上げてみようと思います。ありがとうございました！