Bài học: lật qua một tài liệu. Bí quyết và kỹ thuật tạo hiệu ứng chuyển trang chất lượng cao

Nhiều trang web sử dụng các plugin jQuery như thế này để cung cấp danh mục sản phẩm, tài liệu quảng cáo bán hàng, v.v. và tất cả những điều này đều có lý do. Các giải pháp jQuery cho phép bạn cuộn qua các khối nội dung mang lại cho người dùng của bạn rất nhiều Một cách thuận tiện xem bạn có gì để cung cấp cho họ. Nếu thực hiện đúng cách, những tờ rơi quảng cáo điện tử như vậy sẽ hoạt động không thua kém gì những tờ rơi in thật mà bạn có thể cầm trên tay. Với sự trợ giúp của các plugin đặc biệt, bạn có thể cho phép khách truy cập trang web của mình dễ dàng lật trang và cảm thấy như thể họ đang đọc một cuốn sách thực sự.

Sử dụng plugin hiệu ứng vuốt jQuery sẽ cho phép bạn trình bày nội dung trang web của mình theo cách hấp dẫn hơn. Trước khi chọn giải pháp phù hợp cho mình, bạn nên đạt được một số kỹ năng kỹ thuật. Một số plugin vẫn dựa trên Flash và do đó chúng không cho phép người dùng tìm kiếm tài liệu theo cách thích hợp và ngoài ra, chúng sẽ không hoạt động trên thiết bị iOS. Điều này có tác động tiêu cực đến việc tối ưu hóa SEO và cũng sẽ dẫn đến việc người dùng không tìm thấy thông tin họ quan tâm. Lật plugin cơ sở jQuery cho phép bạn tránh được tất cả những vấn đề này. Để giúp bạn tìm được tập lệnh phù hợp, hôm nay chúng tôi quyết định cung cấp cho bạn tuyển tập một số plugin jQuery tốt nhất để triển khai hiệu ứng lật.

Bộ sưu tập này bao gồm hơn 20 plugin jQuery với mục đích tương ứng sẽ cho phép bạn triển khai cơ chế chuyển trang. Mỗi plugin được trình bày đều có các thuộc tính riêng, vì vậy chúng tôi khuyên bạn nên tự làm quen với từng plugin. Sau đó, tôi muốn bạn bày tỏ quan điểm của mình về plugin bạn đã chọn để giúp người đọc khác tránh được. tìm kiếm thông thường. Chúng tôi cảnh báo trước với bạn rằng một số giải pháp được cung cấp đều phải trả phí.

Plugin này tạo một thư viện hình ảnh dưới dạng tạp chí. Bạn có thể lật các trang sách để xem trước đó hoặc hình ảnh sau đây chỉ bằng cách kéo các góc hoạt hình xuất hiện khi bạn di chuột qua thư viện.

Booklet là một công cụ jQuery để hiển thị nội dung khi lật trang. Nó được phát triển dựa trên thư viện jQuery. Nó lan rộng dưới thỏa thuận cấp phép MIT và GPL.

jPageFlip là một plugin jQuery để mô phỏng quá trình lật trang. Để sử dụng jPageFlip, bạn sẽ phải nhúng tệp jQuery.js. jPageFlip có khả năng tùy biến cao. Nó được lên kế hoạch để thêm nhiều tùy chọn cài đặt hơn trong các phiên bản tương lai. jPageLật trên khoảnh khắc này dựa trên "canvas", chỉ được hỗ trợ trong Firefox, Chrome, Opera và Safari (và trong các phiên bản mới nhất).

Flippy là một plugin jQuery để tạo hiệu ứng lật trang trên nhiều trình duyệt cho phép bạn "lật" bất kỳ phần tử HTML nào bạn muốn.

Plugin imBookFlip có thể tải sách vào iframe hoặc trực tiếp trên trang. Bạn có thể chuyển trang sách sang lật thủ công, bật tự động lật trang ngay sau khi tải trang hoặc cài đặt chức năng bật lật trang sau khi bấm vào bìa. Bạn cũng có thể dễ dàng thêm âm thanh bằng Trình quản lý âm thanh.

Flip là một plugin jQuery có thể dễ dàng lật các phần tử trên trang của bạn theo 4 hướng.

FlipPage là một plugin jQuery mô phỏng việc lật trang như trong một cuốn sách.
Plugin ban đầu được phát triển để thuyết trình; nó cũng tìm thấy vị trí của nó trong các thiết bị như sách điện tử. Plugin này được thiết kế để khai thác sức mạnh của phần cứng đồ họa để chơi hình ảnh động mượt mà trên HTML5/CSS3.

