• Najnowsze pytania
  • Bez odpowiedzi
  • Zadaj pytanie
  • Kategorie
  • Tagi
  • Zdobyte punkty
  • Ekipa ninja
  • IRC
  • FAQ
  • Regulamin
  • Książki warte uwagi

Efekt, animacja przesuwania - JavaScript i JQuery

VPS Starter Arubacloud
0 głosów
2,280 wizyt
pytanie zadane 4 listopada 2016 w JavaScript przez Mavimix Dyskutant (8,420 p.)

Umiem zrobić slajder z animacją pojawiania się i znikania. Chciałbym zamiast tego zrobić efekt przesuwania, taki jak jest np. TU . Jakich funkcji do tego użyć, jak to zrobić?

3 odpowiedzi

+2 głosów
odpowiedź 4 listopada 2016 przez Filip2248 Dyskutant (8,840 p.)
wybrane 8 listopada 2016 przez Mavimix
 
Najlepsza

Można przy użyciu jQuery:

Tworzysz np. div'a (nazwijmy go pojemnik) o wielkości takiego slajdera i ustawiasz mu w css'ie overflow-x: scroll; - to sprawi, że wszystko co będzie w tym div'ie szersze niż on sam, będzie wyświetlane w postaci poziomego paska scroll'owania na dole tego div'a.

Teraz wewnątrz tego pojemnika robisz div'y jego wielkości, ułożone obok siebie (np. za pomocą float: left;), które rzecz jasna będą slajdami.

Ta idea wygląda mniej więcej tak:

Możesz sobie to porównać do tego "czerwonego okienka" na kalendarzu które przesuwasz, żeby zmienić dzień. Tylko, że tu to "okienko" jest nieruchome, a to "dni (czyli slajdy)" będziemy przewijać :)

 

 

No i tutaj wkracza jQuery:

Musisz stworzyć sobie np. pod pojemnikiem trzy (w tym wypadku) przyciski, których kliknięcia będziemy obsługiwać - będą one służyły do przewijania slajdera. Załóżmy, że będzie to coś takiego:

<button class="myButton" id="button1" type="button">1</button>
<button class="myButton" id="button2" type="button">2</button>
<button class="myButton" id="button3" type="button">3</button>

 

No i teraz musimy w JavaScript'cie (a tak dokładnie to w jQuery), "złapać" kliknięcie danego przycisku. Można to zrobić tak:

