Làm cách nào để đạt được hiệu ứng cuộn hình ảnh hoàn toàn hoạt động như trong ví dụ này?

Tôi chỉ tình cờ gặp http://www.newego.de/ và muốn biết cách "hình ảnh slide effekt" mà họ đang sử dụng trên trang đầu tiên được thực hiện.Làm cách nào để đạt được hiệu ứng cuộn hình ảnh hoàn toàn hoạt động như trong ví dụ này?

Khi bạn cuộn lên các thay đổi hình nền và sau khi đã xem tất cả các trang giới thiệu của trang "giới thiệu/chào mừng", bạn được hướng dẫn đến nội dung trang web chính.

Tôi đã thử sao chép hiệu ứng ra khỏi tò mò và vì mục đích học tập, do đó gần đây tôi bắt đầu đào sâu vào thiết kế web đáp ứng, nhưng tôi khá mắc kẹt và không chắc chắn nếu cách tiếp cận của tôi là giải pháp tốt.

This JSFiddle là tôi đã cố gắng sao chép thanh trượt hình ảnh đến mức nào.

$(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>

suy nghĩ của tôi là chỉ cần đặt ba .slide container điền vào "không gian khung nhìn trống rỗng" trên đầu trang của mỗi khác, sử dụng một hệ thống các z-index và sau đó chỉ cần trượt lên trên cùng .slide container sử dụng chức năng .slideUp() của jQuery.

Tuy nhiên, tôi không chắc đó có phải là một sản phẩm tốt vì tôi không biết cách chọn hộp chứa trên cùng để có thể làm mờ nó ra.

Có cách tiếp cận đơn giản hơn (và nếu có thể nhiều mô-đun hơn) mà tôi nên theo đuổi không? Có cách nào hiệu quả (bộ chọn jQuery/CSS) để tìm kiếm lớp học trên cùng.slide hiện có được hiển thị không?

Nguồn

2016-06-26 phew

Dưới đây là các JSFiddle cho hiệu ứng bạn đang đi cho: https://jsfiddle.net/d1xzc4jf/7/

Dưới đây là đoạn code jQuery liên quan:

$(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'); }   
    } 
});

Một cách tiếp cận sẽ được đặt tất cả các div và thiết lập của họ display bất động sản để none ngoại trừ một hiện đang hiển thị. Đây là những gì xảy ra với một mục khi nó được thực hiện trượt lên từ chức năng jQuery slideUp. Bạn có thể kiểm tra xem cái nào có thể nhìn thấy và ẩn nó trong khi cái tiếp theo được hiển thị bằng bất kỳ phương thức nào bạn thích.

UPDATE:

Lý do các đôi slideUp xảy ra khi hai di chuyển, nhưng không phải là một đôi slideDown là vì tài sản visible được đặt ở đầu của một slideDown, nhưng nó được đặt ở kết thúc trong số slideUp.

Để ngăn hiệu ứng trượt kép từ khó cuộn, hãy đặt biến để biểu thị hoạt ảnh bận khi bạn khởi động hoạt ảnh và sử dụng chức năng gọi lại để đặt biến không bận khi hoạt ảnh kết thúc như sau:

Đầu tiên, đặt này ở dưới cùng của trang của bạn:

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

Sau đó sử dụng mã này cho chức năng cuộn của bạn:

$(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 e lý do mã này hoạt động là các chức năng gọi lại được thực thi khi hoạt ảnh kết thúc, do đó thay đổi isbusy thành 0 khi hoạt ảnh hoàn tất, trong khi không chặn nhiều mã hơn chạy trong thời gian chờ đợi.

Nguồn

2016-06-27 00:05:02

Cảm ơn bạn, giải pháp của bạn là loại những gì tôi đang tìm kiếm. Chỉ một vấn đề mà tôi không thể xác định được: khi tôi cuộn xuống trên bánh xe của chuột (như, chỉ cần một cuộn chuột được đăng ký) thì mọi thứ đều hoạt động tốt, một trang trình chiếu đang trượt xuống và lớp tiếp theo là tiết lộ. Nhưng khi tôi làm cùng cuộn con lăn chuột lên, nhiều trang trình bày đang được trượt xuống đồng thời. Để tái sản xuất, hãy vào [JSFiddle] (https://jsfiddle.net/d1xzc4jf/7/) cuộn đến lớp màu xanh lá cây và sau đó cuộn bánh xe của bạn lên thật mạnh. Làm cách nào để chỉ cho phép trượt sau khi hoạt ảnh đầu tiên kết thúc? – phew

Tôi đã thay đổi câu trả lời của mình để bao gồm biến được đặt khi hoạt ảnh bắt đầu và được đặt lại khi kết thúc, ngăn hoạt ảnh kép xảy ra nếu bạn cuộn mạnh. Cập nhật JSFiddle ở đây: https://jsfiddle.net/d1xzc4jf/8/ –

Đối với tôi đôi khi nó bị mắc kẹt ở trang màu xanh lá cây, nhưng tôi đã nhận được quan điểm của bạn. Tôi sẽ xem nếu tôi có thể tìm ra một cái gì đó tương tự trên của riêng tôi. Cảm ơn bạn vì sự giúp đỡ! – phew

Tôi tin rằng bạn đang tìm thanh trượt bên dưới.

http://alvarotrigo.com/fullPage/

Nguồn

2016-06-26 23:59:16

Đây chắc chắn là một trình cắm thêm hữu ích, mặc dù tôi đang cố gắng tạo lại hiệu ứng trượt từ đầu cho chính mình cho mục đích học tập. – phew

oh được rồi, tốt nhất là may mắn với việc học của bạn. –

Làm cách nào để đạt được hiệu ứng cuộn hình ảnh hoàn toàn hoạt động như trong ví dụ này?

Trả lời

Các vấn đề liên quan