Cuộn trang mượt mà với bánh xe jquery. Cuộn mượt mà (cuộn mượt mà) của trang đích
TRONG Gần đây Hoạt ảnh phát khi bạn cuộn trang ngày càng trở nên phổ biến. Tuy nhiên, tôi nhận thấy rằng phần lớn các trình duyệt không được thiết kế cho những hoạt ảnh như vậy. Việc cuộn các trang bằng chuột không diễn ra suôn sẻ (như trong Firefox) mà phải theo từng bước. Kết quả là hoạt ảnh cuộn trên các trang cũng bị giật. Theo tôi, vấn đề ở đây hoàn toàn không nằm ở trình duyệt mà nằm ở các plugin được sử dụng để tạo ra những hoạt ảnh này. Bởi vì họ là những người cho phép nhảy vọt một cách đột ngột. Tôi tin rằng đối với bất kỳ hoạt ảnh nào cũng cần có tốc độ phát lại tối đa nhất định để hoạt ảnh sẽ mượt mà và người dùng có thể hiểu được điều gì đã xảy ra trên trang. Nếu bạn đồng ý với tôi thì hãy di chuyển nhẹ nhàng và không bị giật dưới con mèo.
Trong bài viết này, chúng ta sẽ nói về một plugin để tạo hoạt ảnh điều khiển cuộn mà tôi gọi là Scrollissimo. Tương tự gần nhất của nó là plugin ScrollMagic. Từ đặc điểm chung họ có mục đích của mình và thực tế là Greensock đã được chọn làm công cụ hoạt hình. Nếu vì lý do nào đó mà bạn chưa quen với nó, thì có lẽ để hiểu đầy đủ mọi thứ đang diễn ra, bạn nên đọc các bài viết về Greensock đã được xuất bản trên Habré. Ví dụ .
Ngoài những điểm tương đồng, các plugin này cũng có những điểm khác biệt. Nhưng tôi muốn đặc biệt nhấn mạnh điều chính - hoạt hình mượt mà. Vì vậy, điều này nghe có vẻ không có cơ sở, đây là bằng chứng cho bạn. Trang chủ ScrollMagic cũng xác nhận lời nói của tôi.
Làm thế nào để sử dụng nó? Kết nối Để bắt đầu sử dụng Scrollissimo, bạn cần thực hiện hai việc. Đầu tiên, kết nối Greensock. Bạn chỉ có thể kết nối các thư viện cần thiết tối thiểu (TweenLite, TimelineLite và CSS):
hoặc kết nối một thư viện chứa tất cả những thứ trên:
Và thứ hai, chúng tôi kết nối chính Scrollissimo. Thư viện có sẵn từ kho lưu trữ. Và đối với người dùng bower cũng có thể cài đặt bằng lệnh
Bower cài đặt cuộn cuộn
Đã tải xuống, bây giờ kết nối:
Bạn có thể tùy ý (nhưng không nhất thiết) đưa jQuery vào để thuận tiện cho bạn. Phần sau của bài viết tôi sẽ viết mã bằng cách sử dụng nó để dễ đọc hơn.
Tôi đã cung cấp khả năng kích hoạt Scrollissimo không chỉ khi cuộn toàn bộ trang mà còn trên bất kỳ sự kiện nào khác, mà trong phần lớn các tình huống bạn cần đăng ký sự kiện cuộn trang:
$(window).scroll(function())( Scrollissimo.knock(); ));
Bây giờ với mỗi cuộc tấn công sự kiện cuộn Scrollissimo sẽ tính toán tiến trình hoạt ảnh hiện tại và phát nó.
LƯU Ý: Nếu bạn không cần plugin để tự đếm số lần cuộn trang, bạn có thể chuyển giá trị thuộc tính ScrollTop của mình sang phương thức knock(). Vì vậy, ví dụ: Scrollissimo.knock(1000) sẽ cho plugin biết rằng bạn đã cuộn. trang 1000 pixel.
LƯU Ý: Để hỗ trợ các thiết bị cảm ứng, có bộ chuyển đổi cảm ứng Scrollissimo.touch.js, giúp chống đóng băng trang khi cuộn.
Thế là xong, bây giờ bạn có thể tạo hoạt ảnh trực tiếp! Scrollissimo có thể tạo hoạt ảnh cho các cặp song sinh (hoạt ảnh đơn lẻ) và dòng thời gian (hàng đợi các hoạt ảnh đơn lẻ). Hãy bắt đầu với cặp song sinh.
Hoạt hình đơn giản nhất Giả sử chúng ta có một div màu đỏ xinh đẹp tên là Divy. Anh ấy rất muốn phát triển nhưng đến nay anh ấy chỉ rộng và cao 50 pixel.
#Divy( vị trí: cố định; trên cùng: 0; trái: 0; chiều cao: 50px; chiều rộng: 50px; nền: đỏ; )
Hãy làm sao cho sau 1000 pixel tính từ đầu trang, nó sẽ có chiều rộng 300 pixel. Để làm điều này, trước tiên chúng ta sẽ tạo tween tương ứng, như thể chúng ta đang thực hiện một hoạt ảnh thông thường bằng Greensock:
Var divyTween = new TweenLite($("#Divy"), 1000, ( width: 300 ));
LƯU Ý: Như bạn đã nhận thấy, điểm khác biệt duy nhất so với hoạt ảnh Greensock tiêu chuẩn là chúng tôi chỉ định thời lượng của hoạt ảnh không tính bằng giây mà tính bằng pixel (trong trường hợp của chúng tôi là 1000).
Tuyệt vời! Tất cả những gì còn lại là để cho cặp song sinh này bị Scrollissimo nuốt chửng:
Scrollissimo.add(divyTween, 0, 6);
Bây giờ chúng ta hãy chậm lại và nhìn vào dòng này. Đối số đầu tiên giống với đối số tween mà chúng ta đã tạo. Đối số thứ hai là vị trí bắt đầu hoạt ảnh. Trong trường hợp của chúng tôi, đây là phần đầu của trang (0 pixel). Đối số thứ ba vẫn còn. Đây là nơi chúng tôi đến tính năng chính, giúp phân biệt Scrollissimo với các plugin thông thường. Đối số thứ ba là tốc độ phát lại hoạt ảnh tối đa. Tốc độ này được đo một cách trừu tượng đơn vị không thứ nguyên và được lựa chọn “bằng mắt”. Tôi sẽ trả lời ngay câu hỏi “Điều gì xảy ra nếu bạn không chỉ định tham số thứ ba?” Nếu bạn không chỉ định tốc độ tối đa, thì nó sẽ không tồn tại. Hoạt ảnh này sẽ được phát theo cách tương tự như cách nó được phát bằng các plugin thông thường.
Var divyTimeline = new TimelineLite(); divyTimeline.to($("#Divy"),1000 ( chiều rộng: 300 )); divyTimeline.to($("#Divy"), 1000, ( chiều cao: 300 )); Scrollissimo.add(divyTimeline, 0, 6);
Kết luận Đó là tất cả những gì cần làm sáng tạo thành công cuộn hoạt ảnh bằng Scrollissimo. Đây có lẽ là nơi tôi sẽ kết thúc bài viết. Tóm lại, tôi sẽ nói rằng plugin đang trong giai đoạn phát triển tích cực, anh ấy có chỗ để phát triển và cải thiện. Vì vậy, tôi sẽ rất vui khi nhận được bất kỳ câu hỏi, lời khuyên và yêu cầu tính năng nào.Bố cục, sinh động!
Chào buổi chiều. Hôm nay tôi muốn nói với bạn về điều này hiệu ứng thú vị giống như một cuộn trơn tru đến một mỏ neo. Ví dụ: đây có thể là một menu ở đầu trang mà khi được nhấp vào, nó sẽ cuộn mượt mà đến phần tử tương ứng.
Bạn có thể đã thấy hiệu ứng tương tự trên các trang đích khác. Hôm nay bạn sẽ học cách thực hiện nó.
Cuộn trơn neo bằng cách sử dụng javascriptTrong một trong các dự án, nhiệm vụ là thực hiện hiệu ứng tương tự bằng cách cuộn mượt mà đến yếu tố cụ thể khi bạn nhấp vào một trong các mục menu.
Hãy bắt đầu bằng cách kết nối thư viện jquery vào dự án của chúng tôi và viết đường dẫn đến tập lệnh chịu trách nhiệm cuộn mượt mà:
Chúng tôi đã giải quyết vấn đề này. Bây giờ bạn cần đặt nhãn và neo để cuộn sẽ diễn ra.
Tôi sẽ kể cho bạn nghe ví dụ về thực đơn trong dự án cho thuê thiết bị chuyên nghiệp phục vụ công việc xây dựng và dọn dẹp. Đây rồi nguồn:
- Thiết bị vệ sinh
- Thiết bị xây dựng
- Cổ phần
Như bạn có thể thấy, mọi thứ đều tiêu chuẩn và không có thủ thuật. Các khối tương ứng với menu sau đó đã được tạo trên trang đích. Họ tiết lộ một dịch vụ cụ thể. Cần phải thực hiện chuyển đổi suôn sẻ sang các khối này.
Để điều hướng đến vị trí mong muốn trên trang web, chỉ cần thêm một liên kết đến mã định danh khối mong muốn. Hãy làm điều đó.
- Thiết bị vệ sinh
- Thiết bị xây dựng
- Cổ phần
Bây giờ bạn cần đặt các định danh “dọn dẹp”, “xây dựng”, “hành động” cho các khối tương ứng. Đối với tôi nó trông như thế này:
Hãy chú ý đến thuộc tính name="cleaning". Nó phải khớp với ID. Đây là kịch bản:
$(function () ( $("a.scrollto").click(function () ( let elementClick = $(this).attr("href") let Destination = $(elementClick).offset().top; $ ("html:not(:animated),body:not(:animated)").animate(( ScrollTop: Destination ), 1100 ));
Nếu bạn, giống như tôi, cần triển khai cuộn đến một số phần tử, thì chỉ cần đặt số nhận dạng theo cách tương tự và thế là xong! Rất Một cách thuận tiện và dễ thực hiện. Tôi không nói nó là tốt nhất, nhưng nó hoạt động. Nếu ai đó có thể đơn giản hóa, rút ngắn hoặc bằng cách nào đó cải thiện nó, tôi sẽ rất biết ơn bạn. Với tôi thì thế hiệu ứng này có thể hữu ích cho nhiều người.
Xin lưu ý ở đầu bài viết chúng tôi đã chỉ ra tên và đường dẫn của script như sau:
Nghĩa là, bạn cần tạo một thư mục trong thư mục gốc của trang web có tên là js và đặt tệp có tên perehod.js vào đó. Và sau đó chèn mã script vào đó. Đây là tôi, chỉ để đề phòng thôi. Nếu ai đó không hiểu thì sao?
Và đó là tất cả cho ngày hôm nay. Bây giờ bạn đã biết cách thực hiện điều này hiệu ứng mát mẻ, giống như một cuộn trang mượt mà đến một điểm cố định. Tạm biệt mọi người!
P.s.: Cảm ơn những người đã trả lời cuộc gọi trong trong mạng xã hội hỗ trợ ý tưởng cho bài viết mới. Tôi không biết tại sao bạn lại quyết định viết thư cho tin nhắn riêng tư, tốt hơn hết bạn nên để lại trong phần bình luận, như vậy sẽ dễ dàng hơn cho người khác viết đánh giá nếu họ thấy ai đó can đảm hơn đã làm việc đó.
bạn phương pháp này có một nhược điểm là nó không hoạt động tốt với wow.js, thứ mà chúng tôi đã sử dụng để tạo hoạt ảnh trong bài viết. Một số hoạt ảnh không phát và vẫn ở nguyên vị trí của chúng. chỗ trống. Nếu có ai biết cách khắc phục điều này, xin vui lòng viết trong phần bình luận hoặc trong
Xin chào các bạn. Tôi muốn đề cập đến một chủ đề chẳng hạn như quá trình chuyển đổi suôn sẻ sang liên kết cố định trên trang web. Nếu bạn viết trên trang web của bạn văn bản đồ sộ, định dạng chính xác, với ảnh chụp màn hình và các thành phần khác, sau đó cuộn mượt mà đến điểm neo sẽ khiến thiết kế trở nên hấp dẫn hơn nữa. Nhưng trước tiên chúng ta hãy tìm hiểu nó là gì và nó sẽ hoạt động như thế nào. Bạn có thể xem ví dụ về công việc trên trang này bằng cách nhấp vào các mục trong danh sách này.
Liên kết neo là gìCách tạo liên kết neo HTMLLiên kết neo được thực hiện bằng ngôn ngữ đánh dấu siêu văn bản. Tạo một neo trong HTML hoàn toàn không khó. Tất cả những gì bạn cần là một chút kiến thức về ngôn ngữ này và sự hiểu biết về cách thức hoạt động của nó. Nếu bạn không gặp bất kỳ vấn đề gì với việc này thì bạn có thể thực hiện nó mà không gặp nhiều khó khăn. Vì vậy, để neo vào trang HTML, bạn cần phải viết một cái gì đó như sau trong mã.
Và để đi đến địa điểm này trên trang có nhãn này được chỉ định, bạn cần viết nội dung này vào liên kết:
| Chuyển đến nhãn trên một trang |
Chuyển đến nhãn trên một trang
Với cách tiếp cận này, quá trình chuyển đổi sẽ được thực hiện bằng cách chuyển ngay từ nơi này sang nơi khác
Di chuyển mượt mà đến vị trí neoVới sự phát triển của công nghệ web, người ta có thể tạo ra những trang web đẹp hơn, năng động hơn với nhiều hiệu ứng khác nhau, v.v. Và thật tuyệt vời khi bạn có thể khiến khách truy cập quan tâm đến điều gì đó ngoài nội dung và để lại ấn tượng tốt khi truy cập trang web. TRONG đến một mức độ nhất địnhđiều này rơi vào tay chủ sở hữu trang web. Để quá trình chuyển đổi sang neo diễn ra suôn sẻ, chúng ta sẽ sử dụng thư viện và kết nối nó hoàn toàn kịch bản nhỏ.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 | < script type= "text/javascript" >$(document) .ready (function () ( $("a" ) .click (function() ( elementClick = $(this ) .attr ("href" ) ; Destination = $(elementClick) .offset () .top % trả về sai ) ); |
$(document).ready(function() ( $("a").click(function () ( elementClick = $(this).attr("href"); Destination = $(elementClick).offset().top ; if($.browser.safari)( $("body").animate(( ScrollTop: Destination ), 1100); )else( $("html").animate(( ScrollTop: Destination ), 1100); ) trả về sai ));
Có ba cách để kết nối tập lệnh này. Đầu tiên là chèn vào trang giữa thẻ đầu. Thứ hai là mang nó đến tập tin riêng biệt và kết nối riêng như thế này:
Dán nhãn trên trang để đi tới nó
Thứ hai, nếu bạn muốn cuộn mượt mà không xảy ra đối với tất cả các neo mà chỉ đối với một số neo nhất định, bạn cần thay đổi dòng thứ ba của tập lệnh như thế này:
Chuyển đến nhãn trên một trang
Một sắc thái khác mà tôi muốn đề cập là, không giống như một neo HTML đơn giản, neo jQuery không đăng ký trong thanh địa chỉ liên kết trình duyệt đến neo khi điều hướng đến nó. Để bạn hiểu những gì tôi đang nói, tôi sẽ đưa ra một ví dụ về liên kết đến một điểm neo có thể trông như thế nào trong thanh địa chỉ của trình duyệt.
| #mỏ neo |
