有經驗的網頁設計師和前端都知道，在開始著手設計網頁之前，通常大家會在白板或者草稿紙上畫個草圖，這樣做方便構思整體布局。雖然許多設計師選擇在白板上完成這一過程，不過也有許多設計師選擇使用網站制作插件來”打草稿”，其中最受大家青睞的就包括Sketch 內置的模板功能。

內置的模板和Sketch的基礎功能保證了設計師和前端們的基本需求，第三方的開發(fā)者所提供的大量的插件則起到了極好的補充的效果。

animsition：用戶友好的jQuery插件動畫網站制作過渡

隨著CSS3 JavaScript可以很容易地創(chuàng)建網站動畫。一些使用CSS3動畫在網站頁面轉換。目前的級聯(lián)樣式表的版本允許您創(chuàng)建簡單的淡入和下滑的影響以及三維轉換到其他頁面。相當新的jQuery插件”animsition”可以很容易地集成到你的web項目頁面過渡動畫。

合并數據，標記了HTML，啟動插件

animsition可以快速集成和配置。它包括一個JavaScript和樣式表文件均納入HTML文檔。此外，你需要一個HTML標記的容器，將消失或縮小轉換。你經常會希望所有的內容是動態(tài)的，容器應包括身體內的一切。

它是，但是，可能包含的內容的一部分。例如，導航標志，通常不會改變，所以不需要動畫。

＜div class=“animsition”>
……
< / DIV >
給容器的“animsition”類是很重要的，這樣的插件可以訪問它和動畫元素。它也要給“<一>“元素”animsition鏈接”類，這樣你就可以給網站animsition。

< class=“animsition鏈接href =“接觸。HTML”>與<一>
然后，運行插件和配置具有不同參數的幫助。

$（“。animsition”）。animsition（{
課堂：“flip-in-x”，
高于：“flip-out-x”
}）；

調用插件的“animsition”類通過jQuery。選擇“課堂”和“遠高于”定義如何淡化當前頁面和新頁面。

所以，設置“課堂”例子中的當前頁面淡入通過“flip-in-x”的效果，只要它的加載。設置“遠高于”，相反，使當前頁面淡出通過“flip-out-x”的效果，只要你打電話聯(lián)系“animsition鏈接”類。

有更多的選項來配置插件。你可以，例如，指定動畫的持續(xù)時間通過“硬化”和“outduration”。作為一個動畫頁面轉換才有意義，如果一個鏈接選擇頁面提前加載，插件加載目標網站頁面之前的過渡。加載網站你會看到一個基于CSS3和SVG的典型加載動畫。這個動畫可以用一個人代替。只要確保加載動畫可以通過CSS類訪問。

$（“。animsition”）。animsition（{
loadingclass：“myloadinganimation”
}）；
在上面的例子中，默認的動畫是與類”myloadinganimation”代替。

animsition提供一大堆頁面過渡效果，包括各種各樣的淡入和淡出效果。有簡單的淡入淡出效果和更復雜的頁面滑動到一側。

你也可以運用旋轉效應扭曲到頁面的左或右，或進或出窗，和翻頁效果，讓你的頁面翻到前面或后面。可以通過選擇一個不同的視角改變了翻轉的程度。

此外，該插件有放大效應，放大了的頁面的時候，離開它，并在新的頁面縮放。這可以設置在“課堂”和“課外”。當然，你要注意離開并加載一個頁面就有一個“”和“”每個效果選項選擇合適的效果。

所有鏈接的個人網站過渡

通過插件調用上下行只能定義每個淡入和淡出效果配置。影響定義在“課堂”和“遠高于”應用于整個文檔。

你可以，但是，定義一個單獨的淡出各個環(huán)節(jié)的影響。這樣做，只需添加通過數據屬性的“< >”元素。

< class=“animsition鏈接”數據animsition =“淡出”數據animsition持續(xù)時間=“1000”href =“接觸。HTML”>接觸
“數據animsition”定義的淡出效果。動畫的持續(xù)時間可以通過指定的數據animsition持續(xù)期”。指定通過數據屬性重寫值在插件調用信息。你不能定義一個淡入效果的新頁面內的“< >”的元素，但是你可以指定它為每個頁面通過數據屬性–容器內，將網站內容。

＜div class=“animsition”數據animsition =“淡入”數據animsition時間=“1500”>
……
< / DIV >

疊加效應特點

除了不同的頁面過渡，animsition提供疊加效應作為一種特殊的特征。這些不活躍的頁面；相反，一個形狀盤旋在屏幕窗口的背景下新的頁面加載。當它完成的時候，你的窗口形狀的葉子。

再次，你可以選擇各種不同的選項，例如，動畫的形狀從或向任何方向。在實現覆蓋的效果，你需要激活他們的設置。

$（“。animsition”）。animsition（{
覆蓋：真正的
}）；
animsition WordPress

該插件可以集成到WordPress系統(tǒng)沒有采用專用插件進一步配置。這可以讓你輕松地調整頁面過渡（作用時間）在WordPress的界面。

瀏覽器支持和相關鏈接

animsition與所有主要的瀏覽器，包括Internet Explorer 10和更高。對于其他瀏覽器沒有版本號顯示。但你可以假設animsition與所有瀏覽器支持CSS3。你可以把CSS屬性的“unsupportcss”選項，關閉瀏覽器不支持這些特性的插件。

$（“。animsition”）。animsition（{
unsupportcss：[“動畫時間”，“WebKit動畫持續(xù)時間”，“o-animation-duration”]
}）
房地產的“動畫時間”以其不同的供應商的選項是默認定義。調整其實是沒有必要的，但你可以改變的，當然，如果你喜歡你的需求清單。

animsition是免費的MIT許可下發(fā)布的，可用于個人和商業(yè)項目。

分享文章：網站制作插件動畫過渡
網頁鏈接：http://www.js-pz168.com/news10/19460.html

網站建設、網絡推廣公司-創(chuàng)新互聯(lián)，是專注品牌與效果的網站制作，網絡營銷seo公司；服務項目有網站制作等

廣告

聲明：本網站發(fā)布的內容（圖片、視頻和文字）以用戶投稿、用戶轉載內容為主，如果涉及侵權請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內容未經允許不得轉載，或轉載時需注明來源： 創(chuàng)新互聯(lián)