HTMLとCSSだけでテキストを縦にスクロールさせてみました。
<!-- index.html -->
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, initial-scale=1.0">
<title>Text Scroll Animation</title>
<link rel="stylesheet" href="links/styles.css">
</head>
<body>
<div class="scroll-container">
<div class="scroll-text">
<center>
<p><b>THE PEACH BOY</b><br>
<br>
Once upon a time, a long time ago,<br>
there lived an old man and an old woman.<br>
The grandfather went to the mountains<br>
to cut grass and the grandmother went<br>
to the river to wash her clothes.<br>
While the grandmother was washing<br>
her clothes in the river,<br>
a big peach floated down.<br>
What a big peach! Let's take it home.<br>
The old woman carried the peach<br>
on her back and went to cut it open,<br>
and a big baby came out of the peach.<br>
</p>
</center>
</div>
</div>
</body>
</html>
<!-- index.html -->
/* styles.css */
* {
margin: 0px;
padding: 0px;
}
body {
background-color: #000;
font-family: 'Arial', sans-serif;
overflow: hidden;
/* 水平スクロールバーを隠す */
}
.scroll-container {
position: absolute;
bottom: 0;
left: 50%;
transform: translateX(-50%);
/* コンテナを水平に中央揃えする */
width: 80%;
max-width: 500px;
/* 必要に応じてコンテナの幅を調整する */
}
.scroll-text {
position: relative;
overflow: hidden;
height: 600px;
/* 必要に応じてコンテナの高さを調節する */
}
.scroll-text p {
position: absolute;
margin: 0;
padding: 20px;
color: #fff;
font-size: 24px;
line-height: 40px;
animation: scroll-up 30s linear infinite;
/* 要に応じてアニメーションの時間を調整する */
}
@keyframes scroll-up {
0% {
transform: translateY(100%);
}
100% {
transform: translateY(-100%);
}
}
/* styles.css */
作ってみると、色々不満が出てきますが、ユニバーサルデザインの観点では動く文字は好ましくない処理なので、こんなことも出来る・・・程度で良いかも。
