表示エリアに要素が入ってきた時にアニメーションしつつ表示させるライブラリ。
jQueryなどのライブラリに依存しないスタンドアロン型。
ファイル1つ読み込めばOk
HTML
<script src="https://unpkg.com/scrollreveal@4.0.0/dist/scrollreveal.min.js"></script>
サンプル
targetがビュー内に要素が入ってきた時に表示する。
ScrollReveal().reveal('.block');
var node = document.querySelector('#cake');
var nodeList = document.querySelectorAll('.cookies');
var nodeArray = [
document.querySelector('#pie'),
document.querySelector('#spoon'),
document.querySelector('#ice-cream')
];
ScrollReveal().reveal(node);
ScrollReveal().reveal(nodeList);
ScrollReveal().reveal(nodeArray);
target
targetはCSSセレクタ、DOM node、nodeList、DOM nodeの配列で指定できる。
var node = document.querySelector('#cake');
var nodeList = document.querySelectorAll('.cookies');
var nodeArray = [
document.querySelector('#pie'),
document.querySelector('#spoon'),
document.querySelector('#ice-cream')
];
ScrollReveal().reveal(node);
ScrollReveal().reveal(nodeList);
ScrollReveal().reveal(nodeArray);
ビュー内に要素が入ってきた時に表示する。
{ reset: true }を指定するとビューの外に出た要素が再度ビュー内に入ってきたときアニメーション付きで表示される。
ScrollReveal({reset: true}).reveal('.block');
ビュー内に要素が入ってきた時に下、または上に移動させつつ表示するにはdistanceオプションを設定する。
以下は下から上に100px移動させる指定。マイナスの場合上から下に移動しつつ表示する。
ScrollReveal({ reset: true })
.reveal('.block', {
distance: '100px'
});
ビュー内に要素が入ってきた時に縮小しつつ表示するにはscaleオプションを設定する。
以下は下から上に1.8倍の大きさから元の大きさに変化させつつ表示。
ScrollReveal({ reset: true })
.reveal('.block', {
distance: '-100px',
scale: 1.8
});
ビュー内に要素が入ってきた時に回転しつつ表示するにはrotateオプションを設定する。
ScrollReveal({ reset: true })
.reveal('.block', {
distance: '-100px',
scale: 1.8,
rotate: {
x: 80,
y: 180,
z: 45
}
});