海外サイトのデザインで流行っているらしい（？）「マーキー」

2023年4月27日

Web技術

以前Web関連のセミナー動画を視聴していて
「海外サイトでマーキーが流行っている」
というような話が出てきました。

マーキーって昔流行った
「ようこそ～」
とか文字が動くやつよね…( ﾟσωﾟ)

と思いますが最近ではデザインの一部として
例えば「背景に大きな文字（社名とか）が動いている」
用いられているようです。

でもマーキーのタグってももう使えないんじゃ…

当然マーキータグ「marquee」は使用せず「animation」などを使用して作成するようです。

ということでいくつか作成してみました(｀▽´)

横スクロール

MARQUEE

HTML

<div class="marquee">
	<div class="animationArea">
		<p>MARQUEE</p>
	</div>
</div>

<p>MARQUEE</p>

</div>

CSS

.marquee {
	overflow: hidden;
}

.marquee .animationArea {
	display: inline-block;
	padding-left: 100%;
	animation-name: MarqueeScroll;
	animation-timing-function: linear; /* 等しい速度 */
	animation-duration: 5s; /* 1周するのにかかる時間 */
	animation-iteration-count: infinite; /* 繰り返す回数 */
}

.marquee .animationArea p {
	font-size: 280px;
	color: #efefef;
	line-height: 1;
}

@keyframes MarqueeScroll {
	from { transform: translateX(0);}
	to { transform: translateX(-100%);}
}

.marquee {

overflow: hidden;

}

.marquee .animationArea {

display: inline-block;

padding-left: 100%;

animation-name: MarqueeScroll;

animation-timing-function: linear; /* 等しい速度 */

animation-duration: 5s; /* 1周するのにかかる時間 */

animation-iteration-count: infinite; /* 繰り返す回数 */

}

.marquee .animationArea p {

font-size: 280px;

color: #efefef;

line-height: 1;

}

@keyframes MarqueeScroll {

from { transform: translateX(0);}

to { transform: translateX(-100%);}

}

画像もできた

HTML

<div class="marquee">
	<div class="animationArea">
		<p><img src="/img.png" alt="" /></p>
	</div>
</div>

</div>

CSS

.marquee {
	overflow: hidden;
}

.marquee .animationArea {
	display: inline-block;
	padding-left: 100%;
	animation-name: MarqueeScroll;
	animation-timing-function: linear; /* 等しい速度 */
	animation-duration: 5s; /* 1周するのにかかる時間 */
	animation-iteration-count: infinite; /* 繰り返す回数 */
}

.marquee .animationArea p {
	width: 612px; /* 画像の幅 */
}

@keyframes MarqueeScroll {
	from { transform: translateX(0);}
	to { transform: translateX(-100%);}
}

.marquee {

overflow: hidden;

}

.marquee .animationArea {

display: inline-block;

padding-left: 100%;

animation-name: MarqueeScroll;

animation-timing-function: linear; /* 等しい速度 */

animation-duration: 5s; /* 1周するのにかかる時間 */

animation-iteration-count: infinite; /* 繰り返す回数 */

}

.marquee .animationArea p {

width: 612px; /* 画像の幅 */

}

@keyframes MarqueeScroll {

from { transform: translateX(0);}

to { transform: translateX(-100%);}

}

往復させてみた

HTML

<div class="marquee">
	<div class="animationArea">
		<p><img src="/img.png" alt="" /></p>
	</div>
</div>

</div>

CSS

.marquee {
	overflow: hidden;
	--marquee-height: 300px;
	height: var(--marquee-height);
}

.marquee .animationArea {
	animation-name: MarqueeScroll;
	animation-timing-function: linear; /* 等しい速度 */
	animation-iteration-count: infinite; /* 繰り返す回数 */
	animation-duration: 2s; /* 片道にかかる時間 */
	animation-direction: alternate; /* アニメーションを往復させる */
}

.marquee .animationArea img {
	display: block;
	margin: 0 auto;
}

@keyframes MarqueeScroll {
	from { transform: translateY(0);}
	to { transform: translateY(calc(var(--marquee-height) - 100%));}
}

.marquee {

overflow: hidden;

--marquee-height: 300px;

height: var(--marquee-height);

}

