利用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才可以完成的效果了，祝大家設計順利！
erythromycin ophthalmic
Green Acres isn’t the place to be. Forest Knoll is. The sitcom’s famous theme song says “just give me that countryside” and “I just adore a penthouse view.” Forest Knoll offers both in the City of Angels. What could be more heavenly (and farm-y) than that? I mean, besides having $32 million to spare? “Jeffrey calmed us down and steered us away from getting too austere,” she says. “He brought a feeling of comfortable luxury to the architecture, which is masculine and relatively simple in structure.” The “Barndominium” was a huge undertaking — it went from a horse barn to a home. Bass knows the Meeks family from their church as well. The family eventually moved out of state, so Bass offered to take over the house. For listings in Canada, the trademarks REALTORВ®, REALTORSВ®, and the REALTORВ® logo are controlled by The Canadian Real Estate Association (CREA) and identify real estate professionals who are members of CREA. The trademarks MLSВ®, Multiple Listing ServiceВ® and the associated logos are owned by CREA and identify the quality of services provided by real estate professionals who are members of CREA. Used under license. https://lcfordev.com/community/profile/allansheldon06/ By searching you agree to the end user license agreement. Find homes for sale in Minnesota and Wisconsin. United Country – Waterfront Properties offers coastal homes, ocean view properties and vacation homes located in the United States and internationally. Powered by ISPConfig Another way to prevent getting this page in the future is to use Privacy Pass. You may need to download version 2.0 now from the Chrome Web Store. United Country – Waterfront Properties offers coastal homes, ocean view properties and vacation homes located in the United States and internationally. Listing information is provided for consumer personal, non-commercial use, solely to identify potential properties for potential purchase; all other use is strictly prohibited and may violate relevant federal and state law.
erythromycin ophthalmic ointment 0.5 erythromycin drug class
erythromycin for sinus infection uses for erythromycin ophthalmic ointment
(MMW => MNW)
￭…all shown in the preview
Getting Started
The software by default creates a tour for AutoPanos of:
￭ SPi-V
￭ MMW => MNW tour
￭ Single For SPi-V or FPP
￭ For SPi-V
￭ All used in FPP and SPi-V are spherical coordinates
￭ For MMW/M https://cch2.org/portal/checklists/checklist.php?clid=7857
50e0806aeb lovcarl
It also supports various photo editing filters, background removing and photo collages from slides, photos and even videos.
You can find many useful shortcuts and a quick way to work with the tools in the program. Just place the help icon in the main menu, press ctrl+0 and the help will open. And for keeping your image quality with the smart option of a laptop (press F12 and it will automatically set the monitor to the best suitable resolution for the photo) and selecting the right https://kramart.com/deepview-crack-torrent-win-mac-updated-2022/
50e0806aeb hazdory
It is a plugin for OpenOffice.org.
Project Maven is a software build management and dependency management tool for Java projects. It builds the project’s classpath by resolving dependencies to other projects and modules. Project Maven supports all Java version and performs well also in projects with thousands of dependencies.
Jmod is a Java decompiler designed to work on Linux platforms. It is a descendant of the Open Source IDA Java Decompiler. Jmod can be installed on Linux https://virtualanalytics.ai/menuapp-free-x64/
50e0806aeb gavlate
￭ Delphi, Object Pascal or Free Pascal of Embarcadero
￭ KMPro 10 or higher
￭ Windows XP, Vista, or Windows 7
Since Isometry can operate simultaneously for distinct languages, you can run it simultaneously as separate instances (some kind of workstations of the same computer).
(One of the cells of the table of languages is set. In the other cells, the word and sentence texts are printed with their colors. ) https://totalcomputer.it/volumetray-crack-serial-number-full-torrent-free-download-april-2022/
50e0806aeb nefebela
Retroshare (Originally known as RetroShare, it changed its name to Retroshare in 2008 as well as added “2” in its name) is an instant messaging protocol, client and server system available for most platforms. It is free and open source software, and was created by Frank Karlitschek and his team at the GNU/Linux and terminal services company Precise Communication Systems
(PCS). Frank Karlitschek is also one of the founders of the development team http://nextgenbioproducts.com/?p=4026
50e0806aeb vanesak
Image Formattiming Tool will help you get the best of your photos, and helps you get those images out of your camera and onto your computer. It is designed to work with both Windows Explorer and Macintosh Folders and allowing you to edit/organize digital photos, as well as prints from your camera, save them to your computer, and get them ready for sharing via e-mail.
Artlover’s Soft Photo Album software was developed for Windows and Macintosh computers, https://gruzovoz777.ru/wp-content/uploads/2022/06/Binary_Image_File_Base64_Translator.pdf
50e0806aeb aydayse
Apart from this, you could also use PinWin to help you work with several bits of software that you need to use for a certain document or run when needed, without having to juggle them around. The advantage of this is that it will save you time and help you avoid headaches because of the environment. Granted, you will not be able to point and click on tools that are opened on several windows, but a single application will give you the full picture of the desired file or document. https://www.shankari.net/2022/06/06/libskypeapi-crack-download-3264bit-april-2022/
50e0806aeb cecides
If someone calls you, you’ll have to click [Connect] in the pipline to listen in to the call.
Clicking [Next] skips the messages and brings you to the next call in order to answer it.
Clicking [Back] goes back one call.
Clicking [Close] does the same as clicking [Back], but also ends the current call.
There’s probably not a whole lot of people typing in any Netmeeting channels http://saddlebrand.com/?p=3232
50e0806aeb naraphy
AttentionAward is a fun yet practical Java Swing/SWT word or math-based game! You can play the game under different difficulties or with different development settings.
The game as well enables you to add images as decorations and share your game progress online!
HTBorse is a freeware HTTP server application implemented with the lightweight standard edition of the.NET framework (based on 1.1). HTBorse is mainly intended to be a light-weight application that https://ipayif.com/upload/files/2022/06/7Yw4ChxITdhudDfuJOlA_06_962ac647143c19d6da3f8254b9ed36b0_file.pdf
50e0806aeb savibre
You can insert pictures, embed or use special smileys
…program should connect to a server via TCP socket and send a message to them using TCP socket.
Client should be coded in any of the below language:
C (c#, c++, Objective-C)
C#
Java
VB.net
Delphi
The client should be able to connect to a server using TCP socket. It should be able to send a message to other client using TCP socket https://talkotive.com/upload/files/2022/06/Y96Qdr5GJSBEnlKADMJo_06_35552b3ac1275cca80297cfa01b46125_file.pdf
50e0806aeb olyeuph
erythromycin 500 mg price
https://ibipti.com/wp-content/uploads/2022/06/mohiodys.pdf
29e70ea95f tryswil
https://www.beauteefi.com/wp-content/uploads/2022/06/frecai.pdf
29e70ea95f kasemort
https://www.pokemythology.net/wp-content/uploads/2022/06/shepvale.pdf
29e70ea95f tavyark
https://dg-8mart.com/wp-content/uploads/2022/06/furlac.pdf
29e70ea95f jalalawl
https://csermooc78next.blog/wp-content/uploads/2022/06/tamolek.pdf
29e70ea95f rasfai
erythromycin lactobionate http://erythromycinn.com/#
what type of drug is erythromycin erythromycin ung
However, only a small number of features were reviewed in the above description, so you should consider doing a little bit more for better features evaluation and comprehensive analysis.
Source:
－ Name :
AppName
－ Version : 3.0.7.0
－ Category :
Office
－Price : 999
－ License :
Freeware
－ Language : https://neherbaria.org/portal/checklists/checklist.php?clid=7728
ec5d62056f falijer
Ubuntu Tweak
Ubuntu Tweak is an easy-to-use, fast and flexible system settings panel for GNOME and other Ubuntu desktops.
This utility provides a powerful yet easy way to tweak your system and apply the most up-to-date settings. It includes a huge list of settings that is selected after a few clicks on the configuration module.
The settings provided by Ubuntu Tweak
As you can see in the screenshots above, the tool https://xn—-7sbbtkovddo.xn--p1ai/seafight-bm-bot-rar/
ec5d62056f remciar
We have started a new section at Appu Market for Mobile Developers, starting with Theme Forest, one of the most popular theme stores for mobile applications. This is a place for developers to get themes, widgets, and other resources created by the Theme Developers community. Every theme set will include not only the code for
How do I… tell you to use my precious and hard-earned feedback?
In a word: freely. I have made every effort to provide complete, accurate descriptions https://www.pickupevent.com/wp-content/uploads/2022/06/oldkal.pdf
ec5d62056f hayman
Its lightweight and very easy to use, so it is probably one of the best solutions for taking desktop screenshots.
Category: Utilities, Security, SystemEducational participation, societal participation, and health related quality of life among persons with Multiple Sclerosis: the significance of socio-demographic factors.
The purpose was to examine the association of socio-demographic factors with a person’s self-reported educational and societal participation and health related quality of life (HRQoL) among persons https://facenock.com/upload/files/2022/06/ra49wmRG8Clzk4Z2dlaQ_04_86a5fdd4d276714286dd60b0f5b900b5_file.pdf
ec5d62056f lanvyrn
Re: Ryll Navigator,Please tell me if I can install Ryll Navigator, which I downloaded from your website to browser of another computer with a 3dfx video controller? I have read the documentation, which tells that it is possible.
Dear Sir,My parent got this player, and it almost have no problem. It is so simple, just adding the addon folder and then restarting the player, he will be able to play in fullscreen mode. Unfortunately, https://www.shankari.net/wp-content/uploads/2022/06/refhed.pdf
ec5d62056f trisdaig
Let`s make some improvements to FxCop rules.
* Before cloned old file, save the file path.
*You can apply the settings to all files of Solution.
* If there is no rule that you like, you just right click on the same Rule and select [Add Rule].
*You can select rule group.
*You can exclude the rules you don`t want.
*You can exclude the files you don’t want. http://www.kotakenterprise.com/download-jumpstart-for-wireless-windows-7/
ec5d62056f shapjan
Q:
Have any DC8s ever been retired?
An introduction to DC8s on wiki says
The DC8 was the world’s fastest production aircraft until the
introduction of the B-747. After the DC8 rolled out, the 747 quickly
took the number one position in passenger and freighter. Today, it is
maintained, stored, and cared for at Boeing’s only remaining freighter
hangar in Long Beach, California. https://brothersequipements.com/2022/06/04/inferno-torrent-download/
ec5d62056f onorvig
￭ ThumbnailCache DLL
GroupTweets is a light-weight and scalable social networking service module that allows the user to see which of their friends are currently online, read and post status updates, view their friend’s digital photos, share their friends’ new status updates, and tweet on their behalf. It’s designed to be a simple way to share digital photos with friends on a scale that other services can’t support without becoming bloated and hard to navigate.
Community https://chlorizdyrasviehos.wixsite.com/lepsiregjo/post/karnataka-history-by-suryanath-kamath-40-pdf-new
ec5d62056f batjar