利用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才可以完成的效果了，祝大家設計順利！
discontinuing aralen chloroquine 150 mg can aralen cause swelling of mouth aralen & iron supplements how to take
seroquel euphoria quetiapine tablets australia does seroquel affect blood pressure how to stop eating on seroquel
The scope of work for your bathroom remodel project may either be a minor renovation or a major renovation. This will also determine the type of professional you need and the amount of labor cost in the project. A minor renovation includes simple work such as repainting walls, replacing or fixing bathroom faucets, tiling a part of the bathroom, regrouting, installing a knock-down shelf or storage unit and installing accessories. This location is nestled right outside of midtown. Close enough to be able to visit all the new shops and restaurants, but far away enough to have a little peace and quiet. I loved getting to work on this house with my dad and renovate it to become more functional! One of my favorite projects of the house was this small bathroom remodel! If you’re searching for cool DIY bathroom remodel ideas, follow this tutorial to upcycle an old dresser as a bathroom vanity. Converting a vintage dresser into a vanity gives life to old furniture and saves you money on buying new cabinets to install. https://messiahyriy987542.jts-blog.com/12943613/power-home-remodeling-texas A fresh coat of paint goes a long way in any room, but especially the bathroom. Whether you pick the same hue to cover up years of built-up dirt and grime or a new shade to brighten up the space, paint gives the bathroom an instant refresh. Consider a neutral or cool white—especially if a bathroom currently has tan or dark walls. Going from dark to light will make the room look bigger, without a huge bathroom remodel cost. Your master bathroom is not only the place where you start and end each day, it’s also the place where you seek relaxation and comfort. And not only you but everyone in your family. This is why it is so important to make it comfy, warm, and relaxing. Traditional style cabinetry for maximum storage, two vanities, two sinks, a shower, and a tub, all well-lit, provide the maximum of functionality and comfort a family may need.
cenforce cenforce 100mg reviews buy cenforce 100mg pills best site to order cenforce tablets cenforce 200 mg
Wow, awesome weblog structure! How lengthy have you ever been blogging for? you made running a blog look easy. The total look of your website is fantastic, let alone the content!
centurion cenforce buy cenforce 50mg pill cenforce professional 100 mg canadian pharmacy cenforce cost
The full list of Super Bowl odds are: Since 2002, the first year the league expanded to 32 teams, the Super Bowl participants have combined to score more points in the second half plus overtime 13 times, and that includes five of the past six Super Bowls. Plus, both the Cincinnati Bengals and Los Angeles Rams have scored more points per drive in the second half of games than they have in the first half. Cincinnati has a very steep uptick in the second half, too, further tilting the game in this direction. Oddsmakers at the best NFL betting sites have listed the Buffalo Bills as +650 betting favorites in early odds to win Super Bowl 57. Next on the oddsboard are the Tampa Bay Buccaneers, Kansas City Chiefs, Los Angeles Rams and Green Bay Packers. As they failed to contend or reach the postseason, both the Giants and Jets are unlisted to win this season’s Super Bowl. Futures odds to win Super Bowl LVII in 2023 are released. The latest odds can be found at the top of this page. Neither of the New York teams have a strong chance to win next season, and that’s reflected in the odds available for them. https://howtoonline.org/community/profile/millasoto352649/ Searching for Grand National betting offers is fun, but before you start making your Grand National picks or looking for Grand National free bets, you should know a little background about the Grand National Race. The Grand National is the unequivocal highlight of the world wide horse racing calendar. The race is held at Aintree Racecourse, which is in Liverpool in the North West of the United Kingdom. It retains its place prominently in British culture for many reasons. Set over four and a quarter miles, the Grand National is a race of endurance over 30 of the hardest and highest jumps to be negotiated in a handicap steeplechase horse race in the world. You can then even bet through the Racing Post website by signing into your existing account. If you need to create a new account you can also do this through the site.
https://diamondhairs.com.ua/banki-kredity/
1b15fa54f8 balkam
https://diamondhairs.com.ua/banki-kredity/
1b15fa54f8 balkam
https://diamondhairs.com.ua/biznes/
1b15fa54f8 dyllkaf
Very good written information. It will be helpful to everyone who employess it, including yours truly :). Keep doing what you are doing – can’r wait to read more posts.
lasix and creatinine furosemide 20mg generic furosemide for dogs 12.5 mg what are the dosages for lasix
online casino slots real money
caesar slots su facebook
play slots online
You have brought up a very fantastic points, thanks for the post.
Whereas the French roulette table has a side betting option that covers strategical numbers to wager your chips on. But is not just roulette that carries these hybrid games. When you step into the menu of free games, you may find titles that you’re unfamiliar with, though they will actually play very similar to the more popular options you are aware of. These are alternative games that play ever so slightly differently to its mother game, but more on these later on. Like most NetEnt games, the Starburst slot is full of expanding wilds and respins chances. The tenner is like seed money for players to warm up or snoop around this amazing site trying to find the games they are interested. The rules for betting in regular or welcome packages of free spins do not differ. The exception is the deposit requirement, as it must be deposited into your account to receive the bonus. Bets can be different as well as betting times. When choosing a casino, pay attention to the fact that, in some cases, the time for betting bonuses and deposits can be very limited. https://virectory.com/community/profile/katiavanhorn77/ In the big online market for casino gaming the online casino’s are doing everything they can to please the players. To attract new players they are giving away free spins, so you are able to try out a casino before depositing any money. The best thing about these free spins casino’s is; you can keep your winnings! In fact you are playing for free with real money! Find out more how free spins bonuses work. Online casinos are savvy, though. Most free spin casino bonuses limit the bet amount associated with the free spins to a smaller denomination. They also render some machines ineligible for redeeming a free spin bonus. Usually, if there’s a progressive jackpot or some other potential for a massive payout, the casino will limit its exposure to customers who have paid for the opportunity. The best way to win with free spins is to win small while playing your free spins. A bonus of 2-5 Euro or Dollar is perfect. This way, the total amount that has to be wagered before you are able to make a withdrawl remains low. Then, when the free spins have finished, it is time to make your big win, so it is easy to clear the wagering requirements for the free spins bonus by rasing your betsize.
cialis kamagra comment acheter du kamagra sans ordonnance comment bien bander sans kamagra pourquoi le kamagra ne fait pas d’effet
As you can see, depositing with Boku is quite straightforward for online casino sites in the UK. Play with ease and the sum you deposited will appear on the monthly bill at the end of the month. Please mind that in case you are using prepaid services, you will have to deposit the funds to your mobile first, and then proceed with casino payment. Most gamblers use Boku to make online payments while playing online games. Boku payment service has built the reputation of facilitating fast, instant and secure deposits in online casinos. Several Boku casinos have embraced the new technology of mobile payments because of the benefits that consumers enjoy. Since it was developed, the payment service has been ranked as the best payment avenue for play casino sites in the UK. Keep reading to know more about this innovative payment method; we’ll explain how Boku works, we’ll tell you everything you need to know before you opt for this way to fund your online casino accounts and we’ll give you a quick review of how to select the best online casino that accepts Boku. https://classified.citylive.com/index.php?page=user&action=pub_profile&id=624619 We hope you’ll love this product, but if you do want to return or exchange it for any reason, you can. As long as we receive it within 15 days from the date of delivery, and it remains in a re-sellable condition, we’ll give you a refund or allow you to exchange the product for something else. In the unlikely event that your product is faulty, damaged or simply isn’t what you ordered, we’ll cover the cost of return postage. Roulette Casino Chips The casino said Monday it will open The Gallery Bar, Book & Games, a 12,000-square foot facility where its current sports book is located. Roulette is a casino and gambling game named after the French word meaning \small wheel\”. In the game
viagra puissant pilule viagra pas cher prix du viagra en pharmacie francaise tadalafil ou viagra
I do consider all the ideas you’ve offered for your post.
They’re very convincing and can certainly work. Still,
the posts are very short for starters. May just
you please prolong them a little from subsequent time?
Thanks for the post.