.marquee .animationArea {

animation-name: MarqueeScroll;

animation-timing-function: linear; /* 等しい速度 */

animation-iteration-count: infinite; /* 繰り返す回数 */

animation-duration: 2s; /* 片道にかかる時間 */

animation-direction: alternate; /* アニメーションを往復させる */

}

.marquee .animationArea img {

display: block;

margin: 0 auto;

}

@keyframes MarqueeScroll {

from { transform: translateY(0);}

to { transform: translateY(calc(var(--marquee-height) - 100%));}

}

上にコンテンツを載せてみた

コンテンツエリアはグラスモーフィズムで後ろの文字が少しぼけるように。

MARQUEE

あいうえお
かきくけこ
さしすせそ
たちつてと
なにぬねの
はひふへほ

HTML

<div class="bgMarquee">
	<div class="bgPosition">
		<p class="text">MARQUEE</p>
	</div>
	<div class="contents">
		<p>あいうえお<br />かきくけこ<br />さしすせそ<br />たちつてと<br />なにぬねの<br />はひふへほ</p>
	</div>
</div>

<p class="text">MARQUEE</p>

</div>

<p>あいうえお<br />かきくけこ<br />さしすせそ<br />たちつてと<br />なにぬねの<br />はひふへほ</p>

</div>

CSS

.bgMarquee {
	padding: 40px 10px;
	overflow: hidden;
	position: relative;
}

.bgMarquee .bgPosition {
	width: 100%;
	position: absolute;
	bottom: 50%;
	transform: translateY(50%);
}

.bgMarquee .bgPosition p.txt {
	display: inline-block;
	white-space: nowrap;
	padding-left: 100%;
	animation-name: MarqueeScroll;
	animation-timing-function: linear; /* 等しい速度 */
	animation-duration: 5s; /* 1周するのにかかる時間 */
	animation-iteration-count: infinite; /* 繰り返す回数 */
	font-size: 280px;
	color: #efefef;
	line-height: 1;
}

@keyframes MarqueeScroll {
	from { transform: translateX(0);}
	to { transform: translateX(-100%);}
}

.bgMarquee .contents {
	background: rgba( 255, 255, 255, 0.4 );
	box-shadow: 1px 1px 2px 0 rgba( 0, 0, 0, 0.4 );
	border-radius: 10px;
	padding: 20px;
	backdrop-filter: blur( 8px );
	-webkit-backdrop-filter: blur( 8px );
	max-inline-size: max-content;
	margin-inline: auto;
	max-width: 300px;
	text-align: center;
}

.bgMarquee {

padding: 40px 10px;

overflow: hidden;

position: relative;

}

.bgMarquee .bgPosition {

width: 100%;

position: absolute;

bottom: 50%;

transform: translateY(50%);

}

.bgMarquee .bgPosition p.txt {

display: inline-block;

white-space: nowrap;

padding-left: 100%;

animation-name: MarqueeScroll;

animation-timing-function: linear; /* 等しい速度 */

animation-duration: 5s; /* 1周するのにかかる時間 */

animation-iteration-count: infinite; /* 繰り返す回数 */

font-size: 280px;

color: #efefef;

line-height: 1;

}

@keyframes MarqueeScroll {

from { transform: translateX(0);}

to { transform: translateX(-100%);}

}

.bgMarquee .contents {

background: rgba( 255, 255, 255, 0.4 );

box-shadow: 1px 1px 2px 0 rgba( 0, 0, 0, 0.4 );

border-radius: 10px;

padding: 20px;

backdrop-filter: blur( 8px );

-webkit-backdrop-filter: blur( 8px );

max-inline-size: max-content;

margin-inline: auto;

max-width: 300px;

text-align: center;

}

文字を「::before」で設定してみた

あいうえお
かきくけこ
さしすせそ
たちつてと
なにぬねの
はひふへほ

HTML

<div class="bgMarquee">
	<div class="contents">
		<p>あいうえお<br />かきくけこ<br />さしすせそ<br />たちつてと<br />なにぬねの<br />はひふへほ</p>
	</div>
</div>

<p>あいうえお<br />かきくけこ<br />さしすせそ<br />たちつてと<br />なにぬねの<br />はひふへほ</p>

</div>

CSS

.bgMarquee {
	padding: 40px 10px;
	overflow: hidden;
	position: relative;
}

