Анимированные образы с паром, как чашка чая - PullRequest
Новая
       2

Анимированные образы с паром, как чашка чая

8 голосов
/ 20 октября 2011

Я сделал это: jsfiddle.net / BWncv / У меня чашка чая с паром.Я хочу оживить этот пар.Но эта анимация идет не очень хорошо.

Пар должен быть оживлен вверх и вверх и вверх.Как пар с вершины чашки чая.Вы можете увидеть это в ссылке.

Как это исправить, чтобы дым хорошо анимировался?

Вы можете изменить код на js fiddle и обновить его.

Ответы [ 3 ]

15 голосов
/ 20 октября 2011

Попробуйте это ( 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>

Небольшое дополнительное демо здесь http://jsfiddle.net/nRas9/1/, которое полностью рандомизирует элементы.

Мой окончательный код немного сложнее:

http://jsfiddle.net/Fbtug/32/ (обновлено благодаря Люку Стэнли) 

<!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>
2 голосов
/ 20 октября 2011

Некоторые удивительные ответы, и здесь также пример, использующий animate для изменения верха и непрозрачности: ( Демо ) 

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

Конечно, растягивая верх, чтобы помутнение исчезло из виду.

Отключение анимации в разное время, чтобы она постепенно появлялась: 

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

А потом, конечно, позвать себя, когда они закончат.

0 голосов
/ 20 октября 2011

Вам нужно заставить дым подниматься над видимой областью или исчезать на его вершине, скрывать его, а затем сбрасывать его начальную высоту (верхнюю или верхнюю границу, в зависимости от вашего метода), чтобы он появлялся на дно и исчезать снова. Сделайте это для всех трех изображений, и кажется, что пар постоянно поднимается. Или сделайте анимированный GIF-файл, чтобы поместить его на передний план.

...