月別: 2018年2月

(35) 背景画像をスクロールさせない

(1) やりたいこと

ページ内の表示物が増えると、画面をスクロールさせることになる。
このときに、表示物はスクロールさせても、背景画像はスクロールさせずに固定表示させたい。

(2) 実現方法

出来上がったサンプルはこちら。
https://hp.dogrow.net/sample/00035

index.html

「background-attachment: fixed;」で背景画像の表示位置を固定できる。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
body.bg{
	background: url(./img.jpg) no-repeat center;
	background-size: cover;
	background-attachment: fixed;
}
</style>
</head>

<body class="bg">
<p style="padding-bottom:500px;">あああああ</p>
<p style="padding-bottom:500px;">いいいいい</p>
<p style="padding-bottom:500px;">ううううう</p>
<p style="padding-bottom:500px;">えええええ</p>
<p style="padding-bottom:500px;">おおおおお</p>
</body>
</html>

(34) ScrollRevealで簡単アニメーション

(1) プログラムを入手

こちら(↓)の公式サイトを参照のこと。
https://scrollrevealjs.org/

(2) 簡単サンプルを作成

出来上がったサンプルはこちら。
https://hp.dogrow.net/sample/00034
ページをスクロールすると、各画像の出現時にそれぞれアニメーションします。
画像1: 回転
画像2: フェードイン&拡大
画像3: 右から左へシフト

1) index.html

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<style>
img{
	display: block;
	margin-bottom:500px;
}
</style>
</head>
<body>

<img id="block1" src="./img1.png">
<img id="block2" src="./img2.png">
<img id="block3" src="./img3.png">

<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="./scrollreveal.min.js"></script>
<script src="./myscript.js"></script>

</body>
</html>

2) myscript.js

補足1: reset=falseにすると、ページ表示後1回だけアニメーションする。
補足2: ScrollReveal実行時に指定したオプションは、配下の全オブジェクトに適用される。

window.sr = ScrollReveal({ reset: true });

var opt_sr1 = {
	scale: 1,
	distance: 0,
	opacity: 1,
	rotate: { x: 0, y: 0, z: -360 },
	duration: 1000,
	delay :500
};
var opt_sr2 = {
	scale: 0.1,
	distance: 0,
	opacity: 0,
	duration: 1000,
	delay :500
};
var opt_sr3 = {
	scale: 1,
	distance: 0,
	opacity: 1,
	origin: 'right',
	distance: '500px',
	duration: 3000,
	delay :500
};

sr.reveal('#block1', opt_sr1);
sr.reveal('#block2', opt_sr2);
sr.reveal('#block3', opt_sr3);

(3) その他のオプション

いろいろと組み合わせれば面白いイフェクトが得られる。
詳細は Githubを参照のこと。
https://github.com/jlmakes/scrollreveal
※オプションのデフォルト値もこちらを参照のこと。

参考サイト

https://scrollrevealjs.org/ :公式サイト
https://www.merges.co.jp/demo/scrollreveal.php :いろいろな使い方を紹介してくださっています。