ロゴスクロール
行を横並びにしてロゴを無限にスライドさせる。
| 追加可能パーツ | 変更可能箇所 | 変更NG | 同一ページ に複数設置 |
ページ複製・ クリップボード使用可否 |
|---|---|---|---|---|
|
|
|
〇 | 〇 |
| ※留意事項 | |||
|---|---|---|---|
|
※1：ロゴスクロールのセクションはコンテンツ幅を100%に広げているため、ロゴスクロール（画像）以外の要素を入れると崩れにつながる恐れがあります。
※3：現状使用しているアイコン（疑似要素）で固定となります。 |
▼通常用
▼高速再生
▼逆再生
構造図
デモのパーツの構造を説明しています。
設定方法
- CSSをカスタムCSSに記述。
- 編集画面用CSSを適切な位置に記述。
- JavaScriptを使用したいパーツのセクションの一番下に配置。複数ページ設置する場合は共通フッターに配置。
-
クラス名を見本とあわせる。
- セクションにクラス名「logoScroll_sec js-logoScroll_sec」を追加。
- 上記セクションの中に新規行（row）を作成し、クラス名「js-img_row img_row」の２つを追加。
- 上記行を2分割し、2カラムの中にそれぞれ「画像の順番」と「画像の数」が同じになるようにしてロゴ用の画像パーツを配置。※構造図参照
画像の幅や高さ、スクロール速度は要件によって適宜カスタムCSSにて調整してください。
【オプション】- 逆再生→行（row）にクラス名「op_reverse」を追加。
- 高速再生→行（row）にクラス名「op_highspeed」を追加。
- [再生/停止]ボタンを用意します。
ロゴスクロール用のカラム「js-img_row img_row」のすぐ下に、新規rowを用意。（クラスは不要）
中に、[単体パーツ＞デフォルト＞ボタンパーツ]を配置し、クラス名「js-loopStop_btn loopStop_btn」を追加。
リンク先を[このページの一番上に遷移]に設定する。※リンク先を設定しないと表示されません。
※古いページ内リンク対策が入ったJSパーツと併用している場合、上記のリンク設定[#]だと正しく動かない場合があります。その際はTOPページ等に設定してください。（URLが[#]以外になれば問題ありません）
※必ずデフォルトパーツを使用してください。デザインパーツを使用した場合、打ち消すスタイルが必要になります。
※ボタンテキストは表示されませんが、適当に「再生・停止ボタン」などと設定しておくと良いかと思います。
-
※再生・停止ボタン以外
注意点
- ロゴスクロールのセクションはコンテンツ幅を100%に広げているため、ロゴスクロール以外の要素を入れると崩れにつながる恐れがあります。
- 2つのcol（カラム）に同じ画像を同じ順番で入れないとループになりません。
- [画像幅✕個数]がブラウザ幅より小さくなる場合、正常に表示されない可能性がありますのでご注意ください。
カスタムCSS
CSS内にデフォルトで用意されている、「JSパーツ集記述場所」の中に追加してください。
※アップセル等で見つからない場合は、LP記述欄の下などに入れてください。
2023-12-26更新（1.0.0）
/*----- ロゴスクロール START v1.0.0-----*/
.theme-fo-base .wrapper .contents {
:is(section, section[data-designpart-id]:not(:root):not(:root):not(:root):not(:root)) {
&.logoScroll_sec {
padding: 20px 0 10px;
@include breakpoint-sp {
padding: 10px 0;
}
.inner {
max-width: 100%;
padding: 0;
overflow: hidden;
.row {
&.img_row {
display: flex !important;
width: max-content;
//アニメーション設定
&.is-loopAnimation {
// 必要に応じて外す（※hoverで停止させる）
// &:hover {
// .col {
// &:first-child,
// &:last-child {
// animation-play-state: paused;
// }
// }
// }
.col {
will-change: transform;
&:first-child {
animation: loop 120s -60s linear infinite;
}
&:last-child {
animation: loop2 120s linear infinite;
}
}
@keyframes loop {
0% {
transform: translateX(100%);
}
to {
transform: translateX(-100%);
}
}
@keyframes loop2 {
0% {
transform: translateX(0);
}
to {
transform: translateX(-200%);
}
}
// 逆再生
&.op_reverse {
.col {
&:first-child {
animation-direction: reverse;
}
&:last-child {
animation-direction: reverse;
}
}
}
// 高速再生
&.op_highspeed {
.col {
&:first-child {
animation: loop 25s -12.5s linear infinite;
}
&:last-child {
animation: loop2 25s linear infinite;
}
}
}
// 停止ボタン押したら止める
&.-stop {
.col {
&:first-child,
&:last-child {
animation-play-state: paused;
}
}
}
}
.col {
display: flex !important;
width: 100% !important;
height: 100%;
padding: 0;
justify-content: space-around;
align-items: center;
.component {
margin: 0;
&.image {
width: 200px;
margin: 0 10px;
@include breakpoint-sp {
width: 125px;
}
}
}
}
}
&:has(.col .loopStop_btn) {
max-width: 1100px;
margin: 0 auto;
padding: 0 20px;
}
.col {
.component {
// 再生・停止ボタン
&.loopStop_btn {
margin-top: 30px;
.button-cont {
a {
display: inline-flex;
justify-content: center;
align-items: center;
width: 30px;
height: 30px;
border-radius: 50vh;
background: transparent;
border: 2px solid #999;
font-size: 0; //テキスト非表示
letter-spacing: 0;
line-height: 1;
padding: 0;
position: relative;
&::before {
content: "\f04d"; //停止アイコン
font-family: $font_family_awsm5;
font-weight: 900;
font-size: 15px;
color: #999;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
// 停止時アイコン切り替え
&.-stop {
&::before {
content: "\f04b"; //再生アイコン
}
}
}
}
}
}
}
}
}
}
}
}
/*----- ロゴスクロール END -----*/
編集画面CSS内にデフォルトで用意されている、「//JSパーツの記述はここにお願いします」の中に追加してください。
※アップセル等で見つからない場合は、@include edit-page {}内に必ず入れてください。
2023-07-24更新（1.0.0）
/*-- ロゴスクロール 編集画面用 START v1.0.0--*/
:is(section,section[data-designpart-id]:not(:root):not(:root):not(:root):not(:root)) {
&.logoScroll_sec {
.inner {
max-width: 1100px;
padding: 20px;
overflow: inherit;
.row {
&.img_row {
display: table;
width: auto;
//アニメーション設定
&.is-loopAnimation {
.col {
&:first-child,
&:last-child {
animation: none;
}
}
// 逆再生
&.op_reverse {
.col {
&:first-child,
&:last-child {
animation: none;
}
}
}
// 高速再生
&.op_highspeed {
.col {
&:first-child,
&:last-child {
animation: none;
}
}
}
}
.col {
display: table-cell !important;
width: 50% !important;
height: 100%;
padding: 0 10px 10px;;
.component {
&.image {
// width: 100%;//必要に応じて外す
margin: 20px 0;
}
}
}
}
}
}
}
}
/*-- ロゴスクロール 編集画面用 END --*/
JavaScript
2023-12-26更新（1.0.0）
<script>
'use strict';
/* ----------------
ロゴスクロール v1.0.0
---------------- */
document.addEventListener('DOMContentLoaded', function () {
/* スクロールするロゴ画像を取得 */
const loopImgArray = document.querySelectorAll('.js-img_row .image img');
/* スクロールするrowを取得 */
const loopLow = document.querySelectorAll('.js-img_row');
/* スクロール画像が入ったセクションを取得 */
const loopImgSec = document.querySelectorAll('.js-logoScroll_sec');
setTimeout(() => {
for (let i = 0; i < loopImgArray.length; i++) {
loopImgArray[i].removeAttribute('loading');
}
for (let i = 0; i < loopLow.length; i++) {
loopLow[i].classList.add('is-loopAnimation');
}
/* 再生・停止ボタン処理 */
for (let i = 0; i < loopImgSec.length; i++) {
const loopStopBtn = loopImgSec[i].querySelector('.js-loopStop_btn a');
if(loopStopBtn) {
loopStopBtn.addEventListener('click', function(e) {
e.preventDefault();
if (this.classList.contains('-stop')) {
this.classList.add('-start');
this.classList.remove('-stop');
loopLow[i].classList.remove('-stop');
} else {
this.classList.add('-stop');
loopLow[i].classList.add('-stop');
this.classList.remove('-start');
}
});
}
}
}, 500);
});
/* ----------------
ロゴスクロール END
---------------- */
</script>
© Basic Inc. All Rights Reserved.