css3 - CSS Animation Fade In Slide Down -

-

i'm trying recreate flash animation html/css got stuck.

this actual animation, first image dark background fades in, next image slide down

http://www.learner.org/series/econusa/interactivelabs/graphing-lab_moose-synthesizer-co/

here's got far... how can add second image slide down?

http://jsfiddle.net/tetonline/qznut/2/

html

<img onload="this.style.opacity='1';" src="https://tchuatocolearner.eppi.com/temp/graphinglab/images/blur.png" />

css

img { opacity:0; -moz-transition: opacity 3s; /* firefox 4 */ -webkit-transition: opacity 3s; /* safari , chrome */ -o-transition: opacity 3s; transition: opacity 3s;

}

i created rough version can work uses css3 animations along 2 javascript functions add/remove animation classes. check out here

this perform better javascript/jquery version.

also, recommend making slide down elements divs opposed imgs can have content within buttons added.

here relevant code

<div id='firstdiv' class='overlay movedown'>   <button onclick='firstaction()'></button> </div> <div id='seconddiv' class='overlay'>   <button onclick='secondaction()'></button> </div>  <div id='content' class='fademe'>...content...</div>  // css .overlay {     position:absolute;     left:50%;     top:-500px;     margin-top:-200px;     margin-left:-250px;     width:500px;     height:400px;     background-repeat: no-repeat;     background-size: 100%;      z-index:3; } @keyframes movedown {     0% {         top:-100%;     }     100% {         top:50%;     } } @-webkit-keyframes movedown {     0% {         top:-100%;     }     100% {         top:50%;     } } @-moz-keyframes movedown {     0% {         top:-100%;     }     100% {         top:50%;     } } @-ms-keyframes movedown {     0% {         top:-100%;     }     100% {         top:50%;     } } @-o-keyframes movedown {     0% {         top:-100%;     }     100% {         top:50%;     } }  @keyframes moveup {     0% {         top:50%;     }     100% {         top:-100%;     } } @-webkit-keyframes moveup {     0% {         top:50%;     }     100% {         top:-100%;     } } @-moz-keyframes moveup {     0% {         top:50%;     }     100% {         top:-100%;     } } @-ms-keyframes moveup {     0% {         top:50%;     }     100% {         top:-100%;     } } @-o-keyframes moveup {     0% {         top:50%;     }     100% {         top:-100%;     } } #firstdiv {     background-image: url(http://img2.timeinc.net/people/i/2013/pets/news/130304/kitten-3-600.jpg); } #seconddiv {     background-image: url(http://wallpapersfor.me/wp-content/uploads/2012/02/cute_cat_praying-1280x800.jpg); }  .movedown {   -webkit-animation: movedown 2s linear forwards;   -moz-animation: movedown 2s linear forwards;   -ms-animation: movedown 2s linear forwards;   -o-animation: movedown 2s linear forwards;   animation: movedown 2s linear forwards;   <!--   animation-name:"movedown";   animation-duration: 2s;   animation-timing-function: linear;   animation-fill-mode: forwards;   --> } .moveup {   -webkit-animation: moveup 2s linear forwards;   -moz-animation: moveup 2s linear forwards;   -ms-animation: moveup 2s linear forwards;   -o-animation: moveup 2s linear forwards;   animation: moveup 2s linear forwards;   <!--   animation-name:"moveup";   animation-duration: 1s;   animation-timing-function: linear;   animation-fill-mode: forwards;   --> } #content {   padding:40px;   margin:0 auto;   width:75%;   height:75%;   opacity:1;   transition:2s opacity; } #content.fademe {   opacity:.4;   z-index:-1; }  // javascript function firstaction() {   var elem = document.getelementbyid('firstdiv'),       elemtwo = document.getelementbyid('seconddiv');   elem.classname = 'overlay moveup';   elemtwo.classname = "overlay movedown"; }   function secondaction() {   var elem = document.getelementbyid('seconddiv'),       main = document.getelementbyid('content');   elem.classname = 'overlay moveup';   main.classname = ''; }

edited add browser prefixes

edited again because apparently safari doesn't pixels , percents mixed


Comments

Post a Comment

Popular posts from this blog

java - JavaFX 2 slider labelFormatter not being used -

-
i have following code not label slider "foo50", etc... 1 expect setlabelformatter call, instead seems have no effect (the slider labelled 50, 100, etc , println's dont run). there missing? not implemented in default 2.2 skin? using oracle java 7 package javafxbugtest; import javafx.application.application; import javafx.scene.*; import javafx.scene.control.*; import javafx.stage.*; import javafx.util.stringconverter; public class javafxbugtest extends application { @override public void start(final stage primarystage) { slider cp = new slider(); cp.setlabelformatter(new stringconverter<double>() { @override public string tostring(double t) { system.out.println("nope?"); return "foo" + t.tostring(); } @override public double fromstring(string string) { system.out.println("he
Read more

Detect support for Shoutcast ICY MP3 without navigator.userAgent in Firefox? -

-
the current version of mozilla firefox 23.0.1, version not support play mp3 shoutcast streams tcp port different 80 (most common 8000 shoutcast 1.9.8). i use flash when mp3 support not available in html5 audio, way detect is: try{ var = document.createelement('audio'); r = !!(a.canplaytype && !!a.canplaytype("audio/mpeg; codecs=mp3").replace(/^no$/,'')) }catch(e){ r = false; } the support mp3 shoutcast streams in firefox added in version 24 . a.canplaytype("audio/mpeg; codecs=mp3") = in chrome , firefox, chrome support, firefox not support, due current code detect not work firefox. the current version of jquery support ie 6 1.10.2, version not has .browser i think "stylized" way testing features , not querying browsers / versions, notwithstanding here see hard not violate "principle". what "stylized" way of detect mp3 icy support without navigator.useragent in firefox? ther
Read more

web - SVG not rendering properly in Firefox -

-
i have problem svg renderring in firefox. whilst works in safari, chrome or in ie, doesn't work in firefox. inspecting element seems layers there, background visible if it's z-index higher z-index of others. rendered in firefox: svg logo in firefox link original source file: svg file thanks help. ps: used sketch 3 export svg. if helps somehow. you're experiencing bug 995813 . i fixed bug time ago change still making way through release process example display correctly firefox 31 onwards released on 22 july 2014. in meantime if move fill="white" <mask> element child <use> element work around firefox bug.
Read more