Share Tạo hiệu ứng khi mở trang trong website với thư viện Animsition

filiallion

Administrator
Staff member
Administrator
Messages
585
Points
10
Language
Tiếng Việt
Để tạo thêm hiệu ứng đẹp cho website khi người dùng mở bất kỳ một trang nào đó các bạn có thể sử dụng thư viện Animsition. Đây là thư viện được viết trên nền tảng jQuery cung cấp nhiều hiệu ứng chuyển trang đẹp mắt.

Để sử dụng thư viện Animsition các bạn cần phải tích hợp thư viện jQuery vào website, sau đó truy cập địa chỉ https://github.com/blivesta/animsition để tải thư viện Animsition.

Các bạn tích hợp thư viện Animsition vào website với nội dung mã lệnh như sau:
HTML:
<link href="path/to/animsition.min.css" rel="stylesheet">
<script src="path/to/animsition.min.js"></script>
Cài đặt hiệu ứng mở trang với nội dung mã lệnh JavaScript như sau:
JavaScript:
$(function() {
    $('.animsition').animsition({
        inClass: 'fade-in',
        outClass: 'fade-out',
        inDuration: 1500,
        outDuration: 800,
        linkElement: '.animsition-link',
        loading: true,
        loadingParentElement: 'body',
        loadingClass: 'animsition-loading',
        loadingInner: '',
        timeout: false,
        timeoutCountdown: 5000,
        onLoadEvent: true,
        browser: ['animation-duration', '-webkit-animation-duration'],
        overlay : false,
        overlayClass : 'animsition-overlay-slide',
        overlayParentElement : 'body',
        transition: function(url) {
            window.location.href = url;
        }
    });
});
Và cài đặt mã lệnh HTML như sau:
HTML:
<div class="animsition">
    <a href="path/to/page-1.html" class="animsition-link">Animsition link 1</a>
    <a href="path/to/page-2.html" class="animsition-link">Animsition link 2</a>
    <a href="path/to/page-3.html" class="animsition-link">Animsition link 3</a>
</div>

Các bạn có thể tìm hiểu thêm về thư viện Animsition tại địa chỉ http://git.blivesta.com/animsition.
 
Back
Top