利用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才可以完成的效果了，祝大家設計順利！
cheapest online pharmacy india: Online medicine home delivery – indian pharmacy
https://drugs24.pro/# herbal ed remedies
best online pharmacy india
10 Situations When You’ll Need To Be Educated About ADHD Treatment Adults natural treatment
for adhd – webdirectory777.com,
pharmacies in mexico that ship to usa mexican drugstore online medication from mexico pharmacy
Nine Things That Your Parent Taught You About ADHD Diagnosis UK Adults
adhd diagnosis Uk
indian pharmacies safe: top 10 online pharmacy in india – indian pharmacies safe
Профессиональный сервисный центр по ремонту сотовых телефонов в Москве.
Мы предлагаем: сервис по ремонту смартфонов
Наши мастера оперативно устранят неисправности вашего устройства в сервисе или с выездом на дом!
Replacement Porsche Key Tips From The Most Effective In The Industry Porsche Key For Sale
Профессиональный сервисный центр сервис ремонт телефонов сервис по ремонту смартфонов
купить диплом о высшем в улан удэ orik-diploms.ru .
Hi! I could have sworn I’ve visited this site before but after going through a few of the posts I realized it’s new to me. Regardless, I’m definitely pleased I stumbled upon it and I’ll be book-marking it and checking back regularly.
What Automotive Locksmith Experts Want You To Learn Locksmith Near Me For Auto
15 Undeniable Reasons To Love Best Home Coffee Machine best
dolce gusto machine (https://peatix.com/)
20 Up-And-Comers To Watch In The Toto Website Industry
먹튀검증 사이트
The 10 Most Scariest Things About Automatic Folding Mobility Scooter Reviews automatic folding
mobility scooter reviews (https://maps.google.nr/url?q=https://hardin-loomis-2.blogbright.net/10-facts-about-automatic-folding-mobility-scooter-second-hand-that-make-you-feel-instantly-a-good-mood)
Профессиональный сервисный центр по ремонту сотовых телефонов в Москве.
Мы предлагаем: сервисный центр по ремонту телефонов
Наши мастера оперативно устранят неисправности вашего устройства в сервисе или с выездом на дом!
bs2best at
ST666 – Lựa Chọn Hàng Đầu Trong Thế Giới Cá Cược Trực Tuyến
Trong thời đại mà ngành công nghiệp cá cược trực tuyến đang bùng nổ, việc chọn một nhà cái uy tín là yếu tố quan trọng để đảm bảo trải nghiệm chơi an toàn và đáng tin cậy. ST666 nhanh chóng khẳng định vị thế của mình trên thị trường với những dịch vụ chất lượng và hệ thống bảo mật cao cấp, mang lại trải nghiệm cá cược công bằng, thú vị và an toàn.
Hệ Thống Trò Chơi Đa Dạng
ST666 cung cấp một danh mục trò chơi cá cược đa dạng, đáp ứng mọi nhu cầu và sở thích của người chơi. Từ thể thao, bắn cá, game bài, cho đến xổ số và live casino, tất cả đều được tối ưu hóa để mang lại cảm giác hứng thú cho người tham gia. Đặc biệt, với Live Casino, người chơi sẽ được trải nghiệm cá cược với các dealer thật thông qua hình thức phát trực tiếp, tạo cảm giác như đang tham gia tại các sòng bài thực tế.
Tỷ Lệ Cược Cạnh Tranh
Một trong những ưu điểm nổi bật của ST666 chính là tỷ lệ cược cực kỳ cạnh tranh, giúp người chơi tối ưu hóa lợi nhuận của mình. Các trận đấu thể thao được cập nhật liên tục với tỷ lệ cược hấp dẫn, tạo cơ hội chiến thắng lớn cho những ai yêu thích cá cược thể thao.
Bảo Mật An Toàn Tuyệt Đối
Yếu tố bảo mật luôn là một trong những tiêu chí hàng đầu khi chọn nhà cái cá cược. ST666 sử dụng công nghệ mã hóa hiện đại để bảo vệ thông tin cá nhân và các giao dịch tài chính của người chơi, đảm bảo mọi dữ liệu luôn được bảo mật tuyệt đối. Người chơi hoàn toàn có thể yên tâm khi tham gia cá cược tại đây.
Chăm Sóc Khách Hàng Chuyên Nghiệp
Dịch vụ chăm sóc khách hàng của ST666 luôn sẵn sàng hỗ trợ 24/7 qua nhiều kênh khác nhau như Live Chat, WhatsApp, Facebook, đảm bảo giải đáp mọi thắc mắc và xử lý các vấn đề nhanh chóng. Đội ngũ nhân viên tại đây được đào tạo chuyên nghiệp, tận tâm và chu đáo, luôn đặt lợi ích của khách hàng lên hàng đầu.
Ưu Đãi Hấp Dẫn
ST666 không chỉ nổi bật với các sản phẩm cá cược mà còn thu hút người chơi bởi các chương trình khuyến mãi hấp dẫn. Người chơi có thể nhận được nhiều ưu đãi như 280k miễn phí khi đăng nhập hàng ngày, cùng các chương trình thưởng nạp và hoàn tiền liên tục, giúp tối đa hóa cơ hội chiến thắng.
Lý Do ST666 Là Lựa Chọn Hàng Đầu
Sự kết hợp hoàn hảo giữa giao diện hiện đại, hệ thống trò chơi đa dạng, dịch vụ khách hàng tận tâm và tỷ lệ cược cạnh tranh đã giúp ST666 trở thành một trong những nhà cái cá cược trực tuyến uy tín hàng đầu tại Việt Nam. Đối với những ai đang tìm kiếm một nhà cái an toàn và chuyên nghiệp, ST666 chắc chắn sẽ là lựa chọn không thể bỏ qua.
Kết Luận
Với những ưu điểm vượt trội, ST666 xứng đáng là địa chỉ cá cược uy tín và an toàn cho tất cả người chơi. Đăng ký ngay hôm nay để trải nghiệm hệ thống cá cược đẳng cấp và nhận những ưu đãi hấp dẫn từ ST666!
Over 7 years in development, the Rollga Method™ combines trigger points, acupressure points, fascial lines, meridians, and techniques like ART (Active Release Technique), MAT (Muscle Activation Technique), RPR (Reflexive Performance Reset) and others to optimize one’s health thru a new system of self care.
Download the Rollga App to learn about & tap into all that Rollga has to offer!
Сервисный центр предлагает качественный ремонт видеокамер jvc ремонт видеокамер jvc недорого
Профессиональный сервисный центр ближайший сервисный центр по ремонту телефонов сервис телефонов
https://amoxil.llc/# how to get amoxicillin
amoxiclav generic – generic augmentin 625mg levothroid generic
вывод из запоя стационар вывод из запоя стационар .
вывод из запоя круглосуточно сочи вывод из запоя круглосуточно сочи .
buy viagra online
быстрый вывод из запоя в стационаре быстрый вывод из запоя в стационаре .
Профессиональный сервисный центр по ремонту автомагнитол в Москве.
Мы предлагаем: сервис центр ремонта магнитол
Наши мастера оперативно устранят неисправности вашего устройства в сервисе или с выездом на дом!
http://zithromax.company/# can you buy zithromax over the counter in canada
zithromax online pharmacy canada
Профессиональный сервисный центр по ремонту автомагнитол в Москве.
Мы предлагаем: ремонт магнитол
Наши мастера оперативно устранят неисправности вашего устройства в сервисе или с выездом на дом!