smoke effect

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://www.ads-software.com/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="https://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('https://demo.web3designs.com/milk_tea.jpg') 0 0 no-repeat
}
#viewport .smoke {
  position: absolute;
  width: 800px;
  height: 800px;
  background:url('https://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: https://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

@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.

hello there guys, i have A very similar question

i want to emulate this effect,

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, say about need share the theme becouse maybe i have that on my page ( i think the js )

https://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.