装飾（デコレーション）用パーツ｜コピペで使えるHTML/CSS/JSパーツ集

list-yoko-scroll2

縦にスクロール中に横スクロールしだすパーツ。ウィンドウに対して画像高さ100%。

<h2>list-yoko-scroll2-parts（ウィンドウに対して画像高さ100%タイプ）</h2>
<ul class="mb3rem">
<li>デモではアクションが確認できるよう、sectionにインラインスタイルを直接指定しています。実際にはこのsectionは使わないで下さい。無駄な余白が発生します。</li>
<li>横スクロールの速度は、cssのheight: 300vh;の数値で変動します。html側のdata-speed（0.5=slow / 1=normal / 2=fast）でも変化しますが、cssの方が調整幅が広いです。中身の画像数にあわせて調整してみて下さい。</li>
<li>画像によっては非常に縦長にトリミングされる場合もあるので、注意して下さい。画像を見せるというより、装飾要素向き。しっかり画像を見せたい場合は、別cssパターン（list-yoko-scroll3）をご利用下さい。</li>
<li>画面幅いっぱいに使いたい場合は、bleed-x-partsを追加して下さい。（class="list-yoko-scroll2-parts <span class="color-check">bleed-x-parts</span>"）</li>
</ul>

</div>

</div>

</section>

html

/*list-yoko-scroll2-parts
---------------------------------------------------------------------------*/
/*全体を囲むボックス*/
.list-yoko-scroll2-parts {
	position: relative;
	height: 300vh;		/*縦スクロール量（この高さ分スクロールすると横が端まで動く）*/
}

/*横スクロールブロック*/
.list-yoko-scroll2-parts .hscroll1-sticky {
	position: sticky;
	top: 0;
	height: 100vh;
	height: 100svh;
	overflow: hidden;
}
.list-yoko-scroll2-parts .hscroll1-track {
	display: flex;
	height: 100%;
	will-change: transform;
}

/*各画像*/
.list-yoko-scroll2-parts .hscroll1-track > div {
	flex-shrink: 0;
	width: 45vw;	/*1枚あたりの幅（画面幅の45%）*/
	height: 100%;
	padding-inline: 0.5rem;	/*左右に0.5文字分の余白*/
}
.list-yoko-scroll2-parts .hscroll1-track > div img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	border-radius: 5px;	/*角を丸区する指定。*/
}

/*スキップボタン*/
.list-yoko-scroll2-parts button[aria-label="skip gallery"] {
	position: absolute;
	bottom: 2rem;	/*下からの2文字分の場所に配置*/
	left: 50%;
	transform: translateX(-50%);
	z-index: 1;
	background: var(--bg-inverse-color);	/*背景色。theme.cssのbg-inverse-colorを読み込みます。*/
	color: var(--bg-color);	/*文字色。theme.cssのbg-colorを読み込みます。*/
	border: none;
	padding: 0.5rem 1.5rem;	/*上下に0.5文字分、左右に1.5文字分の余白*/
	font-size: 0.8rem;	/*文字サイズ80%*/
	cursor: pointer;
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.3s, visibility 0.3s;	/*表示切替のアニメーション*/
}
.list-yoko-scroll2-parts button[aria-label="skip gallery"].is-visible {
	opacity: 1;
	visibility: visible;
}
/*下矢印のアイコン（Font Awesome）*/
.list-yoko-scroll2-parts button[aria-label="skip gallery"] i {
	margin-left: 0.3em;	/*テキストとアイコンとの間に空けるスペース。0.3文字分。*/
	font-size: 0.7rem;	/*アイコンサイズ70%*/
}

/*進捗バー*/
.list-yoko-scroll2-parts .hscroll1-progress {
	position: absolute;
	bottom: max(16px, env(safe-area-inset-bottom));	/*下からの配置場所*/
	left: 0;
	width: 100%;
	height: 3px;	/*バーの太さ*/
	z-index: 2;
	background: var(--border-color);	/*バーのベース色。theme.cssのborder-colorを読み込みます。*/
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.3s, visibility 0.3s;	/*表示切替のアニメーション*/
}
.list-yoko-scroll2-parts .hscroll1-progress.is-visible {
	opacity: 1;
	visibility: visible;
}
.list-yoko-scroll2-parts .hscroll1-progress-bar {
	height: 100%;
	width: 0%;
	background: var(--primary-color);	/*バーの色をtheme.cssのprimary-colorにする*/
	transition: width 0.05s linear;		/*幅の変化を滑らかに*/
}

/*画面幅600px以下の追加指定*/
	@media (max-width:600px) {

/*各画像*/
	.list-yoko-scroll2-parts .hscroll1-track > div {
		width: 80vw;	/*1枚あたりの幅の変更*/
	}
	
	}/*追加指定ここまで*/

css

