利用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才可以完成的效果了，祝大家設計順利！
buy viagra online
тревожная кнопка росгвардия москва тревожная кнопка росгвардия москва .
автоматические гардины для штор provorota.su .
гадание индийский пасьянс онлайн бесплатно гадание индийский пасьянс онлайн бесплатно .
Discover exclusive collections at stussy jeans.
Upgrade your wardrobe with the latest from agolde jeans.
Лучшие виды плинтусов для отделки пола, для создания стильного дизайна|Как выбрать идеальный плинтус для пола, который гармонично впишется в ваш дом|Простая инструкция по установке плинтуса, чтобы сэкономить время и усилия|Лучшие способы покраски напольных плинтусов, который подчеркнет уникальность вашего интерьера|Сравнение различных видов напольных плинтусов, для оптимального сочетания с полом|Как сделать плинтус не только функциональным, но и декоративным элементом, для придания уникального шарма|Зачем нужны напольные плинтусы и какие у них функции, для достижения гармонии в оформлении|Советы по чистке и обслуживанию плинтусов, чтобы сохранить качество и красоту|Лучшие решения для плинтусов в детской комнате, которые сделают детскую комнату уютной и безопасной|Топ-5 стильных цветов плинтусов для разных помещений, для придания интерьеру завершенности и стиля|Лучшие способы скрыть недостатки пола с помощью плинтусов, для придания гладкости и аккуратности|Идеи для использования плинтусов как акцентного элемента в интерьере, которые добавят оригинальности и смелости в оформление|Идеи для гармоничного сочетания плинтусов с низкими потолками, которые помогут создать простор и легкость в интерьере|Идеи для создания плавных и безупречных переходов между углами, для создания аккуратных и эстетичных деталей|Идеи для декорирования плинтусов в сочетании с кафелем, для придания ванной комнате свежего и элегантного вида|Советы по выбору плинтусов
напольный плинтус высокий https://plintusnapolnyjshirokij.ru/ .
Discover unique styles at isabel marant outlet.
With consecutive titles in 2021 and 2022, Georgia is the only repeat winner of the College Football Championship in the CFP era (2014-present). Alabama leads the way with three national championships since the College Football Playoff was implemented. 2u: UConn to win the National Championship (-105)1.5u: Donovan Clingan to win Most Oustanding Player (+340) The total for No. 1 Michigan vs. No. 2 Washington has moved from 55 to 56.5 at BetMGM as 68% of bets and over 80% of the money are on the over. Michigan is a 4.5-point favorite over the Huskies after beating Alabama in the Rose Bowl. Washington beat Texas by six in the Sugar Bowl to advance to the national title game. Should Alabama advance and face Purdue, oddsmakers on DraftKings Sportsbook have the Boilermakers favored by 5.5 points over the Tide. As 5.5-point underdogs, Alabama would have moneyline odds of +200.
https://kylerybeg085296.ageeksblog.com/27304160/safest-sports-betting-app
Home » Las Vegas Odds » NFL Vegas Odds » Super Bowl 59 Vegas Bets and Odds There’s more than meets the eye with MyBookie. So, to kick off our MyBookie sportsbook review, let’s take a look at some of the key features: Unlike some of the other major sportsbooks out there such as BetOnline, who have their own dedicated area for bets on gaming, MyBookie’s esports section ties seamlessly into the sportsbook area of the site. At the time of our review, MyBookie had odds up for popular titles including Counter-Strike: Global Offensive, Hearthstone, League of Legends, and Overwatch. The clue is in the name with Futures – this is placing a wager on an event happening in the future, such as the Super Bowl. Use of Cookies: MyBookie uses cookies to improve your experience. By using the MyBookie website, you are consenting to the use of cookies in accordance to our Cookie Policy.
Pink eye and styes are the gifts that keep on giving … in the worst possible way. That’s because after you’re in the clear and have gotten rid of your eye infection, you still have to worry about reinfecting yourself by using contaminated beauty products. Symptoms can vary but typically include the white of the eye taking on a pink or red color with swelling of the eyelid(s). Other symptoms of conjunctivitis may include some or all of the following: blurred vision, sensitivity to light, a scratchy or painful sensation in one or both eyes, heavy tearing in the eyes, discharge from the eye(s), crusting of eyelids or lashes and itchy eyelids. by Valley Eyecare Center | Aug 31, 2022 | Pink Eye | 0 comments First, you need to apply pink eye shadow on each eyelid to get this look. Then use a little bit of black to make it look darker. Now take some white eyeshadow towards the end of the lids but make sure you don’t blend this too much. Border with eyeliner, and you will be ready.
https://danteulvh444444.wizzardsblog.com/28666701/winter-makeup-looks
Apply one sachet of No.3 Leave In Restorative Mask to both brows. Use a lamination comb to brush the formula evenly through the brows. Leave on to nourish. Brush the brows in place. Instagram’s darling brow lamination is really hitting its stride, tempting us with those fuller, more defined, aesthetic eyebrows. But here’s the twist: while everyone’s going gaga over this trend, there are some savvy folks out there raking in the dough. Home | Eyebrow Aftercare | Brow Lamination Aftercare Our Professional Prow Lamination Kit can be used for both brows and lashes! If you want to archive the ultimate lash lift, there are a few steps you should follow and brow lamination products you need: Apply to clean brows as the first step in your brow routine. Yes, but not for the first 24 hours. Your Stylist will wax and or thread your brows as part of the treatment and the follicles will remain open afterwards. Applying additional products around the brow area during this period may cause irritation, including spots and bumps. After 24 hours, feel free to apply whatever products you like to fill in your brows. After brow lamination, clear gels and fine tipped pencils work really nicely to keep that soft, natural and fluffy finish.
buy viagra online
top online pharmacy india: Online India pharmacy – indian pharmacy online
Как выбрать идеальный плинтус для пола, перед ремонтом.
Современные тренды в выборе цвета плинтуса, подчеркнуть дизайн помещения.
Шаг за шагом: установка плинтуса, даже без специальных навыков.
Почему плинтус сверкает в темноте, о которых вы не знали.
Выбор между деревянным и пластиковым плинтусом, который важно учитывать при покупке.
Как сделать плинтус необычным элементом декора, для оригинального оформления помещения.
Советы по подбору и установке плинтуса для ламината, с элегантным завершением пола.
Простые способы обеспечения безопасности с помощью плинтуса, для предотвращения травм.
Топ-5 современных трендов в использовании напольного плинтуса, для создания уютной атмосферы в доме.
Как плинтус влияет на общий вид помещения, для придания завершенности ремонту.
Лучшие способы украсить простой плинтус, которые преобразят ваш дом.
прогулочная коляска carrello bravo https://kolyaskicarello.ru/ .
Заказать такси https://taxi-gukovo.ru эконом в Гуково дешево с отзывами, ценами и телефонами, онлайн заказ.
п»їbest mexican online pharmacies: mexican mail order pharmacies – mexico drug stores pharmacies
номер такси город телефон такси
заказ такси шахты такси цена
стоимость такси дешевое такси новочеркасске
такси новочеркасск такси город телефон
Find high-quality fashion at lucky brand store.
First of all I want to say wonderful blog! I had a quick question that I’d like
to ask if you don’t mind. I was interested to know how you center yourself and clear your mind prior to writing.
I have had a tough time clearing my thoughts in getting my ideas out there.
I truly do take pleasure in writing however it just seems like the first
10 to 15 minutes are generally wasted simply just
trying to figure out how to begin. Any recommendations
or tips? Kudos!
mexico pharmacies prescription drugs: Purple pharmacy online ordering – mexico drug stores pharmacies
нужен подъемник грузовой нужен подъемник грузовой
Federation of Scout Associations of Spain https://scout.es/scout-academy-2017 is a non-profit entity whose registered office is located in Lake
A collection of 18-25-year olds from around the UK https://www.scouts.org.uk/volunteers/running-things-locally/recruiting-and-managing-volunteers/role-descriptions/uk-rep-pool/ who are trained to represent the UK Scouts at events in the UK and abroad.
cheap generic deflazacort – buy generic deflazacort over the counter purchase brimonidine online
purple pharmacy mexico price list: Best online Mexican pharmacy – mexico drug stores pharmacies
https://edpillpharmacy.store/# best online ed medication
mexican rx online: Certified Mexican pharmacy – buying prescription drugs in mexico
Играй в казино Vavada и выигрывай крупные суммы денег, наслаждайся процессом.
Выбери Vavada и окунись в мир азарта, добивайся больших результатов.
Ощути азарт и адреналин с Vavada Casino, играй с умом.
Начни выигрывать уже сегодня в Vavada Casino, начни игру.
Увлекательные слоты и азартные игры в Vavada Casino, выиграй крупный джекпот.
Попробуй удачу в Vavada и стань богаче, играй и выигрывай.
В Vavada Casino тебя ждет щедрый бонус при регистрации, бери бонусы и побеждай.
Ставь на свою удачу с Vavada, получай реальные деньги.
vavada casino играть https://vavadakiev.vavada-casino.com.ua/ .