Title: smoke effect
Last modified: September 26, 2016

---

# smoke effect

 *  [lilu2016](https://wordpress.org/support/users/lilu2016/)
 * (@lilu2016)
 * [9 years, 10 months ago](https://wordpress.org/support/topic/smoke-effect/)
 * Hey, How can i add a smoke effect to my page like here
    [http://dismagazine.com/discussion/82540/miss-dese-iron-chef/](http://dismagazine.com/discussion/82540/miss-dese-iron-chef/)
   Thank you very much Lilu

Viewing 3 replies - 1 through 3 (of 3 total)

 *  [wipeoutmedia](https://wordpress.org/support/users/wipeoutmedia/)
 * (@wipeoutmedia)
 * [9 years, 10 months ago](https://wordpress.org/support/topic/smoke-effect/#post-8222214)
 * Hi Lilu,
 * Our CSS & JavaScript Toolbox plugin can assist you. We have created a smoke effect
   before and it is a matter of installing our plugin. [https://wordpress.org/plugins/css-javascript-toolbox/](https://wordpress.org/plugins/css-javascript-toolbox/)
   
   Pasting this code into one of the code blocks:
 *     ```
       <script type="text/javascript" src="//code.jquery.com/jquery-1.8.3.js"></script>
       <script src="http://demo.web3designs.com/jquery-easing.min.js"></script>
   
       <style type="text/css">
       html,body{
         margin:0;
         padding:0; 
         background:#2A140E; 
         text-align:center;
         color:brown}
       a{color:#fff; text-decoration:none}
       #wrap{
         margin:0 auto; 
         width:800px; 
         position:relative
       }
       #viewport {
         position: relative;
         width: 800px;
         height: 600px;
         overflow: hidden;
         background:url('http://demo.web3designs.com/milk_tea.jpg') 0 0 no-repeat
       }
       #viewport .smoke {
         position: absolute;
         width: 800px;
         height: 800px;
         background:url('http://i.imgur.com/pVI5HbP.png') no-repeat;
         bottom: 230px; 
         margin-left:10px
       }
       </style>
   
       <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("#viewport");
                       $.when($(c).animate({
                           opacity: 1
                       }, {
                           duration: a / 4,
                           easing: "linear",
                           queue: false,
                           complete: function() {
                               $(c).animate({
                                   opacity: 0
                               }, {
                                   duration: a / 3,
                                   easing: "linear",
                                   queue: false
                               })
                           }
                       }), $(c).animate({
                           bottom: $("#viewport").height()
                       }, {
                           duration: a,
                           easing: "linear",
                           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: "linear",
                           queue: false,
                           complete: function() {
                               $(c).animate({}, {
                                   duration: a / 3,
                                   easing: "linear",
                                   queue: false
                               })
                           }
                       }), $(c).animate({
                           bottom: $("#viewport").height()
                       }, {
                           duration: a,
                           easing: "linear",
                           queue: false
                       })).then(function() {
                           $(c).remove();
                           b()
                       })
                   }, Math.random() * 3e3)
               }
           }
       }())
       </script>
       ```
   
 * Then adding this to your page.
 *     ```
       <div id="wrap">
       <div id="viewport"></div>
       ```
   
 * Here is it in action: [http://design.css-javascript-toolbox.com/smoke-effect/](http://design.css-javascript-toolbox.com/smoke-effect/)
   
   Now it is slightly different to that website, but it is the same principle. Hope
   this helps.
 * Regards,
    Damian
 *  [Andrew Nevins](https://wordpress.org/support/users/anevins/)
 * (@anevins)
 * WCLDN 2018 Contributor | Volunteer support
 * [9 years, 10 months ago](https://wordpress.org/support/topic/smoke-effect/#post-8222252)
 * [@lilu2016](https://wordpress.org/support/users/lilu2016/), The solution will
   likely be specific to your theme. Which theme are you using? For example. you
   may already have the jQuery library loading on your page and loading it twice
   may cause things to break.
 *  [Streamlife](https://wordpress.org/support/users/streamlife/)
 * (@streamlife)
 * [9 years, 9 months ago](https://wordpress.org/support/topic/smoke-effect/#post-8445249)
 * hello there guys, i have A very similar question
 * i want to emulate this effect,
 * [https://eu.wargaming.net/shop/wot/specials/2944/](https://eu.wargaming.net/shop/wot/specials/2944/)
 * The smoke one, If you notice Behind the image is passing a very smooth cloud.
 * and my site web are this one, i share my site right here, becouse i dont undertend
   nothing from commands and Css js things, and i read what [@lilu2016](https://wordpress.org/support/users/lilu2016/),
   say about need share the theme becouse maybe i have that on my page ( i think
   the js )
 * [http://www.vskgaming.com.ar/shop](http://www.vskgaming.com.ar/shop)
    that my
   page, maybe can give me one hand, i want to put it in one imagne ( the smoke 
   one )
 * thanks in advance guys.
    Best regards.

Viewing 3 replies - 1 through 3 (of 3 total)

The topic ‘smoke effect’ is closed to new replies.

## Tags

 * [css](https://wordpress.org/support/topic-tag/css/)
 * [html](https://wordpress.org/support/topic-tag/html/)

 * In: [Fixing WordPress](https://wordpress.org/support/forum/how-to-and-troubleshooting/)
 * 3 replies
 * 4 participants
 * Last reply from: [Streamlife](https://wordpress.org/support/users/streamlife/)
 * Last activity: [9 years, 9 months ago](https://wordpress.org/support/topic/smoke-effect/#post-8445249)
 * Status: not resolved

## Topics

### Topics with no replies

### Non-support topics

### Resolved topics

### Unresolved topics

### All topics