D4mations.com

JavaScript Tutorial – Trigger CSS3 Transitions Control Animations



Lesson Code: http://www.developphp.com/video/JavaScript/Trigger-CSS-Transitions-to-Control-Animations
Learn a new more efficient way to control and establish animations in your web site and web applications. In this video lesson we will demonstrate how to trigger CSS3 transition animations using JavaScript. This will help designers and developers avoid requiring bulky 3rd party libraries to have smooth buttery animations at work in their web applications and web pages.

Related Material About Event Handling:
http://www.developphp.com/list_javascript.php#Javascript_DOM_Scripting
http://www.developphp.com/view_lesson.php?v=569
http://www.developphp.com/list_javascript.php#DOM_Event_List_JavaScript

Original source

d4mer

, , , , , , , ,

20 responses to “JavaScript Tutorial – Trigger CSS3 Transitions Control Animations”

  4. soo wait, i have a basic html script that saids .underdevelopment .
    when i use this and ftp it. nothing shows up before he adds a button..i tripled check the code. am i missing something. unless i have to save it in dream weaver which i have. but i saved it in notepad++. i test my page using IE bc my page doesnt show up on chrome .

  6. I've seen a few, but in just this one video, Adam has become my favourite online JS tutor! Really engaging, well paced and informative! Several 'eureka' moments throughout this one video and you've pulled together the random bits of knowledge I already had. Really happy to have found this series and look forward to working through the rest.

    TLDR: THANK YOU, ADAM!!

  11. Hi Adam, I really enjoy watching your tutorials, I find them easy for understanding by beginners like me. I would like to ask you about the onclick event, do you normally use it, or it's just for the tutorial? Because I know that's a very old method as they've been replaced by event listeners? 🙂

  12. <!DOCTYPE html>
    <html>
    <style>
    div#box1 {
    background: #FDCEFa;
    width: 400px;
    height: 200px;
    position: absolute;
    top: 51px;
    left: 0px;
    }
    </style>
    <script>
    function changeBG(el,typ,speed,clr){
    tpp=['background','top','left'];
    werk=tpp[typ]+' '+speed+'s linear 0s';
    var elem = document.getElementById(el);
    elem.style.transition = werk;
    switch(typ){case 0: elem.style.background = clr;
    break; case 1: elem.style.top = clr+'px';
    break; case 2: elem.style.left = clr+'px';
    }}
    </script>
    <body>
    <button onclick="changeBG('box1',0,001,'#F0F')">Magenta</button>
    <button onclick="changeBG('box1',0,005,'#0C0')">Green</button>
    <button onclick="changeBG('box1',0,0.5,'#9DCEFF')">Origninal</button>
    <button onclick="changeBG('box1',1,0.7,51 )">Up</button>
    <button onclick="changeBG('box1',1,0.8,222 )">Down </button>
    <button onclick="changeBG('box1',2,0.7,-400)">disapear</button>
    <button onclick="changeBG('box1',2,0.8,0 )">Apear</button>
    <div id="box1">Content in box 1 …</div>
    </body>
    </html>

Leave a Reply