滚动页面时气泡不移动（浮动） [英] Bubbles not moving(floating) while scrolling page

问题描述

我正在研究一些事情。正如您可以从 http://logic.al/lufra/rreth-nesh/historiku [< a href =http://logic.al/lufra/rreth-nesh/historikutarget =_ blanktitle =New Window> ^ ]



内容周围有气泡。这些气泡应该在滚动页面时上下移动（浮动）。像这里： https://moz.com/about [ ^ ]



任何人都可以帮我解决这个问题吗？



谢谢！



更新：

评论代码：

  var  $ bubble = $（' < span class =code-string> .breath'）; 
 
  function  bubbles（）{
 
  //  设置 
 
  //  根据我们的最小值/最大值计算随机数量的气泡 
  var  bubbleCount = min_bubble_count + 数学 .floor（ Math  .random（）*（max_bubble_count +  1 ））; 
 
  //  创建气泡 
  for （ var  i =  0 ; i< bubbleCount; i ++ ）{
 $ bubble.append（' < div class =bubble-container>< div class =bubble>< / div>< / div>'）; 
} 
 
  //  现在随机化各种气泡元素 
 $ bubble.find（'  .bask-container'）。each（ function （）{
 
  //  随机泡沫位置（0  -  100％） 
  var  pos_rand = 数学 .floor （ Math  .random（）*  101 ）; 
 
  //  随机化其大小 
  var  size_rand = min_bubble_size +  Math  .floor（ Math  .random（）*（max_bubble_size +  1 ））; 
 
  //  随机化他们开始上升的时间（0-15s） 
  var  delay_rand =  Math  .floor（ Math  .random（）*  16 ）; 
 
  //  随机化他们的速度（3-8s） 
  var  speed_rand =  3  + 数学 .floor （ Math  .random（）*  9 ）; 
 
  //  随机模糊 
  var  blur_rand = 数学 .floor（ Math  .random（）* < span class =code-digit> 3 ）; 
 
  //  缓存此选择器 
  var  $ this = $（ this ）; 
 
  //  应用新样式 
 $ 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'，
 
 '   -  webkit-filter'：'  blur（' + blur_rand + ''   px）'，
 '   -  moz-filter'：'  blur（' + blur_rand + '  px）'，
 '   -  ms-filter'：'  blur（' + blur_rand + '  px）'，
 '  filter'：'  blur（' + blur_rand + '  px）'，
}）; 
 
 $ this.children（' 。bubble'）。css（{ 
 '  width'：size_rand + '  px'，
 '  height '：size_rand + '  px' 
}）; 
 
}）; 
} 
 
  //  如果用户重视笔记本电脑的电池续航时间 
  //  允许他们关闭气泡 
 $（' 。bubble-toggle'）。click（ function （）{
  if （$ bubble.is（' ：empty'））{
 bubble（）; 
 $ bubble.show（）; 
 $（ this ）。text（'  Bubbles Off'）; 
}  else  {
 $ bubble.fadeOut（ function （）{
 $（ this ）。empty（）; 
}）; 
 $（ this ）。text（< span class =code-string>'  Bubble On' ）; 
} 
 
 返回  false ; 
}）; 
 
 bubble（）; 

解决方案

bubble =

（ ' .bloble'）;

function bubbles（）{

// 设置

// 根据我们的最小值/最大值计算随机数量的气泡
var bubbleCount = min_bubble_count + 数学 .floor（ Math .random（）*（max_bubble_count + 1 ））;

// 创建气泡
for （ var i = 0 ; i< bubbleCount; i ++ ）{

bubble.append（' < div class =bubble-容器>< div class =bubble>< / div>< / div>'）;
}

// 现在随机化各种气泡元素

I am working on some stuff. As you can see from the link http://logic.al/lufra/rreth-nesh/historiku[^]

there are bubbles around the content. Those bubbles were supposed to move (float) up and down while scrolling the page. like here.: https://moz.com/about[^]

Can anyone help me with this issue?

Thank you !

UPDATE:
Code from comments:

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

function bubbles() {

// Settings

// 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++) {
$bubble.append('<div class="bubble-container"><div class="bubble"></div></div>');
}

// Now randomise the various bubble elements
$bubble.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() * 16);

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

// Random blur
var blur_rand = 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',

'-webkit-filter' : 'blur(' + blur_rand + 'px)',
'-moz-filter' : 'blur(' + blur_rand + 'px)',
'-ms-filter' : 'blur(' + blur_rand + 'px)',
'filter' : 'blur(' + blur_rand + 'px)',
});

$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($bubble.is(':empty')) {
bubble();
$bubble.show();
$(this).text('Bubbles Off');
} else {
$bubble.fadeOut(function(){
$(this).empty();
});
$(this).text('Bubble On');
}

return false;
});

bubble();

解决方案

bubble =

('.bubble'); function bubbles() { // Settings // 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++) {

bubble.append('<div class="bubble-container"><div class="bubble"></div></div>'); } // Now randomise the various bubble elements

这篇关于滚动页面时气泡不移动（浮动）的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！