After getting so much awesome feedback on my “brain” feature, i decided to write a short blog post on how i did it, how i made it work in MOST browsers and the problems i had along the way!
 
A lot of people never realised this was created with simple CSS3 animate, they thought it was more complicated and complex than a simple few lines of code. Creating this was not complicated and it wasn’t that time consuming. Most of my time was spent testing it and fixing browser compatibility.
 

The CSS

The css started of with creating a class, this communicates with the class tag within the div on the html page. The class then goes on to create an animation name called projector, this name then communicates with the “@keyframes”. The class goes on to define more parts about it, such as it is using an iteration count which is infinite, this means the animation will continuously loop, if you don’t want your animation to loop you would simply put in the number of times you want it to loop. Lastly the class specifies how long the animation will take to loop. I have defined mine to 2.5 seconds.
 
To ensure this class is recognized, i have duplicated this code 3 times. One was created with “-webkit-” beginnings, this code was targeted for google chrome and safari, “-moz-” was targeted for firefox, and the code starting just with “animation” , is not actually supported on its own by any browser, but i decided to keep it in, in case any browsers to decide to adapt it.
 

.brainPulse {
	-webkit-animation-name: projector;
	-webkit-animation-iteration-count: infinite;
	-webkit-animation-duration: 2.5s;
	
	-moz-animation-name: projector;
	-moz-animation-iteration-count: infinite;
	-moz-animation-duration: 2.5s;
	
	animation-name: projector;
	animation-iteration-count: infinite;
	animation-duration: 2.5s;
	}

<!--The below code is used for my personal positioning of the brain-->

#brain {width: 1026px; 
	height: 298px;
	margin: -10px auto 0px auto;
	position: absolute;
	z-index: 999;}

 
The next step was adding “transform” code to the div, to make this work gradually, I merged it with @keyframes. These keyframes help specify the change i want the animation to go through from 0% to 100%, the 0% represents the start of the animation and the 100% represents the end of the animation. When the @keyframes where written, i then decided the transformations that i wanted to happen.
 
The first value i added to the transform was translate, the “translate” code i used was targeted for a 2d image, if you want an image to become 3d simply add another value, i.e. translate(1px, 0px, 1px). Lastly opacity was added to every keyframe, to give the effective of colour change and help the animation come to life. Throughout the keyframes, you will see the values change, with out these changing values, the animation would not work and would defeat the purpose of using animation.
 

@-webkit-keyframes projector {
       0% {-webkit-transform: translate(1px,0px); opacity: 1.0;}
       10% { -webkit-transform: translate(0px,0px); opacity: 1.0;}
       20% { -webkit-transform: translate(0px,0px); opacity: 0.95;}
       30% { -webkit-transform: translate(0px,1px); opacity: 1.0;}
       40% { -webkit-transform: translate(0px,0px); opacity: 1.0;}
       50% { -webkit-transform: translate(0px,0px); opacity: 1.0;}
       60% { -webkit-transform: translate(-1px,0px); opacity: 1.0;}
       70% { -webkit-transform: translate(0px,0px); opacity: 1.0;}
       80% { -webkit-transform: translate(0px,1px); opacity: 0.85;}
       90% { -webkit-transform: translate(0px,0px); opacity: 1.0;}
       100%{ -webkit-transform: translate(0px,0px); opacity: 1.0;}
      }
      
@-moz-keyframes projector {
       0% {-moz-transform: translate(1px,0px); opacity: 1.0;}
       10% { -moz-transform: translate(0px,0px); opacity: 1.0;}
       20% { -moz-transform: translate(0px,0px); opacity: 0.95;}
       30% { -moz-transform: translate(0px,1px); opacity: 1.0;}
       40% { -moz-transform: translate(0px,0px); opacity: 1.0;}
       50% { -moz-transform: translate(0px,0px); opacity: 1.0;}
       60% { -moz-transform: translate(-1px,0px); opacity: 1.0;}
       70% { -moz-transform: translate(0px,0px); opacity: 1.0;}
       80% { -moz-transform: translate(0px,1px); opacity: 0.85;}
       90% { -moz-transform: translate(0px,0px); opacity: 1.0;}
       100%{ -moz-transform: translate(0px,0px); opacity: 1.0;}
      }
      
@keyframes projector {
       0% {transform: translate(1px,0px); opacity: 1.0;}
       10% {transform: translate(0px,0px); opacity: 1.0;}
       20% {transform: translate(0px,0px); opacity: 0.95;}
       30% {transform: translate(0px,1px); opacity: 1.0;}
       40% {transform: translate(0px,0px); opacity: 1.0;}
       50% {transform: translate(0px,0px); opacity: 1.0;}
       60% {transform: translate(-1px,0px); opacity: 1.0;}
       70% {transform: translate(0px,0px); opacity: 1.0;}
       80% {transform: translate(0px,1px); opacity: 0.85;}
       90% {transform: translate(0px,0px); opacity: 1.0;}
       100%{transform: translate(0px,0px); opacity: 1.0;}
      }

 

The HTML

As you can see nothing complicated is going on with the HTML, a simple div, classifying the id and the class, an img tag is added beside it and the div tag is closed after it.

<div id="brain" class="brainPulse">
<img src="http://alexandramilne.co.uk/wp-content/themes/blankslate/images/brain.png" />
</div><!-- brain -->

 
This is all that is required to get this effect working correctly, and it targets most browsers except for IE. The same styling of code for the other effects where then added to the fading text in nearly the exact same manner!
 
When i was coding this, i had a few problems with getting it to work in firefox, this was my fault as i hadn’t added “-moz-animation-name: projector;” as i thought when this was named once, it didn’t have to be defined again. This is where i learnt all actions have to be duplicated for all methods of getting animations to work on the specific browser.
 
My second problem was IE, as this horrible deathly browser does not support animation. As the animations where not working, this meant all images where positioned correctly but where all static, therefore the text images that faded in and out, where shown to be overlapping. To give this a quick fix i decided to adjust my images, that if this where to happen, the images looked liked they where correctly positioned, and that their isn’t actually a problem. I feel this is a good default to have, as i wouldn’t worry to much about IE users and users whose computers browsers where not compatible.
 
I have linked some of the trial stages that i have went through until i to developed my final brain. As you can see i started of with ideas of pulsing areas within Trail 1 and 2, the idea was when the pulsing area was hovered upon text would appear. But i felt this wasn’t what i wanted and then changed my approach to what i wanted to brain to do. I then went on to adding text to Trail 3, this was the starting stages of my final idea.

Trail 1 Trail 2 Trail 3
© Copyright of Alexandra Milne 2013 | Privacy Policy | Disclaimer | Disclosure