-

Cool Animated Fire Effects with CSS3 and jQuery


JQuery

<script type="text/javascript">
var step = 1;
function nextShadow(){
 $('#onfire span').each(function(){
     y = parseFloat($(this).attr("y_pos"));
     y += step + Math.random()*3;
     $(this).attr("y_pos", y);
     shaking = Math.random();
     shadow1 = "0px 0px "+(y%5)+"px white";
     shadow2 = shaking*24/y*Math.cos(y/5)*15+"px -"+(shaking*4/y+(y%17))+"px "+(shaking+(y%17))+"px red";
     shadow3 = shaking*24/y*Math.cos(y/7)*15+"px -"+(shaking*4/y+(y%31))+"px "+(shaking+(y%31))+"px #993";
     shadow4 = shaking*24/y*Math.cos(y/13)*15+"px -"+(shaking*4/y+(y%41))+"px "+(shaking+(y%41))+"px yellow";
     $(this).css("text-shadow", shadow2+", "+shadow1+", "+shadow4+", "+shadow3);
 });
}
$(function(){
    $('#onfire span').each(function(){$(this).attr("y_pos","0");});
   setInterval(nextShadow, 50); 
});
</script>



CSS




#onfire{
      height:auto;
      padding-top:3em;
      font-size: 42px;
      font-weight: bold;
      text-align: center;
      color:brown;
}







Description









This effect has been created with some jQuery for setting different CSS3 text-shadow’s in a div. You can check code to see how it’s done. Basically, the Javascript function creates 3
 text-shadows (white, yellow and red) with coprime “cycle durations” so 
the effect looks more random even though it’s totally deterministic.



Each shadow moves in the Y axis with a linear function and in the X axis with a cosine function. Pretty simple, but effective.













































Comments











Post a Comment






























Popular posts from this blog









3D Thumbnail Hover Effects






-














Image







  3D Thumbnail Hover Effects     Today we want to show you how to create some exciting 3D hover  effects using CSS3 and jQuery. This idea is inspired by the cool hover  effect that you can find on the page of the Google SketchUp Showcase .        In our examples, we’ll use thumbails that will reveal some more  information on hover. We will create a structure with jQuery that will  allow making the image appear as folded or bended when we hover over it.  For the hover effects we will use CSS 3D transforms.       THE MARKUP  __________________________________________________________________________________   The markup for the thumbnail structure will be as follows:        566     124     →                           __________________________________________________________________________________      Each thumbnail goes into a division with another division for the details (view-back). The structure that we  want to create for each division with the class v...








Read more










Six tips from Apple on how to create better app icons






-














Image







  This is a guest post by Martin LeBlanc, the founder of   IconFinder , a search engine for icons. You can follow him on twitter   here    Shortly after the WWDC event in San Francisco in June, a plethora of iOS7 resources became available on the web. Throughout the hundreds of sessions, speakers and keynotes, Apple   unveiled its new iOS 7   to thousands of delegates lucky enough to be there.   We found a great presentation called “Best Practice Guide for Great iOS Design” by Apple UX Evangelist, Mike Stern.   The first part of his presentation is about app icons and what Apple believes makes a good icon. He goes through a list of six important things to consider when you are designing your app icon. We will do our best to summarise the presentation in this post.   Mike Stern begins by explaining why it’s important to pay attention to the UI and app icon: Your users aren’t going to judge your app based on how many technologies you are using, or how many APIs you int...








Read more










Some Ideas for Checkout Effects 






-














Image







  Some fun effect and layout ideas for the first step of a checkout  process in an online store. We are using the morphing buttons concept  together with CSS transforms and transitions.     A while back we explored a morphing button concept   where the active element gets transformed into its target, aiming to  create a fluid UI experience with a semantic connection of the involved  elements. Today we want to apply that same concept and some other ideas  to the first step of the checkout process. The checkout process in  online stores is one of the most challenging and crucial in terms of UI  design. Done well it can create a pleasant and smooth purchasing  experience for the user; done wrong, it can lead to an abandoned  shopping cart and no sale at all. There are many carefully planned and  well designed e-commerce sites out there and making the UI uncluttered  is definitely a great trend welcomed by anyone who buys things online.     With the demos we’ve created today we ar...








Read more