Płynna, powolna animacja "marquee" (bez przerw pomiędzy powtórzeniami)z użyciem js+jquery

Question

Witam, chciałem zrobić animację marquee, która nie posiada pustego miejsca pomiędzy kolejnymi powtórzeniami, a w przypadku gdy tekst jest krótszy niż szerokość okna, w którym się znajduje aby automatycznie powieliło go o taką ilość razy aby zapełniło całą szerokość.

Niestety nie udało mi się tego dokonać za pomocą zwykłego znacznika marquee, dlatego próbowałem dany efekt osiągnąć z pomocą js+jquery, jednak skrypt powodował bardzo duże obciążenie (czasem też animacja na chwilę się "ścinała").

 

Oto kod, z którym się męczę: https://jsfiddle.net/L87svmp2/

Answer 1

Nie lepiej w CSS?
http://www.hongkiat.com/blog/css3-animation-advanced-marquee/

Comments

A co jeśli element ma przykładowo 1200px, a tekst, który chcę przesunąć ma w zależności od różnych czynników np. 100px albo dajmy na to 2000px?

Dodatkowo w tym sposobie widać wyraźną różnicę pomiędzy kolejnymi powtórzeniami, a ja potrzebuję płynnego przewijania, nieskończonego, z niewidoczną granicą pomiędzy poszczególnymi elementami.

---

Aha, nie zaglądałem do twojego kodu. Bardzo mi się podoba efekt. Niestety nie potrafię udzielić odpowiedzi jeżeli chodzi o optymalizację kodu. U mnie testowałem jednak i jest OK, ani trochę nic nie przycina. Może ktoś inny pomoże.

Poprawiłbym:

.marquee {
	width:1200px;
	...
}

na:

.marquee {
	max-width:1200px;
	...
}

Wtedy jest responsywne.

---

Z responsywnością będę działał później z użyciem media-queries.

https://jsfiddle.net/L87svmp2/2/ z większą ilością elementów z animacją w przeglądarce firefox z jednoczesnym działaniem na stronie (np scrollowanie box-ów) są widoczne ścinki, czego wolałbym uniknąć.

Mam jeszcze pytanie: czy warto po zakończeniu animacji jeszcze raz wywoływać tą samą funkcję, czy może mój kod można nieco zmodyfikować aby miał lepszą wydajność.

I czemu w

{ 'left': '-'+m_p_width+'px' }

zamiast 'left' nie mogę przekazać parametru funkcji, tylko muszę tworzyć 2 osobne dla animacji "w lewo" i "w prawo"?

 

Edit: jak widzę na stronie działają trolle, które bez powodu obniżają Ci reputację za pomoc i zgłaszają post w sumie nie wiem za co....