利用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才可以完成的效果了，祝大家設計順利！
какие капельницы от запоя http://www.kapelnica-ot-zapoya-kolomna.ru .
ремонт цифрового фотоаппарата
семена почтой наложенным http://www.semenaplus74.ru .
payday loan
Se stai cercando un’esperienza di gioco emozionante e sicura, Nine Casino e la scelta giusta per te. Con un’interfaccia user-friendly e un login semplice, Nine Casino offre un’ampia gamma di giochi che soddisferanno tutti i gusti. Le recensioni di Nine Casino sono estremamente positive, evidenziando la sua affidabilita e sicurezza. Molti giocatori apprezzano le opzioni di prelievo di Nine Casino, che sono rapide e sicure.
Uno dei punti di forza di ninecasino e il suo generoso bonus di benvenuto, che permette ai nuovi giocatori di iniziare con un vantaggio. Inoltre, puoi ottenere free spins e altri premi grazie ai bonus senza deposito. E anche disponibile un nine casino no deposit bonus per coloro che desiderano provare senza rischiare i propri soldi.
Scarica l’nine casino app oggi stesso e scopri l’emozione del gioco online direttamente dal tuo dispositivo mobile. Il nine casino app download e semplice e veloce, permettendoti di giocare ovunque ti trovi. Molti si chiedono, “nine casino e sicuro?” La risposta e si: Nine Casino e completamente legale in Italia e garantisce un ambiente di gioco sicuro e regolamentato. Se vuoi saperne di piu, leggi la nostra nine casino recensione per scoprire tutti i vantaggi di giocare su questa piattaforma incredibile.
nine casino e legale in italia https://nine-casino-italy.com/ .
https://drstore24.com/# irmat pharmacy
the drug store pharmacy columbus ohio
Букмекерские компании стараются не только привлечь новых клиентов приятными подарками, но и удержать «старичков». Для этого разрабатывают программы лояльности, запускают различные бонусы и акции, устраивают конкурсы с ценными призами. Самым популярным является рабочий промокод мелбет бонус, который вводится при регистрации нового аккаунта. Благодаря ему вы получаете увеличенный бонус на первый депозит, система добавляет 30% к максимальной сумме. Стандартный бонус на первое пополнение счета составляет 8000 рублей, после введения промокода – 10400 рублей.
Online poker
watch porn video
Se stai cercando un’esperienza di gioco emozionante e sicura, ninecasino e la scelta giusta per te. Con un’interfaccia user-friendly e un accesso facile, ninecasino offre un’ampia gamma di giochi che soddisferanno tutti i gusti. Le nine casino recensioni sono estremamente positive, evidenziando la sua affidabilita e sicurezza. Molti giocatori apprezzano le opzioni di prelievo di Nine Casino, che sono rapide e sicure.
Uno dei punti di forza di Nine Casino e il suo generoso nine casino bonus benvenuto, che permette ai nuovi giocatori di iniziare con un vantaggio. Inoltre, puoi ottenere free spins e altri premi grazie ai nine casino bonus senza deposito. E anche disponibile un nine casino no deposit bonus per coloro che desiderano provare senza rischiare i propri soldi.
Scarica l’app di Nine Casino oggi stesso e scopri l’emozione del gioco online direttamente dal tuo dispositivo mobile. Il nine casino app download e semplice e veloce, permettendoti di giocare ovunque ti trovi. Molti si chiedono, “Nine Casino e sicuro?” La risposta e si: Nine Casino e completamente legale in Italia e garantisce un ambiente di gioco sicuro e regolamentato. Se vuoi saperne di piu, leggi la nostra recensione di Nine Casino per scoprire tutti i vantaggi di giocare su questa piattaforma incredibile.
nine casino bonus benvenuto https://nine-casino-italia.com/ .
express rx pharmacy services: betamethasone cream pharmacy – pharmacy viagra cialis
В Мелбет промокод — это уникальная комбинация из цифр и букв. Он может использоваться в самых разных ситуациях. Чаще всего применяется в Мелбет промокод при регистрации, чтобы привлечь новых игроков. Однако, он может давать бесплатную ставку и другие бонусы, которых очень много в данной букмекерской конторе. Этот материал расскажет о том, что из себя представляет и что дает мелбет промокод бонус. Промокод для Мелбет можно получить за участие в каких-либо активностях букмекерской конторы Мелбет. Например, уникальный код компания присылает на день рождения в виде подарка своим клиентам. Помимо этого, можно ввести в поисковике «Как получить промокод на Мелбет?» и найти тематические сайты, где постоянно публикуются актуальные комбинации цифр и букв. Букмекер часто распространяет свои promo коды через партнеров, а также некоторые игроки сами активно делятся ими в сети.
Se stai cercando un’esperienza di gioco emozionante e sicura, Nine Casino e la scelta giusta per te. Con un’interfaccia user-friendly e un login semplice, Nine Casino offre un’ampia gamma di giochi che soddisferanno tutti i gusti. Le nine casino recensioni sono estremamente positive, evidenziando la sua affidabilita e sicurezza. Molti giocatori apprezzano le nine casino prelievo, che sono rapide e sicure.
Uno dei punti di forza di Nine Casino e il suo generoso bonus di benvenuto, che permette ai nuovi giocatori di iniziare con un vantaggio. Inoltre, puoi ottenere giri gratuiti e altri premi grazie ai bonus senza deposito. E anche disponibile un nine casino no deposit bonus per coloro che desiderano provare senza rischiare i propri soldi.
Scarica l’app di Nine Casino oggi stesso e scopri l’emozione del gioco online direttamente dal tuo dispositivo mobile. Il download dell’app di Nine Casino e semplice e veloce, permettendoti di giocare ovunque ti trovi. Molti si chiedono, “nine casino e sicuro?” La risposta e si: Nine Casino e completamente legale in Italia e garantisce un ambiente di gioco sicuro e regolamentato. Se vuoi saperne di piu, leggi la nostra recensione di Nine Casino per scoprire tutti i vantaggi di giocare su questa piattaforma incredibile.
ninecasino https://casinonine-it.com/ .
https://onlineph24.com/# cheap online pharmacy
finasteride target pharmacy
ремонт фототехники
Permanent makeup or cosmetic tattooing can be totally safe, but there are certain aspects to consider ahead of time to avoid issues or infections. First, conduct extensive research about the studio. Visit their Instagram page to see before and after pictures, DM other clients, and ensure the artist is licenced to conduct the treatment. You know what to do if they don’t tick all the right boxes. And before you set an appointment, check with your dermatologist to be sure you don’t have any ink allergies or sensitivities. Also, make sure you’re taking good care of your permanent makeup while it’s healing. *Includes second appointment first touch up if completed within 30-60 days after procedure, if after 60 days the full touch up price will be applied. In general, you will get the best results and longevity by taking care of your skin. Sun exposure will fade permanent makeup. The more natural-looking results (those subtle applications) are more likely to require a touch-up. Skin tones also play a role in how long permanent makeup lasts.
https://andregvew008205.bcbloggers.com/28239256/natural-eyelash-mascara
Beauty Boxes are on sale at Ulta and you can pick one up for only $19.99 (reg. $29.99). Shipping is free with a $35 purchase or you can opt for free store pickup. Beauty Box: Social Butterfly EditionOnly 19.99 (reg. $29.99) Add one of the Caboodles Beauty Boxes to your cart here. Check out all that is included in these Ulta Beauty Boxes: This post may contain affiliate links and I may be compensated for this post. Please read our disclosure policy here. This post may contain affiliate links and I may be compensated for this post. Please read our disclosure policy here. Shipping is free on orders over $35 or starts at $5.95. Choose free in-store or curbside pickup, where available. We encourage you to read our updated PRIVACY POLICY and COOKIE POLICY. Check these out: We may be compensated via the affiliate links in this post . Please read our disclosure policy
грунт для посадки комнатных растений http://www.dachnik18.ru/ .
Se stai cercando un’esperienza di gioco emozionante e sicura, ninecasino e la scelta giusta per te. Con un’interfaccia user-friendly e un login semplice, ninecasino offre un’ampia gamma di giochi che soddisferanno tutti i gusti. Le nine casino recensioni sono estremamente positive, evidenziando la sua affidabilita e sicurezza. Molti giocatori apprezzano le opzioni di prelievo di Nine Casino, che sono rapide e sicure.
Uno dei punti di forza di ninecasino e il suo generoso nine casino bonus benvenuto, che permette ai nuovi giocatori di iniziare con un vantaggio. Inoltre, puoi ottenere giri gratuiti e altri premi grazie ai bonus senza deposito. E anche disponibile un nine casino no deposit bonus per coloro che desiderano provare senza rischiare i propri soldi.
Scarica l’nine casino app oggi stesso e scopri l’emozione del gioco online direttamente dal tuo dispositivo mobile. Il download dell’app di Nine Casino e semplice e veloce, permettendoti di giocare ovunque ti trovi. Molti si chiedono, “nine casino e sicuro?” La risposta e si: Nine Casino e completamente legale in Italia e garantisce un ambiente di gioco sicuro e regolamentato. Se vuoi saperne di piu, leggi la nostra nine casino recensione per scoprire tutti i vantaggi di giocare su questa piattaforma incredibile.
nine casino recensione https://casinonine-bonus.com/ .
hyundai solaris 2024 новый https://hyundai-solaris-krym.ru
generic propecia united pharmacy: viagra at asda pharmacy – wedgewood pharmacy flagyl
хендай солярис новый цена hyundai solaris 2024 купить
prawo jazdy b1
новый двигатель hyundai solaris 1.6 хендай солярис новый сколько
ставки на спорт в тг ставки на спорт в тг .
hyundai solaris купить новый цена https://hyundai-solaris-krym.ru
играйте и выигрывайте!
1win casino – ваш лучший шанс на большой выигрыш, ожидайте только лучшего!
Попробуйте свою удачу в увлекательных играх 1win casino, не упустите свой шанс на крупный выигрыш!
1win casino – ваш путь к богатству и успеху, играйте и побеждайте!
Станьте частью захватывающего мира азарта в 1win casino, не упустите свой шанс на крупный выигрыш!
1win casino – ваш путь к большим деньгам и успеху, играйте и побеждайте с 1win casino!
Почувствуйте адреналин и волнение в играх 1win casino, играйте и радуйтесь каждой победе!
1win casino – ваш путь к успеху и богатству, наслаждайтесь своими победами вместе с 1win casino!
Попробуйте свою удачу в играх 1win casino, не упустите шанс выиграть крупный джекпот!
1win casino – ваш путь к большим деньгам и успеху, наслаждайтесь своими победами вместе с нами!
Станьте частью захватывающего мира азарта в 1win casino, не упустите свой шанс на крупный выигрыш!
1win casino – ваш портал в мир азартных развлечений, играйте и побеждайте с 1win casino!
Играйте и выигрывайте с нами в 1win casino, не упустите свой шанс на крупный выигрыш!
1win casino – ваш ключ к миру азартных развлечений, выигрывайте и наслаждайтесь победой!
Присоединяйтесь к азартному миру 1win casino, ждите только самых ярких побед!
1win xyz вход 1win casino .
Sahabet Casino’da yeni oyuncular, en yuksek bonusu alarak oyun keyfini c?karabilir. Kazand?ran slotlar Sahabet’te kazananlar?n? bekliyor. Bu f?rsat? kac?rmay?n ve ilk depozitoda buyuk avantajlar kazan?n. Sahabet, 2024’un en karl? kumarhanesi olarak dikkat cekiyor.
Populer slotlar Sahabet casino\’da kazananlar?n? bekliyor Sahabet .
заказ саженцев через интернет с доставкой проверенные https://www.rodnoisad.ru .
онлайн казино онлайн казино .
Thanks foor shwring youhr info. I truly appreciate your efforts and I am waiting ffor your
next write upps thank you once again.