Witam,
W celach edukacyjnych chciałbym stworzyć skrypt, który pozwala przewijać zdjęcia tak jak to się dzieje tutaj np: http://www.flowslider.com/
Po sporym poszukiwaniu nie znalazłem darmowego skryptu by móc wspomóc się kodem.
Może ktoś mi powie jak się zabrać za to, jakieś przykłady itp...
Nie znam innego takiego.
Ale spróbuj do tego podejść od innej strony niż kopiuj-wklej-trochę_zmień.
Zasiądź z kartką i papierem i pomyśl - co musisz zrobić, żeby uzyskać taki efekt. Jakie dane potrzebujesz pobrać i jakie obliczenia matematyczne musisz zastosować na tych danych, żeby uzyskać ten sam efekt. Bez matematyki się nie obejdzie tak czy tak - robiłem identyczny z założeń (tylko prostszy, bez wygodnego skinowania itd.) skrypt od zera ;) Poćwicz więc sobie logiczne myślenie, bo w tym więcej myślenia niż klepania kodu.
Z nudów i dla doświadczenia z wolnej woli napisałem skrypcik symulujący ten sam efekt:
http://4programmers.net/Pastebin/3444
Tutaj DEMO: http://jsfiddle.net/oq8tfe4k/4/embedded/result/
"#Okno" to miejsce(blok) z obrazkami.
Zaś obrazki umieściłem w liście (ul li).
Oczywiście umieść tam własne obrazki aby przetestować.
A właśnie jeśli chcesz aby po najechaniu wykonał się identyczny efekt zmień styl w css:
#lista li{
display:inline-block;
margin: 20px 20px;
border: 7px solid #FFF;
}
#lista li:hover{
-webkit-box-shadow: 0px 0px 35px 8px rgba(0,0,0,0.75);
-moz-box-shadow: 0px 0px 35px 8px rgba(0,0,0,0.75);
box-shadow: 0px 0px 35px 8px rgba(0,0,0,0.75);
}
Dzięki za wskazówki. Przerobiłem lekcje :) Z gotowych rzeczy załatwia to biblioteka jqery parallax.
Dumam teraz jak osiągnąć animację w której jak wskaźnik myszy jest po prawej stronie to karuzela leci w prawo z tym że czym dalej wskaźnik w prawo tym karuzela szybciej się przesuwa. Tak samo dzieje się jak kursor jest z lewej strony to karuzela wtedy w lewo leci z prędkością zależną od oddalenia się kursora od środka w lewo (przyjmując środek karuzeli w środkowym jej elemencie).
ale wzor na to jest prosty. przy ruchu mysza sprawdzaj czy kursor jest oddalony o X od srodka (to x to bufor by majac kursor mniej wiecej na srodku nic sie nie robilo) potem wzor jest taki: (poniewaz karuzele bazuje na marginesach) to do marginesu kontenera w ktorym sa obrazki dodajesz wartosc: (szer. okna / 2 - odleglosc kursora od lewej) * mnosznik (do sterowania predkoscia przewijania)