利用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才可以完成的效果了，祝大家設計順利！
Discover unique fashion pieces at citizens of humanity.
Explore a wide range of styles at paige jeans outlet.
Оптимальные цены на съем экскаватора погрузчика
аренда трактора с ковшом https://arenda-ekskavatora-pogruzchika197.ru/ .
https://pouyapackage.ir/پویاپکیج همراه شماست
Лучший выбор для аренды автобуса в СПб|Передвигайтесь по Санкт-Петербургу в удобстве и безопасности|Выбирайте из разнообразных моделей автобусов для аренды в Санкт-Петербурге|Приятные цены на аренду автобусов в Санкт-Петербурге|Аренда автобуса на любое мероприятие в СПб|Легко и быстро арендовать автобус в СПб|Отправляйтесь в увлекательное путешествие на арендованном автобусе|Обеспечьте комфортную поездку для сотрудников на корпоративе с помощью аренды автобуса в Санкт-Петербурге|Аренда автобуса для свадеб в СПб|Опытные водители и комфортные автобусы в аренде в СПб|Современные технологии и удобства наших автобусов в аренде в СПб|Разнообразие поездок на автобусе в СПб|Экономьте на поездках по Санкт-Петербургу с нашими специальными предложениями на аренду автобуса|Индивидуальные маршруты на арендованном автобусе в СПб|24/7 поддержка для клиентов аренды автобусов в СПб|Необычайное удовольствие от поездок на арендованных автобусах в СПб|Удобные условия аренды автобуса в СПб для каждого клиента|Легальная аренда автобусов в СПб|Интересные предложения для аренды автобуса в СПб|Быстрая и удобная аренда автобуса в СПб
аренда автобуса с водителем https://arenda-avtobusa-178.ru/ .
The article was a joy to read, and The enthusiasm is as infectious as The charm.
اجاره دستگاه زردی ، فتوتراپی نوزاد در مجموعه ایران زردی
trileptal for sale – buy generic pirfenidone online synthroid buy online
Услуги по аренде спецтехники в Москве, надежно и выгодно.
Лучшие предложения по аренде техники в столице, только у нас.
Где арендовать экскаватор-погрузчик в Москве?, готовы к сотрудничеству.
Быстро и удобно, доступно в нашем сервисе.
Выберите лучший вариант для своего проекта, с нами выгодно.
Как выбрать технику для строительства, в столице.
Экономьте время и деньги, заказывайте доступную технику.
Аренда экскаватора-погрузчика в Москве: важная информация, в Москве.
Лучшие предложения для строительства, в Москве.
Куда обратиться за арендой техники, в столице.
Плюсы аренды экскаватора-погрузчика в Москве, в нашем сервисе.
Как выбрать экскаватор-погрузчик для аренды в Москве?, у нас в сервисе.
Аренда экскаватора-погрузчика в Москве: лучшие предложения, в Москве.
Какие условия аренды экскаватора-погрузчика в Москве?, у нас в сервисе.
Экскаватор-погрузчик в аренду в Москве: оптимальное решение, в столице.
Срочная аренда экскаватора-погрузчика в Москве: где заказать?, у нас в сервисе.
Выбор техники для строительных работ, в Москве.
Выбор экскаватора-погрузчика в Москве: где найти лучшее предложение?, в столице.
арендовать экскаватор погрузчик в москве https://arenda-ekskavatora-pogruzchika197.ru/ .
Upgrade your wardrobe with elegant pieces from pistola jeans sale.
Discover exclusive collections at stussy jeans.
Upgrade your style with chic fashion from forever 21.
Прокат автобусов в СПб на выгодных условиях, автобус для поездки.
Выгодные предложения на аренду автобуса в Санкт-Петербурге, выбирайте нашими услугами.
Комфортабельные автобусы для аренды в СПб, езжайте с комфортом.
Аренда автобуса для торжества в Санкт-Петербурге, без лишних хлопот.
Удобный трансфер в Санкт-Петербурге на автобусе, быстро и безопасно.
Организация корпоратива с арендованным автобусом в Санкт-Петербурге, оригинально и ярко.
Экскурсия на комфортабельном автобусе в Санкт-Петербурге, ярко и насыщенно.
Экскурсионный автобус для школьников в СПб, безопасно и познавательно.
Транспортировка гостей на свадьбу в Санкт-Петербурге на арендованном автобусе, красиво и романтично.
Как выбрать автобус для аренды в СПб, важные рекомендации от наших экспертов.
Способы сэкономить на аренде автобуса в Санкт-Петербурге, со всеми выгодами.
Что входит в стоимость аренды автобуса в Санкт-Петербурге, ознакомьтесь перед заказом.
Аренда автобуса с водителем в СПб: плюсы и минусы, подробное сравнение.
Сравнение стоимости аренды автобуса в СПб: как выбрать выгодное предложение, подробное рассмотрение.
Прокат мини-автобусов для узкого круга пассажиров в СПб, удобно и экономно.
Трансфер на фестиваль в СПб на арендованном автобусе, с учетом всех особенностей.
Развлекательные мероприятия на арендованном автобусе в СПб
аренда автобуса спб https://arenda-avtobusa-v-spb.ru/ .
Discover the perfect blend of style and comfort at R13 Clothing.
продвижение сайтов по москве в топ https://www.prodvizhenie-sajtov-v-moskve119.ru .
Разработка сайтов с Web Responsive Pro: Ваш путь к успеху
Если вы хотите создать классный сайт, врп – это компания, которая вам нужна. Мы занимаемся разработке сайтов, работаем с платформой 1С-Битрикс.
Профессионалы своего дела врп предлагает разработку и поддержку сайтов на базе Битрикса, обеспечивая высокое качество. Мы разрабатываем сайты, которые привлекают клиентов.
Создание сайтов wrp предполагает использование современных технологий, создание сайтов на Битриксе. Наша команда являются экспертами, благодаря чему мы гарантировать высокое качество.
Действуйте сейчас, обратитесь к нам для создания сайта уже сегодня! Свяжитесь с нами по телефону +7 (495) 230-20-53, чтобы обсудить ваш проект. Web Responsive Pro – компания, которой можно доверять.
So basically, the odds are intended to show which fighter is more likely to win the fight. The fighter most likely to win is called the favorite, while the fighter unlikely to win is called the underdog. DISCLAIMER: This site is 100% for entertainment purposes only and does not involve real money betting. Kamaru Usman holds the record for longest win streak, winning 15 consecutive fights, in which six were title fights. In addition to the normal moneyline odds and rounds choice on the fight, you can also find props on big fights where you can bet on each fighter to win by KO TKO, submission or decision and you may also find props where you can bet on the exact round the fight will end in. Yes, there are a number of other UFC bet options available besides predicting the winner in most fights, including Method of Victory, Round Betting, Total Rounds, Round Groups betting, when will the fight end and sometimes other UFC proposition bets (‘prop bets’ for short), which cover bets beyond these popular ones, particularly the more high-profile fights.
https://finnvise556889.blogolenta.com/24334880/manual-article-review-is-required-for-this-article
So, can the Heat repeat their Game 1 magic on Wednesday, or will the Bucks bounce back to even the series at home? In this article, you can check out odds and spreads for the Nuggets vs. Bucks matchup across multiple sportsbooks. 58-24 1st in the Central Place your legal, online sports bets in CO and NJ at Tipico Sportsbook now. Mike Budenholzer is the head coach of the Milwaukee Bucks. Here’s a look at the odds, spread and over under for this matchup at different sportsbooks. Betting on games while they’re in-play is known as live betting, which can be a fruitful strategy for those who prepare ahead of time. Take a game that has the Bucks favored at -250 on the moneyline in their matchup with the Golden State Warriors who are +200 on the moneyline. A $100 bet on the Bucks before the game starts would only make a $40 profit.
prednisone 2 mg daily https://prednisonebestprice.pro/# 54 prednisone
can i order prednisone
buy viagra online
Link pyramid, tier 1, tier 2, tier 3
Top – 500 links with positioning embedded in compositions on content platforms
Secondary – 3000 domain Forwarded connections
Tier 3 – 20000 references assortment, feedback, writings
Using a link structure is useful for online directories.
Require:
One connection to the platform.
Keywords.
Correct when 1 key phrase from the page subject.
Remark the additional service!
Vital! Top links do not coincide with Secondary and 3rd-level hyperlinks
A link hierarchy is a instrument for boosting the circulation and backlink portfolio of a internet domain or social network
خالهای صورت هیچ ضرری برای انسان ندارند، اما در بعضی از مواقع به دلیل ظاهر نامطلوب و اثر بدی که روی چهره میگذارند، افراد دوست دارند آنها را محو کنند. برداشتن خال نیز روشی کاملاً مطمئن و بیضرر است. فقط باید پیش از برداشت آن خال را مورد آزمایش قرار بگیرد. اگر قصد دارید این کار را انجام دهید، فصل زمستان و پاییز مناسب هستند؛ زیرا هر چقدر جای زخمها کمتر در معرض نور مستقیم آفتاب باشد، آن زخم سریعتر خوب میشود؛ بنابراین سعی کنید برای برداشت لک صورت و خال صورتتان فصل زمستان را انتخاب کنید. همچنین در این فصل به راحتی میتوانید نکات و دستورالعملهای بهداشتی را رعایت کرده و کمتر عرق خواهید کرد.
Здравствуйте!
Мы изготавливаем дипломы любой профессии по приятным тарифам.
bytovymagazin.cz/купить-диплом-колледжа-весь
nolvadex online: tamoxifen and bone density – tamoxifen rash
I’m amazed by The knowledge, almost as much as I’m drawn to the way you present it. Share more, please?
ВНЖ Испании ВНЖ Испании .
امید اکسیژن برگذار کننده کلاس های آموزش آرایشگری از صفر تا صد در شرق تهران https://omid.vip/
pct nolvadex: benefits of tamoxifen – tamoxifen generic
проститутки одинцово https://vrn.prostitutki.sex
проститутки новокосино https://vlg.prostitutki.sex
Привет!
Мы изготавливаем дипломы любых профессий по приятным ценам.
ldkladno.cz/test/2024/06/30/диплом-специалиста-2011-2013-видео