几句话/文字正弦波jquery动画

我已经找到并调整了代码，可以以正弦的方式逐个字母地动画一个句子。然而，有几个问题：几句话/文字正弦波jquery动画

我似乎无法让它在几个句子上工作，基本上想象下面的例子中的两个或三个以上的句子，以便所有的句子都在下面对方同时动画
无法弄清楚如何使句子动画结束，并在列表中选择开始再次在页面的左上角再次出现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>

来源

2015-05-26 user3241846

能否请您解释一下您的两个问题吗？因为我认为我可以为你解答，但不明白你真正需要什么。你的第一个问题意味着你想要多于一个句子，在第一个问题显示并离开页面后播下第二个问题？或者你想同时在第一个下面显示第二个？你的第二个问题是，你想修改'sentences_block''div'的宽度而不是100％的页面，它应该在'options'' div'之前结束？这两个是正确的吗？ – EhsanT

@EhsanT我想在第一个下面显示第二个和第三个句子，它们都是同时动画的。是的，第二个，你得到它，我试图给句子块添加边距或填充，它不工作（我无法修复块的屏幕宽度可能会有所不同，具体取决于分辨率或设备）。 – user3241846

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

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

来源

2015-05-26 12:41:27

这就是我想要的感谢！对于第二个问题，如果我修复了sentence_block的宽度，对于不同的页面宽度，它将不正确。我想要的可以说是一个数学公式... sentences_block width =页面宽度（不管它是什么） - #list width（包括填充和边距）。我该如何做到这一点？我希望我这次解释得很好， – user3241846

见编辑，它比这更简单。你希望你的宽度等于列表的左边偏移量。 –

任何想法如何反转方向？文本将从右侧开始并在左侧结束。 – user3241846

几句话/文字正弦波jquery动画

回答

相关问题