ロゴスクロール

行を横並びにしてロゴを無限にスライドさせる。

追加可能パーツ 変更可能箇所 変更NG 同一ページ
に複数設置
ページ複製・
クリップボード使用可否
  • イメージパーツ※1
  • ロゴの数※2
  • ロゴの横幅/高さ
  • ロゴ間の余白
  • スクロールの速度
  • スクロールの方向(逆再生)
  • [再生/停止]ボタンのデザイン
    • ボタンの枠組みの形
    • アイコンの色味・サイズ
    • 枠線の色
    • ボタンの位置
    • ボタンの有無
  • [再生/停止]ボタンに使用する
    アイコンの変更※3
  • [再生/停止]ボタンパーツを
    使用時のテキスト表示
※留意事項

※1:ロゴスクロールのセクションはコンテンツ幅を100%に広げているため、ロゴスクロール(画像)以外の要素を入れると崩れにつながる恐れがあります。
※2:ロゴの掲載数は最少10個/最大30個でお願いします。

  • 画像サイズにもよりますが、ロゴの数が少ないとブラウザ幅によってはスクロールが途切れているように見えてしまうのでご注意ください。
  • 30個以上配置自体は可能ですが、画像が増えるとスクロール速度が速くなるためCSSで速度の調整が必要です。
    • [画像幅✕個数]がブラウザ幅より小さくなる場合、正常に表示されない可能性がありますのでご注意ください。対策としては、余白を広げる/ロゴの幅を広げる/ロゴを繰り返し設置するなどディレクターと相談して対応してください。
    • 2つのcol(カラム)に同じ画像を同じ順番で入れないとループになりません。
    • 停止ボタンが複数行に対応していないため、ロゴスクロールの複数行配置は対応しておりません。

※3:現状使用しているアイコン(疑似要素)で固定となります。

 ▼通常用

JSパーツ集ロゴ
ページトップへ戻る
ダミー
ダミー
ダミー
ダミー
JSパーツ集ロゴ
ページトップへ戻る
ダミー
ダミー
ダミー
ダミー

 ▼高速再生

JSパーツ集ロゴ
ページトップへ戻る
ダミー
ダミー
ダミー
ダミー
JSパーツ集ロゴ
ページトップへ戻る
ダミー
ダミー
ダミー
ダミー

 ▼逆再生

JSパーツ集ロゴ
ページトップへ戻る
ダミー
ダミー
ダミー
ダミー
JSパーツ集ロゴ
ページトップへ戻る
ダミー
ダミー
ダミー
ダミー

構造図

デモのパーツの構造を説明しています。

ロゴスクロール構造図

設定方法

  • CSSをカスタムCSSに記述。
  • 編集画面用CSSを適切な位置に記述。
  • JavaScriptを使用したいパーツセクションの一番下に配置。複数ページ設置する場合は共通フッターに配置。
  • クラス名を見本とあわせる。

  1. セクションにクラス名「logoScroll_sec js-logoScroll_sec」を追加。
  2. 上記セクションの中に新規行(row)を作成し、クラス名「js-img_row img_row」の2つを追加。
  3. 上記行を2分割し、2カラムの中にそれぞれ「画像の順番」と「画像の数」が同じになるようにしてロゴ用の画像パーツを配置。※構造図参照
    画像の幅や高さ、スクロール速度は要件によって適宜カスタムCSSにて調整してください。
    【オプション】
    • 逆再生→行(row)にクラス名「op_reverse」を追加。
    • 高速再生→行(row)にクラス名「op_highspeed」を追加。
  4. [再生/停止]ボタンを用意します。
    ロゴスクロール用のカラム「js-img_row img_row」のすぐ下に、新規rowを用意。(クラスは不要)
    中に、[単体パーツ>デフォルト>ボタンパーツ]を配置し、クラス名「js-loopStop_btn loopStop_btn」を追加。
    リンク先を[このページの一番上に遷移]に設定する。※リンク先を設定しないと表示されません。
    ※古いページ内リンク対策が入ったJSパーツと併用している場合、上記のリンク設定[#]だと正しく動かない場合があります。その際はTOPページ等に設定してください。(URLが[#]以外になれば問題ありません)
    ※必ずデフォルトパーツを使用してください。デザインパーツを使用した場合、打ち消すスタイルが必要になります。
    ※ボタンテキストは表示されませんが、適当に「再生・停止ボタン」などと設定しておくと良いかと思います。
    新CMSの場合:基本デザインパーツ(セクションパーツ、複合パーツ、単体パーツ)を使用して問題ありませ
    ※再生・停止ボタン以外

注意点

  • ロゴスクロールのセクションはコンテンツ幅を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>

JSが必要な実装の注意点スプレッドシート(H列)は読みましたか?

※必ず注意点(H列)をご確認の上閲覧ください

ページトップへ戻る