こんにちは、今回はJavascriptを使用せず画像を自動横スクロールするサンプルコードをご紹介したいと思います。
ではさっそくどうぞ。
見出し
ライブデモ
ますはデモを紹介します。
自動で画像がスクロールされ、ホバーするとスクロールが停止するようになっています。
動作を確認してみてください。
デモ1 左にスクロール
See the Pen Untitled by TMあさ (@TM-the-styleful) on CodePen.
デモ2 右にスクロール
See the Pen 自動横スクロール右へ by TMあさ (@TM-the-styleful) on CodePen.
サンプルコード
ではさっそく実装するためのサンプルコードをご紹介します。
HTMLサンプルコード
<div class="scroll_portfolio">
<div class="scroll_portfolio_wrap scroll_portfolio_wrap--hover">
<ul class="scroll_portfolio_list scroll_portfolio_list--right">
<li class="scroll_portfolio_item"><img decoding="async" src="/sample.png" alt=""></li>
<li class="scroll_portfolio_item"><img decoding="async" src="/sample.png" alt=""></li>
<li class="scroll_portfolio_item"><img decoding="async" src="/sample.png" alt=""></li>
<li class="scroll_portfolio_item"><img decoding="async" src="/sample.png" alt=""></li>
<li class="scroll_portfolio_item"><img decoding="async" src="/sample.png" alt=""></li>
<li class="scroll_portfolio_item"><img decoding="async" src="/sample.png" alt=""></li>
<li class="scroll_portfolio_item"><img decoding="async" src="/sample.png" alt=""></li>
<li class="scroll_portfolio_item"><img decoding="async" src="/sample.png" alt=""></li>
<li class="scroll_portfolio_item"><img decoding="async" src="/sample.png" alt=""></li>
<li class="scroll_portfolio_item"><img decoding="async" src="/sample.png" alt=""></li>
<li class="scroll_portfolio_item"><img decoding="async" src="/sample.png" alt=""></li>
<li class="scroll_portfolio_item"><img decoding="async" src="/sample.png" alt=""></li>
</ul>
<ul class="scroll_portfolio_list scroll_portfolio_list--right">
<li class="scroll_portfolio_item"><img decoding="async" src="/sample.png" alt=""></li>
<li class="scroll_portfolio_item"><img decoding="async" src="/sample.png" alt=""></li>
<li class="scroll_portfolio_item"><img decoding="async" src="/sample.png" alt=""></li>
<li class="scroll_portfolio_item"><img decoding="async" src="/sample.png" alt=""></li>
<li class="scroll_portfolio_item"><img decoding="async" src="/sample.png" alt=""></li>
<li class="scroll_portfolio_item"><img decoding="async" src="/sample.png" alt=""></li>
<li class="scroll_portfolio_item"><img decoding="async" src="/sample.png" alt=""></li>
<li class="scroll_portfolio_item"><img decoding="async" src="/sample.png" alt=""></li>
<li class="scroll_portfolio_item"><img decoding="async" src="/sample.png" alt=""></li>
<li class="scroll_portfolio_item"><img decoding="async" src="/sample.png" alt=""></li>
<li class="scroll_portfolio_item"><img decoding="async" src="/sample.png" alt=""></li>
<li class="scroll_portfolio_item"><img decoding="async" src="/sample.png" alt=""></li>
</ul>
</div>
</div>
CSS (左にスクロール) サンプルコード
@keyframes infinity-scroll-right {
from {
transform: translateX(0%);
}
to {
transform: translateX(-100%);
}
}
_:-ms-lang(x)::-ms-backdrop,
.scroll_portfolio {
display: -ms-grid;
overflow: hidden;
}
.scroll_portfolio {
margin-top: 48px;
}
.scroll_portfolio_wrap {
display: flex;
overflow: hidden;
}
.scroll_portfolio_list {
display: flex;
list-style: none;
}
.scroll_portfolio_list--right{
animation :infinity-scroll-right 24s infinite linear 2s both;
}
.scroll_portfolio_item {
width: 220px;
margin: 0 8px;
}
.scroll_portfolio_item > img{
width: 100%;
}
.scroll_portfolio:hover .scroll_portfolio_list {
animation-play-state: paused;
}
@media screen and (max-width: 767px) {
.scroll_portfolio_item {
width: 180px;
margin: 0 8px;
}
}
CSS (右にスクロール) サンプルコード
@keyframes infinity-scroll-right {
from {
transform: translateX(-100%);
}
to {
transform: translateX(0%);
}
}
_:-ms-lang(x)::-ms-backdrop,
.scroll_portfolio {
display: -ms-grid;
overflow: hidden;
}
.scroll_portfolio {
margin-top: 48px;
}
.scroll_portfolio_wrap {
display: flex;
overflow: hidden;
}
.scroll_portfolio_list {
display: flex;
list-style: none;
}
.scroll_portfolio_list--right{
animation :infinity-scroll-right 24s infinite linear 2s both;
}
.scroll_portfolio_item {
width: 220px;
margin: 0 8px;
}
.scroll_portfolio_item > img{
width: 100%;
}
.scroll_portfolio:hover .scroll_portfolio_list {
animation-play-state: paused;
}
@media screen and (max-width: 767px) {
.scroll_portfolio_item {
width: 180px;
margin: 0 8px;
}
}
コード解説
HTMLコード解説
HTMLについては並べたい画像に置き換えてください。
CSSコード解説
動きやデザインについてはCSSを編集します。
.scroll_portfolio_list--right{
animation :infinity-scroll-right 24s infinite linear 2s both;
}
このコードの24sの部分を変更するとスクロールのスピードが変わります。
数値が大きい方がスクロールのスピードが遅くなります。
.scroll_portfolio:hover .scroll_portfolio_list {
animation-play-state: paused;
}
この部分を削除すればホバー時にスクロールが停止する機能を削除できます。
.scroll_portfolio_item {
width: 220px;
margin: 0 8px;
}
@media screen and (max-width: 767px) {
.scroll_portfolio_item {
width: 180px;
margin: 0 8px;
}
}
このコードで表示する画像のサイズをデスクトップとスマホで切り替えています。
widthの部分をお好みに合わせて変更してください。
まとめ
いかがでしたでしょうか。
昔はJavascriptga必要だったアニメーションがCSSのみで実装できてしまいます。
汎用性も高いと思うので、皆さんもぜひ使ってみてください。