时间戳

首页 > 解决方案 > 飞行气球动画

javascript - 飞行气球动画

问题描述

我制作了一个气球从下到上移动的简单动画。第一个循环工作正常，然后它开始一些随机运动。即我希望气球从下到上一个接一个地来，没有任何随机性。并重复。

<div id="parent">
    <div class="message">1. Bob</div>
    <div class="message">2. Alice</div>
    <div class="message">3. Eve</div>
</div>


jQuery.fn.verticalMarquee = function(vertSpeed, horiSpeed, index) {

    this.css('float', 'left');

    vertSpeed = vertSpeed || 1;
    horiSpeed = 1/horiSpeed || 1;

    var windowH = this.parent().height(),
        thisH = this.height(),
        parentW = (this.parent().width() - this.width()) / 2,
        rand = Math.random() * (index * 1000),
        current = this;

    this.css('margin-top', windowH + thisH);
    this.parent().css('overflow', 'hidden');

    setInterval(function() {
        current.css({
            marginTop: function(n, v) {
                return parseFloat(v) - vertSpeed;
            },
            marginLeft: function(n, v) {
                //return (Math.sin(new Date().getTime() / (horiSpeed * 5000) + 1000) + 1) * parentW;
                return (Math.pow(new Date().getTime() / ( 5000) + 1000) + 1);
            }
        });
    }, 15);

    setInterval(function() {
        if (parseFloat(current.css('margin-top')) < -thisH) {
            current.css('margin-top', windowH + thisH);
        }
    }, 250);
};
var message = 1;
$('.message').each(function(message) {  
    $(this).verticalMarquee(0.5, 0.5, message);
    message++
});

parent {

    left: 0;
    top: 0;
    width: 400px;
    height: 100%;
}

.message,.message-1 {
    height: 120px;
    width: 120px;
    background-color: orange;
    color: white;
    z-index: -9999;
    line-height: 115px;
    text-align: center;
    font-family: Arial, sans-serif;
    font-weight: bold;

    -webkit-border-radius: 60px;
    -moz-border-radius: 60px;
    border-radius: 60px;
}

小提琴：https ://jsfiddle.net/znrhkf3c/12/

非常感谢这里的任何帮助。

标签： javascripthtmlcss

解决方案

一个解决方案可能是仅对该动画使用CSS 。您可以根据需要更改持续时间和延迟。

#parent {
	position: relative;
	width: 400px;
	height: 100vh;
	overflow: hidden;
}
.message {
	position:absolute;
	left: 0;
	bottom: -120px;
	height: 120px;
	width: 120px;
	background-color: orange;
	color: white;
	line-height: 115px;
	text-align: center;
	font-family: Arial, sans-serif;
	font-weight: bold;
	border-radius: 60px;
	animation: move 6s infinite linear;
}
.message:nth-child(2){
	left:120px;
	animation-delay: 2s;
}
.message:nth-child(3){
	left:240px;
	animation-delay: 4s;
}
@keyframes move {
	0% {
		bottom: -120px;
	}
	100% {
		bottom: 100%;
	}
}
<div id="parent">
   <div class="message">Bob</div>
   <div class="message">Alice</div>
   <div class="message">Eve</div>
</div>

推荐阅读