Tìm hiểu công cụ trình bày của Impress.js

Nếu bạn đang tìm kiếm một công cụ tuyệt vời và sáng tạo để thực hiện các bài thuyết trình trực tuyến, thì Impress.js có thể chỉ là công cụ bạn cần để nâng cấp chúng hoặc toàn bộ trang web của bạn, cho vấn đề đó.

Impress.js là một khung trình bày dựa trên sức mạnh của các biến đổi CSS3 và chuyển tiếp CSS3 cùng với JavaScript và jQuery. Khung này hiện được hỗ trợ trong các trình duyệt hiện đại và lấy cảm hứng từ ý tưởng đằng sau prezi.com, đó là phần mềm trình bày dựa trên đám mây. Impress.js là đứa con tinh thần của Bartek Szopka, hay còn gọi là bartaz đến từ Poznań, Ba Lan. Bản trình bày demo làm tôi nhớ đến giao diện tương tự với một số trang web sử dụng các yếu tố của hiệu ứng cuộn thị sai.

Mã nguồn có sẵn trên github nơi các tệp được nén vào kho lưu trữ zip hoặc có thể được sao chép riêng lẻ, bao gồm demo index.html, ấn tượng-demo.css, ấn tượng.js và một vài tệp hình ảnh .png. Ảnh chụp màn hình của 52 dòng mã hàng đầu từ tệp index.html được hiển thị bên dưới trong Hình B, như được hiển thị trong trình soạn thảo văn bản Dreamweaver và có Nghệ thuật ASCII giới thiệu "Chào mừng" từ Yoda.

Hình B

Mã trình diễn được nhận xét tốt và được ghi lại bằng các giải thích và cũng cung cấp các ví dụ mã tùy chọn cho hầu hết các phần của tệp html, css và js. Ví dụ, chức năng cốt lõi của khung trình bày có thể chạy mà không cần bất kỳ bảng định kiểu bên ngoài nào, vì các tập lệnh bao gồm giàn giáo cần thiết để bản trình bày hoạt động. Các kiểu được bao gồm là dành cho mục đích demo, như Szopka giải thích trong các nhận xét của mình từ dòng 78 đến 92 trong mã html. Và anh ta có một thông báo cảnh báo ngắn gọn, "CẢNH BÁO: Impress.js có thể không giúp bạn nếu bạn không có gì thú vị để nói :)". Không cần phải nói rằng bất kỳ bài thuyết trình mà không có chất hoặc mang lại cho khán giả là một sự lãng phí thời gian cho họ và người trình bày. Szopka tiếp tục với một số ý kiến ​​trong suốt mã về việc biến khung thành của riêng bạn; nói cách khác, bản demo là điểm khởi đầu của anh ấy dành cho bạn và anh ấy cảnh báo rằng mã hóa thủ công bản trình bày của bạn là điều bạn nên hướng tới trong sản phẩm hoàn chỉnh của riêng bạn.

HTML

Phần thân của tệp html được đặt tên lớp là 'gây ấn tượng không được hỗ trợ' để các trình duyệt không được hỗ trợ sẽ sử dụng các kiểu dự phòng. Và mặc dù không cần thiết phải thêm bất kỳ kiểu thủ công nào vào phần tử này, nếu tập lệnh phát hiện ra rằng trình duyệt không được hỗ trợ, nó sẽ thêm lớp này; do đó, giữ nó trong HTML có nghĩa là người dùng không có JavaScript cũng sẽ có kiểu dự phòng. Thông báo dự phòng được kích hoạt cho những người đang xem bản trình bày trong các trình duyệt khác ngoài Chrome, Safari hoặc Firefox, như được hiển thị trong Hình C (hiển thị trong IE8 bên dưới). Dự phòng chỉ là một loạt các slide trong định dạng cuộn từ trên xuống.

Hình C

Tìm hiểu sâu hơn một chút về khung công tác, bạn sẽ phát hiện ra rằng phần trung tâm của tệp chỉ mục bắt đầu với vùng chứa . Và tất cả các slide thuyết trình (các bước) được lồng bên trong div chính với tên lớp là "gây ấn tượng". Các div lồng nhau cần phải có một tên lớp là "bước", trong bản demo chúng được đặt tên là một lớp của "bước trượt".

