Làm sinh động website với Animate It CSS jQuery plugin
CSS3 Animate It là plugin jQuery tạo hiệu ứng động dựa trên các phần tử html có sẵn. Animations cho phép bạn trình diễn các hình ảnh động khi duyệt một website có chứa plugin CSS3 Animate jQuery.
animations.css vào trong thẻ <head> của phần đầu trang web
</body>
3. Thêm thẻ CSS class + hiệu ứng vào các phần tử html
"animatedParent". Bạn cũng có thể thông qua các lựa chọn của plugin data-OPTION thuộc tính trong thẻ cha
Các hiệu ứng Animations:
- Bounce
- Fade
- Grow
- Shake
- Rotate
- Rollin
- Wiggle
- Swing
- Wobble
- Pulse
- Flip
Hướng dẫn sử dụng hiệu ứng Animation
1. Hãy thêm<link rel="stylesheet" href="css/animations.css">2. Thêm các javascript và jquery từ thư viện vào cuối trang web, trước thẻ
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src='js/css3-animate-it.js'></script>
3. Thêm thẻ CSS class + hiệu ứng vào các phần tử html
<h2 class="animated bounceIn">Sun Fantastic !</h2>4. Và bọc chúng trước thẻ cha với CSS class
<h2 class="animated bounceInDown">Sun Fantastic !</h2>
<div class="animatedParent" data-sequence="1000'">5. Tất cả các tùy chọn:
<h2 class="animated bounceIn" data-id="1">Sun Fantastic !</h2>
<h2 class="animated bounceInDown" data-id="2">Sun Fantastic !</h2>
</div>
data-sequence: Nếu bạn muốn có một tập hợp các hình ảnh động bắt đầu sau khi một khác sau đó bạn có thể thiết lập một thời gian tự trong msdata-appear-top-offset: Điều này sẽ làm cho làm cho các hình ảnh động hoặc bắt đầu trước hoặc sau khi nó đã bước vào khung nhìn. Vì vậy, nếu bạn muốn chỉ bắt đầu hoạt hình sau khi người dùng đã cuộn 300px qua nó sau đó thiết lập một bù đắp của -300px sẽ đạt được điều này.class="animatedParent animateOnce": Thêm này sẽ đảm bảo rằng các mục chỉ làm sống động một lần và sẽ không được đặt lại khi nó rời khỏi khung nhìn.class="animated bounceInDown slowest": Bạn có thể xác định tốc độ cho nó qua một vài lựa chọnslow,slower,slowest
Change log:
v0.2.1 (2014-07-05)- fixing css bug
- adding in new on click events
Làm sinh động website với Animate It CSS jQuery plugin
Reviewed by Cozy
on
18:05
Rating:
Reviewed by Cozy
on
18:05
Rating:
Không có nhận xét nào: