GoldenLine
Zaloguj się

konto usunięte

Temat: JS Slider - jak mozna wykopnać pewien efekt

Witam.

Mam pytanie do zgromadzonych tu użytkowników.
Jak można zrobić podobny efekt (na obrazku) w JS.
Potrzebna wskazówka lub link do tutka z podobnym rozwiązaniem.
Nie jest potrzebny cały slider ale jedynie informacja jak w JS wykonać skrypt, który zmieniając pozycję będzie ją rozbijał na pionowe paski i składał razem pod koniec efektu.
Całość ma być pod content, nie pod img.
Pozdrawiam i proszę o wskazówkę/pomoc.

OBRAZEK:


Obrazek


PS. Na obrazku jest akurat NIVO Slider, pierwszy, który pamiętałem iż posiada takowy efekt ;]
Link do wypowiedziLink

konto usunięte

Temat: JS Slider - jak mozna wykopnać pewien efekt

Marcin Matuszewski:
Witam.

PS. Na obrazku jest akurat NIVO Slider, pierwszy, który pamiętałem iż posiada takowy efekt ;]

No to zajrzyj w kod tego pluginu i będziesz wiedział jak to jest zrobione...
Link do wypowiedziLink

konto usunięte

Temat: JS Slider - jak mozna wykopnać pewien efekt

Bardziej mi zależy na czystym JS nie jQuery ;] a i nie ma w bibliotece dokładniejszego opisu przejść aby jedno wyszukać ;/
Link do wypowiedziLink

konto usunięte

Temat: JS Slider - jak mozna wykopnać pewien efekt

Marcin Matuszewski:
Bardziej mi zależy na czystym JS nie jQuery ;] a i nie ma w bibliotece dokładniejszego opisu przejść aby jedno wyszukać ;/

1. google.com -> javascript image slider
2. znajdujesz właściwy slider oparty na native JS
3. ściągasz kod, przeglądasz go, uczysz się jak zrobić takie "cóś" samemu
4. KJM!
Link do wypowiedziLink

konto usunięte

Temat: JS Slider - jak mozna wykopnać pewien efekt

Idea oparta jest prawdopodobnie na chunkowaniu zdjęcia na kilka elementów, które mają ustawiony background-image na ten obrazek z odpowiednim background-position. Mając to na uwadze oraz posiadając odpowiednią wiedzę nt. JavaScript myślę, że powinieneś dać radę bez "ściągi".

BTW - kilka (-naście) razy musiałem mierzyć się z gotowymi pluginami do sliderów i niestety muszę przyznać, że 80% z nich jest bardzo słabo napisana, więc niekoniecznie polecam naukę przez ściąganie.
Link do wypowiedziLink

konto usunięte

Temat: JS Slider - jak mozna wykopnać pewien efekt

Dokładnie tak, jak to zostało napisane powyżej.
Jendak jeśli "Całość ma być pod content, nie pod img", to:
1. musisz powielić element do animacji tyle razy ile chcesz mieć "pasków"
2. każdy z tych pasków objąć kontenerem z overflow:hidden, dać ujemy lewy margines (na każdym pasku inny, tak, by wszystkie paski razem dały jedną całość)
3. nałożyć animację na każdy pasek w wybranych odstępach czasowych (np. na ujemy górny margines połączony z fadeOut'em)
4. gotowe
;)

przykład pisany naprawdę na szybkiego (uwzględnia tylko zawartość tekstową) wrzuciłem tutaj:
http://jsbin.com/iqakuq

jako baza do dalszych eksperymentów powinien się nadawać ;)
Link do wypowiedziLink

konto usunięte

Temat: JS Slider - jak mozna wykopnać pewien efekt

pozwole sobie odkopac temat i dorzucam inspiracje: https://developer.mozilla.org/en-US/demosdetail/tiled-i...
Link do wypowiedziLink

konto usunięte

Temat: JS Slider - jak mozna wykopnać pewien efekt

Paweł Nitka:
>......

przykład pisany naprawdę na szybkiego (uwzględnia tylko zawartość tekstową) wrzuciłem tutaj:
http://jsbin.com/iqakuq

jako baza do dalszych eksperymentów powinien się nadawać ;)

Dzięki wielkie. O coś w tym kierunku właśnie mi chodziło.
A mam pytanie do Ciebie, jeśli można.

Jak można ten efekt zapętlić dodając klonowanie i interval ?

Próbowałem zrobić to na zasadzie powtarzania skryptu (najpierw wyzwalacza z click, później różnych opcji) i za każdym razem .trim() przestaje działać. Owszem, klonuje divy, podmienia je na bieżąco itp lecz .trim() nie przynosi żadnego efektu.

Klonowania i interval zawsze używam do sliderów pod content/img i nie stwarza problemów a do prostych efektów dużo nie potrzeba (waga skryptu). Tutaj niestety mi się nie udało.

Niestety na ten moment nie mam jak podać kawałka kodu ;]
Link do wypowiedziLink
« Wróć do tematów
Odpowiedz

Podobne tematy


Następna dyskusja:

jak zapobiec przeskakiwaniu...




Wyślij zaproszenie do
Anuluj