Question

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

但我需要它，如下所示

＆＃34;你好＆＃34;应该从html页面左上角的一点外面开始

＆＃34;你＆＃34;应该从页面的中间顶部（中间顶部）的小外面开始

＆＃34;世界＆＃34;应该从页面右上方的小角落开始

（为了更清晰和理解，我编辑了以上内容）

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

＆＃13;

$('#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()
    })
});

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 1

我编辑了你的代码。但是在这个代码中你没有类缩放和其他类。此代码工作基于字体大小。

** Html **

<div id="hello">
    <h1>H <span>ello</span></h1>
    <h1>Y <span>our</span></h1>
    <h1>W <span>orld</span></h1>
</div>

** Css **

#hello h1 {
    width: 33%;
    font-size: 1em;
    text-align: center;
    display: inline-block;
}

**已编辑＆gt; Css **

#hello{
    -webkit-animation: myfirst linear 12s; /* Chrome, Safari, Opera */
    animation: myfirst linear 12s;
}

@-webkit-keyframes myfirst {
    0%   {padding:0}
    10%  {padding: 40vh 0}
    50%  {padding: 40vh 0}
    85%  {padding: 40vh 0}
    100% {padding: 0}
}

@keyframes myfirst {
    0%   {padding:0}
    10%  {padding: 40vh 0}
    50%  {padding: 40vh 0}
    85%  {padding: 40vh 0}
    100% {padding: 0}
}

** Jquery **

window.onload = function() {

    var h1 = $('#hello h1');
    h1.animate({fontSize: '5em'}, 5000,

        function () {
            h1.delay(3000);

            h1.animate({'font-size': '1em'}, 2000,
                function () {
                    h1.children('span').fadeOut(1000);
                }
            );

        }
    );
};

Answer 2

因为您需要的动画非常复杂（从不同侧面滑入和缩放），或许可以创建自定义动画？

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

单击红色框以启动动画。如果您有任何疑问，请随时提出。

ps：我在元素上留下了边框，以便您可以看到它们的移动方式

＆＃13;

$(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);

}

＆＃13;

.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;

}

＆＃13;

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

＆＃13;

文字起始位置左，中，右

2 个答案: