Question

我已经找到并调整了代码，这些代码将以正弦方式逐字逐句地设置句子动画。但是，有一些问题：

我似乎无法让它在几个句子上工作，基本上想象两个或三个句子就像它下面的例子中的那个，所以所有句子都在彼此之下并同时动画
无法弄清楚如何使句子动画结束并在列表选项div块的开头再次出现在页面左侧

<!DOCTYPE html>
<html>

<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
</head>

<body>
  <div id="options">
    <ul id="list" style="">
      <li>ABOUT</li>
      </br>
      <li>THE STREAM</li>
      </br>
      <li>TELL YOUR STORY</li>
      </br>
      <li>COMING EVENTS</li>
      </br>
      <li>CONTACT</li>
    </ul>
  </div>
  <div id="sentences_block">
    <div id="elements" style="margin-left:50px;"></div>
    <div>
</body>
<style type="text/css">
  .letter {
        font-family: sans-serif;
        font-size: 40px;
        font-weight: bold;
        position: absolute;
        top: -100px; 
        left: 0px;
    }
  #list {
  list-style-type: none; 
  color: #0067CE;font-weight: bold;
  font-style:arial;
  font-size:15px;
  float:right;
  }
  #options {
  margin-right:20px;
  }
</style>

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
  $(document).ready(function() {
        var width = $(window).width() - 0;
        var starttime = new Date().getTime();
        var letters = document.location.hash ? document.location.hash.substr(1) : 'sentence';
        var elements = $('#elements');

        for (i = 0; i < letters.length; i++) {
            $('<div>', {
                html: letters[i]
            })
            .addClass('letter')
            .appendTo(elements);
        }

        function run() {
            var elapsed = new Date().getTime() - starttime;
            var pos = elapsed * 0.2;

            $('div.letter').each(function(index, letter) {
                var posx = (pos + 40 * index) % width;
                var posy = 200 + Math.sin(posx / 50) *25;
                $(letter).css('left', posx + 'px');
                $(letter).css('top', posy + 'px');

            });

        }

        setInterval(run, 3);
    });
</script>

</html>

Answer 1

多个句子的一个解决方案是使每个字母高几行。你需要计算字母元素的最大数量并保持每个句子的长度相同，但是使用空格你可以得到你想要的任何句子，保留你的实际代码结构。像这样：

   var letters = document.location.hash ? document.location.hash.substr(1) : 'sentence';
   var line_2 = document.location.hash ? document.location.hash.substr(1) : 'another ';
   var line_3 = document.location.hash ? document.location.hash.substr(1) : ' again   ';

    $('<div>', {
        html: letters[i]+'<br>'+line_2[i]+'<br>'+line_3[i]
    })

对于宽度，我不确定我理解，但如果您希望动画停止选项开始的位置，可以通过添加#list加上边距的宽度来计算选项的宽度，加上填充。或者，更简单地说，动画的宽度可以等于列表的左偏移量。像这样：

var width = $('#list').offset().left

请参阅codepen：http://codepen.io/anon/pen/GJNMMP

几句/文本正弦波Jquery动画

1 个答案: