Jak uzyskać w pełni działający efekt przewijania obrazu, jak w tym przykładzie?

Po prostu natknąłem się na http://www.newego.de/ i chciałbym wiedzieć, jak działa "efekt slajdów obrazu", którego używają na początkowej stronie.Jak uzyskać w pełni działający efekt przewijania obrazu, jak w tym przykładzie?

Po przewinięciu w górę zmienia się obraz tła i po przejściu przez wszystkie slajdy ze strony "wstępnej/powitalnej" użytkownik jest kierowany do głównej zawartości witryny.

Próbowałem odtworzyć efekt z ciekawości i dla celów edukacyjnych, dlatego ostatnio zacząłem kopać w responsywny projekt strony internetowej, ale utknąłem i nie jestem pewien, czy moje podejście jest dobrym rozwiązaniem.

This JSFiddle to jak daleko zajmuję się podczas próby odtworzenia suwaka obrazu.

$(window).bind('mousewheel DOMMouseScroll', function(event){ 
 
    if (event.originalEvent.wheelDelta > 0 || event.originalEvent.detail < 0) { 
 
    console.log('scrolling down'); 
 
    } 
 
    else { 
 
    console.log('scrolling up'); 
 
    $('.s1').slideUp('slow'); 
 
    } 
 
});

* { margin: 0; padding: 0 } 
 

 
#menubar { 
 
    width: 100%; 
 
    background-color: orange; 
 
    height: 60px; 
 
} 
 

 
.slide { 
 
    position: absolute; 
 
    width: 100%; 
 
    top: 60px; 
 
    bottom: 0; 
 
} 
 
.slide.s1 { background-color: green; } 
 
.slide.s2 { background-color: red; } 
 
.slide.s3 { background-color: cornflowerblue; } 
 

 
.l1 { z-index: 3; } 
 
.l2 { z-index: 2; } 
 
.l3 { z-index: 1; }

<script src="https://code.jquery.com/jquery-3.0.0.min.js"></script> 
 

 
<html> 
 
    <body> 
 
    <header id="menubar"><p>hi im a header</p></header> 
 
    <section class="slide s1 l1"><p>im the first</p></section> 
 
    <section class="slide s2 l2"><p>im the second</p></section> 
 
    <section class="slide s3 l3"><p>im the third</p></section> 
 
    </body> 
 
</html>

Moje myślenie było po prostu umieścić trzy .slide pojemnika, który wypełni w „pustej przestrzeni rzutni” na górze siebie, z wykorzystaniem hierarchii z-index a potem po prostu ślizgać się najwyższą .slide kontener za pomocą funkcji jQuery's .slideUp().

Nie jestem jednak pewien, czy to dobry pomysł, ponieważ nie wiem, jak wybrać najwyższy kontener , aby móc go zanikać.

Czy istnieje bardziej proste (i jeśli to możliwe, bardziej modułowe) podejście, które powinienem realizować? Czy istnieje skuteczny sposób (selektor jQuery/CSS), aby znaleźć najbardziej widoczny obiekt z najwyższej półki.slide?

Źródło

2016-06-26 phew

oto JSFiddle za efekt wy jechaliście do: https://jsfiddle.net/d1xzc4jf/7/

Oto odpowiedni kod jQuery:

$(window).bind('mousewheel DOMMouseScroll', function(event){ 
if (event.originalEvent.wheelDelta > 0 || event.originalEvent.detail < 0) 
    { 
    console.log('scrolling down'); 
    if ($('.s2').is(':visible')) { $('.s3').slideDown('slow'); } 
    else if ($('.s1').is(':visible')) { $('.s2').slideDown('slow'); } 
    } 
    else 
    { 
    console.log('scrolling up'); 
    if ($('.s3').is(':visible')) { $('.s3').slideUp('slow'); } 
    else if ($('.s2').is(':visible')) { $('.s2').slideUp('slow'); }   
    } 
});

Jedno podejście byłoby umieścić wszystkie div i ustawić ich Właściwość display do none z wyjątkiem tej, która jest aktualnie wyświetlana. To właśnie dzieje się z elementem, po zakończeniu przesuwania z funkcji jQuery slideUp. Możesz sprawdzić, który z nich jest widoczny i ukryć go, podczas gdy następny jest wyświetlany przy użyciu dowolnej metody.