Vị trí của các slide phụ thuộc vào việc chuyển một thuộc tính dữ liệu, khá giống với cách thực hiện cuộn parallax. Mã trình diễn xác định vị trí x và y của các phần tử bước có thuộc tính data-x = "XXXX" và data-y = "XXXX", đặt trung tâm của phần tử được định vị ở điểm x = XXXXpx và y = XXXXpx phần trình bày "bạt".

Cấu trúc cơ bản của HTML tương tự như đoạn mã này tôi đã tạo bên dưới, trong đó nêu bật bốn trang chiếu đầu tiên và chức năng (các bước):

Chào mừng đến với bài trình bày!


Với ...

  • Chuyển tiếp CSS3
  • Chuyển đổi CSS3
  • HTML5
  •  Bây giờ ... hãy làm cho riêng bạn! 

    Bởi Ryan Boudreaux

    Bạn cũng có thể bao gồm hình ảnh trong slide (bước) của bạn!

    Thêm liên kết đến các trang web khác nếu bạn muốn!

     Hãy thử nhiều tính năng hơn! 

    ấn tượng.js *

     * Không có ý định vần 

    Lưu ý rằng thuộc tính id của phần tử bước được sử dụng để xác định nó trong URL và đây là tùy chọn, nếu không được xác định, phần tử sẽ nhận được giá trị mặc định là `step-N` trong đó N là số lượng slide. Slide cuối cùng (bước) sử dụng thang đo dữ liệu được đặt thành "4" trong ví dụ này. Thuộc tính dữ liệu cho X và Y được đặt thành 0, nhưng trong phần tử này, thang đo dữ liệu có nghĩa là slide sẽ lớn hơn 4 lần so với các phần tử khác. Từ quan điểm trình bày và chuyển tiếp, điều này có nghĩa là nó sẽ phải được thu nhỏ lại bốn lần để đưa nó trở lại kích thước ban đầu.

    Việc sửa đổi CSS duy nhất tôi đã thực hiện đối với tệp ấn tượng-demo.css ban đầu là thay đổi màu gradient xuyên tâm của nền cơ thể; đoạn mã được sao chép dưới đây:

     thân hình { 
     họ phông chữ: 'PT Sans', sans-serif; 
     chiều cao tối thiểu: 740px; 
     nền: rgb (39, 182, 170); 
     nền: -webkit-gradient (radial, 50% 50%, 0, 50% 50%, 500, từ (rgb (39, 182, 170)), đến (rgb (190, 190, 190))); 
     nền: -webkit-radial-gradient (rgb (39, 182, 170), rgb (190, 190, 190)); 
     nền: -moz-radial-gradient (rgb (39, 182, 170), rgb (190, 190, 190)); 
     nền: -ms-radial-gradient (rgb (39, 182, 170), rgb (190, 190, 190)); 
     nền: -o-radial-gradient (rgb (39, 182, 170), rgb (190, 190, 190)); 
     nền: radial-gradient (rgb (39, 182, 170), rgb (190, 190, 190)); 
     } 

    Mẫu slide

    Chuyển các slide (các bước) từ đoạn mã được hiển thị ở trên, chúng ta có được bản trình bày bốn trang mẫu được hiển thị trong Hình D đến G. Xin lưu ý bạn, đây là một sửa đổi rất đơn giản của bản demo mà Bartek cung cấp. Cho thêm thời gian điều này nên được mở rộng để bao gồm nhiều kiểu dáng và chuyển tiếp hơn; nó đã được cung cấp như một điểm khởi đầu cho các mục đích trình diễn. Trong bản demo, bạn sẽ nhấn phím cách hoặc phím mũi tên để chuyển các trang chiếu.

    Hình dung

    Hình E

    Hình F

    Hình G

    Với nhiều thời gian hơn, tôi có thể coi các khả năng tăng khung công tác ấn tượng như một nền tảng và triển khai nó vào một trang web đầy đủ theo cách tương tự như cuộn parallax. Ngoài ra, một số "mẫu" có thể được phát triển cho các định dạng trình bày trực tuyến khác nhau.

    © Copyright 2020 | mobilegn.com