利用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才可以完成的效果了，祝大家設計順利！
Профессиональный сервисный центр по ремонту парогенераторов в Москве.
Мы предлагаем: отремонтировать парогенератор
Наши мастера оперативно устранят неисправности вашего устройства в сервисе или с выездом на дом!
Если вы искали где отремонтировать сломаную технику, обратите внимание – профи тех сервис волгоград
Заблокировано? Не беда! Находите актуальные зеркала Cryptoboss Casino здесь, играйте без проблем!
Попробуйте свою удачу на новом зеркале Cryptoboss Casino, полный контроль гарантированы.
Официальное зеркало Cryptoboss Casino ждет вас прямо сейчас, не упустите другие варианты!
Узнавайте самую актуальную информацию на зеркале Cryptoboss Casino!, играйте и выигрывайте!
Не забудьте использовать зеркало Cryptoboss Casino для безопасной игры, получайте удовольствие без лишних хлопот!
cryptoboss casino зеркало cryptoboss casino официальный зеркало .
Если вы искали где отремонтировать сломаную технику, обратите внимание – профи тюмень
1xBet
A 1xBet promotion code is an alphanumeric string that unlocks special promotions on the platform, such as free bets, deposit bonuses, or free spins. These codes are often provided as part of special events or partnerships.
Если вы искали где отремонтировать сломаную технику, обратите внимание – ремонт бытовой техники в тюмени
farmacias online baratas: mejores farmacias online – farmacia online envГo gratis
4rabet promo code free: Refers to the promo code for 4rabet that players can use to get bonuses like deposit matches or free bets, often promoted through affiliate channels.
вибрация двигателя
ООО «Кинематика»: Эффективные услуги для вращательной балансирования и диагностики промышленного оборудования
Компания ООО «Кинематика» работает на разработке и выпуске высокоточных систем для уравновешивания и контроля устройств. Товары компании применяется для поддержки и техобслуживания различных техномеханизмов, включая вентиляторы, мельницы, карданные валы, передачи крутящего момента и металлообрабатывающие станки.
Основополагающие изделия компании:
1. Arbalance — компактный балансировочный виброметр
Система создан для сбалансированности оборудования оборудования в заводской сборке в собственных узлах. Прибор Арбаланс предлагает надёжную точность балансировки с уменьшенными тратами. Основные его преимущества:
Автоматическая система вычислений: работает автономно.
Анализ спектра вибрации: выявляют неполадки.
Двойной канал измерения: обеспечивает измерение вибрации одновременно в двух направлениях, улучшая результаты.
Цена: 84 тыс. руб.
2. Balcom-1A — малогабаритный виброметр-балансировщик
Балком-1А подходит для балансировки вращательных механизмов в штатных подшипниках. Главной особенностью является простота использования и автоматизированный процесс расчета. Система дополнена:
Два вибрационных канала.
Аналитическая система для диагностики состояния оборудования.
Цена: 73000 руб.
3. Модуль Балком-2 — измерительная система для балансировочных станков
Устройство Балком-2 эксплуатируется в балансировочных станках для виброизмерений. Он гарантирует возможность высокоточной балансировки систем и других агрегатов в технике.
Цена: от 90 тыс. руб. до 95 тыс. руб. в зависимости от оборудования.
4. Модуль Балком-4 — для балансировки в нескольких плоскостях карданных валов
Устройство Балком-4 предназначен для балансировки карданов и эксплуатируется в индустриальных установках. Этот прибор даёт высокую точность и точные измерения при многоплоскостной сбалансированности.
Цена: от 100 тыс. руб. до 126 000 руб..
Передовые системы контроля и диагностики
Фирма «Кинематика» также проектирует устройства для непрерывной диагностики техники и механизмов. Эти приборы используют индуктивные датчики для оценки колебаний и других показателей. Например, Реконт даёт возможность контролировать состояние редукторов по параметрам кинематической точности и вращательным движениям.
farmacias direct: farmacia online envio gratis murcia – farmacias online seguras
https://sildenafilo.men/# comprar viagra en espaГ±a amazon
Профессиональный сервисный центр по ремонту парогенераторов в Москве.
Мы предлагаем: ремонт парогенератора цена
Наши мастера оперативно устранят неисправности вашего устройства в сервисе или с выездом на дом!
farmacias online baratas: Cialis sin receta – farmacias online seguras en espaГ±a
Зарегистрируйтесь на cryptoboss casino и получите эксклюзивный бонус, Cryptoboss casino: регистрация проходит быстро и просто, Начните путь к большим выигрышам с регистрации на сайте cryptoboss casino, Уникальная атмосфера cryptoboss casino для зарегистрированных пользователей, Станьте частью cryptoboss casino уже сегодня, Не упустите возможность зарегистрироваться на cryptoboss casino и выиграть крупный приз, Пройдите регистрацию на cryptoboss casino и откройте доступ к лучшим играм, Присоединяйтесь к cryptoboss casino и начните выигрывать большие суммы денег, Cryptoboss casino готов принять вас – пройдите регистрацию и начните играть, Cryptoboss casino ждет вас – присоединяйтесь и начните играть, Присоединяйтесь к cryptoboss casino и получите шанс на крупный выигрыш, Регистрация на сайте cryptoboss casino – ваш первый шаг к азартным приключениям, Регистрация на cryptoboss casino – ваш путь к финансовой независимости, Регистрация на cryptoboss casino – ваш ключ к миру больших выигрышей, Зарегистрируйтесь на cryptoboss casino и начните путь к успеху, Cryptoboss casino приглашает вас стать его частью – зарегистрируйтесь и начните играть.
криптобосс регистрация cryptoboss casino2 one криптобосс регистрация cryptoboss casino2 one .
Профессиональный сервисный центр по ремонту бытовой техники с выездом на дом.
Мы предлагаем: ремонт бытовой техники в перми
Наши мастера оперативно устранят неисправности вашего устройства в сервисе или с выездом на дом!
Профессиональный сервисный центр по ремонту бытовой техники с выездом на дом.
Мы предлагаем: сервисные центры по ремонту техники в перми
Наши мастера оперативно устранят неисправности вашего устройства в сервисе или с выездом на дом!
https://farmaciaeu.com/# farmacias online seguras
farmacia online 24 horas
cyproheptadine price – cost periactin buy tizanidine 2mg generic
Профессиональный сервисный центр по ремонту кнаручных часов от советских до швейцарских в Москве.
Мы предлагаем: срочный ремонт часов
Наши мастера оперативно устранят неисправности вашего устройства в сервисе или с выездом на дом!
Успех ждет вас в Cryptoboss Casino
cryptoboss официальный криптобосс официальный сайт рабочее .
viagra online cerca de bilbao: viagra generico – comprar viagra en espaГ±a envio urgente contrareembolso
http://sildenafilo.men/# sildenafilo 100mg precio farmacia
1xBet
In 2024, 1xBet continues to offer an attractive welcome bonus for new users. This bonus typically includes a match on the first deposit, providing extra funds to start betting on the platform. Promo codes can enhance this offer with additional free bets or free spins.
Профессиональный сервисный центр по ремонту бытовой техники с выездом на дом.
Мы предлагаем: сервисные центры в перми
Наши мастера оперативно устранят неисправности вашего устройства в сервисе или с выездом на дом!
срочный ремонт кондиционера
п»їfarmacia online espaГ±a: cialis 20 mg precio farmacia – п»їfarmacia online espaГ±a
Если вы искали где отремонтировать сломаную технику, обратите внимание – ремонт бытовой техники
Профессиональный сервисный центр по ремонту бытовой техники с выездом на дом.
Мы предлагаем: сервис центры бытовой техники пермь
Наши мастера оперативно устранят неисправности вашего устройства в сервисе или с выездом на дом!
Kometa Casino: Превосходный Шанс для Виртуальных Азартных игр
В сфере онлайн-казино Казино Kometa завоевало признание благодаря разнообразию развлечений, выгодным бонусам и высококачественному поддержке. Эта сайт привлекает внимание пользователей по всему миру своими уникальными предложениями и регулярными акциями. В данной обзоре мы обсудим, почему Kometa Casino является высоко оцениваемой игровых площадок.
Преимущества Казино Kometa
Главной чертой, выделяющих Kometa, является внимание на удовольствие клиентов. Сайт гарантирует огромное количество игр, среди которых каждый откроет любимое развлечение. Это включает привычные игры, и еще инновационные варианты с новаторскими функциями. Бонусом является то, что Kometa предлагает 24/7 помощь клиентов, создавая удобное и надежное окружение.
Основные характеристики Казино Kometa:
Год основания: 2024
Лицензия: Curacao
Ассортимент: Более 1000
Поддержка: Постоянная чат и электронная почта
Мобильный доступ: Имеется
Методы оплаты: Mastercard
Защита: SSL-шифрование
Начальные бонусы
Одним из главных плюсов Казино Kometa являются выгодные стартовые предложения для начинающих пользователей. После входа на сайт пользователи имеют право на к уникальным промоакциям, чем могут начать развлечение с минимальными рисками. Эти поощрения создают благоприятные условия для начинающих, давая возможность улучшить свои возможности выиграть с самого начала.
Огромный выбор игр
Казино Kometa предоставляет огромное разнообразие игр на все предпочтения. Игроки могут играть классическими слотами, играми за столом, а также реальными дилерами. Благодаря передовым технологиям визуальных эффектов и музыкальному фону, каждый игрок может максимально вникнуть в процесс игры.
Частые промо и активности
Для игроков сайт часто организует акции и турниры с ценными призами. Акции проводятся каждый месяц, придавая игровой опыт более захватывающим и захватывающим. Это позволяет игрокам не только наслаждаться развлечениями, но и зарабатывать дополнительные бонусы и награды.
Зачем выбирать
Kometa — это превосходное соединение множества развлечений, отличной поддержки и надежной системы. Сайт отличается своим фокусом на клиентах и желанием совершенствовать опыт пользователей. Без учета опыта, все найдет в Kometa Casino развлечение, которое сделает его время на платформе увлекательным и приятным.
Становитесь частью Казино Kometa и играйте с удовольствием яркими эмоциями и интересными развлечениями каждый день!
Профессиональный сервисный центр по ремонту кнаручных часов от советских до швейцарских в Москве.
Мы предлагаем: ремонт наручных часов
Наши мастера оперативно устранят неисправности вашего устройства в сервисе или с выездом на дом!