Click here to Skip to main content
13,351,225 members (35,852 online)
Rate this:
 
Please Sign up or sign in to vote.
See more:
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();
Posted 3-Nov-15 5:28am
Updated 3-Nov-15 6:25am
Andy Lanng22.2K
v3
Comments
Andy Lanng 3-Nov-15 10:39am
   
I know how moz do it but how are you trying to do it?

Show us your code! ^_^

(You can use the "Improve Question" button above this comment to add details and code to the original post. If you try posting code in the comments then formatting is an issue)
TaRoshka 3-Nov-15 10:47am
   
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();
Andy Lanng 3-Nov-15 11:25am
   
Ok, I'll update the question for you
   
Did you pay attention for "Improve question" Andy recommended to use? Avoid code in comments, where it is poorly readable. Format it properly in the body of the question.
—SA
Andy Lanng 3-Nov-15 11:33am
   
Your code is poorly copied from Moz. I suggest you take another look at how they generate the bubbles.

Pro-Tip: They don't have any bubbles in the source mark-up
KrunalRohit 3-Nov-15 11:48am
   
It works with the parallax.

-KR
TaRoshka 4-Nov-15 8:50am
   
nope it didnt:(
When i added the code below the html page it worked perfectly. dont know why isnt working .
<a href="http://logic.al/lufra/rreth-nesh/historiku"

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

  Print Answers RSS
Top Experts
Last 24hrsThis month


Advertise | Privacy |
Web02 | 2.8.180111.1 | Last Updated 4 Nov 2015
Copyright © CodeProject, 1999-2018
All Rights Reserved. Terms of Service
Layout: fixed | fluid

CodeProject, 503-250 Ferrand Drive Toronto Ontario, M3C 3G8 Canada +1 416-849-8900 x 100