こんにちは！大宮のWEB屋さんTEDASKのToshi Seitoです。
よくサービスサイトやLPなどで実績として企業ロゴを自動でスクロールしているのを見たことがあると思いますが、つい最近制作で作ったので今回は作り方を共有したいと思います。
無限スクロールの完成イメージと完成コード
まずは動きを確認します。（ロゴはCanvaで作成）
左にスクロールするバージョンと右にスクロールするバージョンです。
HTML
<div class="slider_parent"> <div class="slider"> <div class="logos text_scroll"> <ul> <li><img src="./img/logo1.png" alt="" height="90"></li> <li><img src="./img/logo2.png" alt="" height="90"></li> <li><img src="./img/logo3.png" alt="" height="90"></li> <li><img src="./img/logo4.png" alt="" height="90"></li> <li><img src="./img/logo5.png" alt="" height="90"></li> </ul> </div> <div class="logos text_scroll"> <ul> <li><img src="./img/logo1.png" alt="" height="90"></li> <li><img src="./img/logo2.png" alt="" height="90"></li> <li><img src="./img/logo3.png" alt="" height="90"></li> <li><img src="./img/logo4.png" alt="" height="90"></li> <li><img src="./img/logo5.png" alt="" height="90"></li> </ul> </div> </div> </div> <div class="slider_parent"> <div class="slider"> <div class="logos text_scroll_reverse"> <ul> <li><img src="./img/logo1.png" alt="" height="90"></li> <li><img src="./img/logo2.png" alt="" height="90"></li> <li><img src="./img/logo3.png" alt="" height="90"></li> <li><img src="./img/logo4.png" alt="" height="90"></li> <li><img src="./img/logo5.png" alt="" height="90"></li> </ul> </div> <div class="logos text_scroll_reverse"> <ul> <li><img src="./img/logo1.png" alt="" height="90"></li> <li><img src="./img/logo2.png" alt="" height="90"></li> <li><img src="./img/logo3.png" alt="" height="90"></li> <li><img src="./img/logo4.png" alt="" height="90"></li> <li><img src="./img/logo5.png" alt="" height="90"></li> </ul> </div> </div> </div>
CSS
.slider_parent {
position: relative;
overflow: hidden;
}
.slider_parent .slider {
display: flex;
}
.text_scroll {
animation: scroll 40s linear infinite;
}
.text_scroll_reverse {
animation: scroll 40s linear infinite;
animation-direction: reverse !important;
}
.logos {
flex-shrink: 0;
}
.slider_parent ul li {
margin-left: 10px;
margin-right: 10px;
}
.slider_parent ul li {
display: inline-block;
}
.slider_parent ul {
padding: 0;
margin: 0;
display: flex;
}
.slider_parent ul li > a img {
transition: 0.4s;
}
.slider_parent ul li > a img {
max-width: 100% !important;
}
@keyframes scroll {
0% {
transform: translateX(0%);
}
100% {
transform: translateX(-100%);
}
}
@media only screen and (max-width: 991px) {
.slider_parent ul li {
margin-left: 5px;
margin-right: 5px;
}
.slider_parent ul li img {
height: 50px;
width: auto;
}
.text_scroll {
animation: scroll 30s linear infinite;
}
}
企業ロゴの無限スクロールの作り方のポイント
無限スクロールを作るポイントは3つです。
- スクロール要素をコピーして二つdivを作る
- CSSのkeyframesでアニメーションを設定
- ロゴの高さは画像自体で固定する（CSSで頑張らない方が楽かも）
1．スクロール要素をコピーして2つdivを作る
HTMLコードをみると分かりますがsliderクラスの中に2つの同じtext_scrollクラスの要素がありますね。これは、やってみると分かるのですが、一つしかない場合、スクロールの最後のロゴの後が空白になります。そして全ての要素のスクロールが終わったタイミングでまた先頭のロゴから表示されるので、その空白を埋めるためにもう一つコピーした要素が必要になります。
2．CSSのkeyframesでアニメーションを設定
CSSアニメーションを作るときに必要なプロパティです。
3．ロゴの高さは画像自体で固定する（CSSで頑張らない方が楽かも）
企業ロゴのサイズはまちまちなのが普通ですので、全てのロゴの高さはデザインソフトなどで一度高さを合わせたものを使った方が楽かと思います。
もちろんhightやobject-fitで高さ合わせても大丈夫かと思います。（CSSで頑張ってハマったので一応）
作り方は以上です。
まとめ
企業ロゴのスクロール方法はCSSでやりましたが，JavaScriptでやる方法もありますので興味ある方はJavaScript版も触ってみると状況に応じて対応が出来るようになれると思いますので、おすすめです。
以上、「【JavaScript不要】CSSだけで企業ロゴの無限スクロール（無限ループ）の作り方」でした！
コメント