Luke Briggs

Upgraded CSS animations example to use new JS

<style> html{ height:100%; background:url(noise-background.png); } body{ height:100%; } #content-box{ background:#e7e8ee; border:6px solid #cccccc; border-radius:70px 30px 70px 30px; width:300px; padding:40px; text-align:justify; color:black; left:10%; } #logo-container{ -spark-z-index:5; position:fixed; top:0px; left:0px; width:100%; height:100%; background:rgb(155,155,173);} #logo{ position:absolute; top:50%; left:50%; margin-top:-70px; margin-left:-70px; } </style> <div style='width:100%;height:100%;vertical-align:table-middle;text-align:-moz-center;'> <div id='content-box' style='opacity:0;'> CSS Animations use the Element.Animate() function. They can have a callback when they're done and can be used from anywhere - Nitro, C# etc! <br> <br> Note that defining a sequence of animations like this is now best handled by @keyframes and PowerSlide.</div> </div> <div id='logo-container'> <img src='powerUI-logo.png' id='logo'/></div> <script type='text/nitro'> var logo=(document.getElementById("logo-container")):HtmlElement;var content=(document.getElementById("content-box")):HtmlElement; function OnChangedColour(animation:UIAnimation){ // You can animate almost anything too! // Additionally, you can specify how long to accelerate and decelerate for. // This produces smoother animations: // - Accelerate and decelerate for 1 second each. content.animate("border-radius:30px",2f,1f); // (Or provide a custom "timing function"; either as a CSS value such as "ease-in", or as a path). } function OnFadedOut(animation:UIAnimation){ // Fade it in (its opacity is 0 to start with): content.animate("opacity:1",2f).onDone(OnChangedColour); } function FadeOut(){ // Note: These work from C# too. UI.document.getElementById()... // Take 2 seconds to get its opacity to 0, making it totally transparent: logo.animate("opacity:0",2f).onDone(OnFadedOut); } // After a small delay, fade out the logo. // We'll do this using a timeout and a CSS animation: setTimeout(FadeOut,3000); </script>
\ No newline at end of file
<style> html{ height:100%; background:url(noise-background.png); } body{ height:100%; } #content-box{ background:#e7e8ee; border:6px solid #cccccc; border-radius:70px 30px 70px 30px; width:300px; padding:40px; text-align:justify; color:black; left:10%; } #logo-container{ -spark-z-index:5; position:fixed; top:0px; left:0px; width:100%; height:100%; background:rgb(155,155,173);} #logo{ position:absolute; top:50%; left:50%; margin-top:-70px; margin-left:-70px; } </style> <div style='width:100%;height:100%;vertical-align:table-middle;text-align:-moz-center;'> <div id='content-box' style='opacity:0;'> CSS Animations use the Element.Animate() function. They can have a callback when they're done and can be used from anywhere - JS, C# etc! <br> <br> Note that defining a sequence of animations like this is now best handled by @keyframes and PowerSlide.</div> </div> <div id='logo-container'> <img src='powerUI-logo.png' id='logo'/></div> <script type='text/javascript'> /* Javascript is totally optional - everything it can do, C# can do too (see also UI.document, a static reference) */ // Note: These work from C# too. UI.document.getElementById()... var logo=document.getElementById("logo-container"); var content=document.getElementById("content-box"); function OnChangedColour(animation){ // You can animate almost anything too! // Additionally, you can specify how long to accelerate and decelerate for. // This produces smoother animations: // - Accelerate and decelerate for 1 second each. content.animate("border-radius:30px",2,1); // (Or provide a custom "timing function"; either as a CSS value such as "ease-in", or as a path). } function OnFadedOut(animation){ // Fade it in (its opacity is 0 to start with): content.animate("opacity:1",2).finished.then(OnChangedColour); } function FadeOut(){ // Take 2 seconds to get its opacity to 0, making it totally transparent: logo.animate("opacity:0",2).finished.then(OnFadedOut); } // After a small delay, fade out the logo. // We'll do this using a timeout and a CSS animation: setTimeout(FadeOut,3000); </script>
\ No newline at end of file
......