.bgMarquee2::before {
	content: 'MARQUEE';
	position: absolute;
	bottom: 50%;
	transform: translateY(50%);
	display: inline-block;
	white-space: nowrap;
	padding-left: 100%;
	animation-name: MarqueeScroll;
	animation-timing-function: linear; /* 等しい速度 */
	animation-duration: 5s; /* 1周するのにかかる時間 */
	animation-iteration-count: infinite; /* 繰り返す回数 */
	font-size: 280px;
	color: #efefef;
	line-height: 1;
}

@keyframes MarqueeScroll {
	from { transform: translate(0,50%);}
	to { transform: translate(-100%,50%);}
}

.contents {
	background: rgba( 255, 255, 255, 0.4 );
	box-shadow: 1px 1px 2px 0 rgba( 0, 0, 0, 0.4 );
	border-radius: 10px;
	padding: 20px;
	backdrop-filter: blur( 8px );
	-webkit-backdrop-filter: blur( 8px );
	max-inline-size: max-content;
	margin-inline: auto;
	max-width: 300px;
	text-align: center;
}

.bgMarquee {

padding: 40px 10px;

overflow: hidden;

position: relative;

}

.bgMarquee2::before {

content: 'MARQUEE';

position: absolute;

bottom: 50%;

transform: translateY(50%);

display: inline-block;

white-space: nowrap;

padding-left: 100%;

animation-name: MarqueeScroll;

animation-timing-function: linear; /* 等しい速度 */

animation-duration: 5s; /* 1周するのにかかる時間 */

animation-iteration-count: infinite; /* 繰り返す回数 */

font-size: 280px;

color: #efefef;

line-height: 1;

}

@keyframes MarqueeScroll {

from { transform: translate(0,50%);}

to { transform: translate(-100%,50%);}

}

.contents {

background: rgba( 255, 255, 255, 0.4 );

box-shadow: 1px 1px 2px 0 rgba( 0, 0, 0, 0.4 );

border-radius: 10px;

padding: 20px;

backdrop-filter: blur( 8px );

-webkit-backdrop-filter: blur( 8px );

max-inline-size: max-content;

margin-inline: auto;

max-width: 300px;

text-align: center;

}

画像を「background」で設置して動かしてみた

HTML

<div class="marquee">
	<div class="animationArea">
	</div>
</div>

</div>

CSS

.marquee {
	height: 200px;
}

.marquee .animationArea {
	background: url('/img.png') no-repeat right center;
	animation: moveBg 5s infinite linear;
	height: 100%;

}

@keyframes moveBg {
	0% { background-position: calc(100% + 612px) center; }
	100% { background-position: -612px center; }
}

.marquee {

height: 200px;

}

.marquee .animationArea {

background: url('/img.png') no-repeat right center;

animation: moveBg 5s infinite linear;

height: 100%;

}

@keyframes moveBg {

0% { background-position: calc(100% + 612px) center; }

100% { background-position: -612px center; }

}

「background」で往復させてみた

HTML

<div class="marquee">
	<div class="animationArea">
	</div>
</div>

</div>

CSS

.marquee {
	height: 300px;
}

.marquee .animationArea {
	background: url('/img.png') no-repeat center center;
	animation: moveBg 4s infinite linear;
	height: 100%;
}

@keyframes moveBg {
	0% { background-position: center top }
	50% { background-position: center bottom }
	100% { background-position: center top; }
}

@media screen and (max-width: 767px) {
	.marquee4 .animationArea  {
		background-size: contain;
	}
}

.marquee {

height: 300px;

}

.marquee .animationArea {

background: url('/img.png') no-repeat center center;

animation: moveBg 4s infinite linear;

height: 100%;

}

@keyframes moveBg {

0% { background-position: center top }

50% { background-position: center bottom }

100% { background-position: center top; }

}

@media screen and (max-width: 767px) {

.marquee4 .animationArea {

background-size: contain;

}

結構ずっと見ていられますねw

確かに読ませるためではなくあくまでデザインの一部として
文字（画像）を動かすというのは面白いかと思いました。

この記事の投稿者

taka

Webサイト作ってます。
最近のモットー「決して無理をしないスタイル」

twitter: @taka_sbs

月	火	水	木	金	土	日
				1	2	3
4	5	6	7	8	9	10
11	12	13	14	15	16	17
18	19	20	21	22	23	24
25	26	27	28	29	30