CSS3/jQuery的泡泡动画

Question

我新的Web开发，所以请与我裸:)

我发现了这片上codepen，它是气泡上浮速度随意的动画，给它一个真实的感受就好像它在啤酒或苏打玻璃中一样。

基本上我想用它作为我正在进行的项目的背景。尽管我需要加快速度，但是在其他人移动速度相对较慢的情况下，他们中的一部分速度并不快。

该脚本使用math.random来生成速度，因为显然，所有需要是一个不同的速度的逼真效果，但我不能让他们以合理的速度相互协作。这里是代码：

var $bubbles = $('.bubbles'); 

function bubbles() { 

// Settings 
var min_bubble_count = 20, // Minimum number of bubbles 
    max_bubble_count = 40, // Maximum number of bubbles 
    min_bubble_size = 3, // Smallest possible bubble diameter (px) 
    max_bubble_size = 8; // Largest possible bubble diameter (px) 

// Calculate a random number of bubbles based on our min/max 
var bubbleCount = min_bubble_count + Math.floor(Math.random() * (max_bubble_count + 1)); 

// Create the bubbles 
for (var i = 0; i < bubbleCount; i++) { 
$bubbles.append('<div class="bubble-container"><div class="bubble"></div></div>'); 
} 

// Now randomise the various bubble elements 
$bubbles.find('.bubble-container').each(function(){ 

// Randomise the bubble positions (0 - 100%) 
var pos_rand = Math.floor(Math.random() * 101); 

// Randomise their size 
var size_rand = min_bubble_size + Math.floor(Math.random() * (max_bubble_size + 1)); 

// Randomise the time they start rising (0-15s) 
var delay_rand = Math.floor(Math.random() * 15); 

// Randomise their speed (3-8s) 
var speed_rand = 3 + Math.floor(Math.random() * 3); 

// Cache the this selector 
var $this = $(this); 

// Apply the new styles 
$this.css({ 
    'left' : pos_rand + '%', 

    '-webkit-animation-duration' : speed_rand + 's', 
    '-moz-animation-duration' : speed_rand + 's', 
    '-ms-animation-duration' : speed_rand + 's', 
    'animation-duration' : speed_rand + 's', 

    '-webkit-animation-delay' : delay_rand + 's', 
    '-moz-animation-delay' : delay_rand + 's', 
    '-ms-animation-delay' : delay_rand + 's', 
    'animation-delay' : delay_rand + 's' 
}); 

$this.children('.bubble').css({ 
    'width' : size_rand + 'px', 
    'height' : size_rand + 'px' 
}); 

}); 
} 

// In case users value their laptop battery life 
// Allow them to turn the bubbles off 
$('.bubble-toggle').click(function(){ 
if($bubbles.is(':empty')) { 
bubbles(); 
$bubbles.show(); 
$(this).text('Bubbles Off'); 
} else { 
$bubbles.fadeOut(function(){ 
    $(this).empty(); 
}); 
$(this).text('Bubbles On'); 
} 

return false; 
}); 

bubbles(); 

这里的CSS：

// Sass Mixins 

// Animation Mixin 

@mixin animate($animation, $duration, $repeat, $easing) { 
-webkit-animation: $animation $duration $repeat $easing; 
    -moz-animation: $animation $duration $repeat $easing; 
    -ms-animation: $animation $duration $repeat $easing; 
     animation: $animation $duration $repeat $easing; 
} 


// Keyframes Mixin 
// https://gist.github.com/ericam/1607696 

@mixin keyframes($name) { 
@-webkit-keyframes #{$name} { 
    @content; 
} 
@-moz-keyframes #{$name} { 
    @content; 
} 
@-ms-keyframes #{$name} { 
    @content; 
} 
@keyframes #{$name} { 
    @content; 
} 
} 


// Main Styles 

html, 
body { 
height: 100%; 
} 

body { 
background: #09f; 

@include background-image(linear-gradient(bottom, #09f, #45d1ff)); 
} 



// Bubble Styles 

.bubbles { 
position: relative; 
overflow: hidden; 
width: 100%; 
height: 100%; 
margin: 0 auto; 
} 

.bubble-container { 
position: absolute; 
bottom: 0; 

@include animate(bubblerise, 4s, infinite, ease-in); 
@include opacity(0); 
} 

.bubble { 
width: 6px; 
height: 6px; 
margin: 0 auto; 
border: 1px solid rgba(255,255,255,0.5); 
background: rgba(255,255,255,0.25); 

@include border-radius(10px); 
@include animate(bubblewobble, 0.4s, infinite, linear); 
} 


// Keyframe Animations 

@include keyframes(bubblerise) { 
0% {  
    bottom: 0; 

@include opacity(0); 
} 
5% {  
    bottom: 0; 

@include opacity(1); 
} 
99% { 
    @include opacity(1); 
} 
100% {  
    bottom: 100%; 

@include opacity(0); 
} 
} 


@include keyframes(bubblewobble) { 
0% { 
    margin-left: 0; 
} 
50% { 
    margin-left: 2px; 
} 
} 

所以基本上我试图编辑本段：

// Randomise their speed (3-8s) 
var speed_rand = 3 + Math.floor(Math.random() * 3); 

这样：

// Randomise their speed (3-8s) 
var speed_rand = 2 + Math.floor(Math.random() * 0.5); 

它加速了气泡，但它们开始一起移动同时从页面底部看，这使得它看起来不切实际，有些也比其他人更快。

任何帮助赞赏。感谢:)

Answer 1

通过改变3 - > 0.5，你降低了速度，但也降低了变异性（实际上，使所有速度相同，因为Math.floor(Math.random() * 0.5)总是为零）。您可能需要增加的第一个值，而不是：

var speed_rand = 0.5 + Math.random() * 2; 
       ^     ^
      min time: 0.5 sec  variability: add between 0 and 2 sec