3

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);

バブルの速度は速くなりますが、ページの下部から同時に一緒に移動し始めるため、非現実的に見えます。また、他のバブルよりも非常に高速なバブルもあります。

4

1 に答える 1

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
于 2013-10-21T20:14:54.050 に答える