Scrollmagic: thiết kế web thú vị

Trong thiết kế web, một xu hướng giống như phong cách đã được áp dụng để hiện thực hóa các trang web được người dùng chấp nhận mạnh mẽ, thường là trong các giai đoạn tạm thời. Một phần của các xu hướng cho đến nay trong năm 2016 và, rõ ràng, sẽ tiếp tục thiết lập giai điệu trong năm 2017, là các hình ảnh động và các phần dài với rất nhiều cuộn.

Không có gì bí mật rằng phong cách này khá hấp dẫn và thú vị cho người dùng, với các hình ảnh động chúng ta có thể điều hướng trang web trực quan và giải trí miễn là chúng được sử dụng tốt. Vì lý do này, chúng tôi đã tạo một hướng dẫn để bao gồm các cuộn hoạt hình trên trang web của bạn, sử dụng plugin jQuery ScrollMagic.

ScrollMagic: Thiết kế web thú vị

ScrollMagic là một thư viện được tạo bằng javascript để đạt được các tương tác khi di chuyển các trang web. Nó là một bản viết lại hoàn chỉnh của Superscrollorama tiền nhiệm và kiến ​​trúc của nó dựa trên các plugin cung cấp khả năng tùy biến và mở rộng dễ dàng.

Đó là lý tưởng nếu chúng ta muốn thực hiện một số điều sau đây:

• Hoạt hình dựa trên vị trí hoặc độ dịch chuyển của trang web Kích hoạt hình động hoặc đồng bộ hóa nó với chuyển động của cuộn. Thêm hiệu ứng thị sai mà không cần nhiều nỗ lực. Tạo một trang với cuộn vô hạn, xử lý tải nội dung bằng ajax.

Tính năng ScrollMagic

• Tối ưu hóa hiệu suất, nhẹ, linh hoạt và cho phép mở rộng. Quản lý sự kiện và lập trình hướng đối tượng. Nó hỗ trợ thiết kế web thích ứng. Nó hỗ trợ các chuyển động theo cả hai hướng (ngang và dọc) Nó hỗ trợ các chuyển động trong các container (div), thậm chí nhiều trang trên một trang. Nó hoạt động hoàn hảo cho các trình duyệt: Firefox 26+, Chrome 30+, Safari 5.1+, Opera 10+, IE 9+. Trong kho GitHub của nó, nó có tài liệu chi tiết và nhiều ví dụ ứng dụng.

Nhận ScrollMagic

Nó có sẵn để có được nó theo nhiều cách khác nhau.

1: GitHub

git clone git: //github.com/janpaepke/ScrollMagic.git

2: Cung cấp

bower cài đặt scrollmagic

3: trình quản lý gói nút

npm cài đặt cuộn

4: CDN

cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.5/ScrollMagic.min.js

Bạn cũng có thể đọc Cách tùy chỉnh thiết kế email trong Outlook

Cài đặt và sử dụng

Việc cài đặt khá đơn giản, chúng tôi chỉ bao gồm tệp kernel trong các tệp html nơi chúng tôi muốn sử dụng nó.

;

Để sử dụng, plugin cung cấp một mẫu thiết kế hướng bộ điều khiển, trong đó một hoặc nhiều cảnh được thêm vào. Những cảnh này được sử dụng để xác định những gì xảy ra trong các thùng chứa khi chúng di chuyển đến một điểm cụ thể.

Đây sẽ là một ví dụ cơ bản:

// init điều khiển var điều khiển = new ScrollMagic.Controll (); // tạo một cảnh mới ScrollMagic.Scene ({thời gian: 100, // cảnh sẽ kéo dài trong khoảng cách cuộn 100px: 50 // bắt đầu cảnh này sau khi cuộn 50px}).setPin ("# my-stick- phần tử ") // ghim phần tử cho thời lượng của cảnh.addTo (bộ điều khiển); // gán cảnh cho bộ điều khiển

Một ví dụ nâng cao hơn sẽ là, đạt được nhiều điểm bù, mã nguồn của nó sẽ là:

$ (function () {// chờ tài liệu sẵn sàng // init điều khiển var controller = new ScrollMagic.Controll (); // build tween var tween = TweenMax.to ("# animate", 0.5, {scale: 3, dễ dàng: Tuyến tính addTheicators ({name: "resize"}) // thêm chỉ số (yêu cầu plugin).addTo (bộ điều khiển); // init bộ điều khiển ngang var control_h = new ScrollMagic.Contoder ({vertical: false}); // xây dựng tween ngang var tween_h = Two setPin ("# animate").addTheicators ({name: "rotation"}) // thêm chỉ số (yêu cầu plugin).addTo (control_h);});

Bạn có thể tìm thấy nhiều ví dụ khác với mã nguồn của họ trong tài liệu plugin.

CHÚNG TÔI KIẾN NGHỊ BẠN Làm thế nào để cài đặt sạch Windows 10 bằng thẻ USB