CODEWITHSUNDEEP
javascriptjqueryjquery-animate
Mike Vierwind
Mike Vierwind

Reputation: 1520

Animate images with steam like a cup of tea

I have made this: jsfiddle.net/BWncv/ I have a cup of tea with steam. I want to animate this steam. But this animation is not going well.

The steam must be animated up and up and up. Like steam from the top of a cup of tea. You can see it in the link.

How can I fix it so that the smoke is well animated?

You can change the code on js fiddle and update it.

Upvotes: 9

Views: 8057

Answers (3)

Yoshi
Yoshi

Reputation: 54659

Try this (demo):

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>js</title>
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
    <style type="text/css">

      #viewport {
        position: relative;

        width: 400px;
        height: 300px;

        margin: 100px auto;
        border: 1px solid #333333;

        overflow: hidden;
      }

      #viewport .smoke {
        position: absolute;
        width: 20px;
        height: 40px;
        background: rgba(0, 0, 0, 0.5);
      }

      #viewport .smoke1 {
        left: 140px;
        top: 260px;
      }

      #viewport .smoke2 {
        left: 180px;
        top: 260px;
      }

      #viewport .smoke3 {
        left: 220px;
        top: 260px;
      }
    </style>
  </head>

  <body>
    <div id="viewport">
      <div class="smoke smoke1"></div>
      <div class="smoke smoke2"></div>
      <div class="smoke smoke3"></div>
    </div>

    <script type="text/javascript">
      (function () {
        "use strict";

        $('#viewport .smoke').each(function ns () {
          var initialTop = $(this).position().top;

          $(this).animate({
            top: - $(this).height()
          }, Math.random() * 2000 + 2000, function () {
            $(this).css({
              top: initialTop,
              opacity: 0
            });
          }).animate({
            opacity: 1
          }, ns);
        });
      }());
    </script>
  </body>
</html>

A little extra demo here http://jsfiddle.net/nRas9/1/ which fully randomizes the elements.

My final code, a little complicated though:

http://jsfiddle.net/Fbtug/32/ (updated thanks to Luke Stanley)

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>js</title>
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
    <style type="text/css">
      #viewport {
        position: relative;
        width: 1000px;
        height: 600px;
        margin: 100px auto;
        border: 1px solid #333333;
        overflow: hidden;
        background: transparent url("http://www.mikevierwind.nl/images/bg-selection.jpg") no-repeat 0px -29px;
      }

      #viewport .smoke {
        position: absolute;
        width: 215px;
        height: 410px;
        bottom: 230px;
        left: 90px;
      }

      .smoke1 {
        background: transparent url("http://www.mikevierwind.nl/images/stoom1.png");
      }

      .smoke2 {
        background: transparent url("http://www.mikevierwind.nl/images/stoom2.png");
      }

      .smoke3 {
        background: transparent url("http://www.mikevierwind.nl/images/stoom3.png");
      }
    </style>
  </head>

  <body>
    <div id="viewport">
      <img
        src="http://www.mikevierwind.nl/images/bg-selection-carousel.png"
        width="2610"
        height="600"
        alt=""
        class="carousel-image"
      />
    </div>

    <script type="text/javascript">
      (function () {
        "use strict";

        var i = 0;
        for (; i < 3; i += 1) {
          setTimeout((function (idx) {
            return function addSmoke () {
              var
                time = 7500,
                smoke = $('<div />', {
                  class: 'smoke smoke' + (idx + 1),
                  css: {
                    opacity: 0
                  }
                });

              // add to viewport
              $(smoke).appendTo('#viewport');

              // animate
              $.when(
                // animate to 100% opacity in some part of the total time (fade in)
                $(smoke).animate({
                  opacity: 1
                }, {
                  duration: time * 0.2,
                  easing: 'linear',
                  queue: false,

                  // animate to 0% opacity in the remaining time (fade out)
                  complete: function () {
                    $(smoke).animate({
                      opacity: 0
                    }, {
                      duration: time * 0.8,
                      easing: 'linear',
                      queue: false
                    });
                  }
                }),

                // animate movement
                $(smoke).animate({
                  bottom: $('#viewport').height()
                }, {
                  duration: time,
                  easing: 'linear',
                  queue: false
                })

              // when all done, remove and add new random smoke
              ).then(function () {
                $(smoke).remove();
                addSmoke();
              });
            };
          }(i % 3)), i * 2500);
        }
      }());
    </script>
  </body>
</html>

Upvotes: 15

cillierscharl
cillierscharl

Reputation: 7117

Some awesome answers and here a sample too using animate to alter the top and the opacity: (Demo)

smoke1.animate({                
top: -500,
opacity: 0.5,
}, 7000, function(){
    smoke1.css({'top':300,'opacity':1})
    smoke1Animate();
});

Of course stretching out the top so the opacity fades in view.

Kicking off the animations at different times as to make them fade in gradually:

smoke1Animate();  
setTimeout(function(){ smoke2Animate(); },2000);
setTimeout(function(){smoke3Animate(); },4000);

And then of course calling themselves when they are finished.

Upvotes: 2

Ryan
Ryan

Reputation: 3181

You need to make the smoke rise off the viewable area or fade out at its apex, hide it, then reset it's starting height (top or top-margin, depending on your method) property to make it show up back at the bottom and fade it in again. Do this to all three images, and it will seem like the steam is perpetually rising. Or, make an animated gif to put in the foreground.

Upvotes: 0

Related Questions