UPDATE:

Powodem dwukrotnie slideUp się dzieje, gdy dwukrotnie przewijania, ale nie podwójnie slideDown dlatego, że nieruchomość visible jest ustawiony na początku slideDown, ale to jest u koniec z slideUp.

Aby zapobiec efektowi podwójnego przesuwania z twardego przewijania, ustaw zmienną, aby wskazać, że animacja jest zajęta po uruchomieniu animacji i użyj funkcji oddzwaniania, aby ustawić zmienną na brak ruchu po zakończeniu animacji, na przykład:

pierwsze, umieścić to na dole strony:

<script> var isbusy = 0; </script>

Następnie użyć tego kodu do funkcji przewijania:

$(window).bind('mousewheel DOMMouseScroll', function(event){ 
if (event.originalEvent.wheelDelta > 0 || event.originalEvent.detail < 0) { 
    console.log('scrolling up'); 
    if ($('.s2').is(':visible')) { 
     if (isbusy == 0) 
     { 
      isbusy = 1; 
      $('.s3').slideDown('slow', function() { 
       isbusy = 0; 
      })     
     } 
    } 
    else 
    {    
     if ($('.s1').is(':visible')) 
     { 
      if (isbusy == 0) 
      { 
       isbusy = 1; 
       $('.s2').slideDown('slow', function(){ 
        isbusy = 0; 
       }); 
      } 
     }   
    } 
} 
else 
{ 
    console.log('scrolling down'); 
    if ($('.s3').is(':visible')) 
    { 
     if (isbusy == 0) 
     { 
      isbusy = 1; 
      $('.s3').slideUp('slow', function(){ 
       isbusy = 0; 
      }); 
     } 
    } 
    else if ($('.s2').is(':visible')) 
    { 
     if (isbusy == 0) 
     { 
      isbusy = 1; 
      $('.s2').slideUp('slow', function(){ 
       isbusy = 0; 
      }); 
     } 
    } 
    } 
});

Th Powód, dla którego działa ten kod, polega na tym, że funkcje wywołania zwrotnego są wykonywane po zakończeniu animacji, zmieniając w ten sposób isbusy na zero, gdy animacja jest ukończona, nie blokując w międzyczasie dalszego działania kodu.

Źródło

2016-06-27 00:05:02

Dziękuję, twoje rozwiązanie jest czymś, czego szukam. Tylko jeden problem, którego nie potrafię wskazać: kiedy bardzo mocno przewijam kółko myszy (na przykład rejestruje się więcej niż jeden przewijak myszy), wszystko działa dobrze, jeden slajd ślizga się, a następna warstwa ujawnił. Ale kiedy robię to samo, przewijając kółko myszy, kolejne slajdy są ślizgane jednocześnie. Aby odtworzyć, przejdź do [JSFiddle] (https://jsfiddle.net/d1xzc4jf/7/) przewiń do zielonej warstwy, a następnie bardzo mocno przewiń koło. Jak zezwolić na przesuwanie po zakończeniu pierwszej animacji? – phew

Zmieniłem moją odpowiedź, dodając zmienną, która jest ustawiana, gdy animacja się uruchamia i jest resetowana po jej zakończeniu, zapobiegając podwójnej animacji, jeśli przewijasz mocno. Zaktualizowane JSFiddle tutaj: https://jsfiddle.net/d1xzc4jf/8/ –

Dla mnie czasami utknie na zielonej stronie, ale mam twój punkt widzenia. Zobaczę, czy uda mi się wymyślić coś podobnego na własną rękę. Dziękuję za pomoc! – phew

Uważam, że patrzysz na poniższy suwak.

http://alvarotrigo.com/fullPage/

Źródło

2016-06-26 23:59:16

Jest to z pewnością przydatna wtyczka, chociaż próbuję odtworzyć efekt przesuwania od samego początku w celach edukacyjnych. – phew

oh ok, a następnie powodzenia w nauce. –

Jak uzyskać w pełni działający efekt przewijania obrazu, jak w tym przykładzie?

Odpowiedz

Powiązane problemy