マーキーの作成方法CSSのみでロゴスライダの無限ループ

Question

今、私のコードはロゴを右から左にアニメートさせ、最後にヒットしたら再開します。新しいサイクルが始まると、最初のロゴが最後のロゴに続くように、ループで続けるにはどうすればよいですか？

EDIT：

img { 
 
    width: 100px; 
 
} 
 
.marquee { 
 
    position: relative; 
 
    width: 100%; 
 
    height: 100px; 
 
    border: 1px solid black; 
 
    overflow: hidden; 
 
} 
 
.marquee div { 
 
    display: block; 
 
    position: absolute; 
 
    width: 300%; 
 
    overflow: hidden; 
 
    animation: marquee 20s linear infinite; 
 
} 
 
.marquee div:hover { 
 
    animation-play-state: paused; 
 
} 
 
.marquee span { 
 
    float: left; 
 
    width: 50%; 
 
} 
 

 
@keyframes marquee { 
 
    0% { left: 0; } 
 
    100% { left: -100%; } 
 
}

<div class="marquee"> 
 
    <div> 
 
    <img src="http://static.bragdeal.com/logo.png" alt=""> 
 
    <img src="http://static.bragdeal.com/logo.png" alt=""> 
 
    <img src="http://static.bragdeal.com/logo.png" alt=""> 
 
    <img src="http://static.bragdeal.com/logo.png" alt=""> 
 
    <img src="http://static.bragdeal.com/logo.png" alt=""> 
 
    <img src="http://static.bragdeal.com/logo.png" alt=""> 
 
    <img src="http://static.bragdeal.com/logo.png" alt=""> 
 
    <img src="http://static.bragdeal.com/logo.png" alt=""> 
 
    </div> 
 
</div>

Answer 1

HTML：

<div class='marquee'> 
     .... 
     images 
     .... 
    </div> 

CSS：

.marquee { 
    width: 100%; 
    overflow: hidden; 
    border:1px solid #ccc; 
} 

のJavaScript：

$(function() { 
    $('.marquee').marquee({ 
     duration: 5000, 
     duplicated: true, 
     gap: 00, 
     direction: 'left', 
     pauseOnHover: true 
    }); 
}); 

これは、JQuery Marqueeを使用して実行するために行った処理です。

外部リンク：

1. jquery.pause.js
2. jquery.marquee.min.js

また、あなたは、スレッドがライブラリを使用して、私はちょうど行い、迅速、簡単なjqueryのコードを持つようにしたいことは、このFiddle

Answer 2

ずっと良いだろうjQueryを使ってこれを行うための簡単な方法がある場合、私はあなたのフィドルhttps://jsfiddle.net/gkpnx34v/2/を更新して、私はむしろ、余分なJSライブラリを使用しないで ---ちょっと手を加えましたが、それはあなたにアイデアを与えるはずです。

.tech-slideshow { 
 
    height: 100px; 
 
    max-width: 100%; 
 
    margin: 0 auto; 
 
    position: relative; 
 
    overflow: hidden; 
 
    border:1px solid black; 
 
} 
 

 
.mover-1 { 
 
    height: 150px; 
 
    width: 10000px; 
 
    
 
    position: absolute; 
 
    overflow-x:hidden; 
 
    top: 0; 
 
    left: 0; 
 

 
    animation: moveSlideshow 3s linear infinite; 
 
} 
 

 
.mover-1 img { 
 
    display:inline-block; 
 
    vertical-align:middle; 
 
    width:100px; 
 
    margin:0; 
 
} 
 

 
@keyframes moveSlideshow { 
 
    100% { 
 
    transform: translateX(-520px); 
 
    } 
 
}

<div class="tech-slideshow"> 
 
    <div class="mover-1"> 
 
    <img src="http://static.bragdeal.com/logo.png" style="height:150px;"> 
 
    <img src="http://static.bragdeal.com/logo.png"> 
 
    <img src="http://static.bragdeal.com/logo.png"> 
 
    <img src="http://static.bragdeal.com/logo.png"> 
 
    <img src="http://static.bragdeal.com/logo.png"> 
 
    <img src="http://static.bragdeal.com/logo.png" style="height:150px;"> 
 
    <img src="http://static.bragdeal.com/logo.png"> 
 
    <img src="http://static.bragdeal.com/logo.png"> 
 
    <img src="http://static.bragdeal.com/logo.png"> 
 
    <img src="http://static.bragdeal.com/logo.png"> 
 
    <img src="http://static.bragdeal.com/logo.png" style="height:150px;"> 
 
    <img src="http://static.bragdeal.com/logo.png"> 
 
    <img src="http://static.bragdeal.com/logo.png"> 
 
    <img src="http://static.bragdeal.com/logo.png"> 
 
    <img src="http://static.bragdeal.com/logo.png"> 
 
    </div> 
 
</div>

私はあなたのロゴが次の行にロールオーバーを心配する必要はないだけので、任意の（巨大な）幅にご.mover-1を設定します。

次に、画像にいくつかのスタイルを設定して、うまく整列させるようにしました。

最後に、moveSlideshow translateX距離を1つのロゴセットの実際の幅に設定しました。 （プラス20ピクセルのため、あまりにも疲れていてレンダリングの問題があるので、パッディングやマージンなどを各ロゴに〜4ピクセル追加することがわかります）。

重要なのは、2組のロゴが必要なことです。最初のセットと次に表示される複製セットです。 1セットの幅に正確に移動するようにアニメーションを設定すると、スムーズにループします。

私は実際にロゴのブロックが決して十分に広いものであることを確認するために、3番目のロゴセットを追加しました（後でコードをコピー＆ペーストするのは本当に簡単で、レンダリングに余分な帯域幅は必要ありません）ワイドスクリーンに隙間がある。

P.S.ロゴ画像（height:150px）に設定したインラインスタイルは、この機能とは関係ありません。私はちょうどあなたがアニメーションがループしていたときに私が使用する第2のイメージを見つけるのが面倒だと言うことができることを確かめたいと思っていました。

P.P.S. a）ロゴの全幅を手作業で計算するか、b）ロゴの冗長ブロックを追加するのではなく、jQueryを使用して、その距離を移動するための.mover-1コンテナの幅（$('.mover-1')[0].width()）とset your keyframeを簡単に見つけることができます。次に、画像の配列を作成し（$('.mover-1 img')）、元のセットに追加/追加します。

このコード（未テスト）を取得する必要がありますが閉じ：

var logos = $('mover-1 img'); 
$('.mover-1').append(logos).append(logos);