Intersection Observerを使った
アニメーション
headに書くこと
<!-- IE11対策をするなら -->
<script src="https://polyfill.io/v3/polyfill.min.js?features=IntersectionObserver"></script>
JavaScriptで書くこと
var option = {
root: null, //nullでブラウザ画面を対象にする
rootMargin: "0% 0% -20% 0%", //画面の下から-20%の位置をターゲットと交差する位置に指定
threshold: 0.2, //指定した要素が画面に20%入るとコールバッイベント発生
};
// 交差した際の処理を記載
var callback = function (entries) {
entries.forEach(function (entry) {
if (entry.intersectionRatio > 0.2) { //交差する位置が20%を超えたら…
var targets = entry.target.getElementsByClassName("d-demo__block");
var targetsArray = Array.prototype.slice.call(targets, 0); //配列に変換
targetsArray.forEach(function (item) {
var targetClassList = item.classList;
if( targetClassList.contains('is-fade_in_side') == true ){
targetClassList.add("is-fade_in_side--done");
} else if (targetClassList.contains('is-fade_in_updown') == true) {
targetClassList.add("is-fade_in_updown--done");
} else if(targetClassList.contains('is-fade_in_zoom') == true){
targetClassList.add("is-fade_in_zoom--done");
} else if(targetClassList.contains('is-bounce') == true){
var itemChildren = item.children;
for (let i = 0; i < itemChildren.length; i++) {
setTimeout(function () {
itemChildren[i].classList.add("is-bounce--done");
}, i * 80);
}
}
});
observeres.unobserve(entry.target);
}
});
};
var observeres = new IntersectionObserver(callback, option);
var trigger = document.getElementsByClassName("js-trigger");
for (let i = 0; i < trigger.length; i++) {
observeres.observe(trigger[i]);
}
Sassで書くこと
以下はデモの一部分です。
/* アニメーションを使うため先にベンダープレフィックスを定義
–––––––––––––––––––––––––––––––––––––––––––––––––– */
@mixin keyframes($animation-name: animation) {
@-webkit-keyframes #{$animation-name} {
@content;
}
@keyframes #{$animation-name} {
@content;
}
}
/* アニメーションを使うため上とセット
–––––––––––––––––––––––––––––––––––––––––––––––––– */
@mixin animation($animation-name) {
-webkit-animation: $animation-name;
animation: $animation-name;
-webkit-animation-fill-mode: both;
animation-fill-mode: both;
}
/* zoomのkeyframes
–––––––––––––––––––––––––––––––––––––––––––––––––– */
@include keyframes (fade-in-zoom) {
0% {
filter: blur(3px);
transform: scale(1.2);
opacity: 0;
}
100% {
filter: blur(0);
transform: scale(1);
opacity: 1;
}
}
/* クラス名の指定
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.is-fade_in_zoom {
opacity: 0;
}
.is-fade_in_zoom.is-fade_in_zoom--done {
opacity: 1;
.demo__img {
@include animation(fade-in-zoom 1s ease 0.1s);
}
}
HTMLで書くこと
以下はデモの一部分です。
<section class="d-demo__section js-trigger">
<div class="d-demo__section-inner">
<div class="d-demo__block is-fade_in_zoom">
<div class="d-demo__img">
<img src="./images/observer-img03.jpg" alt="" />
</div>
<div class="d-demo__img">
<img src="./images/observer-img04.jpg" alt="" />
</div>
</div>
</div>
</section>