Thanh trượt có khả năng thay đổi hình ảnh từ danh mục đầu tư, lướt qua chúng khi người dùng nhấp vào điều khiển. Nghĩa là khi người dùng nhấp vào hình ảnh, nó bắt đầu xoay 360 độ và khi hoạt ảnh kết thúc, người dùng sẽ nhìn thấy một hình ảnh mới.

Turn.js là một thư viện JavaScript sẽ biến nội dung của bạn thành một cuốn sách hoặc tạp chí gần như thực tế với tất cả lợi ích của HTML5. Internet đã thay đổi đáng kể với sự ra đời của giao diện dựa trên HTML5. Turn.js lý tưởng để xuất bản tạp chí, sách hoặc danh mục dựa trên HTML5.

Plugin này tạo hiệu ứng chuyển trang lên trên hoặc bên trong các hình ảnh được hiển thị giống với đồ họa 2D.

Mỗi ngày jQuery ngày càng trở nên phổ biến hơn nhờ sự tiện lợi, linh hoạt và tốc độ của nó. Hoạt hình kiểu notepad này lý tưởng để trình bày thông tin trên trang web.

BookBlock là một plugin jQuery mà bạn có thể sử dụng để tạo các thành phần kiểu tập sách nhỏ giúp bạn có khả năng triển khai điều hướng lật trang. Bạn có thể sử dụng bất kỳ nội dung nào ở đây, có thể là hình ảnh hoặc văn bản. Plugin chỉ chuyển đổi cấu trúc khi cần thiết (ví dụ: khi lật một trang) và sử dụng lớp phủ ở dạng bóng cho các trang, mang lại cảm giác chân thực.

FlipBook có khả năng thu thập nhiều hình ảnh và sau đó tạo hiệu ứng động cho chúng. Mỗi hình ảnh được hiển thị trong một khoảng thời gian ngắn và sau đó được thay thế bằng một hình ảnh khác trong danh sách. Hoạt ảnh bắt đầu khi hình ảnh đầu tiên được tải đầy đủ và những hình ảnh chưa được tải xuống từ máy chủ sẽ bị bỏ qua. Chúng chỉ được đưa vào hoạt ảnh sau khi được trình duyệt tải đầy đủ.

Metro JS là một plugin javascript dành cho jQuery được thiết kế để cung cấp cho bạn khả năng tạo giao diện kiểu Metro. Bản phát hành này tập trung vào Live Tiles, Application Bar và Theming. Hiện tại nó đang trong giai đoạn phát triển ban đầu nhưng tất cả các tính năng sẽ hoạt động trên IE7+(Win/WinPhone), Firefox, Chrome, Android, Opera và Safari(OSX/iOS).

Hiệu ứng chuyển trang thường được tạo bằng sử dụng Flash hoạt hình. Trên Internet, hiệu ứng này đang trở nên phổ biến ở tạp chí trực tuyến và thuyết trình. Điều này là do việc thực hiện hiệu ứng này trong sách điện tử và thiết bị di động.

Trong bài viết này, chúng tôi sẽ sử dụng PHP và plugin Turn.js để triển khai hiệu ứng chuyển trang bằng CSS3 và jQuery thuần túy. Chúng tôi sẽ lấy những bức ảnh phổ biến nhất từ ​​Instagram.com và tạo ra một tạp chí đẹp mắt.

HTML

Trước hết, chúng ta cần hiểu những điều cơ bản của ví dụ này. Chúng tôi sẽ sử dụng một thiết kế trang đơn giản kết hợp đánh dấu HTML5 và PHP trong một tệp. Điều này sẽ làm cho nó dễ hiểu hơn. Bạn có thể xem kết quả thực hiện bên dưới:

chỉ mục.php

Ở đây chúng tôi kết nối phong cách.css, trong đầu, và tập tin javascriptở phía dưới. Tiếp theo chúng tôi bao gồm thêm 3 tệp js: thư viện jQuery, Turn.js, script.js, trong đó chúng ta sẽ khởi tạo plugin và nhận các sự kiện bàn phím. Mã PHP mà chúng ta sẽ viết sau sẽ được thực thi trong #magazine khối div. PHP sẽ tạo các trang tạp chí của chúng tôi, những trang này sẽ cần thiết cho Turn.js.

Ví dụ: bạn có thể xem ba trang đầu tiên của nhật ký được tạo bằng sử dụng PHP:

1 // 32 2 // 32 3 // 32

Mã bạn thấy nằm hoàn toàn trong khối div #magazine. Đây là thứ duy nhất mà Turn.js cần. Bạn không cần phải tạo bất kỳ lớp học đặc biệt hoặc thuộc tính ngày tháng cho các thành phần sẽ được diễn giải thành các trang. Với điều này, chúng tôi đã sẵn sàng để bắt đầu viết PHP mã số!

PHP

PHP sẽ kết nối với API Intagram, lưu trữ kết quả và tạo đánh dấu mà bạn đã thấy ở trên.

