scrollreveal
まずは実装サンプルを確認
HTML
scrollrevealを入れたい箇所に以下のソースを張り付け、適宜内容を修正する。
<div class="moveleft"> <p><img src="/images/img/SCT_7628s.jpg" width="600" height="399" alt="写真"></p> </div> <div class="moveright"> <p><img src="/images/img/SCT_7628s.jpg" width="600" height="399" alt="写真"></p> </div> <div class="moveup"> <p><img src="/images/img/SCT_7628s.jpg" width="600" height="399" alt="写真"></p> </div> <div class="movedown"> <p><img src="/images/img/SCT_7628s.jpg" width="600" height="399" alt="写真"></p> </div> <p class="moveleft"><img src="/images/img/SCT_7628s.jpg" width="600" height="399" alt="写真"></p> <p class="moveright"><img src="/images/img/SCT_7628s.jpg" width="600" height="399" alt="写真"></p> <p class="moveup"><img src="/images/img/SCT_7628s.jpg" width="600" height="399" alt="写真"></p> <p class="movedown"><img src="/images/img/SCT_7628s.jpg" width="600" height="399" alt="写真"></p>
JSの読み込み
footerに以下のソースを追加（掲載順序注意）。速度の変更や表示方法は適宜変更。
<script src="https://unpkg.com/scrollreveal"></script>
<script>
window.left = ScrollReveal();
left.reveal('.moveleft', {
origin: 'left',
easing: 'ease',
duration: 1000,
distance: '100px',
opacity: 0,
scale: 1
}
);
window.right = ScrollReveal();
right.reveal('.moveright', {
origin: 'right',
easing: 'ease',
duration: 1000,
distance: '100px',
opacity: 0,
scale: 1
}
);
window.fade = ScrollReveal();
fade.reveal('.moveup', {
easing: 'ease',
duration: 1000,
distance: '100px',
opacity: 0,
scale: 1
}
);
window.fade = ScrollReveal();
fade.reveal('.movedown', {
easing: 'ease',
duration: 1000,
distance: '-100px',
opacity: 0,
scale: 1
}
);
</script>