互い違いレイアウトの組み方〜フェードイン編〜

はっちゃん

2018.06.12

こんにちは！　はっちゃんです。
今回は「互い違いレイアウト」最終回、フェードイン編です。

前回までの記事はこちら↓

互い違いレイアウトの組み方〜レスポンシブ編〜

はっちゃん

2018.05.24

互い違いレイアウトの組み方〜リキッドレイアウト編〜

はっちゃん

2018.06.02

今回は、スクロールして、レイアウトが表示領域に入ったらフェードインするアレを加えます。

せっかくなので、最近注目のIntersectionObserver APIを使って実装してみましょう。
スクロールイベントの管理はscrollmagicライブラリーが有名ですが、ネイティブで実装できるにこしたことはないですね。

※現在IE11やsafariで使用できないので、クロスブラウザ対応には専用のpolyfillが必要です。

対応状況はこちら。

要件
HTML、CSSを変更
JSを追加
実際の動き
まとめ

要件

PC表示

ブラウザ幅が769px以上だったらPCレイアウト表示
互い違い
最低の幅は1280px
写真は、テキストボックスが少し被る余白を残して画面幅一杯に広げる
表示領域（window）に入ったら要素をフェードイン

SP表示

ブラウザ幅が769px未満だったらSPレイアウト表示
均一に縦並び

HTML、CSSを変更

トリガーとなるclassを追加します。

<section class="alternate-layout js-target"></section>

事象をわかりやすくするために、paddingとmarginを追加します。

.container { padding: 1200px 0}
.alternate-layout { margin-top: 1200px; }

JSを追加

それぞれのDOMオブジェクトをobserveに渡し、インスタンスを作成します。
handler内で「window領域に入ったらis-animatedクラスを付与し、observeを削除する」処理を記載するだけでOKです。

let $target = document.querySelectorAll('.js-target');
let option = {
threshold: 0.3
};

function handler(changes, observer) {
changes.forEach(change => {
if (change.isIntersecting) {
change.target.classList.add('is-animated');
observer.unobserve(change.target);
}
});
}

let observer = new IntersectionObserver(handler, option);
$target.forEach(img => observer.observe(img));
observer.observe($target[0]);
observer.observe($target[1]);

See the Pen Alternate Layout4 by k_hatsushi (@hatsushi_kazuya) on CodePen.