Last updated on January 4th, 2022 at 08:57 am
Simple Smoke or mist Effect to greet your visitors this Christmas and New year (2023). 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.
<!Doctype html> <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Â
The CSS will look like thishtml,body{ margin:0; padding:0; background:#000 url('bg.jpeg') no-repeat center; 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: 100%; height: 550px; overflow: hidden; background:url('') 0 0 no-repeat } #smoke_effect_area .smoke { position: absolute; width: 600px; height: 600px; background:url('smoke-texture.png'); margin-left:0px }Take a look at the DEMO