Ta strona używa ciasteczek (cookies), dzięki którym nasz serwis może działać lepiej. Dowiedz się więcej OK, rozumiem

"skokowe" przesuwanie div-a

Tworzenie dynamicznych stron internetowych z zastosowaniem JavaScript, jQuery, Ajax. Dowiedz się jak to zrobić, znajdź rozwiązania swoich problemów.

"skokowe" przesuwanie div-a

Post 18.07.2017, 21:41:44

Jestem na początku drogi. Ogarnąłem html i style css. czas na js.
Dołączam niewielki kod, żeby lepiej naświetlić mój problem.
Stylowanie css i script js celowo umieściłem w dokumencie, żeby wszystko było pod reką.
Mój redBox przesuwa się na kliknięcie w przycisk w prawo o 34 px. Chcę zrobić tak, żeby kolejny ruch rozpoczynał się automatycznie (już bez klikana na przycisk) z pozycji x=34px, następny z pozycji x=68px, itd. - takie krokowe przesuwanie.
Nie proszę o gotowy script tylko o sugestię jak sie do tego zabrać (oczywiście w js)
Z góry dzięki.

<!DOCTYPE html>
<html>

<head></head>
<body>
<button id="btnStart">startAnim</button>
<div id="redBox">
</div>
<style>
body {
margin: 0;
}

#redBox {
background-color: crimson;
position: absolute;
width: 313px;
height: 100px;
bottom: 200px;
}

@keyframes run {
0% {left:0px; bottom:200px}
50% {left:0px; bottom:200px}
100% {left:34px; bottom:200px}
}

</style>

<script>
btnStart.addEventListener("click", function() {
redBox.style.animation = "run 1s 1s infinite";
/* infinite - wisane jest pewnie bez sensu*/
})
</script>
</body>
</html>
gżeh
Posty: 1
Dołączył(a): 18.07.2017

Powrót do JavaScript


 


  • Podobne wątki
    Odpowiedzi
    Wyświetlone
    Ostatni post

Kto przegląda forum

Użytkownicy przeglądający ten dział: Brak zidentyfikowanych użytkowników i 6 gości

Hosting, Domeny, SSL

Subskrypcja

Mamy 50469 zarejestrowanych użytkowników.
Najnowszy użytkownik: murek


Nasi użytkownicy napisali:

  • 935728 wiadomości
  • w 246601 tematach

Najnowsze wpisy na blogu

Najnowsze artykuły

Najaktywniejsi (ostatnie 30 dni)