CODEWITHSUNDEEP
javascriptjqueryhtmlcssanimation
Jeffrey Richiez
Jeffrey Richiez

Reputation: 23

How to make a div execute its style animations with and if/else in JS

Hello this is my current html code:

<div data-jibp="" data-jiis="uc" id="easter-egg" style="display:none;">
    <style>
    @keyframes roll {
        100%{transform:rotate(360deg)}}
        body{-webkit-animation-name:roll;
        -webkit-animation-duration:4s;
        -webkit-animation-iteration-count:1;
    }
    </style>
</div>

I took it from googles easter egg, the barrel roll. I was wondering, how do I make this animation only appear when I input a certain name in a text box. Google has this set up so that when a user types in "Do a barrel roll" it executes these style animations. How do I make this execute in javascript using an if/else

Please help and thanks :)

EDIT:

(function barrel() {
    var css = document.createElement('style');
    css.type = 'text/css';
    css.innerHTML = '@-moz-keyframes roll{100%25{-moz-transform:rotate(360deg);}}@-o-keyframes roll{100%25{-o-transform:rotate(360deg);}}@-webkit-keyframes roll{100%25{-webkit-transform:rotate(360deg);}}body{-moz-animation-name:roll;-moz-animation-duration:4s;-moz-animation-iteration-count:1;-o-animation-name:roll;-o-animation-duration:4s;-o-animation-iteration-count:1;-webkit-animation-name:roll;-webkit-animation-duration:4s;-webkit-animation-iteration-count:1;}';
    document.getElementsByTagName('head')[0].appendChild(css)
    return css.innerHTML;
})();

This is the function that runs the barrel roll, I tried calling upon it within my if/else statement but it doesnt seem to work. Any ideas? (Ps. Cassidy thanks for the suggestion but it's not quite what I mean)

Upvotes: 2

Views: 296

Answers (2)

Cassidy
Cassidy

Reputation: 3408

Assuming you're using jQuery (looking at your tags in the question):

function barrel() {
    var css = document.createElement('style');
    css.type = 'text/css';
    css.innerHTML = '@-moz-keyframes roll{100%25{-moz-transform:rotate(360deg);}}@-o-keyframes roll{100%25{-o-transform:rotate(360deg);}}@-webkit-keyframes roll{100%25{-webkit-transform:rotate(360deg);}}body{-moz-animation-name:roll;-moz-animation-duration:4s;-moz-animation-iteration-count:1;-o-animation-name:roll;-o-animation-duration:4s;-o-animation-iteration-count:1;-webkit-animation-name:roll;-webkit-animation-duration:4s;-webkit-animation-iteration-count:1;}';
    document.getElementsByTagName('head')[0].appendChild(css)
    return css.innerHTML;
}

$('input').on('change', function() {
  if (this.value === 'Do a barrel roll') {
    barrel();
  }
});

Take out the parenthesis surrounding your barrel() function, because that immediately invokes the function, and that's not what you want.

Upvotes: 1

Ayush Sharma
Ayush Sharma

Reputation: 2107

Please check out following JS fiddle, if that what you want - Fiddle

HTML - 

<div data-jibp="" data-jiis="uc" id="easter-egg">Egg</div>
<input type="text" id="easter-input" />

JS - 

document.getElementById('easter-input').addEventListener('keyup',function(e){
 if(e.target.value=="Do a barrel roll")
 document.getElementById('easter-egg').className = "eggAnim"
 else
 document.getElementById('easter-egg').className = ""
});

CSS - 

 @keyframes roll { 
 100%  {transform:rotate(360deg)
 }}

#easter-egg{
 display:none
}
#easter-egg.eggAnim{
 display:block;
 -webkit-animation-name:roll;
 -webkit-animation-duration:4s;
 -webkit-animation-iteration-count:1
 }

Upvotes: 1

Related Questions