PDA

Zobacz pełną wersję : Animate It!



james.bien
14-08-2023, 10:34
Witajcie!

Trafiłem na rozszerzenie Animate It!, dzięki któremu można wprowadzać na stronę ciekawe efekty animacji. Chciałbym zrobić chyba prostą rzecz - pojawiające się w jednym rzędzie grafiki (np. 6), które byłyby linkami do artykułów. Do artykułu wprowadzam wygenerowany kod, ale grafiki wyświetlają się jedna nad drugą, a mi zależy, żeby były obok siebie.

Na stronie demo (link (https://www.downloads.eleopard.in/animate-it-demo.html)) takie efekty są pokazane, ale nie wiem jak to ugryźć.

Być może są na forum Użytkownicy tego rozszerzenia - poproszę o jakąś wskazówkę.

Pozdrawiam
JB

siristru
14-08-2023, 11:02
Poka jak to u Ciebie wygląda.

james.bien
14-08-2023, 12:52
Link (https://testj4.szkola31.smarthost.pl/)do strony.
Utworzyłem moduł własny Animate It!, pozycja modułu top-b. W tym module chciałbym, żeby wyświetlały mi się te grafiki, które widać w artykule. Grafiki miałyby się pojawiać jedna za drugą w jednej linii.

W artykule to działa, w module nie (przypuszczam, że tu coś źle robię)

Kod artykułu w załączniku.

JB
10127

terra
14-08-2023, 12:57
wszystko masz przecież tutaj https://www.downloads.eleopard.in/animate-it-documentation.html#settings , natomiast nie jestem pewien czy to na J4 bedzie działać poprawnie, gdzie raczej stosuje się layout niż klasę css

siristru
14-08-2023, 15:33
Używasz elementów blokowych tj div i p, więc to jest poprawne zachowanie: https://prnt.sc/4RoQdSKTGzKA
Musisz użyć (lub zmienić właściwości blokowych) elementów inline, albo wyświetlić w siatce... albo użyć flexa.
To problem struktury html.

james.bien
21-08-2023, 09:37
wszystko masz przecież tutaj https://www.downloads.eleopard.in/an....html#settings
Te ustawienia nie rozwiązują problemu.

natomiast nie jestem pewien czy to na J4 bedzie działać poprawnie, gdzie raczej stosuje się layout niż klasę css
Troszkę dziwnie, bo dodatek "niby" dla J4 jest, ale chyba coś nie działa.

Czy jest jakaś alternatywa (komercyjna), która realizuje efekt, o który mi chodzi?

Dzięki
JB

- - - Updated - - -


Musisz użyć (lub zmienić właściwości blokowych) elementów inline, albo wyświetlić w siatce... albo użyć flexa.
To problem struktury html.
Korzystając z dodatku chciałoby się mieć zamierzony efekt bez "dodatkowej" ingerencji. Jest dodatek/rozszerzenie->korzystam->działa. A tu jednak coś nie tak.

Pytanie z postu wyżej - jest jakaś alternatywa, inny dodatek realizujący takie efekty?

Dzięki
JB

siristru
21-08-2023, 10:37
Ale efekt masz... tylko dla elementów blokowych a te zachowują się jak elementy blokowe :D

terra
21-08-2023, 13:54
Takie animacje to są dodatkowe biblioteki, które nie uwzględniają wszystkich pomysłów użytkowników. Osobiscie korzystam raczej z AOS, tutaj przykład jak to działa https://codepen.io/michalsnik/pen/WxNdvq

wystarczy załadowac bibliotekę z szablonem, a potem stosowac dodatkowe elementy wg uznania, dodaje się tylko parametr do elementu.

Drugim elementem, który działa podobnie to Swiper, do wszelkiego rodzaju sliderów https://codepen.io/CharmLuu/pen/KWKdEX

Wystarczy je tylko zainicjować w pliku user.js

To są dwa podstawowe elementy, które powinny wystarczyć w erze mobilności

james.bien
21-08-2023, 15:44
Ale efekt masz... tylko dla elementów blokowych a te zachowują się jak elementy blokowe
Ten sposób wyświetlania pewnie też wykorzystam.

Jeśli coś więcej - będzie trzeba będzie się wyedukować.

Dzięki
JB

- - - Updated - - -


Takie animacje to są dodatkowe biblioteki, które nie uwzględniają wszystkich pomysłów użytkowników. Osobiscie korzystam raczej z AOS, tutaj przykład jak to działa https://codepen.io/michalsnik/pen/WxNdvq

wystarczy załadowac bibliotekę z szablonem, a potem stosowac dodatkowe elementy wg uznania, dodaje się tylko parametr do elementu.

Drugim elementem, który działa podobnie to Swiper, do wszelkiego rodzaju sliderów https://codepen.io/CharmLuu/pen/KWKdEX

Wystarczy je tylko zainicjować w pliku user.js

To są dwa podstawowe elementy, które powinny wystarczyć w erze mobilności

Fajnie to wygląda. Będę musiał tylko się douczyć, jak to zastosować.

Dzięki
JB