Viewing Animation in EverWeb
Animation in EverWeb
|
User: Bruce D. 12 years ago
|
|
|
Hello, I am trying to make an animation in EverWeb. I have a black and white picture that I want to fade to color when the home page loads. I have hype but I can't seem to make it work. Is their another way to do this. Thanks |
|
|
User: Jumbo T. 12 years ago
|
|
|
Here's a demo with link to source : http://trotter.is-best.net/fade/ Paste the code in a HTML snippet. Use you own images, width and height. More : http://www.google.com/search?q=css+transition+on+load |
|
|
User: Roddy 12 years ago
|
|
|
This DEMO is done in EverWeb. Just change the relative path to the images in the HTML and their width, height and the fade time in the CSS. ------------------------------- Roddy Website: http://everwebwidgets.com Contact: http://everwebwidgets.com/ewWidgets-home/contact.html NOTE: I am an EverWeb user and NOT affiliated with EverWeb! Any opinions expressed in this forum are my own. |
|
|
User: Bruce D. 12 years ago
|
|
|
Roddy, How do I change when the actual animation starts? I won't to delay the start of the animation by about 5 or 6 seconds upon the page loading? Thanks for all of your help? Here is the code that I have. <style><br /> <br /> /* make keyframes that tell the start state and the end state of our object */<br /> <br /> @-webkit-keyframes fadeIn { from { opacity:1; } to { opacity:0; } }<br /> @-moz-keyframes fadeIn { from { opacity:1; } to { opacity:0; } }<br /> @keyframes fadeIn { from { opacity:1; } to { opacity:0; } }<br /> <br /> .fade-in {<br /> opacity:1; /* make things invisible upon start */<br /> -webkit-animation:fadeIn ease-in 1; /* call our keyframe named fadeIn, use animation ease-in and repeat it only 1 time */<br /> -moz-animation:fadeIn ease-in 1;<br /> animation:fadeIn ease-in 1;<br /> <br /> -webkit-animation-fill-mode:forwards; /* this makes sure that after animation is done we remain at the last keyframe value (opacity: 1)*/<br /> -moz-animation-fill-mode:forwards;<br /> animation-fill-mode:forwards;<br /> <br /> -webkit-animation-duration:2.0s;<br /> -moz-animation-duration:2.0s;<br /> animation-duration:2.0s;<br /> }<br /> <br /> .fade-in.one {<br /> -webkit-animation-delay: 2.0s;<br /> -moz-animation-delay: 2.0s;<br /> animation-delay: 2.0s;<br /> }<br /> <br /> <br /> /*---make a basic box ---*/<br /> <br /> .box {<br /> width: 766px;<br /> height: 497px;<br /> background: transparent;<br /> }<br /> <br /> .boxNavy {<br /> background:url({!-ASSETSPATH-!}Images/HeathandPaschalC.png) bottom left no-repeat;<br /> }<br /> <br /> .boxRed {<br /> background:url({!-ASSETSPATH-!}Images/HeathandPaschalBandW.png) top left no-repeat;<br /> }<br /> </style><br /> <br /> <div class="box boxNavy"><br /> <br /> <div class="box boxRed fade-in fade-in.one" ></div><br /> <br /> </div> |
|
|
User: Roddy 12 years ago
|
|
|
I have a widget for a timed cross fade amongst a bunch of image FX widgets I haven't got around to releasing yet. If you CONTACT me I'll send you a copy to try and see if it gives you the effect you want. ------------------------------- Roddy Website: http://everwebwidgets.com Contact: http://everwebwidgets.com/ewWidgets-home/contact.html NOTE: I am an EverWeb user and NOT affiliated with EverWeb! Any opinions expressed in this forum are my own. |
|
| Post Reply |
| You must login or signup to post. |