利用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才可以完成的效果了，祝大家設計順利！
ретрит на выходные https://ретриты.рф
ретрит тур для женщин https://ретриты.рф
Sahabet Casino’da yeni oyuncular, en buyuk hos geldin bonuslar?n? alarak oyuna kat?labilir. Kazand?ran slotlar Sahabet’te buyuk kazanclar sunuyor. Bu f?rsat? kac?rmay?n ve ilk depozitoda buyuk avantajlar kazan?n. Sahabet, buyuk oduller sunan kumarhane olarak dikkat cekiyor.
Тогда, когда реализуется смена нижних брёвен, тогда бревно или разгружается от напряжения и происходит демонтаж и монтаж, потому что чтобы заменить подъём строения не превышает 10 см см, которое не является критичным включая для внутренних частей отделки.
нижние брёвна или брус из лиственных более долговечней и успешно доказал свою надежность благодаря обладанию устойчивостью и устойчивостью к разрушению. Тем не менее, данную балку обязательно следует обработать через применение антибактериального состава, аналогично и все остальные балки.
Наша организация занимается не исключительно восстановлением сооружений, а также улучшением напольных систем. Наши заказчики зачастую запрашивают утепленные полы с термической изоляцией наш персонал Комплектуем заказ материалами и обеспечиваем индивидуальные скидки.
частная скорая наркологическая помощь частная скорая наркологическая помощь .
снятие ломки снятие ломки .
pharmacy online 365: rx pharmacy store – online pharmacy classes
b1 prawo jazdy
Официальный сайт лучшего казино Lex Casino, где ждут захватывающие игры и крупные выигрыши.
Посетите Lex Casino и окунитесь в мир азартных развлечений, здесь каждый найдет что-то по душе.
Успех и удача ждут вас на сайте Lex Casino, мы создали идеальные условия для вашей победы.
Официальный сайт Lex Casino – это ваш ключ к миру азарта, играйте и выигрывайте с нами.
lex casino промокод lex casino официальный сайт .
Both informative and thought-provoking, as if my brain needed the extra workout.
levitra pharmacy coupon: online pharmacy no prescription klonopin – cialis pharmacy cost
Your style is unique in comparison to other folks I have read stuff from.
Thanks for posting when you’ve got the opportunity, Guess I’ll just book mark this site.
Профессиональный сервисный центр по ремонту варочных панелей и индукционных плит.
Мы предлагаем: сколько стоит ремонт варочной панели
Наши мастера оперативно устранят неисправности вашего устройства в сервисе или с выездом на дом!
Профессиональный сервисный центр по ремонту бытовой техники с выездом на дом.
Мы предлагаем:сервисные центры по ремонту техники в екб
Наши мастера оперативно устранят неисправности вашего устройства в сервисе или с выездом на дом!
Если вы искали где отремонтировать сломаную технику, обратите внимание – профи челябинск
Профессиональный сервисный центр по ремонту варочных панелей и индукционных плит.
Мы предлагаем: надежный сервис ремонта варочных панелей
Наши мастера оперативно устранят неисправности вашего устройства в сервисе или с выездом на дом!
Профессиональный сервисный центр по ремонту бытовой техники с выездом на дом.
Мы предлагаем:ремонт бытовой техники в екб
Наши мастера оперативно устранят неисправности вашего устройства в сервисе или с выездом на дом!
Отличный вариант для тех, кто любит рисковать | Выигрывайте крупные суммы на Casino Kometa com | Увлекательные игры и высокие шансы на победу | Станьте победителем благодаря Casino Kometa com | Играйте в любимые игры в любое время суток на Casino Kometa com | Играйте с уверенностью в своей безопасности на Casino Kometa com | Находите игру по своему вкусу на Casino Kometa com | Выбирайте из лучших игр и погружайтесь в мир азарта | Обращайтесь за помощью и наслаждайтесь игрой без забот | Удобные способы оплаты для вашего комфорта | Легко и удобно управляйте финансами в игровом процессе | Получите удовольствие от игры без лишних переживаний | Без лишних сложностей начните играть на Casino Kometa com | Попробуйте свежие игры и удивитесь новым возможностям | Обновляйте свой игровой опыт с помощью новинок на Casino Kometa com
kometa casino вход casino kometa com .
Профессиональный сервисный центр по ремонту варочных панелей и индукционных плит.
Мы предлагаем: ремонт индукционных варочных панелей
Наши мастера оперативно устранят неисправности вашего устройства в сервисе или с выездом на дом!
Профессиональный сервисный центр по ремонту бытовой техники с выездом на дом.
Мы предлагаем:ремонт крупногабаритной техники в екатеринбурге
Наши мастера оперативно устранят неисправности вашего устройства в сервисе или с выездом на дом!
Промокод 1xBet на сегодня и бесплатно. Промокоды 1хбет 2024 требуется использовать те, которые предоставят игрокам самые лучшие бонусы. Каждый из них позволяет увеличить первый депозит в 2 раза, максимальная сумма увеличения – 100 долларов. Большое количество промокодов — одна из причин того, что на сайте регистрируется огромное количество новых игроков каждый день. На данный момент их количество превышает пятьсот тысяч уникальных пользователей каждый день. Действующие промокоды позволяют увеличить размер приветственных баллов до 32 500 рублей. Для этого нужно лишь активировать при регистрации имеющийся код, скопировав его в соответствующее поле. Букмекерская контора 1ХБет является одной из самых влиятельных на рынке игорного бизнеса в России и не нуждается в особом представлении. Впрочем, букмекер продолжает держать статус одного из самых щедрых и предлагает своим клиентам воспользоваться промокодами для халявы, – более подробно в этом материале https://www.jkfitness.com/wp-content/pags/1xbet___promo_code_for_registration.html.
https://drstore24.com/# viagra pharmacy cost
online pharmacy glucophage
капельница от запоя на дому в Коломне капельница от запоя на дому в Коломне .
вывод из запоя на дому ростов недорого vyvod-iz-zapoya-rostov12.ru .
Digital gaming platforms provide an exhilarating array of games, numerous of which currently incorporate virtual currency as a way to pay. Among the best platforms, BC Game, Fortune Panda, Axe, and Kingz Casino are gaining popularity, as Bit Starz is notable with numerous awards. Cloudbet Casino is known for its status as an officially licensed crypto casino, providing the security of players and integrity, while Fair Spin Casino together with Mbit Casino feature an extensive variety of digital currency games.
When it comes to dice-based games, cryptocurrency casinos such as Bitcoin Dice bring a fun gaming experience, enabling gamblers to bet with Bitcoin and other cryptocurrencies including Ether, Litecoin, DOGE, Binance Token, and Tether.
For a majority of online gambling enthusiasts, picking a reliable provider is important. Thunderkick Casino, Play’n Go Casino, Red Tiger Gaming, Quickspin, Pragmatic, Playtech, NLC, NetEnt Casino, ELK, and Microgaming Casino are listed among the leading game providers recognized for their innovative slots, high-quality graphics, and user-friendly interfaces.
Casino streams has grown into a new thrilling way for gamblers to interact in casino games. Popular streamers like ClassyBeef, Roshtein, Labowsky, DeuceAce, and X-Posed share their gaming experiences, frequently showing massive jackpots and providing tips on winning strategies in gambling.
Additionally, casinos such as BC Casino, Bitkingz, and Rocketpot Casino also offer Plinko games, a widely played game with straightforward mechanics but a high chance for high payouts.
Learning about responsible gambling, refund options, and anonymous gaming in crypto casinos is important for gamblers wanting to optimize their experience. Picking the best crypto wallet, choosing no-sign-in platforms, and understanding strategies for games such as Aviator enables users to stay informed while playing the excitement of the game.
The Significance of Oscillation Regulation Equipment in Machines
In industrial contexts, equipment and rotating equipment act as the support of output. Yet, one of the commonly frequent concerns which might obstruct their operation and longevity remains vibrations. Vibration could cause a series of challenges, from minimized precision as well as performance resulting in elevated damage, in the end resulting in pricey downtime and fixes. This scenario is where vibration management systems proves to be vital.
Why Vibration Management is Important
Vibration in machines can result in various harmful effects:
Lowered Operational Efficiency: Excessive oscillation could bring about misalignment as well as unbalance, minimizing overall performance of the equipment. Such a scenario may bring about reduced production schedules as well as increased energy use.
Increased Erosion: Constant vibrations accelerates overall wear and tear to machinery parts, causing more regular upkeep and a chance for unforeseen malfunctions. This not only increases operational costs as well as reduces the lifespan of the machinery.
Safety Concerns: Unchecked vibrations may bring significant safety concerns to both the equipment and the equipment along with the operators. In extreme situations, severe cases, it could result in cataclysmic equipment breakdown, jeopardizing workers and causing widespread damage to the premises.
Exactness and Production Quality Challenges: For sectors where depend on high accuracy, for example production or space industry, vibrations might bring about flaws in the production process, causing flawed products and increased waste.
Economical Approaches for Vibration Management
Investing into vibration control systems remains not just a necessity but a wise choice for any organization dependent on machinery. We offer state-of-the-art vibration management systems work to intended to reduce resonance from any mechanical systems or rotating equipment, ensuring seamless and efficient functioning.
What sets our apparatus apart is its cost-effectiveness. We know the significance of cost-effectiveness in the competitive market of today, which is why we have top-tier vibration control solutions at pricing that are affordable.
By selecting our offerings, you’re not only safeguarding your machinery and increasing its operational effectiveness you’re also putting resources into the long-term success of your operations.
Final Thoughts
Vibration control remains an essential aspect of maintaining the effectiveness, safety, and durability of your machines. Through these reasonably priced vibration management tools, you can ensure that your processes operate seamlessly, your products maintain top quality, along with your workers remain safe. Don’t let vibrations undermine your machinery—make an investment in the proper tools today.
Получите шанс выиграть большие деньги в онлайн казино, заработайте крупный выигрыш в интернет казино, Выберите лучшее онлайн казино и выигрывайте крупные суммы, Онлайн казино с возможностью выигрыша реальных денег, получите адреналин и азарт от игры в казино онлайн, Онлайн казино с быстрыми выплатами и надежной защитой данных, Получите шанс стать миллионером в интернет казино, Играйте в казино на деньги с максимальными шансами на победу, зарабатывайте деньги, играя в казино онлайн, Играйте в азартные игры с реальными ставками в онлайн казино, Онлайн казино с возможностью сорвать джекпот, Присоединяйтесь к игрокам, которые уже зарабатывают в онлайн казино, Играйте в онлайн казино и станьте обладателем крупного выигрыша, Играйте в азартные игры на деньги и выигрывайте, Онлайн казино с возможностью быстрого заработка, получите шанс выиграть крупные суммы в онлайн казино на деньги, Онлайн казино для тех, кто готов рисковать ради денежного выигрыша.
лучшие сайты игровых автоматов на деньги online casino на деньги .
ремонт фототехники москва
online pharmacies in usa: compounding pharmacy – meijer pharmacy hours
Thank you for making hard to understand topics accessible and engaging.