$(function () {
    $('#button1').click(function () { //coś tam });
    $('#button2').click(function () { //coś tam });
    $('#button3').click(function () { //coś tam });
});

gdzie:

$(function () {
    
});

to funkcja wykonująca się gdy dokument jest "gotowy", to znaczy załadowany. Jest to skrócony zapis tej wersji:

$(document).ready(function () {
    
});

 

$('#button1')

to uchwyt przycisku pierwszego po id (# na początku - id, . - to klasa). W czystym js'ie było by to tak:

document.getElementById('button1')

 

.click(function () {  });

To zdarzenie jakie chcemy wykryć (click = kliknięcie): https://learn.jquery.com/events/handling-events/

 

 

Teraz zajmijmy się poziomym scrollowaniem. Służy do tego funkcjia jQuery .animate, a my będziemy korzystać z jej argumentu o nazwie (w tym przypadku) scrollLeft. Określa on ilość pikseli o jaką pojemnik ma się "odepchnąć" od lewej strony swoim scrollem.

Załóżmy, że slajd ma szerokość 600px. Jeśli będziemy chcieli wyświetlić pierwszy slajd pojemnikowi scrollLeft ustawimy na 0px, ale jak będziemy chcieli pokazać drugi to scrollLeft będzie równy 600px itd.

A funkcja animate sprawia, że będzie to animowane:

$('#button1').click(function () { $('#pojemnik').animate({scrollLeft: 0}, {600}); });

Wartość "600" po przecinku oznacza ilość milisekund przez jaką ma się wykonywać animacja scrollowania, a "0" po dwukropku to ilość pikseli od lewej strony.

 

Postaraj się samemu to poskładać. Jakbyś miał jakiś problem to pisz :)

komentarz 6 listopada 2016 przez Mavimix Dyskutant (8,420 p.)
Niestety kod wysypuje się przy okienkach "pojemnik" i "slajd". Divy ustawiają się jeden pod drugim, mimo że każdy ma float: left.
komentarz 7 listopada 2016 przez Filip2248 Dyskutant (8,840 p.)
A tak! Trzeba wszystkie slajdy w "pojemniku" włożyć do diva o ich łącznej szerokości.
+1 głos
odpowiedź 4 listopada 2016 przez Pietrak Pasjonat (18,850 p.)
edycja 21 lutego 2017 przez Pietrak
Ale po co wynajdować od nowa koło? Najlepiej skorzystać z gotowych rozwiązań. Są dopracowane, obsługują urządzenia dotykowe i wygodnie w użyciu. Ja od siebie polecam http://jquery.malsup.com/cycle2/demo/

@EDIT: Rozwiązanie martwe, polecam https://owlcarousel2.github.io/OwlCarousel2/
komentarz 4 listopada 2016 przez Filip2248 Dyskutant (8,840 p.)
No niby tak, ale czy na większą skalę? Czy programowanie polega na zastępowaniu pisania drobnych, własnych algorytmów gotowymi bibliotekami?

To o czym mówisz jest fajne i wygodniejsze, ale moim zdaniem przeznaczone dla kogoś kto sam umiałby coś takiego zrobić.
komentarz 4 listopada 2016 przez Pietrak Pasjonat (18,850 p.)
Jeżeli ma to być to w formie nauki js to zdecydowanie warto napisać samemu, lecz jeżeli nie to nie ma sensu tracić sił i czasu na taką zabawę.
1
komentarz 5 listopada 2016 przez Filip2248 Dyskutant (8,840 p.)
O to mi chodzi :)
0 głosów
odpowiedź 4 listopada 2016 przez rokezzz Użytkownik (710 p.)

Można to łatwo napisać w jQuery. Tu masz link: plugin - slider. Od razu uprzedzam, że ta wersja jest trochę nie dopracowana, co można dostrzec klikając szybko przycisk przesuwu.
Druga opcja to zrobienie animacji w CSS3 (@keyframes) i manipulacją nią za pomocą JS'a (lub jQuery).

Podobne pytania

0 głosów
1 odpowiedź 305 wizyt
pytanie zadane 9 września 2017 w Rozwój zawodowy, nauka, praca przez shy_fox Gaduła (4,320 p.)
0 głosów
2 odpowiedzi 274 wizyt
0 głosów
2 odpowiedzi 199 wizyt
pytanie zadane 21 lutego 2017 w JavaScript przez Lukasz9210 Obywatel (1,060 p.)

93,079 zapytań

142,043 odpowiedzi

321,449 komentarzy

62,424 pasjonatów

Motyw:

Akcja Pajacyk

Pajacyk od wielu lat dożywia dzieci. Pomóż klikając w zielony brzuszek na stronie. Dziękujemy! ♡

Oto polecana książka warta uwagi.
Pełną listę książek znajdziesz tutaj

Wprowadzenie do ITsec, tom 2

Można już zamawiać tom 2 książki "Wprowadzenie do bezpieczeństwa IT" - będzie to około 650 stron wiedzy o ITsec (17 rozdziałów, 14 autorów, kolorowy druk).

Planowana premiera: 30.09.2024, zaś planowana wysyłka nastąpi w drugim tygodniu października 2024.

Warto preorderować, tym bardziej, iż mamy dla Was kod: pasja (użyjcie go w koszyku), dzięki któremu uzyskamy dodatkowe 15% zniżki! Dziękujemy zaprzyjaźnionej ekipie Sekuraka za kod dla naszej Społeczności!

...