Bước đầu tiên sẽ là đăng ký Instagram trang web của nhà phát triển. Sau đó, bạn sẽ nhận được khóa client_id, khóa này chúng tôi sẽ chèn dưới dạng giá trị vào một biến $instagramID khách hàng, trong tập tin mục lục.php. Chúng tôi không cần chức năng API nâng cao, chúng tôi chỉ yêu cầu những hình ảnh phổ biến nhất. Điều này sẽ giúp chúng tôi không phải sử dụng xác thực OAuth bổ sung, điều này sẽ chỉ khiến mã trở nên khó hiểu hơn.

Dưới đây là ví dụ về phản hồi JSON của các hình ảnh phổ biến hiện nay trên Instagram. Tôi đã ẩn một số thuộc tính để làm cho mã rõ ràng hơn.

("meta": ("code": 200), "data": [( "tags": ["beautiful", "sky"], "location": "null", "comments": ("count": 31, "data": [...] ), "filter": "Normal", "created_time": "1331910134", "link": "http:\/\/instagr.am\/p\/IPNNknqs84\ /", "lượt thích": ( "đếm": 391, "dữ liệu": [..]), "hình ảnh": ("low_solution": ("url": "http:\/\/distilleryimage8.instagram.com \ /03c80dd86f7911e1a87612313804ec91_6.jpg "," chiều rộng ": 306," chiều cao ": 306) 91_5.jpg "," chiều rộng ": 150, "chiều cao": 150 ), "standard_solution": ( "url": "http:\/\/distilleryimage8.instagram.com\/03c80dd86f7911e1a87612313804ec91_7.jpg", "width": 612, "height": 612 )), "caption": ( "created_time": "1331910148", "text": "Chúc ngủ ngon.\ue056", "from": ("tên người dùng": "jent99", "profile_picture": "http:\/ \ /images.instagram.com\/profiles\/profile_6227738_75sq_1319878922.jpg", "id": "6227738", "full_name": "jent99", "id": "148395540733414783" ), "type": "image" , "id": "148395420004568888_6227738", "user": ( "username": "jent99", "website": "", "bio": "Chủ yếu là ảnh thiên nhiên.\ue32b\ue32b\ue32b Hy vọng bạn thích chúng.\ ue056 \ue32a \ue334gi\ue334 ", "profile_picture": "http:\/\/images.instagram.com\/profiles\/profile_6227738_75sq_1319878922.jpg", "full_name": "jent99", "id": "6227738" ) ), ( /* Xem thêm ảnh ở đây... */ )] )

API được giới hạn ở 32 hình ảnh mới nhất, nhưng điều này là khá đủ cho ví dụ của chúng tôi. Bạn có thể thấy rằng mỗi bức ảnh có ba kích cỡ, nhưng chúng tôi sẽ chỉ sử dụng một kích cỡ. Cũng có mặt ở đây thông tin thêm về thẻ, nhận xét, v.v.

PHP sẽ lưu trữ kết quả của yêu cầu API này. Bằng cách này chúng ta sẽ nhận được những hình ảnh mới nhất mỗi giờ. Điều này sẽ làm cho ứng dụng của chúng tôi nhanh hơn và hạn chế số lượng lệnh gọi API.

chỉ mục.php

// Bạn có thể lấy ID khách hàng từ API Instagram page $instagramClientID = "-- chèn khóa id khách hàng của bạn vào đây --"; $api = "https://api.instagram.com/v1/media/popular?client_id=".$instagramClientID; $cache = "cache.txt"; if(file_exists($cache) && filemtime($cache) > time() - 60*60)( // Nếu tệp bộ đệm tồn tại và nó // mới hơn 1 giờ, chúng tôi sẽ sử dụng nó $images = unserialize( file_get_contents($cache )); ) else( // Tạo yêu cầu API và tạo tệp bộ đệm // Nhận 32 ảnh phổ biến trên Instagram $response = file_get_contents($api); $images = array(); // Giải mã phản hồi và tạo một mảng foreach(json_decode( $response)->data as $item)( $title = ""; if($item->caption)( $title = mb_substr($item->caption->text, 0,70,"utf8"); ) $src = $item->images->standard_solution->url; $images = array("title" => htmlspecialchars($title), "src" => htmlspecialchars($src )); ) // Xóa ảnh cuối cùng, nhưng chúng ta sẽ có // ​32 ảnh khi thêm bìa array_pop($images); // Thêm bìa vào đầu mảng array_unshift($images,array( "title"=>"Cover", "src"=>"assets/img /cover.jpg")); // Cập nhật tệp bộ đệm file_put_contents($cache,serialize($images)); ) // tạo đánh dấu $ TotalPages = count($images); foreach($images as $i=>$image)( ?> " />