文本起始位置左,中,右

Question

当我加载此动画时,文本从HTML页面的左侧开始.

但是我需要它,如下所示

1. "你好"应该从html页面的左上角一侧开始
2. "你的"应该从页面的中间顶部(中间顶部)开始
3. "世界"应该从页面右上方的小角落开始

(我已经编辑了上面的内容以便更清晰和理解)

总之,应该到中心放大.所有这些都必须返回缩小到页面的左侧.

的jsfiddle

$('#hello').animate({
      zoom: '150%',
      left: window.innerWidth / 1
}, 3000, function() {
    // 4. Pause for 3 seconds
    $(this).delay(3000)
    // 6. zooms out to 200% heading towards left top corner,
    // (logo position) 
    // 7. Fades out when reaching the logo 8. Logo appears
    .animate({
        zoom: '40%',
        left:0
    }, 3000, function() {
        $(this).find('span').fadeOut()
    })
});

h1 {
    font-size: 1em;
    zoom: 200%;
    transition: zoom 1s ease-in-out;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<div id="hello">
<h1>&nbsp;H<span>ello</span>&nbsp;Y<span>our</span>&nbsp;W<span>orld</span></h1>

Answer 1

由于您需要的动画非常复杂（从不同侧面滑入并缩放），也许创建一个自定义动画？

在下面的示例中，我利用 2D 变换和动画的step属性。我<span>在单词之间加了 2 个长字符，将它们推到一边。

点击红色框开始动画。如果你有任何问题随时问。

PS：我在元素上留下了边框，这样你就可以看到它们是如何移动的

$(function() {
  FixMargins();

  $(".container").click(function() {
    var phWidth = $(".placeholder").width();
    var height = $(".container").height();
    containerHeight = $(".theText").height();
    var newTopMargin = (height - containerHeight) / 2;
    
    $(".theText").animate({
      transform: 2
    }, {
      step: function(now, fx) {
        var newscale = 1 + +now;
       $(this).css({
         'transform': "scale(" + newscale + "," + newscale + ")",
                   "opacity":-1 + now
                   });
        $(this).css("margin-top",-150 + (newTopMargin+150) / 2 * now);
        $(".placeholder").css({
          "width": phWidth - phWidth * now/2
        });
        FixMargins();
      },
      duration: 700
    }).promise().done(function() {
      $(this).delay(500);
      var textTop = $(".theText").css("margin-top").split('p')[0];
      var textLeft = $(".theText").css("margin-left").split('p')[0];
      $(this).animate({
        transform: 2
      }, {
        step: function(now, fx) {
          console.log(textLeft - textLeft * now);
          var newscale = 3 - +now;
          $(this).css('transform', "scale(" + newscale + "," + newscale + ")");

          $(".theText").css("marginLeft", textLeft - textLeft / 2 * now);
          $(".theText").css("marginTop", textTop - textTop / 2 * now);
        },
        duration: 500
      }).promise().done(function() {
       
        $(this).find('span').css({
          "position":"absolute"
        }).animate({
          "width":0,
          "opacity":0
        });
      });
    });


  });
});

function FixMargins() {

  width = $(".container").width();
  containerWidth = $(".theText").width();
  leftMargin = (width - containerWidth) / 2;
  $(".theText").css("marginLeft", leftMargin);

}

.container {
  width: 500px;
  height: 300px;
  position: relative;
  overflow: hidden;
  white-space: nowrap;
  border:1px solid red;
}
.theText {
  position: absolute;
  margin-top:-150px;
  opacity:0;
}
.placeholder {

  width: 200px;
  display: inline-block;

}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container"> <span class="theText">
        H<span>ello</span>
  <span class="placeholder"></span>
  Y<span>our</span>
  <span class="placeholder"></span>
  W<span>orld</span>
  </span>
</div>