利用TweenMax針對HTML頁面製作動畫 – CSS篇
前一篇文章跟大家分享了如何利用TweenMax在HTML裡面製作基礎的動畫，接下來示範如何利用TweenMax來控制CSS的效果，當然前置作業跟之前相同，這邊就不多提，但在TweenMax內需加上CSS的控制項目，大致的語法如下：
TweenMax.to(物件,動畫秒數,{css:{樣式名稱:值},ease:動畫模式});
其實跟前篇文章大致相同，只是在動畫的部分要利用「css:{}」這段語法來包含欲更改的樣式，以下是更改寬度和高度的範例：
TweenMax.to(div,1,{css:{width:100, height:200},ease:Expo.easeOut});
接下來為各位示範一下在網頁上製作動畫的範例，這是第一個範例，主要為Div移動的效果，下面是本範例整個網頁的程式碼：
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>GreenSock HTMLTweening CSS Move</title>
<style type="text/css">
#box {
height: 200px;
width: 200px;
position: absolute;
background-color: #9CF;
}
/* box div 的樣式 */
</style>
<script src="src/minified/TweenMax.min.js"></script>
<script language="javascript">
window.onload = moveFn;
function moveFn() {
var div = document.getElementById("box"); /* 利用div變數儲存ID名稱為box的物件 */
var divX = "0px" /* 利用變數儲存div預設的x位置 */
var divY = window.innerHeight / 2 - 100 + "px"; /* 利用變數儲存div預設的y位置 */
var moveX = window.innerWidth / 2 - 100 + "px"
div.style.left = divX div.style.top = divY TweenMax.to(div, 1, {
css: {
left: moveX
},
ease: Expo.easeOut
});
}
</script>
</head>
<body style="background-color:#FFF">
<div id="box"></div>
</body>
</html>
延續上面，接下來第二個範例程式碼大致與上面相同，只是增加了div變形和旋轉的效果，可以看得出來除了CSS本身的樣式之外，還可以利用TweenMax所提供的scale和rotation來製作動畫，下面是本範例整個網頁的程式碼：
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>GreenSock HTMLTweening CSS Move</title>
<style type="text/css">
#box {
height: 200px;
width: 200px;
position: absolute;
background-color: #9CF;
}
/* box div 的樣式 */
</style>
<script src="src/minified/TweenMax.min.js"></script>
<script language="javascript">
window.onload = moveFn;
function moveFn() {
var div = document.getElementById("box"); /* 利用div變數儲存ID名稱為box的物件 */
var divX = "0px" /* 利用變數儲存div預設的x位置 */
var divY = window.innerHeight / 2 - 100 + "px"; /* 利用變數儲存div預設的y位置 */
var moveX = window.innerWidth / 2 - 100 + "px"
div.style.left = divX div.style.top = divY TweenMax.to(div, 1, {
css: {
left: moveX
},
ease: Expo.easeOut
});
TweenMax.to(div, 1, {
css: {
scale: 2,
rotation: 90
},
delay: 1,
ease: Expo.easeOut
});
}
</script>
</head>
<body style="background-color:#FFF">
<div id="box"></div>
</body>
</html>
接下來第三個案例加上了更換背景顏色的部分，背景顏色更換的部分，要注意語法跟css的背景顏色樣式名稱有所不同，下面是本範例整個網頁的程式碼：
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>GreenSock HTMLTweening CSS Move</title>
<style type="text/css">
#box {
height: 200px;
width: 200px;
position: absolute;
background-color: #9CF;
}
/* box div 的樣式 */
</style>
<script src="src/minified/TweenMax.min.js"></script>
<script language="javascript">
window.onload = moveFn;
function moveFn() {
var div = document.getElementById("box"); /* 利用div變數儲存ID名稱為box的物件 */
var divX = "0px" /* 利用變數儲存div預設的x位置 */
var divY = window.innerHeight / 2 - 100 + "px"; /* 利用變數儲存div預設的y位置 */
var moveX = window.innerWidth / 2 - 100 + "px"
div.style.left = divX div.style.top = divY TweenMax.to(div, 1, {
css: {
left: moveX
},
ease: Expo.easeOut
});
TweenMax.to(div, 1, {
css: {
scale: 2,
rotation: 90
},
delay: 1,
ease: Expo.easeOut
});
TweenMax.to(div, 3, {
css: {
backgroundColor: "#EEEEEE"
},
delay: 2,
ease: Expo.easeOut
});
}
</script>
</head>
<body style="background-color:#FFF">
<div id="box"></div>
</body>
</html>
接下來第四個案例是利用TimelineMax來輔助製作這段動畫，可以看的出來上面範例都在使用delay來決定動畫播放順序，但在前面的文章中有提到TimelineMax可以協助我們來掌握動畫播放的順序，所以本範例更改為利用TimelineMax來製作動畫，下面是本範例整個網頁的程式碼：
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>GreenSock HTMLTweening CSS Move</title>
<style type="text/css">
#box {
height: 200px;
width: 200px;
position: absolute;
background-color: #9CF;
}
/* box div 的樣式 */
</style>
<script src="src/minified/TweenMax.min.js"></script>
<script language="javascript">
window.onload = moveFn;
function moveFn() {
var div = document.getElementById("box"); /* 利用div變數儲存ID名稱為box的物件 */
var divX = "0px" /* 利用變數儲存div預設的x位置 */
var divY = window.innerHeight / 2 - 100 + "px"; /* 利用變數儲存div預設的y位置 */
var moveX = window.innerWidth / 2 - 100 + "px"
div.style.left = divX div.style.top = divY
var tMax = new TimelineMax;
tMax.to(div, 1, {
css: {
left: moveX
},
ease: Expo.easeOut
});
tMax.to(div, 1, {
css: {
scale: 2,
rotation: 90
},
ease: Expo.easeOut
});
tMax.to(div, 3, {
css: {
backgroundColor: "#EEEEEE"
},
ease: Expo.easeOut
});
}
</script>
</head>
<body>
<div id="box"></div>
</body>
</html>
看了上面的幾個案例之後，在這邊也來製作幾個比較完整的範例供大家參考，首先是第一個範例，利用文字連結來更換div內容的效果，下面是本範例整個網頁的程式碼：
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>GreenSock HTMLTweening CSS Sample 1</title>
<style type="text/css">
* {
padding: 0px;
margin: 0px;
}
body {
font-size: 13px;
}
#box {
height: 450px;
width: 600px;
margin-left: auto;
margin-right: auto;
background-color: #EEE;
}
/* box div 的樣式 （內容div） */
#content {
padding: 10px 10px 0px 10px;
line-height: 26px;
width: 500px;
margin-left: auto;
margin-right: auto;
}
/* content div 的樣式 （內容p） */
#btn {
height: 30px;
width: 600px;
text-align: center;
margin-left: auto;
margin-right: auto;
padding-top: 10px;
}
#btn a {
margin: 5px;
}
/* btn div 的樣式 （下方文字連結div） */
</style>
<script src="src/minified/TweenMax.min.js"></script>
<script language="javascript">
var intro1 =
"<p style='text-align:center;'><img src='ford/p1.jpg' style='border:1px solid #000; background-color:#FFFFFF'></p><p>全新導入的運動模式（S-Mode），讓變速箱升檔時機往後遞延，以維持較高的引擎轉速再進行換檔，充分提升駕駛加速感受。在中高速行駛時，運動模式可提供更及時的降檔反應，使引擎仍可保持在扭力峰值的轉速範圍內，同時讓動力輸出對油門的反應更加靈敏，整體引擎動力的運動性大幅提升，創造最動感的馳騁體驗。</p>";
var intro2 =
"<p style='text-align:center;'><img src='ford/p2.jpg' style='border:1px solid #000; background-color:#FFFFFF'></p><p>高科技的雙離合器變速箱擁有自排、手排、上坡、下坡、高海拔修正、怠速、斜坡潛滑減緩、緊急安全八大模式。以手排齒輪箱為基礎，搭配平行排列濕式雙離合器機構，能在極短時間內完成換檔，沒有傳統自排變速箱的扭力頓挫感，加速也更加敏捷平順，且操作介面與傳統自排一樣簡易方便。</p>";
var intro3 =
"<p style='text-align:center;'><img src='ford/p3.jpg' style='border:1px solid #000; background-color:#FFFFFF'></p><p>全新高傳真CD/MP3/WMA音響主機，具備DSP數位音場設定、Clip失真檢測功能、智慧型音量控制、高傳真音效調整、AST電台頻道自動掃描儲存功能、位於中央扶手中AUX-IN功能的孔狀插槽與USB插槽（包含一般MP3裝置與iPod主機連結功能），是目前同等級房車中與iPod整合性最高的機種。</p>"; /* 以上為利用三個變數儲存不同的網頁內容 */
window.onload = moveFn; /* 網頁載入時執行moveFn */
function moveFn() {
var div = document.getElementById("box"); /* 利用div變數儲存ID名稱為box的物件 */
var intro = document.getElementById("content"); /* 利用intro變數儲存ID名稱為content的物件 */
intro.innerHTML = intro1; /* 設定content的div內容為第一個連結的內容 */
var tMax = new TimelineMax;
tMax.from(div, 0.5, {
css: {
scale: 0
},
ease: Expo.easeOut
});
tMax.from(intro, 1, {
css: {
alpha: 0
}
}); /* 以動畫的方式呈現內容 */
}
function changeFn(no) {
var div = document.getElementById("box"); /* 利用div變數儲存ID名稱為box的物件 */
var intro = document.getElementById("content"); /* 利用intro變數儲存ID名稱為content的物件 */
var tMax = new TimelineMax;
tMax.to(intro, 0, {
css: {
alpha: 0
}
});
tMax.to(div, 0.5, {
css: {
scale: 0
},
ease: Expo.easeOut
});
tMax.to(div, 0.5, {
css: {
scale: 1
},
ease: Expo.easeOut
});
tMax.to(intro, 1, {
css: {
alpha: 1
}
});
switch (no) {
case 1:
intro.innerHTML = intro1;
break;
case 2:
intro.innerHTML = intro2;
break;
case 3:
intro.innerHTML = intro3;
break;
}
}
</script>
</head>
<body style="background-color:#FFF">
<div id="box">
<p id="content"></p>
</div>
<div id="btn"><a href="javascript:;" onClick="changeFn(1)">運動模式</a><a href="javascript:;"
onClick="changeFn(2)">雙離合器</a><a href="javascript:;" onClick="changeFn(3)">整合音響</a></div>
</body>
</html>
接下來的範例是利用TweenMax來設計讓一個div永遠保持在畫面左邊中間的效果，下面是本範例整個網頁的程式碼：
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>GreenSock HTMLTweening CSS Sample 2</title>
<script src="src/minified/TweenMax.min.js"></script>
<script language="javascript">
window.onload = init; //網頁載入時執行init
window.onscroll = init; //捲動網頁時執行init
window.onresize = init; //網頁更改尺寸時執行init
function init(){
var div=document.getElementById("bannerDiv");
//利用div變數儲存網頁上ID為bannerDiv的物件（即為放圖片的Div）
var banner=document.getElementById("tweenMax");
//利用banner變數儲存網頁上ID為tweenMax的物件（即為圖片本身）
positionY= window.innerHeight/2-banner.height+window.pageYOffset;
//利用PositionY儲存在畫面中Div應該出現的座標位置
TweenMax.to(div,1,{css:{top:positionY},ease:Elastic.easeOut});
//利用TweenMax將Div移動到上面所儲存的位置
}
</script>
<style type="text/css">
#bannerDiv {
height: 54px;
width: 108px;
position: absolute;
}
</style>
</head>
<body style="background-color:#FFF">
<div id="bannerDiv"><img src="mw_tweenmax.gif" name="tweenMax" width="108" height="54" id="tweenMax" /></div>
<div
style="width:400px; height:2000px; background-color:#EEE; margin-left:auto; margin-right:auto; font-size:13px; text-align:center">
網頁內容</div>
</body>
</html>
看完了上面幾個範例之後，相信大家可以利用TweenMax搭配HTML和Javascript來取代更多需要Flash才可以完成的效果了，祝大家設計順利！
kamagra vs cenforce cenforce d dosage purchase cenforce online cheap cenforce 100 svenska
kamagra avis comment acheter du kamagra commande kamagra en ligne suisse comment agit kamagra
canadian hydroxychloroquine hydroxychloroquine online canada
how to get off plaquenil hydroxychloroquine tablets 200mg
neurontin pictures gabapentin 1000 neurontin dose for restless legs syndrome what happens if you mix gabapentin and alcohol
purchase plaquenil online buy 200 mg hydroxychloroquine
Some genuinely interesting info , well written and loosely user friendly.
I’m very happy to read this. This is the kind of manual that needs to be given and not the accidental misinformation that is at the other blogs. Appreciate your sharing this greatest doc.
Have you ever thought about writing an ebook or guest authoring on other blogs? I have a blog based on the same information you discuss and would really like to have you share some stories/information. I know my subscribers would enjoy your work. If you’re even remotely interested, feel free to shoot me an email.
Great write-up, I am normal visitor of one’s site, maintain up the excellent operate, and It’s going to be a regular visitor for a lengthy time.
無料ゲーム-迷った時のルーレット ランチや罰ゲーム抽選 ドリームキャスト好きに伝えたいスマホでできるドリキャスゲームアプリ（Androidアプリ） 普通にミニゲーム？みたいな感じで遊べるし、迷った時とかに使えるので移して損は無いと思います！！！まためっちゃ楽しいルーレットの中でも一番良いと私は思います！ランチやゲームのルール決め、罰ゲームの抽選など、何かを決める時に使えるルーレットアプリです。 ニンテンドー3DS好きに伝えたいDSアプリまとめ（Androidアプリ） 女性必見！マツコの知らない世界「おひとりさまアプリ」で紹介されたオススメ5選アプリまとめ 女性必見！マツコの知らない世界「おひとりさまアプリ」で紹介されたオススメ5選アプリまとめ https://abiosystems.ca/support-forum/profile/declannielsen0/ JavaScript を有効にしてご利用下さい. 予約リスト ≪航空券+ﾎﾃﾙ≫ｼﾝｶﾞﾎﾟｰﾙ航空★羽田午前発 ﾊﾞﾘ島：午前発★ﾊﾞﾘ島4泊5日間ﾚｷﾞｬﾝ ﾋﾞｰﾁ ﾎﾃﾙ泊 白く直線的なデザインが美しい建物で夜はライトアップされ幻想的。広々としたロビーは白を基調とした清潔感あふれるモダンなインテリア。客室はフローリングの床に濃い木目調の家具と暖色系のファブリックを配しあたたかみのある雰囲気。 予約リスト 予約リスト +855-12-890960 ピックアップ特集 JavaScript を有効にしてご利用下さい. バンコクのルンピニー公園からカジノバスでカンボジア国境のポイペトを通過してシェムリアップまで行くルートを解説します。
buy plaquenil generic
kamagra quick kamagra 100mg kamagra gold 100 mg tablete how many kamagra can i take
cialis mg strength cialis manufacturer coupon 2018 how do you take viagra how does viagra
Toki Casino Heroesilla on yhä vaihtoehtona rekisteröityminen ilman pankkitunnuksia myöskin. Tämäkin on mielestämme hyvä asia, sillä se tuo pelaajalle valinnan vapautta. CasinoHeroes muutti hiljattain bonuspakettiaan huomattavasti. Tällä hetkellä voimassa on vain yksi ensitalletusbonus, jonka kaikki uudet pelaajat voivat napata omaan taskuunsa. Nimittäin kun teet ensimmäisen talletuksen, saat 100% bonuksen aina 100€ saakka. Pelikassa siis tuplataan aina 200€ saakka. Tällä potilla onkin hauska lähteä osallistumaan jännittävään kasinoseikkailuun. https://wallstreetsanta.com/community/profile/lisaepps5180760/ 3. 50% jopa 150€ asti, bonuskoodi: BONUS3 Etusivu » Spin Casino The low-paying symbols in the game include all the ghoulish creatures that are shaped like playing cards. When you land a Wild symbol, the reels will blur out and the Wild will be highlighted alongside other winning symbols. Listen carefully while the reels are spinning; you will hear the tormented voices of goblins and ghouls trying desperately to claw their way out of the cemetery. Captain Spins bonus uudelle pelaajalle jättää valinnanvaraa: voit ottaa koko bonuksen käyttöösi jo ensimmäisen talletuksen yhteydessä, tai pirstaloittaa sen koskemaan yhteensä neljää ensimmäistä talletustasi. Mikäli valitset ensimmäisen vaihtoehdon, saat 100% bonuksen aina 1 200 euroon saakka, plus 260 bonuskierrosta. Jos taas haluat jaotella bonukset neljälle talletukselle, saat edut seuraavalla tavalla:
hydroxychloroquine pills for sale canadian hydroxychloroquine
plaquenil tablets 200mg buy online buy 200mg plaquenil
zanaflex buy online buy tizanidine 4mg online zanaflex dosage to get high how long does the effect of zanaflex last
super kamagra ervaring zenegra vs kamagra what is kamagra used for what is kamagra 100 used for
http://hydroxychloroquinex.com/ online doctor to prescribe hydroxychloroquine
Greetings from Ohio! I’m bored to tears at work so I decided
to browse your site on my iphone during lunch break. I really like the info you
provide here and can’t wait to take a look when I get home.
I’m surprised at how quick your blog loaded on my phone ..
I’m not even using WIFI, just 3G .. Anyhow, superb site!
hydroxychloroquine hcq over the counter
hydroxychloroquine online without a prescription plaquenil 400 mg
zithromax dose pack zithromax 200mg will zithromax treat a uti how long after taking azithromycin for chlamydia
viagra or levitra is viagra bad for you how long does viagra take when should i take cialis
Hurrah, that’s what I was seeking for, what a information! existing here at this blog,
thanks admin of this site.
hydroxychloroquine over the counter hydroxychloroquine tablets buy online
https://erythromycinn.com/# erythromycin vs tetracycline
BTC was changing hands for under US$40,900 ($52,500) at 12.30pm AEST, down 8.3 per cent from yesterday, but many midcap altcoins were showing resilience. Thirty of the top 100 were in the green, with six up by double-digits. Only four members of the top 100 were down by more than 10 per cent. Like with most things, Bitcoin Dominance is a very crude metric and one that’s unfortunately very easy to manipulate. The recent enthusiasm for ICOs has made the manipulation even worse and continues to hide the fact that Bitcoin is doing really well. As the manipulation gets more and more obvious, expect this metric to be replaced by something more useful. Market capitalisation might not be the ideal measure of dominance, in a broader sense, but we’re talking about price and markets, which are the simplest to quantify. So when you visit a price aggregator like Coinmarketcap or Coingecko you can see a dynamic value for dominance and chart. https://3-5sfg.net/index.php?action=profile;area=forumprofile;u=897271 Other useful resources to compare cryprocurrencies: CoinMarketCap Flippening Watch The trading fees investors pay when they convert their fiat currencies into crypto, as well as when they trade coins on platforms, are the primary source of revenue for exchanges. The breadth of services and markets is also growing with more margin trading, leverage, and derivatives on some platforms. In that sense the exchanges are not unlike established stock trading sites like Charles Schwab, in that they largely count on transactions for much of their revenue. Globally competitive prices. Access to millions of dollars in daily trading volume. Spreads that are similar to major exchanges. All with zero commissions. When choosing a cryptocurrency exchange, there are several things to consider, including security, fees, and cryptocurrencies offered. It is also important to understand how your cryptocurrency is stored and whether you can take custody of that cryptocurrency by transferring it to your own digital wallet.
erythromycin gel https://erythromycinn.com/#