利用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://seo-5.ru
Бонус Код Букмекерской Мелбет При Регистрации – это код для новых пользователей, так как он дает денежные призы на первый депозит новым игрокам. С их помощью вы получите на 30% больше возврата средств, чем при стандартной регистрации, или фрибет. Букмекерская контора Мелбет работает на рынке беттинга уже довольно долго. За время существования она успела получить доверие многотысячной аудитории игроков и сформировать четкую стратегию взаимодействия с клиентами. Для всех участников БК доступны различные поощрения, подарки и акции. Среди них – промокод на мелбет при регистрации, расширяющий список привилегий для нового, или активного пользователя.
оптимизация сайтов москва цена https://seo-5.ru
Магазин спецодежды blatta.ru
Если Вы планировали найти жилет рабочий спецодежда с карманами в интернете, то переходите на наш онлайн ресурс. Смотрите каталог нашей очень надежной, исключительной рабочей одежды. Завершилось то время, когда потребители выбирали низкие цены, пренебрегая качеством. Сегодня, в век инновационных технологий, новинки приходят и в область специальной одежды. Оцените самостоятельно, купив наши представленные модели.
комплексное seo продвижение в интернете цена https://seo-5.ru
Если вы искали где отремонтировать сломаную технику, обратите внимание – ремонт техники в челябинске
Sahabet Casino’da yeni oyuncular, en buyuk hos geldin bonuslar?n? alarak kazanmaya baslayabilir. Kazand?ran slotlar Sahabet’te kazananlar?n? bekliyor. En yuksek bonuslar? toplay?n ve 500% bonus elde edin. Sahabet, 2024’un en karl? kumarhanesi olarak dikkat cekiyor.
Gidin ve casino depozitonuzda +%500 kazan?n – Sahabet Gidin ve casino depozitonuzda +%500 kazan?n – Sahabet .
Если вы искали где отремонтировать сломаную технику, обратите внимание – выездной ремонт бытовой техники в барнауле
Если вы искали где отремонтировать сломаную технику, обратите внимание – профи тех сервис челябинск
Если вы искали где отремонтировать сломаную технику, обратите внимание – ремонт бытовой техники
This website is using a security service to protect itself from online attacks. The action you just performed triggered the security solution. There are several actions that could trigger this block including submitting a certain word or phrase, a SQL command or malformed data. © 2018 Santa Clara Açores – Futebol, S.A.D. – All rights reserved. Para pessoas com mobilidade reduzida. Utilizamos cookies para ajudá-lo a navegar com eficácia e executar certas funções. Encontrará informações detalhadas sobre todos os cookies em cada categoria de consentimento abaixo. This website is using a security service to protect itself from online attacks. The action you just performed triggered the security solution. There are several actions that could trigger this block including submitting a certain word or phrase, a SQL command or malformed data.
https://original.misterpoll.com/forums/133975/topics/345769
A Alemanha tem uma das economias mais robustas da Europa, portanto existe muito dinheiro disponível para os jogos de azar online. A lei alemã é muito rígida quando se trata de jogos e apostas. Em alguns estados, a atividade foi totalmente regulamentada e aqueles que jogam desfrutam da previsibilidade necessária para prosperar neste setor competitivo. Operadores online que não estão sediados na Alemanha também aceitam jogadores deste país, portanto, as opções de jogo são inúmeras. Os jogos de azar foram proibidos em 1946 pelo general Eurico Gaspar Dutra. Há versões na história que dão conta que o presidente teria tomado a decisão em nome da “moral e bons costumes” e sido influenciado pela primeira-dama, Carmela Dutra, conhecida por Santinha. Ela teria ouvido um chamado da Igreja Católica contra esses ambientes perniciosos dos cassinos.
Если вы искали где отремонтировать сломаную технику, обратите внимание – техпрофи
prawo jazdy na autobus
ремонт телевизоров москва выезд
vibration analysis
The Importance of Resonance Management Equipment in Industrial Equipment
In production environments, equipment as well as rotating equipment constitute the core of manufacturing. Nonetheless, one of the highly prevalent challenges that may hinder their functionality as well as longevity remains vibration. Oscillation may result in a series of complications, from minimized exactness as well as performance leading to increased deterioration, finally leading to expensive delays and maintenance. This scenario is when vibration regulation apparatus proves to be necessary.
Why Vibration Control is Important
Vibration within machines may lead to various adverse consequences:
Decreased Production Productivity: Excessive vibration may bring about imbalances and imbalance, reducing total efficiency in the devices. This can result in reduced production times along with greater electricity usage.
Heightened Damage: Ongoing vibrations increases the damage in equipment components, resulting in additional upkeep as well as the chance for unanticipated unforeseen malfunctions. Such a situation not only heightens operational costs and limits the lifespan of the existing systems.
Safety Dangers: Uncontrolled vibration might pose considerable dangers for both the equipment along with the operators. In severe cases, extreme situations, these could result in cataclysmic equipment failure, threatening operators and leading to widespread devastation to the environment.
Precision and Manufacturing Quality Issues: For businesses that depend on exact measurements, such as production as well as aerospace, resonance could bring about errors with production, leading to defects and more waste.
Economical Approaches to Oscillation Control
Investing in resonance control systems proves not only a necessity and a smart decision for any business any company that relies on equipment. We offer advanced vibration mitigation tools work to built to reduce vibrations in any machine or rotational systems, ensuring uninterrupted and efficient functioning.
What sets such equipment above the rest remains its affordability. We know the significance of cost-effectiveness in the modern competitive marketplace, and for that reason we offer top-tier vibration management solutions at rates that remain budget-friendly.
By selecting our systems, you’re not only securing your machinery as well as boosting its productivity but also investing towards the enduring success in your organization.
Final Thoughts
Vibration management is a vital element in ensuring the operational performance, safety, as well as lifespan of your machinery. Using our affordable vibration management tools, it is possible to be certain your operations run smoothly, your products remain top-tier, as well as your workers are protected. Never let oscillation affect your business—make an investment in the proper tools immediately.
Проведение дезинфекции в помещениях и на воздухе dezinfekciya-mcd.ru
По запросу обработка от тараканов Вы на нужном пути. Мы значимся официальной дезинфекционной и санитарной службой столицы России Москвы. Все работники квалифицированы, техника и препараты одобрены Роспотребнадзором, поэтому не нужно беспокоиться, позвонив нам, всё пройдет в лучшем виде. Также будет действовать гарантия до 5 лет на оказанные услуги.
Shop the latest trends at ag jeans.
Профессиональный сервисный центр по ремонту варочных панелей и индукционных плит.
Мы предлагаем: ремонт варочных панелей с гарантией
Наши мастера оперативно устранят неисправности вашего устройства в сервисе или с выездом на дом!
Профессиональный сервисный центр по ремонту бытовой техники с выездом на дом.
Мы предлагаем:сервис центры бытовой техники екатеринбург
Наши мастера оперативно устранят неисправности вашего устройства в сервисе или с выездом на дом!
The Significance of Vibration Regulation Systems in Mechanical Systems
Across industrial sites, devices and spinning systems serve as the backbone of output. Nonetheless, an of the commonly frequent problems which might hinder the operation and durability remains vibrations. Resonance may result in a range of complications, including lowered precision along with effectiveness to heightened damage, in the end resulting in pricey interruptions along with maintenance. This is where vibration control systems proves to be critical.
The Reason Vibration Management remains Important
Resonance within industrial equipment may lead to various detrimental impacts:
Decreased Operational Effectiveness: Excessive vibration may lead to misalignment and instability, lowering the productivity with the equipment. This could result in slower production schedules as well as higher energy use.
Heightened Wear and Tear: Continuous resonance accelerates total erosion of mechanical parts, causing increased repairs and the chance of unexpected unforeseen malfunctions. Such a scenario not only increases production expenses as well as shortens the longevity for the devices.
Safety Hazards: Uncontrolled oscillation may pose considerable dangers to the machinery and the machinery along with the operators. In extreme situations, severe cases, it can bring about devastating equipment failure, threatening personnel and leading to extensive destruction in the site.
Accuracy and Quality Problems: Within industries that demand precise production, including manufacturing as well as aerospace, vibration may bring about errors with the manufacturing process, resulting in flawed products and increased waste.
Cost-effective Alternatives for Vibration Management
Investing in vibration control apparatus is not merely a necessity but a wise choice for all businesses that any industry involved with mechanical systems. Our modern vibration management systems are designed to designed to remove oscillation from any machinery as well as rotating equipment, providing smooth as well as productive processes.
What sets our systems above the rest remains its affordability. We know the value of cost-effectiveness in the current market, which is why we provide high-quality vibration control solutions at rates that remain budget-friendly.
Through selecting our equipment, you’re not only safeguarding your mechanical systems as well as boosting its efficiency but also putting resources in the sustained success of your operations.
Conclusion
Vibration control proves to be a necessary component in ensuring the effectiveness, safety, and durability of your machinery. With these reasonably priced resonance mitigation apparatus, it is possible to be certain your processes run smoothly, all manufactured items remain top-tier, and all personnel stay secure. Do not let oscillation undermine your operations—invest in the appropriate systems today.
Букмекерская контора Melbet является одним из столпов международной беттинговой индустрии. За счет масштабной маркетинговой компании, высоких коэффициентов и оперативной технической поддержки БК Мелбет удалось привлечь и удержать большое количество игроков. На сегодняшний день, букмекер предлагает получить один из самых высоких бонусов на рынке – 10400 рублей. Размер бонуса в Melbet составляет 100% от суммы первого пополнения, но не менее 100 рублей и не более 10400. К примеру, если пополнить баланс на сумму 4000, то справа от основного счета появится бонусный. Как видим, использовать промокод для мелбет имеет смысл, особенно тем бетторам и бонусхантерам, которые привыкли заключать пари по-крупному. С учетом того, что он бесплатный – воспользоваться им может абсолютно любой игрок.
оптимизация сайтов недорого продвижение сайтов москва
Букмекерская контора «Мелбет» – это уникальная возможность для всех желающих получить дополнительный доход. Здесь можно делать ставки на самые разные спортивные события по всему миру. Высокие коэффициенты, круглосуточная техническая поддержка, удобное мобильное приложение и многие другие преимущества проекта делают его весьма популярным среди любителей азартных игр. Доступ на виртуальную площадку открыт лишь для зарегистрированных пользователей. мелбет промокод при регистрации помогут сэкономить как начинающим, так и опытным игрокам. В такой надежной и стабильной букмекерской конторе вы всегда можете быть уверены.
разработка сайтов москва недорого продвижение сайта москва
комплексное продвижение сайтов заказать продвижение сайта
Профессиональный сервисный центр по ремонту источников бесперебойного питания.
Мы предлагаем: ремонт бесперебойников
Наши мастера оперативно устранят неисправности вашего устройства в сервисе или с выездом на дом!
Simply want to say your article is as surprising. The clearness in your post is just nice and i could assume you’re an expert on this subject. Fine with your permission let me to grab your RSS feed to keep updated with forthcoming post. Thanks a million and please continue the rewarding work.
https://posmicrobiologiaagricola.ufv.br/pags/?pin-up-bet-site-oficial_1.html
Профессиональный сервисный центр по ремонту Apple iPhone в Москве.
Мы предлагаем: ремонт iphone в москве
Наши мастера оперативно устранят неисправности вашего устройства в сервисе или с выездом на дом!
ремонтная мастерская телефонов
https://vavada.auction/# вавада зеркало