webサイト制作の勉強|2018月2月クラスブログ

webサイト制作の勉強に関する解説ブログです。

スクロールアニメーション「SCROLL TRIGGER」の実装

ページのスクロールと連動して文字や画像に様々なエフェクトで要素が表示されていくスクロールアニメーション、Javascriptプラグイン「SCROLL TRIGGER」
jQuery不要で動くので動作も軽く、比較的簡単に設定できます。




ScrollTrigger - Scroll based animations with ease

github.com

on-ze.com



デモページ
http://yachin29.com/school/bannerScroll/banner1.html





html

<!doctype html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>banner1</title>
<style>
html,body,ul,li {
margin: 0;
padding: 0;
}
a {
text-decoration: none;
}
img {
vertical-align: bottom;
}
ul {
list-style: none;
width: 960px;
margin: 60px auto;
overflow: hidden;
}
li {
margin: 10px;
float: left;
}
</style>
<link rel="stylesheet" href="demo.css">
</head>

<body>
<ul id="seihoukei">
<li data-scroll="toggle(.fromBottomIn, .fromBottomOut)"><a href="#"><img src="http://placehold.it/300x250"></a></li>
<li data-scroll="toggle(.fromBottomIn, .fromBottomOut)"><a href="#"><img src="http://placehold.it/300x250/B4A582"></a></li>
<li data-scroll="toggle(.fromBottomIn, .fromBottomOut)"><a href="#"><img src="http://placehold.it/300x250/F4A7B9"></a></li>
<li data-scroll="toggle(.fromBottomIn, .fromBottomOut)"><a href="#"><img src="http://placehold.it/300x250/51A8DD"></a></li>
<li data-scroll="toggle(.fromBottomIn, .fromBottomOut)"><a href="#"><img src="http://placehold.it/300x250"></a></li>
<li data-scroll="toggle(.fromBottomIn, .fromBottomOut)"><a href="#"><img src="http://placehold.it/300x250/B4A582"></a></li>
<li data-scroll="toggle(.fromBottomIn, .fromBottomOut)"><a href="#"><img src="http://placehold.it/300x250/F4A7B9"></a></li>
<li data-scroll="toggle(.fromBottomIn, .fromBottomOut)"><a href="#"><img src="http://placehold.it/300x250/51A8DD"></a></li>
<li data-scroll="toggle(.fromBottomIn, .fromBottomOut)"><a href="#"><img src="http://placehold.it/300x250"></a></li>
<li data-scroll="toggle(.fromBottomIn, .fromBottomOut)"><a href="#"><img src="http://placehold.it/300x250/B4A582"></a></li>
<li data-scroll="toggle(.fromBottomIn, .fromBottomOut)"><a href="#"><img src="http://placehold.it/300x250/F4A7B9"></a></li>
<li data-scroll="toggle(.fromBottomIn, .fromBottomOut)"><a href="#"><img src="http://placehold.it/300x250/51A8DD"></a></li>
<li data-scroll="toggle(.fromBottomIn, .fromBottomOut) "><a href="#"><img src="http://placehold.it/300x250"></a></li>
<li data-scroll="toggle(.fromBottomIn, .fromBottomOut) "><a href="#"><img src="http://placehold.it/300x250/B4A582"></a></li>
<li data-scroll="toggle(.fromBottomIn, .fromBottomOut) "><a href="#"><img src="http://placehold.it/300x250/F4A7B9"></a></li>
<li data-scroll="toggle(.fromBottomIn, .fromBottomOut) "><a href="#"><img src="http://placehold.it/300x250/51A8DD"></a></li>
<li data-scroll="toggle(.fromBottomIn, .fromBottomOut)"><a href="#"><img src="http://placehold.it/300x250"></a></li>
<li data-scroll="toggle(.fromBottomIn, .fromBottomOut)"><a href="#"><img src="http://placehold.it/300x250/B4A582"></a></li>
<li data-scroll="toggle(.fromBottomIn, .fromBottomOut)"><a href="#"><img src="http://placehold.it/300x250/F4A7B9"></a></li>
<li data-scroll="toggle(.fromBottomIn, .fromBottomOut)"><a href="#"><img src="http://placehold.it/300x250/51A8DD"></a></li>
<li data-scroll="toggle(.fromBottomIn, .fromBottomOut)"><a href="#"><img src="http://placehold.it/300x250"></a></li>
<li data-scroll="toggle(.fromBottomIn, .fromBottomOut)"><a href="#"><img src="http://placehold.it/300x250/B4A582"></a></li>
<li data-scroll="toggle(.fromBottomIn, .fromBottomOut)"><a href="#"><img src="http://placehold.it/300x250/F4A7B9"></a></li>
<li data-scroll="toggle(.fromBottomIn, .fromBottomOut)"><a href="#"><img src="http://placehold.it/300x250/51A8DD"></a></li>

</ul>
<script src="ScrollTrigger.min.js"></script>
<script>
window.counter = function() {
	// this refers to the html element with the data-scroll-showCallback tag
	var span = this.querySelector('span');
	var current = parseInt(span.textContent);

	span.textContent = current + 1;
};

document.addEventListener('DOMContentLoaded', function(){
  var trigger = new ScrollTrigger({
	  addHeight: true
  });
});
</script>
</body>
</html>


css

/**
 * Animations
 */


.fromBottomIn {
	transition: transform 1.0s ease, opacity 2.0s ease;
	transform: translate(0,0);
	opacity: 1.0;
}
.fromBottomOut {
	transition: transform 1.0s ease, opacity 0.05s ease;
	transform: translate(0,10px);
	opacity: 0.0;
}
.scaleDownIn {
	transition: transform 1.0s ease, opacity 1.0s ease;
	transform: scale(1.0,1.0);
	opacity: 1.0;
}
.scaleDownOut {
	transition: transform 1.0s ease, opacity 1.0s ease;
	transform: scale(0.7,0.7);
	opacity: 0.0;
}


その他


weboook.blog22.fc2.com



weboook.blog22.fc2.com