網(wǎng)站制作插件動(dòng)畫過(guò)渡

2013-11-11    分類: 網(wǎng)站制作

有經(jīng)驗(yàn)的網(wǎng)頁(yè)設(shè)計(jì)師和前端都知道,在開(kāi)始著手設(shè)計(jì)網(wǎng)頁(yè)之前,通常大家會(huì)在白板或者草稿紙上畫個(gè)草圖,這樣做方便構(gòu)思整體布局。雖然許多設(shè)計(jì)師選擇在白板上完成這一過(guò)程,不過(guò)也有許多設(shè)計(jì)師選擇使用網(wǎng)站制作插件來(lái)”打草稿”,其中最受大家青睞的就包括Sketch 內(nèi)置的模板功能。


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

網(wǎng)站制作插件動(dòng)畫過(guò)渡

animsition:用戶友好的jQuery插件動(dòng)畫網(wǎng)站制作過(guò)渡

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

網(wǎng)站制作插件動(dòng)畫過(guò)渡

合并數(shù)據(jù),標(biāo)記了HTML,啟動(dòng)插件

animsition可以快速集成和配置。它包括一個(gè)JavaScript和樣式表文件均納入HTML文檔。此外,你需要一個(gè)HTML標(biāo)記的容器,將消失或縮小轉(zhuǎn)換。你經(jīng)常會(huì)希望所有的內(nèi)容是動(dòng)態(tài)的,容器應(yīng)包括身體內(nèi)的一切。

它是,但是,可能包含的內(nèi)容的一部分。例如,導(dǎo)航標(biāo)志,通常不會(huì)改變,所以不需要?jiǎng)赢嫛?/p>

<div class=“animsition”>
……
< / DIV >
給容器的“animsition”類是很重要的,這樣的插件可以訪問(wèn)它和動(dòng)畫元素。它也要給“<一>“元素”animsition鏈接”類,這樣你就可以給網(wǎng)站animsition。

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

$(“。animsition”)。animsition({
課堂:“flip-in-x”,
高于:“flip-out-x”
});

網(wǎng)站制作插件動(dòng)畫過(guò)渡
調(diào)用插件的“animsition”類通過(guò)jQuery。選擇“課堂”和“遠(yuǎn)高于”定義如何淡化當(dāng)前頁(yè)面和新頁(yè)面。

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

網(wǎng)站制作插件動(dòng)畫過(guò)渡

有更多的選項(xiàng)來(lái)配置插件。你可以,例如,指定動(dòng)畫的持續(xù)時(shí)間通過(guò)“硬化”和“outduration”。作為一個(gè)動(dòng)畫頁(yè)面轉(zhuǎn)換才有意義,如果一個(gè)鏈接選擇頁(yè)面提前加載,插件加載目標(biāo)網(wǎng)站頁(yè)面之前的過(guò)渡。加載網(wǎng)站你會(huì)看到一個(gè)基于CSS3和SVG的典型加載動(dòng)畫。這個(gè)動(dòng)畫可以用一個(gè)人代替。只要確保加載動(dòng)畫可以通過(guò)CSS類訪問(wèn)。

$(“。animsition”)。animsition({
loadingclass:“myloadinganimation”
});
在上面的例子中,默認(rèn)的動(dòng)畫是與類”myloadinganimation”代替。

網(wǎng)站制作插件動(dòng)畫過(guò)渡

animsition提供一大堆頁(yè)面過(guò)渡效果,包括各種各樣的淡入和淡出效果。有簡(jiǎn)單的淡入淡出效果和更復(fù)雜的頁(yè)面滑動(dòng)到一側(cè)。

你也可以運(yùn)用旋轉(zhuǎn)效應(yīng)扭曲到頁(yè)面的左或右,或進(jìn)或出窗,和翻頁(yè)效果,讓你的頁(yè)面翻到前面或后面。可以通過(guò)選擇一個(gè)不同的視角改變了翻轉(zhuǎn)的程度。

此外,該插件有放大效應(yīng),放大了的頁(yè)面的時(shí)候,離開(kāi)它,并在新的頁(yè)面縮放。這可以設(shè)置在“課堂”和“課外”。當(dāng)然,你要注意離開(kāi)并加載一個(gè)頁(yè)面就有一個(gè)“”和“”每個(gè)效果選項(xiàng)選擇合適的效果。

