Create parallax effect

Design help Custom code
1

Hello,

I want create this parallax effect:

in SEC0 in my project:
https://preview.webflow.com/preview/vestibular?preview=dfc586fee2df9c33d44e9c75acce04eb

How I create this effect?

2

Hi @Marcos_Custodio :smile:

What you’ll need to do is embed some custom code from that plugin to make it work.

For more information on this, please refer to this article: Custom code in head and body tags | Webflow University

I hope this helps. If not, please let me know and I will be more than happy to assist further! :slight_smile:

3

Hello @PixelGeek

I create a custom code with

2

in Head Code

But a dont understand the parameter this parallax code:
where add this code?

  1. Create a container where you want to apply an animated ‘Particle System’ background.
3. Call the plugin on the container element and customize the Particle System.

$(document).ready(function() {
$(‘#particles’).particleground({
minSpeedX: 0.1,
maxSpeedX: 0.7,
minSpeedY: 0.1,
maxSpeedY: 0.7,
directionX: ‘center’, // ‘center’, ‘left’ or ‘right’. ‘center’ = dots bounce off edges
directionY: ‘center’, // ‘center’, ‘up’ or ‘down’. ‘center’ = dots bounce off edges
density: 10000, // How many particles will be generated: one particle every n pixels
dotColor: ‘#666666’,
lineColor: ‘#666666’,
particleRadius: 7, // Dot size
lineWidth: 1,
curvedLines: false,
proximity: 100, // How close two dots need to be before they join
parallax: true,
parallaxMultiplier: 5, // The lower the number, the more extreme the parallax effect
onInit: function() {},
onDestroy: function() {}
});
});

help me please!!!

4

Hi @Marcos_Custodio, thanks for your update. The best thing to do, in these kinds of cases, is to create a new blank site, and then look at the instructions on the plugin page, and see where things need to be installed. Once you have a test site working, you can then update your target site with the same settings etc. :slight_smile:

CSS customizations can be done in the Designer Editor or can be pasted into the Head of your site.

jQuery code goes in the footer of your site.

Elements used for the effect in the body of your page, are created in the designer, or pasted in using an embed object (to paste in html tags that the plugin uses).

Every plugin is different :slight_smile: Don’t be afraid to experiment :slight_smile: If you have questions while you are trying to put it together, then ask here in the community :slight_smile: You have done this already, so you are halfway there :smile:

I made a quick example particle parallax effect site using this custom plugin, that you can clone, and see how it works. You will need to copy the js file that is linked in the footer, to some storage that you can link to, like dropbox.

Note: We do not support custom code, but we are happy to help when possible :smile:

​I hope this helps. Cheers, Dave

4 Likes
5

Haha, I spent like 20 minutes figuring this out and finally got it to work, only to find that you have this cloneable project @cyberdave hahaha, I was able to add multiple though :smiley: #ParallaxIsFun

2 Likes
6

Awesome @cyberdave, very cool effect

7

This topic was automatically closed 60 days after the last reply. New replies are no longer allowed.