Smoke or Mist Effect For This Christmas And Newyear Using Javascript, Jquery & CSS
Smoke or Mist Effect For This Christmas And Newyear Using Javascript, Jquery & CSS
Simple Smoke or mist Effect to greet your visitors this Christmas and New year (2013). The major part of the smoke or mist effect script is done with the help of easing effect in jquery. The scripts looks quiet complex. But i have given a demo at the bottom . You can have a look and customize it according to your convenience.
<script src="http://code.jquery.com/jquery-1.8.3.min.js"></script> if(!$.browser.msie){ var a=0;for(;a<15;a+=1){setTimeout(function b(){var a=Math.random()*1e3+5e3,c=$("<div />",{"class":"smoke",css:{opacity:0,left:Math.random()*200+80}});$(c).appendTo("#viewport");$.when($(c).animate({opacity:1},{duration:a/4,easing:"easeOutCubic",queue:false,complete:function(){$(c).animate({opacity:0},{duration:a/3,easing:"easeOutCubic",queue:false})}}),$(c).animate({bottom:-$("#viewport").height()},{duration:a,easing:"easeOutCubic",queue:false})).then(function(){$(c).remove();b()})},Math.random()*3e3)} }else{ "use strict";var a=0;for(;a<15;a+=1){setTimeout(function b(){var a=Math.random()*1e3+5e3,c=$("<div />",{"class":"smoke",css:{left:Math.random()*200+80}});$(c).appendTo("#viewport");$.when($(c).animate({},{duration:a/4,easing:"easeOutCubic",queue:false,complete:function(){$(c).animate({},{duration:a/3,easing:"easeOutCubic",queue:false})}}),$(c).animate({bottom:-$("#viewport").height()},{duration:a,easing:"easeOutCubic",queue:false})).then(function(){$(c).remove();b()})},Math.random()*3e3)}}}())
We also have a javascript easing script
/*jquery easein*/
jQuery.easing[“jswing”]=jQuery.easing[“swing”];jQuery.extend(jQuery.easing,{def:”easeOutQuad”,swing:function(a,b,c,d,e){return jQuery.easing[jQuery.easing.def](a,b,c,d,e)},easeInQuad:function(a,b,c,d,e){return d*(b/=e)*b+c},easeOutQuad:function(a,b,c,d,e){return-d*(b/=e)*(b-2)+c},easeInOutQuad:function(a,b,c,d,e){if((b/=e/2)<1)return d/2*b*b+c;return-d/2*(--b*(b-2)-1)+c},easeInCubic:function(a,b,c,d,e){return d*(b/=e)*b*b+c},easeOutCubic:function(a,b,c,d,e){return d*((b=b/e-1)*b*b+1)+c},easeInOutCubic:function(a,b,c,d,e){if((b/=e/2)<1)return d/2*b*b*b+c;return d/2*((b-=2)*b*b+2)+c},easeInQuart:function(a,b,c,d,e){return d*(b/=e)*b*b*b+c},easeOutQuart:function(a,b,c,d,e){return-d*((b=b/e-1)*b*b*b-1)+c},easeInOutQuart:function(a,b,c,d,e){if((b/=e/2)<1)return d/2*b*b*b*b+c;return-d/2*((b-=2)*b*b*b-2)+c},easeInQuint:function(a,b,c,d,e){return d*(b/=e)*b*b*b*b+c},easeOutQuint:function(a,b,c,d,e){return d*((b=b/e-1)*b*b*b*b+1)+c},easeInOutQuint:function(a,b,c,d,e){if((b/=e/2)<1)return d/2*b*b*b*b*b+c;return d/2*((b-=2)*b*b*b*b+2)+c},easeInSine:function(a,b,c,d,e){return-d*Math.cos(b/e*(Math.PI/2))+d+c},easeOutSine:function(a,b,c,d,e){return d*Math.sin(b/e*(Math.PI/2))+c},easeInOutSine:function(a,b,c,d,e){return-d/2*(Math.cos(Math.PI*b/e)-1)+c},easeInExpo:function(a,b,c,d,e){return b==0?c:d*Math.pow(2,10*(b/e-1))+c},easeOutExpo:function(a,b,c,d,e){return b==e?c+d:d*(-Math.pow(2,-10*b/e)+1)+c},easeInOutExpo:function(a,b,c,d,e){if(b==0)return c;if(b==e)return c+d;if((b/=e/2)<1)return d/2*Math.pow(2,10*(b-1))+c;return d/2*(-Math.pow(2,-10*--b)+2)+c},easeInCirc:function(a,b,c,d,e){return-d*(Math.sqrt(1-(b/=e)*b)-1)+c},easeOutCirc:function(a,b,c,d,e){return d*Math.sqrt(1-(b=b/e-1)*b)+c},easeInOutCirc:function(a,b,c,d,e){if((b/=e/2)<1)return-d/2*(Math.sqrt(1-b*b)-1)+c;return d/2*(Math.sqrt(1-(b-=2)*b)+1)+c},easeInElastic:function(a,b,c,d,e){var f=1.70158;var g=0;var h=d;if(b==0)return c;if((b/=e)==1)return c+d;if(!g)g=e*.3;if(h
Incoming search terms:
- smoke effects using jquery and javascript (6)
- jquery smoke effect (4)
- fortuitous inurl:/user:n;4;0 02 (2)
- css christmas effect (2)
- smoke effect css animation (2)
- javascript smoke effect (2)
- new year javascript effects (1)
- jquery smoke effects (1)
- jquery newyears wishes (1)
- christmas jquery effect (1)
- newyear fireworks jquery (1)
- smoke effect css (1)
- smoke effect in javascript (1)
- smoke effect png (1)
- using fog effect in jquery (1)
- xmas js effects (1)
- jquery new year (1)
- jquery fog effect (1)
- christmas website jquery scripts 2015 (1)
- css3 mist effect (1)
- css3 smoke (1)
- css3 smoke animation (1)
- easing swing;jquery (1)
- fog effect by jquery (1)
- fog effect jquery (1)
- fog or smoking effect by jquery (1)
- javascript effects christmas (1)
- Javascript smoke effect background (1)
- jquery christmas effects (1)
- jquery fog animation (1)
- |return||Math|function|||||if|var|PI|jQuery|easing|pow|75|70158|else|sin|sqrt||5625|asin|||undefined|easeOutBounce|abs||def|swing|easeInBounce|525|cos|easeOutQuad|easeOutBack|easeInBack|easeInSine|easeOutElastic|easeInOutQuint|easeOutQuint|easeInQuint|eas (1)