網(wǎng)站制作插件動(dòng)畫過(guò)渡

所有鏈接的個(gè)人網(wǎng)站過(guò)渡

通過(guò)插件調(diào)用上下行只能定義每個(gè)淡入和淡出效果配置。影響定義在“課堂”和“遠(yuǎn)高于”應(yīng)用于整個(gè)文檔。

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

< class=“animsition鏈接”數(shù)據(jù)animsition =“淡出”數(shù)據(jù)animsition持續(xù)時(shí)間=“1000”href =“接觸。HTML”>接觸
“數(shù)據(jù)animsition”定義的淡出效果。動(dòng)畫的持續(xù)時(shí)間可以通過(guò)指定的數(shù)據(jù)animsition持續(xù)期”。指定通過(guò)數(shù)據(jù)屬性重寫值在插件調(diào)用信息。你不能定義一個(gè)淡入效果的新頁(yè)面內(nèi)的“< >”的元素,但是你可以指定它為每個(gè)頁(yè)面通過(guò)數(shù)據(jù)屬性–容器內(nèi),將網(wǎng)站內(nèi)容。

<div class=“animsition”數(shù)據(jù)animsition =“淡入”數(shù)據(jù)animsition時(shí)間=“1500”>
……
< / DIV >

網(wǎng)站制作插件動(dòng)畫過(guò)渡
疊加效應(yīng)特點(diǎn)

除了不同的頁(yè)面過(guò)渡,animsition提供疊加效應(yīng)作為一種特殊的特征。這些不活躍的頁(yè)面;相反,一個(gè)形狀盤旋在屏幕窗口的背景下新的頁(yè)面加載。當(dāng)它完成的時(shí)候,你的窗口形狀的葉子。

再次,你可以選擇各種不同的選項(xiàng),例如,動(dòng)畫的形狀從或向任何方向。在實(shí)現(xiàn)覆蓋的效果,你需要激活他們的設(shè)置。

$(“。animsition”)。animsition({
覆蓋:真正的
});
animsition WordPress

該插件可以集成到WordPress系統(tǒng)沒(méi)有采用專用插件進(jìn)一步配置。這可以讓你輕松地調(diào)整頁(yè)面過(guò)渡(作用時(shí)間)在WordPress的界面。

瀏覽器支持和相關(guān)鏈接

animsition與所有主要的瀏覽器,包括Internet Explorer 10和更高。對(duì)于其他瀏覽器沒(méi)有版本號(hào)顯示。但你可以假設(shè)animsition與所有瀏覽器支持CSS3。你可以把CSS屬性的“unsupportcss”選項(xiàng),關(guān)閉瀏覽器不支持這些特性的插件。

$(“。animsition”)。animsition({
unsupportcss:[“動(dòng)畫時(shí)間”,“WebKit動(dòng)畫持續(xù)時(shí)間”,“o-animation-duration”]
})
房地產(chǎn)的“動(dòng)畫時(shí)間”以其不同的供應(yīng)商的選項(xiàng)是默認(rèn)定義。調(diào)整其實(shí)是沒(méi)有必要的,但你可以改變的,當(dāng)然,如果你喜歡你的需求清單。

animsition是免費(fèi)的MIT許可下發(fā)布的,可用于個(gè)人和商業(yè)項(xiàng)目。

網(wǎng)站制作插件動(dòng)畫過(guò)渡

分享文章:網(wǎng)站制作插件動(dòng)畫過(guò)渡
網(wǎng)頁(yè)鏈接:http://muchs.cn/news10/19460.html

網(wǎng)站建設(shè)、網(wǎng)絡(luò)推廣公司-創(chuàng)新互聯(lián),是專注品牌與效果的網(wǎng)站制作,網(wǎng)絡(luò)營(yíng)銷seo公司;服務(wù)項(xiàng)目有網(wǎng)站制作

廣告

聲明:本網(wǎng)站發(fā)布的內(nèi)容(圖片、視頻和文字)以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主,如果涉及侵權(quán)請(qǐng)盡快告知,我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng),如需處理請(qǐng)聯(lián)系客服。電話:028-86922220;郵箱:631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載,或轉(zhuǎn)載時(shí)需注明來(lái)源: 創(chuàng)新互聯(lián)

網(wǎng)站托管運(yùn)營(yíng)