Poruszające się divy które nie mieszczą się w widoku

Question

Zacznę od tego, że problem jest trochę trudny do opisania bez pokazania i mam nadzieję, że tego za bardzo nie zagmatwałem. Otóż chcę umieścić na stronie divy (kwadratowe obrazki) które przesuwały by się jeden obok drugiego z jednej strony ekranu na drugą, znikały gdy wyjdą poza przy czym po ostatnim znowu pojawi się pierwszy. Trudność jest z tym, że powiedzmy ekran ma 1000px (możliwe że umieszczę je później w innym divie ale to nie jest teraz istotne)  obrazki mają 400px, jest 50px odstępu między nimi i jest ich 6. Efekt jaki uzyskuje to divy jeden pod drugim zamiast obok siebie, problem rozwiązuje zwiększenie obszaru do np 3000px ale nie o to chodzi. Dodatkowym problemem jest to że animacja działa tylko do momentu aż ostatni div dojedzie do końca i wtedy zaczyna się od nowa - nie wiem jak zrobić by pierwszy obrazek gdy zniknie z ekranu przeskakiwał z powrotem za ostatni tak by były one zapętlone bez przerwy. To co udało mi się do tej pory zrobić w tym elemencie (html i css):

<div id="logos">
                    <div class="img_logo">
                        <img src="logos/mcd.png" alt="macdonalds" />
                    </div>
                    <div class="img_logo">
                        <img src="logos/zara.jpg" alt="zara" />
                    </div>
                    <div class="img_logo">
                        <img src="logos/orlen.png" alt="orlen" />
                    </div>

                    <div class="img_logo">
                        <img src="logos/re.png" alt="reserved" />
                    </div>
                    <div class="img_logo">
                        <img src="logos/hnm.png" alt="H&M" />
                    </div>
                    <div class="img_logo">
                        <img src="logos/cropp.jpg" alt="cropp" />
                    </div>
            </div>

 

#logos{
    width:800px;
    margin-left:auto;
    margin-right:auto;
    overflow:hidden;
}

.img_logo{
    width:400px;
    height:400px;
    display:block;
    float:left;
    margin-left:60px;
    position:relative;
    animation:move 5s linear infinite;
    -webkit-animation:move 5s linear infinite;
}

@keyframes move
{
    0% { left:0%; }
    100% {left:100%; }
}

Wie ktoś jak można by to rozwiązać? Dodam że

overflow:hidden;

nic tu nie zmienia, ot moja próba naprawienia tego - zapomniałem skasować tą linie, ale może kogoś do czegoś naprowadzi ;)

EDIT: dla ułatwienia dodam że chodzi mi o mniej więcej taki efekt: http://webkod.pl/kurs-css/lekcje/dzial-4/css3-poruszajacy-sie-animowany-tekst tylko że przepisanie tego na wersję z divami zamiast tekstu nie wyszło mi za bardzo jak widać :p

Answer 1

Jestem laikiem i może palne głupotę, ale elementy aby mogły się układać obok siebie trzeba im nadać

float: left; i clear: both;

Comments

Divy mają float:left; a clear: both; nadaje się następnemu elementowi który nie używa float aby zablokować ,,opływanie" go z obu stron, użyłem go w następnym elemencie ale nie wstawiałem go już tu gdyż nie jest z tym powiązany.

Answer 2

Jeśli dopuszczasz inne technologie użyj jquery z pluginem bxslider.

Comments

Na razie w tym projekcie interesuje mnie wyłącznie czysty HTML 5 i CSS3, z tego co się orientuję CSS3 powinien dawać możliwość uzyskania takiego efektu, nawet jeśli miało by to być bardziej skomplikowane potrzebuję ,,wymasterować" css w najbliższym czasie więc nie pogardzę taką poradą :p