//===============================================================
//	list-yoko-scroll2-parts（縦スクロール → 横スクロールギャラリー）
//===============================================================
$(function(){

$('.list-yoko-scroll2-parts').each(function(){

var $wrap    = $(this);
		var $sticky  = $wrap.find('.hscroll1-sticky');
		var $track   = $wrap.find('.hscroll1-track');
		var $skip    = $wrap.find('button[aria-label="skip gallery"]');
		var $prog    = $wrap.find('.hscroll1-progress');
		var $progBar = $wrap.find('.hscroll1-progress-bar');
		var speed    = parseFloat($wrap.attr('data-speed')) || 1;

/* スキップボタン：セクション末尾へジャンプ */
		$skip.on('click', function(){
			var endPos = $wrap.offset().top + $wrap.outerHeight();
			$('html, body').animate({ scrollTop: endPos }, 400);
		});

/* スクロール処理 */
		$(window).on('scroll resize', function(){

var wrapTop    = $wrap.offset().top;
			var wrapHeight = $wrap.outerHeight();
			var scrollY    = $(window).scrollTop();
			var viewH      = $(window).height();

/* セクション内にいるかどうか */
			var inSection = (scrollY >= wrapTop) && (scrollY <= wrapTop + wrapHeight - viewH);

/* スキップボタンと進捗バーの表示切替 */
			if(inSection){
				$skip.addClass('is-visible');
				$prog.addClass('is-visible');
			} else {
				$skip.removeClass('is-visible');
				$prog.removeClass('is-visible');
			}

/* 横スクロール量の計算 */
			var scrollRange  = wrapHeight - viewH;
			var scrollAmount = scrollY - wrapTop;
			var progress     = Math.max(0, Math.min(1, scrollAmount / scrollRange));

/* トラックの移動可能距離 */
			var trackW  = $track[0].scrollWidth;
			var stickyW = $sticky.width();
			var maxMove = trackW - stickyW;

/* transform で横移動 */
			var translateX = -1 * progress * maxMove * speed;
			translateX = Math.max(-maxMove, Math.min(0, translateX));
			$track.css('transform', 'translateX(' + translateX + 'px)');

/* 進捗バー更新 */
			$progBar.css('width', (progress * 100) + '%');

});

js

list-yoko-scroll3

縦にスクロール中に横スクロールしだすパーツ。画像のアスペクト比指定タイプ。

<h2>list-yoko-scroll3-parts（画像のアスペクト比指定タイプ）</h2>
<ul class="mb3rem">
<li>デモではアクションが確認できるよう、sectionにインラインスタイルを直接指定しています。実際にはこのsectionは使わないで下さい。無駄な余白が発生します。</li>
<li>横スクロールの速度は、cssのheight: 300vh;の数値で変動します。html側のdata-speed（0.5=slow / 1=normal / 2=fast）でも変化しますが、cssの方が調整幅が広いです。中身の画像数にあわせて調整してみて下さい。</li>
<li>アスペクト比の変更はcssでできます。</li>
<li>画面幅いっぱいに使いたい場合は、bleed-x-partsを追加して下さい。（class="list-yoko-scroll2-parts <span class="color-check">bleed-x-parts</span>"）</li>
</ul>

</div>

</div>

</section>

html

/*list-yoko-scroll3-parts
---------------------------------------------------------------------------*/
/*全体を囲むボックス*/
.list-yoko-scroll3-parts {
	position: relative;
	height: 300vh;		/*縦スクロール量（この高さ分スクロールすると横が端まで動く）*/
}

/*横スクロールブロック*/
.list-yoko-scroll3-parts .hscroll1-sticky {
	position: sticky;
	top: 0;
	height: 100vh;
	overflow: hidden;
}
.list-yoko-scroll3-parts .hscroll1-track {
	display: flex;
	align-items: center;
	height: 100%;
	will-change: transform;
}

/*各画像*/
.list-yoko-scroll3-parts .hscroll1-track > div {
	flex-shrink: 0;
	width: 45vw;	/*1枚あたりの幅（画面幅の45%）*/
	aspect-ratio: 1;	/*ここで比率固定。4 / 3などにすればやや横長になります。*/
	padding-inline: 0.5rem;	/*左右に0.5文字分の余白*/
}
.list-yoko-scroll3-parts .hscroll1-track > div img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	border-radius: 5px;	/*角を丸区する指定。*/
}

/*スキップボタン*/
.list-yoko-scroll3-parts button[aria-label="skip gallery"] {
	position: absolute;
	bottom: 2rem;	/*下からの2文字分の場所に配置*/
	left: 50%;
	transform: translateX(-50%);
	z-index: 1;
	background: var(--bg-inverse-color);	/*背景色。theme.cssのbg-inverse-colorを読み込みます。*/
	color: var(--bg-color);	/*文字色。theme.cssのbg-colorを読み込みます。*/
	border: none;
	padding: 0.5rem 1.5rem;	/*上下に0.5文字分、左右に1.5文字分の余白*/
	font-size: 0.8rem;	/*文字サイズ80%*/
	cursor: pointer;
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.3s, visibility 0.3s;	/*表示切替のアニメーション*/
}
.list-yoko-scroll3-parts button[aria-label="skip gallery"].is-visible {
	opacity: 1;
	visibility: visible;
}
/*下矢印のアイコン（Font Awesome）*/
.list-yoko-scroll3-parts button[aria-label="skip gallery"] i {
	margin-left: 0.3em;	/*テキストとアイコンとの間に空けるスペース。0.3文字分。*/
	font-size: 0.7rem;	/*アイコンサイズ70%*/
}

/*進捗バー*/
.list-yoko-scroll3-parts .hscroll1-progress {
	position: absolute;
	bottom: max(16px, env(safe-area-inset-bottom));	/*下からの配置場所*/
	left: 0;
	width: 100%;
	height: 3px;	/*バーの太さ*/
	z-index: 2;
	background: var(--border-color);	/*バーのベース色。theme.cssのborder-colorを読み込みます。*/
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.3s, visibility 0.3s;	/*表示切替のアニメーション*/
}
.list-yoko-scroll3-parts .hscroll1-progress.is-visible {
	opacity: 1;
	visibility: visible;
}
.list-yoko-scroll3-parts .hscroll1-progress-bar {
	height: 100%;
	width: 0%;
	background: var(--primary-color);	/*バーの色をtheme.cssのprimary-colorにする*/
	transition: width 0.05s linear;		/*幅の変化を滑らかに*/
}

/*画面幅600px以下の追加指定*/
	@media (max-width:600px) {

/*各画像*/
	.list-yoko-scroll3-parts .hscroll1-track > div {
		width: 80vw;	/*1枚あたりの幅の変更*/
	}
	
	}/*追加指定ここまで*/

css

//===============================================================
//	list-yoko-scroll3-parts（縦スクロール → 横スクロールギャラリー）
//===============================================================
$(function(){

$('.list-yoko-scroll3-parts').each(function(){

var $wrap    = $(this);
		var $sticky  = $wrap.find('.hscroll1-sticky');
		var $track   = $wrap.find('.hscroll1-track');
		var $skip    = $wrap.find('button[aria-label="skip gallery"]');
		var $prog    = $wrap.find('.hscroll1-progress');
		var $progBar = $wrap.find('.hscroll1-progress-bar');
		var speed    = parseFloat($wrap.attr('data-speed')) || 1;

/* スキップボタン：セクション末尾へジャンプ */
		$skip.on('click', function(){
			var endPos = $wrap.offset().top + $wrap.outerHeight();
			$('html, body').animate({ scrollTop: endPos }, 400);
		});

/* スクロール処理 */
		$(window).on('scroll resize', function(){

var wrapTop    = $wrap.offset().top;
			var wrapHeight = $wrap.outerHeight();
			var scrollY    = $(window).scrollTop();
			var viewH      = $(window).height();

/* セクション内にいるかどうか */
			var inSection = (scrollY >= wrapTop) && (scrollY <= wrapTop + wrapHeight - viewH);

/* スキップボタンと進捗バーの表示切替 */
			if(inSection){
				$skip.addClass('is-visible');
				$prog.addClass('is-visible');
			} else {
				$skip.removeClass('is-visible');
				$prog.removeClass('is-visible');
			}

/* 横スクロール量の計算 */
			var scrollRange  = wrapHeight - viewH;
			var scrollAmount = scrollY - wrapTop;
			var progress     = Math.max(0, Math.min(1, scrollAmount / scrollRange));

/* トラックの移動可能距離 */
			var trackW  = $track[0].scrollWidth;
			var stickyW = $sticky.width();
			var maxMove = trackW - stickyW;

/* transform で横移動 */
			var translateX = -1 * progress * maxMove * speed;
			translateX = Math.max(-maxMove, Math.min(0, translateX));
			$track.css('transform', 'translateX(' + translateX + 'px)');

/* 進捗バー更新 */
			$progBar.css('width', (progress * 100) + '%');

});

js

deco-cracker1

クラッカー画像を先にDLし、imagesに入れて下さい。動画を準備すれば入れ替えも。

html

css

js

deco-kazaritext

装飾用のテキスト。背景パーツとセットで使うと統一感が出ます。

<h2>deco-kazaritext-parts</h2>
<p>大きなテキストの装飾です。背景色がついたsectionの開始タグの直前に入れて下さい。</p>

</section>

<div class="deco-kazaritext-parts">Why Choose Us</div>
<section class="bg-parts bg1-parts">
<h2>deco-kazaritext-parts</h2>
<p>デフォルト。</p>
</section>

<div class="deco-kazaritext-parts primary-parts c">Why Choose Us</div>
<section class="bg-parts bg1-primary-parts">
<h2>deco-kazaritext-parts primary-parts c</h2>
<p>primary色。最後の「c」はテキストをセンタリングする指定です。</p>
</section>

<div class="deco-kazaritext-parts light-parts r">Why Choose Us</div>
<section class="bg-parts bg1-light-parts">
<h2>deco-kazaritext-parts light-parts r</h2>
<p>light色。最後の「r」はテキストを右寄せする指定です。</p>
</section>

<div class="deco-kazaritext-parts accent-parts">Why Choose Us</div>
<section class="bg-parts bg1-accent-parts">
<h2>deco-kazaritext-parts accent-parts</h2>
<p>accent色。</p>
</section>

<div class="deco-kazaritext-parts accent-parts">Why Choose Us</div>
<section class="bg-parts bg1-parts">
<h2>別々の色を組み合わせてもOK</h2>
<p>それぞれ独立した指定なので、好きに組み合わせて下さい。</p>
</section>

html

/*大きなテキストの飾り文字
---------------------------------------------------------------------------*/
/*共通*/
.deco-kazaritext-parts {
	font-family: var(--accent-font), var(--base-font);	/*theme.cssのaccent-fontに指定したフォントを読み込む。読み込めなければbase-fontで指定したフォントを読み込む。*/
	line-height: 1;
	font-size: 8vw;	/*文字サイズ。画面幅100% = 100vwです。*/
	margin-bottom: -6.5vw;	/*文字の配置場所。本来の場所より上にずらす。*/
	position: relative;z-index: -1;	/*背景色と重なった部分が上に出ないように。もし上に出したいならこの１行を削除。*/
}

/*画面幅500px以下の追加指定*/
	@media (max-width:500px) {

.deco-kazaritext-parts {
		margin-bottom: -3.5vw;	/*文字の配置場所の微調整。*/
	}

}/*追加指定ここまで*/

/*primary*/
.deco-kazaritext-parts.primary-parts {
	color: var(--primary-color);	/*文字色。theme.cssのprimary-colorを読み込みます。*/
}
/*light*/
.deco-kazaritext-parts.light-parts {
	color: var(--light-color);	/*文字色。theme.cssのlight-colorを読み込みます。*/
}
/*accent*/
.deco-kazaritext-parts.accent-parts {
	color: var(--accent-color);	/*文字色。theme.cssのaccent-colorを読み込みます。*/
}

/*bg1-parts
---------------------------------------------------------------------------*/
.bg1-parts {
	background: var(--bg-inverse-color);	/*文字色。theme.cssのbg-inverse-colorを読み込みます。*/
	color: var(--bg-color);		/*背景色。theme.cssのbg-colorを読み込みます。*/
}

/*bg1-primary
---------------------------------------------------------------------------*/
.bg1-primary-parts {
	background: var(--primary-color);		/*背景色。theme.cssのprimary-colorを読み込みます。*/
	color: var(--primary-inverse-color);	/*文字色。theme.cssのprimary-inverse-colorを読み込みます。*/
}

/*bg1-light
---------------------------------------------------------------------------*/
.bg1-light-parts {
	background: var(--light-color);		/*背景色。theme.cssのlight-colorを読み込みます。*/
	color: var(--light-inverse-color);	/*背景色。theme.cssのlight-inverse-colorを読み込みます。*/
}

/*bg1-accent
---------------------------------------------------------------------------*/
.bg1-accent-parts {
	background: var(--accent-color);		/*背景色。theme.cssのaccent-colorを読み込みます。*/
	color: var(--accent-inverse-color);	/*背景色。theme.cssのaccent-inverse-colorを読み込みます。*/
}

/*bg-parts（bg1-primary-parts、bg1-light-parts、bg1-accent-partsとセットで使います）
---------------------------------------------------------------------------*/
.bg-parts {
	padding-top: var(--content-space-l);		/*ボックス内の上に空ける余白。theme.cssのcontent-space-lを読み込みます。*/
	padding-bottom: var(--content-space-l);	/*ボックス内の下に空ける余白。theme.cssのcontent-space-lを読み込みます。*/
}

/*背景色が続く場合に隙間を空けない*/
.bg-parts + .bg-parts {
	margin-top: calc(-1 * var(--content-space-l)) !important;
}

css

deco-slideimg1

サンプル画像を先にDLし、imagesに入れて下さい。deco-slideimg2をテキスト画像にしたタイプ。

<h2>deco-slideimg1-parts</h2>
<ul>
<li>※こちらを試す際は、<a href="ttps://template-party.com/parts-new/deco/deco-slideimg1/images.zip">サンプル画像を先にDL</a>し、imagesに入れて下さい。</li>
<li>「deco-slideimg1-parts」には必ず「４枚以上」で「偶数」の画像を配置して下さい。</li>
<li>「rtl-parts」は右から左へ移動します。「ltr-parts」は左から右へ移動します。</li>
<li>速度調整は、jsの「var animationTime = (divCount / 2) * 50 + 's';」の行の「50」の数字です。大きいほどゆっくりになります。</li>
</ul>

<p class="c">幅の異なる画像を配置すると、サイズが変わってしまうので注意。</p>
<div class="deco-slideimg1-parts">
<div class="img-parts rtl-parts">
<div><a href="#"><img src="images/1.png" alt=""></a></div>
<div><a href="#"><img src="images/2.png" alt=""></a></div>
<div><a href="#"><img src="images/1.png" alt=""></a></div>
<div><a href="#"><img src="images/2.png" alt=""></a></div>
</div>
</div>

<p class="c">幅いっぱい使いたい場合は、bleed-x-partsを追加する。</p>
<div class="deco-slideimg1-parts bleed-x-parts">
<div class="img-parts rtl-parts">
<div><a href="#"><img src="images/1.png" alt=""></a></div>
<div><a href="#"><img src="images/1.png" alt=""></a></div>
<div><a href="#"><img src="images/1.png" alt=""></a></div>
<div><a href="#"><img src="images/1.png" alt=""></a></div>
</div>
</div>

</section>

html

css

//===============================================================
// サムネイルスライドショー
//===============================================================
$(document).ready(function() {
    // 各 .img-parts を個別に処理
    $('.img-parts').each(function() {
        var $imgParts = $(this);
        var $divs = $imgParts.children('div');
        var divCount = $divs.length;

// 各 div の幅を計算
        var divWidth = 100 / (divCount * 2);

// サムネイルの枚数に応じてアニメーション時間と幅を計算
        var animationTime = (divCount / 2) * 50 + 's';
        var slideWidth = (divCount / 2) * 200 + '%';

// 各 div に幅を設定
        $divs.css({
            'flex': '0 0 ' + divWidth + '%',
            'width': divWidth + '%'
        });

// .img-parts に animation と width を設定
        $imgParts.css({
            'animation-duration': animationTime,
            'width': slideWidth
        });

// 初期ロード時に子要素を複製して追加
        $divs.clone().appendTo($imgParts);

// サムネイルにマウスが乗った時にアニメーションを一時停止
        $imgParts.on('mouseenter', function() {
            $(this).css('animation-play-state', 'paused');
        });

// サムネイルからマウスが離れた時にアニメーションを再開
        $imgParts.on('mouseleave', function() {
            $(this).css('animation-play-state', 'running');
        });
    });
});

js

deco-slideimg2

サムネイルが横スライドするタイプのスライドショーです。

<h2>deco-slideimg2-parts</h2>
<ul>
<li>「deco-slideimg2-parts」には必ず「４枚以上」で「偶数」の画像を配置して下さい。</li>
<li>「rtl-parts」は右から左へ移動します。「ltr-parts」は左から右へ移動します。</li>
<li>速度調整は、jsの「var animationTime = (divCount / 4) * 40 + 's';」の行の「40」の数字です。大きいほどゆっくりになります。</li>
</ul>

<p class="c">幅いっぱい使いたい場合は、bleed-x-partsを追加する。</p>
<div class="deco-slideimg2-parts bleed-x-parts">
<div class="img-parts rtl-parts">
<div><a href="#"><img src="images/1s.jpg" alt=""></a></div>
<div><a href="#"><img src="images/2s.jpg" alt=""></a></div>
<div><a href="#"><img src="images/3s.jpg" alt=""></a></div>
<div><a href="#"><img src="images/1s.jpg" alt=""></a></div>
<div><a href="#"><img src="images/2s.jpg" alt=""></a></div>
<div><a href="#"><img src="images/3s.jpg" alt=""></a></div>
</div>
</div>

</section>

html

css

//===============================================================
// サムネイルスライドショー
//===============================================================
$(document).ready(function() {
    // 各 .img-parts を個別に処理
    $('.deco-slideimg2-parts .img-parts').each(function() {
        var $imgParts = $(this);
        var $divs = $imgParts.children('div');
        var divCount = $divs.length;

// 各 div の幅を計算
        var divWidth = 100 / (divCount * 2);

// サムネイルの枚数に応じてアニメーション時間と幅を計算
        var animationTime = (divCount / 4) * 40 + 's';
        var slideWidth = (divCount / 4) * 200 + '%';

// 各 div に幅を設定
        $divs.css({
            'flex': '0 0 ' + divWidth + '%',
            'width': divWidth + '%'
        });

// .img-parts に animation と width を設定
        $imgParts.css({
            'animation-duration': animationTime,
            'width': slideWidth
        });

// 初期ロード時に子要素を複製して追加
        $divs.clone().appendTo($imgParts);

// サムネイルにマウスが乗った時にアニメーションを一時停止
        $imgParts.on('mouseenter', function() {
            $(this).css('animation-play-state', 'paused');
        });

// サムネイルからマウスが離れた時にアニメーションを再開
        $imgParts.on('mouseleave', function() {
            $(this).css('animation-play-state', 'running');
        });
    });
});

js

deco-slideimg2-circle

deco-slideimg2の円形タイプです。

<h2>deco-slideimg2-circle-parts</h2>
<ul>
<li>「deco-slideimg2-circle-parts」には必ず「４枚以上」で「偶数」の画像を配置して下さい。</li>
<li>「rtl-parts」は右から左へ移動します。「ltr-parts」は左から右へ移動します。</li>
<li>速度調整は、jsの「var animationTime = (divCount / 4) * 40 + 's';」の行の「40」の数字です。大きいほどゆっくりになります。</li>
</ul>

<p class="c">幅いっぱい使いたい場合は、bleed-x-partsを追加する。</p>
<div class="deco-slideimg2-circle-parts bleed-x-parts">
<div class="img-parts rtl-parts">
<div><a href="#"><img src="images/1s.jpg" alt=""></a></div>
<div><a href="#"><img src="images/2s.jpg" alt=""></a></div>
<div><a href="#"><img src="images/3s.jpg" alt=""></a></div>
<div><a href="#"><img src="images/1s.jpg" alt=""></a></div>
<div><a href="#"><img src="images/2s.jpg" alt=""></a></div>
<div><a href="#"><img src="images/3s.jpg" alt=""></a></div>
</div>
</div>

</section>

html

/*サムネイルスライドショー
---------------------------------------------------------------------------*/
/*スライドショー全体を囲むブロック*/
.deco-slideimg2-circle-parts {
	overflow-x: hidden;
}

/*スライドショーが２段続く場合に、上下間に1文字分のスペースを空ける。*/
.deco-slideimg2-circle-parts + .deco-slideimg2-circle-parts {
	margin-top: 1rem;
}

/*画像たちを囲むブロック*/
.deco-slideimg2-circle-parts .img-parts {
	display: flex;
	overflow: hidden;
}

/*画像1個あたり*/
.deco-slideimg2-circle-parts .img-parts > div {
	padding: 0 0.5rem;	/*左右に0.5文字分の余白*/
}
.deco-slideimg2-circle-parts .img-parts > div > a {
	display: block;
	aspect-ratio: 1 / 1;	/*正方形にする*/
	border-radius: 50%;		/*円形にする*/
	overflow: hidden;
}
.deco-slideimg2-circle-parts .img-parts img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/*右から左へ、左から右へ、のアニメーション*/
.deco-slideimg2-circle-parts .rtl-parts, .deco-slideimg2-circle-parts .ltr-parts {
	animation-timing-function: linear;
	animation-iteration-count: infinite;
}

.deco-slideimg2-circle-parts .rtl-parts {animation-name: slide-rtl-parts;}
.deco-slideimg2-circle-parts .ltr-parts {animation-name: slide-ltr-parts;}

@keyframes slide-rtl-parts {
0% {transform: translateX(0);}
100% {transform: translateX(-50%);}
}

@keyframes slide-ltr-parts {
0% {transform: translateX(-50%);}
100% {transform: translateX(0);}
}

css

//===============================================================
// サムネイルスライドショー
//===============================================================
$(document).ready(function() {
    // 各 .img-parts を個別に処理
    $('.deco-slideimg2-circle-parts .img-parts').each(function() {
        var $imgParts = $(this);
        var $divs = $imgParts.children('div');
        var divCount = $divs.length;

// 各 div の幅を計算
        var divWidth = 100 / (divCount * 2);

// サムネイルの枚数に応じてアニメーション時間と幅を計算
        var animationTime = (divCount / 4) * 40 + 's';
        var slideWidth = (divCount / 4) * 200 + '%';

// 各 div に幅を設定
        $divs.css({
            'flex': '0 0 ' + divWidth + '%',
            'width': divWidth + '%'
        });

// .img-parts に animation と width を設定
        $imgParts.css({
            'animation-duration': animationTime,
            'width': slideWidth
        });

// 初期ロード時に子要素を複製して追加
        $divs.clone().appendTo($imgParts);

// サムネイルにマウスが乗った時にアニメーションを一時停止
        $imgParts.on('mouseenter', function() {
            $(this).css('animation-play-state', 'paused');
        });

// サムネイルからマウスが離れた時にアニメーションを再開
        $imgParts.on('mouseleave', function() {
            $(this).css('animation-play-state', 'running');
        });
    });
});

js

deco-slideimg3

deco-slideimg2の段違いレイアウトです。

<h2>deco-slideimg3-parts</h2>
<ul>
<li>「deco-slideimg3-parts」には必ず「４枚以上」で「偶数」の画像を配置して下さい。</li>
<li>「rtl-parts」は右から左へ移動します。「ltr-parts」は左から右へ移動します。</li>
<li>速度調整は、jsの「var animationTime = (divCount / 4) * 40 + 's';」の行の「40」の数字です。大きいほどゆっくりになります。</li>
</ul>

<p class="c">幅いっぱい使いたい場合は、bleed-x-partsを追加する。</p>
<div class="deco-slideimg3-parts bleed-x-parts">
<div class="img-parts rtl-parts">
<div><a href="#"><img src="images/1s.jpg" alt=""></a></div>
<div><a href="#"><img src="images/2s.jpg" alt=""></a></div>
<div><a href="#"><img src="images/3s.jpg" alt=""></a></div>
<div><a href="#"><img src="images/1s.jpg" alt=""></a></div>
<div><a href="#"><img src="images/2s.jpg" alt=""></a></div>
<div><a href="#"><img src="images/3s.jpg" alt=""></a></div>
</div>
</div>

</section>

html

/*サムネイルスライドショー
---------------------------------------------------------------------------*/
/*スライドショー全体を囲むブロック*/
.deco-slideimg3-parts {
	overflow-x: hidden;
}

/*スライドショーが２段続く場合に、上下間に1文字分のスペースを空ける。*/
.deco-slideimg3-parts + .deco-slideimg3-parts {
	margin-top: 1rem;
}

/*画像たちを囲むブロック*/
.deco-slideimg3-parts .img-parts {
	display: flex;
	overflow: hidden;
}

/*段違いに配置（偶数版目だけ上に２文字分のスペースをとる）*/
.deco-slideimg3-parts .img-parts div:nth-of-type(even) {
	margin-top: 2rem;
}

/*画像1個あたり*/
.deco-slideimg3-parts .img-parts > div {
	padding: 0 0.5rem;	/*左右で合計1remぶんの見た目余白*/
}

/*右から左へ、左から右へ、のアニメーション*/
.deco-slideimg3-parts .rtl-parts, .deco-slideimg3-parts .ltr-parts {
	animation-timing-function: linear;
	animation-iteration-count: infinite;
}

.deco-slideimg3-parts .rtl-parts {animation-name: slide-rtl-parts;}
.deco-slideimg3-parts .ltr-parts {animation-name: slide-ltr-parts;}

@keyframes slide-rtl-parts {
0% {transform: translateX(0);}
100% {transform: translateX(-50%);}
}

@keyframes slide-ltr-parts {
0% {transform: translateX(-50%);}
100% {transform: translateX(0);}
}

css

//===============================================================
// サムネイルスライドショー
//===============================================================
$(document).ready(function() {
    // 各 .img-parts を個別に処理
    $('.deco-slideimg3-parts .img-parts').each(function() {
        var $imgParts = $(this);
        var $divs = $imgParts.children('div');
        var divCount = $divs.length;

// 各 div の幅を計算
        var divWidth = 100 / (divCount * 2);

// サムネイルの枚数に応じてアニメーション時間と幅を計算
        var animationTime = (divCount / 4) * 40 + 's';
        var slideWidth = (divCount / 4) * 200 + '%';

// 各 div に幅を設定
        $divs.css({
            'flex': '0 0 ' + divWidth + '%',
            'width': divWidth + '%'
        });

// .img-parts に animation と width を設定
        $imgParts.css({
            'animation-duration': animationTime,
            'width': slideWidth
        });

// 初期ロード時に子要素を複製して追加
        $divs.clone().appendTo($imgParts);

// サムネイルにマウスが乗った時にアニメーションを一時停止
        $imgParts.on('mouseenter', function() {
            $(this).css('animation-play-state', 'paused');
        });

// サムネイルからマウスが離れた時にアニメーションを再開
        $imgParts.on('mouseleave', function() {
            $(this).css('animation-play-state', 'running');
        });
    });
});

js

deco-slideimg3-circle

deco-slideimg3-circleの円形タイプです。

<h2>deco-slideimg3-circle-parts</h2>
<ul>
<li>「deco-slideimg3-circle-parts」には必ず「４枚以上」で「偶数」の画像を配置して下さい。</li>
<li>「rtl-parts」は右から左へ移動します。「ltr-parts」は左から右へ移動します。</li>
<li>速度調整は、jsの「var animationTime = (divCount / 4) * 40 + 's';」の行の「40」の数字です。大きいほどゆっくりになります。</li>
</ul>

<p class="c">幅いっぱい使いたい場合は、bleed-x-partsを追加する。</p>
<div class="deco-slideimg3-circle-parts bleed-x-parts">
<div class="img-parts rtl-parts">
<div><a href="#"><img src="images/1s.jpg" alt=""></a></div>
<div><a href="#"><img src="images/2s.jpg" alt=""></a></div>
<div><a href="#"><img src="images/3s.jpg" alt=""></a></div>
<div><a href="#"><img src="images/1s.jpg" alt=""></a></div>
<div><a href="#"><img src="images/2s.jpg" alt=""></a></div>
<div><a href="#"><img src="images/3s.jpg" alt=""></a></div>
</div>
</div>

</section>

html

/*サムネイルスライドショー
---------------------------------------------------------------------------*/
/*スライドショー全体を囲むブロック*/
.deco-slideimg3-circle-parts {
	overflow-x: hidden;
}

/*スライドショーが２段続く場合に、上下間に1文字分のスペースを空ける。*/
.deco-slideimg3-circle-parts + .deco-slideimg3-circle-parts {
	margin-top: 1rem;
}

/*画像たちを囲むブロック*/
.deco-slideimg3-circle-parts .img-parts {
	display: flex;
	overflow: hidden;
}

/*段違いに配置（偶数版目だけ上に２文字分のスペースをとる）*/
.deco-slideimg3-circle-parts .img-parts div:nth-of-type(even) {
	margin-top: 2rem;
}

/*画像1個あたり*/
.deco-slideimg3-circle-parts .img-parts > div {
	padding: 0 0.5rem;	/*左右に0.5文字分の余白*/
}
.deco-slideimg3-circle-parts .img-parts > div > a {
	display: block;
	aspect-ratio: 1 / 1;	/*正方形にする*/
	border-radius: 50%;		/*円形にする*/
	overflow: hidden;
}
.deco-slideimg3-circle-parts .img-parts img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/*右から左へ、左から右へ、のアニメーション*/
.deco-slideimg3-circle-parts .rtl-parts, .deco-slideimg3-circle-parts .ltr-parts {
	animation-timing-function: linear;
	animation-iteration-count: infinite;
}

.deco-slideimg3-circle-parts .rtl-parts {animation-name: slide-rtl-parts;}
.deco-slideimg3-circle-parts .ltr-parts {animation-name: slide-ltr-parts;}

@keyframes slide-rtl-parts {
0% {transform: translateX(0);}
100% {transform: translateX(-50%);}
}

@keyframes slide-ltr-parts {
0% {transform: translateX(-50%);}
100% {transform: translateX(0);}
}

css

//===============================================================
// サムネイルスライドショー
//===============================================================
$(document).ready(function() {
    // 各 .img-parts を個別に処理
    $('.deco-slideimg3-circle-parts .img-parts').each(function() {
        var $imgParts = $(this);
        var $divs = $imgParts.children('div');
        var divCount = $divs.length;

// 各 div の幅を計算
        var divWidth = 100 / (divCount * 2);

// サムネイルの枚数に応じてアニメーション時間と幅を計算
        var animationTime = (divCount / 4) * 40 + 's';
        var slideWidth = (divCount / 4) * 200 + '%';

// 各 div に幅を設定
        $divs.css({
            'flex': '0 0 ' + divWidth + '%',
            'width': divWidth + '%'
        });

// .img-parts に animation と width を設定
        $imgParts.css({
            'animation-duration': animationTime,
            'width': slideWidth
        });

// 初期ロード時に子要素を複製して追加
        $divs.clone().appendTo($imgParts);

// サムネイルにマウスが乗った時にアニメーションを一時停止
        $imgParts.on('mouseenter', function() {
            $(this).css('animation-play-state', 'paused');
        });

// サムネイルからマウスが離れた時にアニメーションを再開
        $imgParts.on('mouseleave', function() {
            $(this).css('animation-play-state', 'running');
        });
    });
});

js

deco-slidetext1

テキストを直接htmlに置いたものを横スライドさせたタイプ。

html

css

js

deco-spin1

svg画像を先にDLし、imagesに入れて下さい。円形にテキスト(svg)が回転する装飾用のアニメーション。

html

css

mainimg-slide-thumbnail1-A

サムネイルが横スライドするタイプ。

html

/*サムネイルスライドショー
---------------------------------------------------------------------------*/
/*スライドショー全体を囲むブロック*/
.mainimg-slide-thumbnail1-A-parts {
	overflow-x: hidden;
	background: linear-gradient(transparent 20%, var(--primary-color) 20%);/*背景グラデーション。2箇所ある20%の数値を調整すると、スライド画像のどの高さまで色をつけるか変更できます。varが色の指定で、theme.cssのprimary-colorを読み込みます。*/
	color: var(--primary-inverse-color);	/*文字色。theme.cssのprimary-inverse-colorを読み込みます。*/
	text-align: center;		/*文字をセンタリング*/
	padding-bottom: 3rem;	/*下に余白3文字分*/
}

/*h2見出し*/
.mainimg-slide-thumbnail1-A-parts h2 {
	font-family: var(--accent-font), var(--base-font);	/*theme.cssのaccent-fontに指定したフォントを読み込む。読み込めなければbase-fontで指定したフォントを読み込む。*/
	font-size: 3rem;	/*文字サイズ3倍*/
	font-weight: 500;	/*文字の太さ*/
	margin-bottom: 1rem;	/*下に空けるスペース*/
}

/*文章*/
.mainimg-slide-thumbnail1-A-parts p {
	font-size: 0.8rem;	/*文字サイズ0.8倍*/
}

/*スライドショーが２段続く場合に、上下間に1文字分のスペースを空ける。*/
.mainimg-slide-thumbnail1-A-parts + .mainimg-slide-thumbnail1-A-parts {
	margin-top: 1rem;
}

/*画像たちを囲むブロック*/
.mainimg-slide-thumbnail1-A-parts .img-parts {
	display: flex;
	overflow: hidden;
}

/*画像1個あたり*/
.mainimg-slide-thumbnail1-A-parts .img-parts > div {
	padding: 0 1rem;	/*左右で合計2remぶんの見た目余白*/
}

/*右から左へ、左から右へ、のアニメーション*/
.mainimg-slide-thumbnail1-A-parts .rtl-parts, .mainimg-slide-thumbnail1-A-parts .ltr-parts {
	animation-timing-function: linear;
	animation-iteration-count: infinite;
}

.mainimg-slide-thumbnail1-A-parts .rtl-parts {animation-name: slide-rtl-parts;}
.mainimg-slide-thumbnail1-A-parts .ltr-parts {animation-name: slide-ltr-parts;}

@keyframes slide-rtl-parts {
0% {transform: translateX(0);}
100% {transform: translateX(-50%);}
}

@keyframes slide-ltr-parts {
0% {transform: translateX(-50%);}
100% {transform: translateX(0);}
}

css

//===============================================================
// サムネイルスライドショー
//===============================================================
$(document).ready(function() {
    // 各 .img-parts を個別に処理
    $('.mainimg-slide-thumbnail1-A-parts .img-parts').each(function() {
        var $imgParts = $(this);
        var $divs = $imgParts.children('div');
        var divCount = $divs.length;

// 各 div の幅を計算
        var divWidth = 100 / (divCount * 2);

// サムネイルの枚数に応じてアニメーション時間と幅を計算
        var animationTime = (divCount / 4) * 40 + 's';
        var slideWidth = (divCount / 4) * 200 + '%';

// 各 div に幅を設定
        $divs.css({
            'flex': '0 0 ' + divWidth + '%',
            'width': divWidth + '%'
        });

// .img-parts に animation と width を設定
        $imgParts.css({
            'animation-duration': animationTime,
            'width': slideWidth
        });

// 初期ロード時に子要素を複製して追加
        $divs.clone().appendTo($imgParts);

// サムネイルにマウスが乗った時にアニメーションを一時停止
        $imgParts.on('mouseenter', function() {
            $(this).css('animation-play-state', 'paused');
        });

// サムネイルからマウスが離れた時にアニメーションを再開
        $imgParts.on('mouseleave', function() {
            $(this).css('animation-play-state', 'running');
        });
    });
});

js

mainimg-slide-thumbnail1-B

サムネイルが横スライドするタイプ。

<h2>mainimg-slide-thumbnail1-B-parts</h2>
<ul>
<li>「mainimg-slide-thumbnail1-B-parts」には必ず「４枚以上」で「偶数」の画像を配置して下さい。</li>
<li>速度調整は、jsの「var animationTime = (divCount / 4) * 40 + 's';」の行の「40」の数字です。大きいほどゆっくりになります。</li>
<li>縦長画像を推奨。横長だとちょっとインパクト弱めです。</li>
<li>h2のテキストを変更する場合は、合わせてcssの「font-size: 8vw」と「margin-top: -14vw」も調整して下さい。</li>
</ul>

<div class="text-parts">
<h2>Welcome to Our Website</h2>
<p>ひとつひとつの出会いを大切にしながら、より良い情報や価値をお届けしてまいります。<br>
どうぞごゆっくりご覧ください。</p>
</div>

</div>

</section>

html

/*サムネイルスライドショー
---------------------------------------------------------------------------*/
/*スライドショー全体を囲むブロック*/
.mainimg-slide-thumbnail1-B-parts {
	overflow-x: hidden;
	background: linear-gradient(transparent 20%, var(--primary-color) 20%);/*背景グラデーション。2箇所ある20%の数値を調整すると、スライド画像のどの高さまで色をつけるか変更できます。varが色の指定で、theme.cssのprimary-colorを読み込みます。*/
	color: var(--primary-inverse-color);	/*文字色。theme.cssのprimary-inverse-colorを読み込みます。*/
	text-align: center;		/*文字をセンタリング*/
	padding-bottom: 3rem;	/*下に余白3文字分*/
	isolation: isolate;
}

/*テキストを囲むブロック*/
.mainimg-slide-thumbnail1-B-parts .text-parts {
	position: relative;z-index: 1;
	margin-top: -14vw;	/*どの程度写真に重ねるか。お好みで調整して下さい。*/
}

/*h2見出し*/
.mainimg-slide-thumbnail1-B-parts h2 {
	font-family: var(--accent-font), var(--base-font);	/*theme.cssのaccent-fontに指定したフォントを読み込む。読み込めなければbase-fontで指定したフォントを読み込む。*/
	font-size: 8vw;			/*文字の大きさ。文字を入れ替える場合は、ここを調整してできるだけ画面幅いっぱいに近づけてみて下さい。*/
	font-weight: 500;		/*文字の太さ*/
	margin-bottom: 0;
	opacity: 0.4;	/*色が40%だけ出た状態*/
}

/*文章*/
.mainimg-slide-thumbnail1-B-parts p {
	font-size: 0.8rem;	/*文字サイズ0.8倍*/
}

/*スライドショーが２段続く場合に、上下間に1文字分のスペースを空ける。*/
.mainimg-slide-thumbnail1-B-parts + .mainimg-slide-thumbnail1-B-parts {
	margin-top: 1rem;
}

/*画像たちを囲むブロック*/
.mainimg-slide-thumbnail1-B-parts .img-parts {
	display: flex;
	overflow: hidden;
}

/*画像1個あたり*/
.mainimg-slide-thumbnail1-B-parts .img-parts > div {
	padding: 0 1rem;	/*左右で合計2remぶんの見た目余白*/
}

/*右から左へ、左から右へ、のアニメーション*/
.mainimg-slide-thumbnail1-B-parts .rtl-parts, .mainimg-slide-thumbnail1-B-parts .ltr-parts {
	animation-timing-function: linear;
	animation-iteration-count: infinite;
}

.mainimg-slide-thumbnail1-B-parts .rtl-parts {animation-name: slide-rtl-parts;}
.mainimg-slide-thumbnail1-B-parts .ltr-parts {animation-name: slide-ltr-parts;}

@keyframes slide-rtl-parts {
0% {transform: translateX(0);}
100% {transform: translateX(-50%);}
}

@keyframes slide-ltr-parts {
0% {transform: translateX(-50%);}
100% {transform: translateX(0);}
}

css

//===============================================================
// サムネイルスライドショー
//===============================================================
$(document).ready(function() {
    // 各 .img-parts を個別に処理
    $('.mainimg-slide-thumbnail1-B-parts .img-parts').each(function() {
        var $imgParts = $(this);
        var $divs = $imgParts.children('div');
        var divCount = $divs.length;

// 各 div の幅を計算
        var divWidth = 100 / (divCount * 2);

// サムネイルの枚数に応じてアニメーション時間と幅を計算
        var animationTime = (divCount / 4) * 40 + 's';
        var slideWidth = (divCount / 4) * 200 + '%';

// 各 div に幅を設定
        $divs.css({
            'flex': '0 0 ' + divWidth + '%',
            'width': divWidth + '%'
        });

// .img-parts に animation と width を設定
        $imgParts.css({
            'animation-duration': animationTime,
            'width': slideWidth
        });

// 初期ロード時に子要素を複製して追加
        $divs.clone().appendTo($imgParts);

// サムネイルにマウスが乗った時にアニメーションを一時停止
        $imgParts.on('mouseenter', function() {
            $(this).css('animation-play-state', 'paused');
        });

// サムネイルからマウスが離れた時にアニメーションを再開
        $imgParts.on('mouseleave', function() {
            $(this).css('animation-play-state', 'running');
        });
    });
});

js

mainimg-slide-thumbnail1-step-A

サムネイルが横スライドする段違いレイアウトタイプ。

html

/*サムネイルスライドショー
---------------------------------------------------------------------------*/
/*スライドショー全体を囲むブロック*/
.mainimg-slide-thumbnail1-step-A-parts {
	overflow-x: hidden;
	background: linear-gradient(transparent 20%, var(--primary-color) 20%);/*背景グラデーション。2箇所ある20%の数値を調整すると、スライド画像のどの高さまで色をつけるか変更できます。varが色の指定で、theme.cssのprimary-colorを読み込みます。*/
	color: var(--primary-inverse-color);	/*文字色。theme.cssのprimary-inverse-colorを読み込みます。*/
	text-align: center;		/*文字をセンタリング*/
	padding-bottom: 3rem;	/*下に余白3文字分*/
}

/*h2見出し*/
.mainimg-slide-thumbnail1-step-A-parts h2 {
	font-family: var(--accent-font), var(--base-font);	/*theme.cssのaccent-fontに指定したフォントを読み込む。読み込めなければbase-fontで指定したフォントを読み込む。*/
	font-size: 3rem;	/*文字サイズ3倍*/
	font-weight: 500;	/*文字の太さ*/
	margin-bottom: 1rem;	/*下に空けるスペース*/
}

/*文章*/
.mainimg-slide-thumbnail1-step-A-parts p {
	font-size: 0.8rem;	/*文字サイズ0.8倍*/
}

/*スライドショーが２段続く場合に、上下間に1文字分のスペースを空ける。*/
.mainimg-slide-thumbnail1-step-A-parts + .mainimg-slide-thumbnail1-step-A-parts {
	margin-top: 1rem;
}

/*画像たちを囲むブロック*/
.mainimg-slide-thumbnail1-step-A-parts .img-parts {
	display: flex;
	overflow: hidden;
}

/*段違いに配置（偶数版目だけ上に２文字分のスペースをとる）*/
.mainimg-slide-thumbnail1-step-A-parts .img-parts div:nth-of-type(even) {
	margin-top: 2rem;
}

/*画像1個あたり*/
.mainimg-slide-thumbnail1-step-A-parts .img-parts > div {
	padding: 0 1rem;	/*左右で合計2remぶんの見た目余白*/
}

/*右から左へ、左から右へ、のアニメーション*/
.mainimg-slide-thumbnail1-step-A-parts .rtl-parts, .mainimg-slide-thumbnail1-step-A-parts .ltr-parts {
	animation-timing-function: linear;
	animation-iteration-count: infinite;
}

.mainimg-slide-thumbnail1-step-A-parts .rtl-parts {animation-name: slide-rtl-parts;}
.mainimg-slide-thumbnail1-step-A-parts .ltr-parts {animation-name: slide-ltr-parts;}

@keyframes slide-rtl-parts {
0% {transform: translateX(0);}
100% {transform: translateX(-50%);}
}

@keyframes slide-ltr-parts {
0% {transform: translateX(-50%);}
100% {transform: translateX(0);}
}

css

//===============================================================
// サムネイルスライドショー
//===============================================================
$(document).ready(function() {
    // 各 .img-parts を個別に処理
    $('.mainimg-slide-thumbnail1-step-A-parts .img-parts').each(function() {
        var $imgParts = $(this);
        var $divs = $imgParts.children('div');
        var divCount = $divs.length;

// 各 div の幅を計算
        var divWidth = 100 / (divCount * 2);

// サムネイルの枚数に応じてアニメーション時間と幅を計算
        var animationTime = (divCount / 4) * 40 + 's';
        var slideWidth = (divCount / 4) * 200 + '%';

// 各 div に幅を設定
        $divs.css({
            'flex': '0 0 ' + divWidth + '%',
            'width': divWidth + '%'
        });

// .img-parts に animation と width を設定
        $imgParts.css({
            'animation-duration': animationTime,
            'width': slideWidth
        });

// 初期ロード時に子要素を複製して追加
        $divs.clone().appendTo($imgParts);

// サムネイルにマウスが乗った時にアニメーションを一時停止
        $imgParts.on('mouseenter', function() {
            $(this).css('animation-play-state', 'paused');
        });

// サムネイルからマウスが離れた時にアニメーションを再開
        $imgParts.on('mouseleave', function() {
            $(this).css('animation-play-state', 'running');
        });
    });
});

js

mainimg-slide-thumbnail1-step-B

サムネイルが横スライドする段違いレイアウトタイプ。

<h2>mainimg-slide-thumbnail1-step-B-parts</h2>
<ul>
<li>「mainimg-slide-thumbnail1-step-B-parts」には必ず「４枚以上」で「偶数」の画像を配置して下さい。</li>
<li>速度調整は、jsの「var animationTime = (divCount / 4) * 40 + 's';」の行の「40」の数字です。大きいほどゆっくりになります。</li>
<li>縦長画像を推奨。横長だとちょっとインパクト弱めです。</li>
<li>h2のテキストを変更する場合は、合わせてcssの「font-size: 8vw」と「margin-top: -14vw」も調整して下さい。</li>
</ul>

<div class="text-parts">
<h2>Welcome to Our Website</h2>
<p>ひとつひとつの出会いを大切にしながら、より良い情報や価値をお届けしてまいります。<br>
どうぞごゆっくりご覧ください。</p>
</div>

</div>

</section>

html

/*サムネイルスライドショー
---------------------------------------------------------------------------*/
/*スライドショー全体を囲むブロック*/
.mainimg-slide-thumbnail1-step-B-parts {
	overflow-x: hidden;
	background: linear-gradient(transparent 20%, var(--primary-color) 20%);/*背景グラデーション。2箇所ある20%の数値を調整すると、スライド画像のどの高さまで色をつけるか変更できます。varが色の指定で、theme.cssのprimary-colorを読み込みます。*/
	color: var(--primary-inverse-color);	/*文字色。theme.cssのprimary-inverse-colorを読み込みます。*/
	text-align: center;		/*文字をセンタリング*/
	padding-bottom: 3rem;	/*下に余白3文字分*/
	isolation: isolate;
}

/*テキストを囲むブロック*/
.mainimg-slide-thumbnail1-step-B-parts .text-parts {
	position: relative;z-index: 1;
	margin-top: -14vw;	/*どの程度写真に重ねるか。お好みで調整して下さい。*/
}

/*h2見出し*/
.mainimg-slide-thumbnail1-step-B-parts h2 {
	font-family: var(--accent-font), var(--base-font);	/*theme.cssのaccent-fontに指定したフォントを読み込む。読み込めなければbase-fontで指定したフォントを読み込む。*/
	font-size: 8vw;			/*文字の大きさ。文字を入れ替える場合は、ここを調整してできるだけ画面幅いっぱいに近づけてみて下さい。*/
	font-weight: 500;		/*文字の太さ*/
	margin-bottom: 0;
	opacity: 0.4;	/*色が40%だけ出た状態*/
}

/*文章*/
.mainimg-slide-thumbnail1-step-B-parts p {
	font-size: 0.8rem;	/*文字サイズ0.8倍*/
}

/*スライドショーが２段続く場合に、上下間に1文字分のスペースを空ける。*/
.mainimg-slide-thumbnail1-step-B-parts + .mainimg-slide-thumbnail1-step-B-parts {
	margin-top: 1rem;
}

/*画像たちを囲むブロック*/
.mainimg-slide-thumbnail1-step-B-parts .img-parts {
	display: flex;
	overflow: hidden;
}

/*段違いに配置（偶数版目だけ上に２文字分のスペースをとる）*/
.mainimg-slide-thumbnail1-step-B-parts .img-parts div:nth-of-type(even) {
	margin-top: 2rem;
}

/*画像1個あたり*/
.mainimg-slide-thumbnail1-step-B-parts .img-parts > div {
	padding: 0 1rem;	/*左右で合計2remぶんの見た目余白*/
}

/*右から左へ、左から右へ、のアニメーション*/
.mainimg-slide-thumbnail1-step-B-parts .rtl-parts, .mainimg-slide-thumbnail1-step-B-parts .ltr-parts {
	animation-timing-function: linear;
	animation-iteration-count: infinite;
}

.mainimg-slide-thumbnail1-step-B-parts .rtl-parts {animation-name: slide-rtl-parts;}
.mainimg-slide-thumbnail1-step-B-parts .ltr-parts {animation-name: slide-ltr-parts;}

@keyframes slide-rtl-parts {
0% {transform: translateX(0);}
100% {transform: translateX(-50%);}
}

@keyframes slide-ltr-parts {
0% {transform: translateX(-50%);}
100% {transform: translateX(0);}
}

css

//===============================================================
// サムネイルスライドショー
//===============================================================
$(document).ready(function() {
    // 各 .img-parts を個別に処理
    $('.mainimg-slide-thumbnail1-step-B-parts .img-parts').each(function() {
        var $imgParts = $(this);
        var $divs = $imgParts.children('div');
        var divCount = $divs.length;

// 各 div の幅を計算
        var divWidth = 100 / (divCount * 2);

// サムネイルの枚数に応じてアニメーション時間と幅を計算
        var animationTime = (divCount / 4) * 40 + 's';
        var slideWidth = (divCount / 4) * 200 + '%';

// 各 div に幅を設定
        $divs.css({
            'flex': '0 0 ' + divWidth + '%',
            'width': divWidth + '%'
        });

// .img-parts に animation と width を設定
        $imgParts.css({
            'animation-duration': animationTime,
            'width': slideWidth
        });

// 初期ロード時に子要素を複製して追加
        $divs.clone().appendTo($imgParts);

// サムネイルにマウスが乗った時にアニメーションを一時停止
        $imgParts.on('mouseenter', function() {
            $(this).css('animation-play-state', 'paused');
        });

// サムネイルからマウスが離れた時にアニメーションを再開
        $imgParts.on('mouseleave', function() {
            $(this).css('animation-play-state', 'running');
        });
    });
});

js

装飾用パーツ

装飾用パーツ

装飾用パーツ一覧

list-yoko-scroll2

list-yoko-scroll3

deco-cracker1

deco-kazaritext

deco-slideimg1

deco-slideimg2

deco-slideimg2-circle

deco-slideimg3

deco-slideimg3-circle

deco-slidetext1

deco-spin1

mainimg-slide-thumbnail1-A

mainimg-slide-thumbnail1-B

mainimg-slide-thumbnail1-step-A

mainimg-slide-thumbnail1-step-B

自分で作る
テンプレート

下準備

パーツ選択

目的から探す

旧パーツコーナー

下準備

パーツ選択

旧パーツコーナー

装飾用パーツ

装飾用パーツ

装飾用パーツ一覧

list-yoko-scroll2

list-yoko-scroll3

deco-cracker1

deco-kazaritext

deco-slideimg1

deco-slideimg2

deco-slideimg2-circle

deco-slideimg3

deco-slideimg3-circle

deco-slidetext1

deco-spin1

mainimg-slide-thumbnail1-A

mainimg-slide-thumbnail1-B

mainimg-slide-thumbnail1-step-A

mainimg-slide-thumbnail1-step-B

自分で作るテンプレート

下準備

パーツ選択

目的から探す

旧パーツコーナー

下準備

パーツ選択

旧パーツコーナー

自分で作る
テンプレート