用蒸汽像一杯茶动画图像

Question

用蒸汽像一杯茶动画图像

Mik*_*ind 8 javascript jquery jquery-animate

我做了这个:jsfiddle.net/BWncv/ 我喝了一杯带蒸汽的茶.我想为这个蒸汽制作动画.但是这个动画并不顺利.

蒸汽必须上下动画起来.就像一杯茶顶上的蒸汽.你可以在链接中看到它.

如何修复它以使烟雾充满活力？

您可以更改js上的代码并更新它.

Answer 1

Yos*_*shi 15

试试这个(演示):

<!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>

Run Code Online (Sandbox Code Playgroud)

这里有一个额外的演示http://jsfiddle.net/nRas9/1/,完全随机化元素.

我的最终代码,虽然有点复杂:

http://jsfiddle.net/Fbtug/32/ (感谢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>

Run Code Online (Sandbox Code Playgroud)

归档时间：	14 年，4 月前
查看次数：	6462 次
最近记录：	11 年，12 月前