Question

这是我关于SO的第一个问题，我希望我做得很好。

我的目标是拥有一个“神奇的符文效果”，其中文本的每个字母“浮动”其原始位置，就好像它悬浮在半空中的某种神奇的羊皮纸上。

简单地说，它将用于游戏。我知道如何在页面上“随意漂浮”，如热气球;但这不是我想做的事情：我希望这些字母能够绕原来的位置移动。

到目前为止，我已经尝试了一些东西（你可以在https://jsfiddle.net/3as4omj2/查看我的小提琴），但我遇到了问题。

（不要担心默认字体和丑陋的浅绿色背景，它用于定位）

function float(element, range, speed) {
    var position = $(element).offset(); 
    $(element).attr( 'original_x', position.left);
    $(element).attr( 'original_y', position.top);
    $(element).attr( 'range', range );
    $(element).attr( 'speed', speed );
    drift(element);
}

function drift(element) {
    var max = Number.parseInt($(element).attr('range'));
    var speed = Number.parseInt($(element).attr('speed'));
    var pos_x = Number.parseInt($(element).attr('original_x'));
    var pos_y = Number.parseInt($(element).attr('original_y'));
    var drift_x = max/2 - Math.floor(Math.random()*max);
    var drift_y = max/2 - Math.floor(Math.random()*max);
    var final_x = pos_x + drift_x;
    var final_y = pos_y + drift_y;
    var total_wait = Math.sqrt(drift_x*drift_x+drift_y*drift_y)*speed;
    $(element).animate({
        left : final_x+"px",
        top : final_y+"px"
    }, total_wait, /*"linear",*/ function(){
        setTimeout(function () {
            drift(element);  
        }, Math.abs(total_wait-Math.floor(Math.random()*150)));
    });
}

$( "#go" ).click(function() {
  float($("#t"),50, 10);
  float($("#e"),50, 10);
  float($("#s"),50, 10);
  float($("#s"),50, 10);
  float($("#t2"),50, 10);
})

到目前为止，这是我的问题和疑问：

我不能排列我的信件来形成一个单词（比如，“TEST”是垂直的，我很乐意把它看作一个水平的“TEST”）;理想情况下，使用跨度，因此我可以动态添加单词或删除它而不创建数十个元素。
文字移动香蕉......我似乎并不理解为什么。：（
我希望能够“移动原始位置”，以便我可以进一步设置字母动画（例如，从左到右移动一般文字）。
最终，有没有办法优化用户显示器的字体大小？

你们能给我一些建议吗？

提前谢谢。

Answer 1

您可以尝试使用CSS3动画，使用:nth-of-type()选择器为每个字母设置自定义动画延迟。要更好地了解所有动画属性，请参阅此docs。剩下的就是调整translate值。

如果您足够坚定，也可以为每个字母创建自定义@keyframes。

.runes span {
  position: relative;
  display: inline-block;
  padding: 10px;
  background: aqua;
  animation-duration: 2s;
  animation-name: float;
  animation-iteration-count: infinite;
  animation-direction: alternate;
  animation-timing-function: ease-in-out;
}

.runes span:nth-of-type(1) {
  animation-delay: .3s;
}

.runes span:nth-of-type(2) {
  animation-delay: .4s;
}

.runes span:nth-of-type(3) {
  animation-delay: .5s;
}

.runes span:nth-of-type(4) {
  animation-delay: .7s;
}

@keyframes float {
  0% {
    transform: translate(0, 0);
  }
  25% {
    transform: translate(8px, 0);
  }
  50% {
    transform: translate(0, 8px);
  }
  75% {
    transform: translate(5px, 5px);
  }
}

<section class="runes">
  <span>T</span>
  <span>E</span>
  <span>S</span>
  <span>T</span>
</section>

JS / CSS - 在页面上移动原始位置的字母

1 个答案: