Last updated on March 10th, 2022 at 10:16 am
Simple Smoke or mist Effect to greet your visitors this Christmas and New year . The major part of the smoke or mist effect script is done with the help of easing effect in jQuery. The scripts looks bit complex. But I have given a demo at the bottom . You can have a look and customize it according to your convenience.
<head>
<meta charset="utf-8">
<title>Jquery Smoke / Mist Effect Using Javascript</title>
</head>
<style type="text/css" media="screen">
<!--
html,body{
margin:0;
padding:0;
background:#000 url('bg.jpeg') no-repeat center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
# background-size: 1000px 600px;
text-align:center;
color:white}
a{color:#fff; text-decoration:none}
#wrap{
margin:0 auto;
width:95%;
position:relative
}
#smoke_effect_area {
position: relative;
width: 1100px;
height: 550px;
overflow: hidden;
background:url('') 0 0 no-repeat
}
#smoke_effect_area .smoke {
position: absolute;
width: 100%;
height: 100%;
background:url('smoke-texture.png');
margin-left:0px
}
-->
</style>
<body bgcolor=#000>
<div id="wrap">
<div id="smoke_effect_area"></div>
<p align="center"><h1>Wish You A Merry Christmas & A Very Happy New Year 2022, <br>From Mistonline.in Team<br>Have A Wonderful Year Ahead</h1><a href="http://mistonline.in" target="_blank">Back To The Post</a></p>
</div>
<script src="https://code.jquery.com/jquery-1.8.3.min.js"></script>
<script src="jquery-easing.min.js"></script>
<script type="text/javascript">$(function(){
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("#smoke_effect_area");$.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:-$("#smoke_effect_area").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("#smoke_effect_area");$.when($(c).animate({},{duration:a/4,easing:"easeOutCubic",queue:false,complete:function(){$(c).animate({},{duration:a/3,easing:"easeOutCubic",queue:false})}}),$(c).animate({bottom:-$("#smoke_effect_area").height()},{duration:a,easing:"easeOutCubic",queue:false})).then(function(){$(c).remove();b()})},Math.random()*3e3)}}}())</script>
</body>
</body>
</html>We also have a javascript easing script
Take a look at the DEMO
admin