横スライドアニメーション
指定のクラス名をつけた要素がウィンドウ画面内に入ったら、
横からスライドアニメーションする
| 追加可能パーツ | 変更可能箇所 | 変更NG箇所 | 同一ページ に複数設置 |
ページ複製・ クリップボード使用可否 |
|---|---|---|---|---|
|
（適用可能パーツ）
|
|
|
〇 | 〇 |
デモ01
見出しが入ります。
テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト
見出しが入ります。
テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト
見出しが入ります。
テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト
見出しが入ります。
テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト
見出しが入ります。
テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト
デモ02
サービス概要説明が入ります。サービス概要説明が入ります。サービス概要説明が入ります。サービス概要説明が入ります。サービス概要説明が入ります。サービス概要説明が入ります。サービス概要説明が入ります。
機能１の見出し（h3）
機能２の見出し（h3）
機能3の見出し（h3）
設定方法
- CSSをカスタムCSSに記述。
- 編集画面用CSSをカスタムCSSに記述。
- JavaScriptを使用したいパーツのセクションの一番下に配置。複数ページ設置する場合は共通フッターに配置。
- クラス名を見本とあわせる。
- アニメーションさせたい要素（パーツ）にクラス名「js-shutter」を追加。
用途に応じて、下記クラスを更に追加。-
左から右にスライドイン→「shutter-right」
-
右から左にスライドイン→「shutter-left」
-
-
シャッターの色を複数作りたい場合
→オプションクラス「shutter02-color」を追加。
※3色目以降は各自でクラス追加して対応してください。
※シャッターの色はカスタムCSSで変更可能。
-
SPも同様の挙動になります。
注意点
- デザインがある箇所にスライドアニメーションを付ける際は、「シャッター要素をつける用のクラス」とは別に、「デザインを当てる用のクラス」（※例で「column02_row」を追加しています）を付与し、後者にデザイン用のスタイルを調整するようにしてください。
- 現状はafter要素をシャッターに設定しているので、別用途でafter要素を使用される場合は、違う要素をシャッターにする必要があるためご注意ください。※擬似要素が望ましいです。
JS・CSS・編集画面用CSS
- JS
- CSS
- 編集画面用CSS
2022-10-12更新（v1.0.0）
<script>
'use strict';
/* -----------------------
横スライドアニメーション v1.0.0
----------------------- */
document.addEventListener('DOMContentLoaded', function () {
/*------------- 変数定義 【変更可能】 START -------------*/
let scrollShutter = document.querySelectorAll('.js-shutter');/* 監視対象要素 */
/*------------- 変数定義 【変更可能】 END -------------*/
if ('IntersectionObserver' in window) {
/* オプション */
const options = {
root: null,/* viewport（ブラウザの画面全体）を交差監視範囲とする */
rootMargin: '-70% 0px -30%',/* 「root要素に設けるmargin」と「対象」が交差したらイベントを発火 */
threshold: 0/* 対象がどの程度の割合交差した場合に実行するか */
};
/* 監視対象要素がスクロール範囲に入ったら実行 */
const observer = new IntersectionObserver(doWhenIntersect, options);
function doWhenIntersect(entries) {
entries.forEach((entry) => {
if (entry.isIntersecting) {
let object = entry.target;
object.classList.add('is-in');/* スクロール範囲内に入ったら対象にクラス「is-in」をつける */
observer.unobserve(object);/* 処理が終わったら監視を止める */
}
});
}
/* 監視対象要素の監視をスタート */
scrollShutter.forEach(function (object) {
observer.observe(object);
});
}
});
/* -----------------------
横スライドアニメーション END
----------------------- */
</script>
CSS内にデフォルトで用意されている、「JSパーツ集記述場所」の中に追加してください。
※アップセル等で見つからない場合は、LP記述欄の下などに入れてください。
2023-07-24更新（v1.0.0）
/*----- 横スライドアニメーション START v1.0.0-----*/
.theme-fo-base .wrapper .contents {
// どこでも使えるように紐付けなし
.shutter {
position: relative;
&::after {
content: '';
display: block;
position: absolute;
top: 0;
z-index: 10;
width: 100%;
height: 100%;
background: #fff;//シャッターの色
transition: width 800ms cubic-bezier(.9,.1,.1,.9);
}
// 右に向かって閉じる
&-right {
@extend .shutter;
&::after {
right: 0;
}
}
// 左に向かって閉じる
&-left {
@extend .shutter;
&::after {
left: 0;
}
}
//「is-in」がついたらシャッターを閉める
&-right,
&-left {
&.is-in {
&::after {
width: 0;
}
}
&.shutter02-color {
&::after {
background: #ffad2f;//シャッターの色
}
}
}
}
}
/*----- 横スライドアニメーション END -----*/
編集画面CSS内にデフォルトで用意されている、「//JSパーツの記述はここにお願いします」の中に追加してください。
※アップセル等で見つからない場合は、@include edit-page {}内に必ず入れてください。
2023-07-24更新（v1.0.0）
/*-- 横スライドアニメーション 編集画面用 START v1.0.0--*/
.theme-fo-base .wrapper .contents {
.shutter-right,
.shutter-left {
border: 1px solid #000;
&::after {
content: "横スライドアニメーションがつきます（カラー①）";
position: absolute;
color: #fff;
background: #000;
padding: 5px 5px;
right: 0;
left: initial !important;
top: -24px;
font-size: 14px;
line-height: 1;
width: initial;
height: initial;
}
&.shutter02-color {
&::after {
content: "横スライドアニメーションがつきます（カラー②）";
background: #ffad2f;
}
}
}
}
/*-- 横スライドアニメーション 編集画面用 END --*/
© Basic Inc. All Rights Reserved.