I've made a simple animation of a balloon moving from bottom to top. First loop works fine and then it starts some random motion. i.e. I want balloons to come one after the other from bottom to top without any randomness. And repeat.
<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;
}
Fiddle: https://jsfiddle.net/znrhkf3c/12/
Any help here is really appreciated.
A solution could be to use only CSS for this animation. You can change the duration and delay as you want.
#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>
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With