Trouble implementing jquery simple parallax scroll effect in Webflow

Design help General
1

Trying to figure out how to get the JQuery plugin (GitHub - pixelcog/parallax.js: Simple parallax scrolling effect inspired by Spotify.com implemented as a jQuery plugin) implemented into Webflow. Having trouble figuring out where things go within the Webflow interface.

@timsby did a really nice job getting it on his site (http://www.timsby.com/). Would love to do the same.

2

Hello @Eric_Mickschl

Thanks for the kind words! First it would help to see an example project your working on to help me get you set with this particular plugin. Please share a project your working on.

3

So I am new to webflow and I just wanted to get in there and get used to the interface. I saw your site and liked the parallax so decided to try and build one of your project pages. So I don’t have a specific project that I am working on right now but know that understanding how the plugin gets implemented in webflow and which elements go where would be very helpful.

I was able to get the data attributes plugged into the h1 section. I uploaded the js files to dropbox to pull the link from there. Im not quite sure how the actual image gets pulled and where you put the html/css code to pull it.

So any step by step would be great or just clarification.

https://preview.webflow.com/preview/erics-amazing-site-f15983?preview=c31502cd66c9a46378e24bf7d94e291b

Again, not trying to steal your site or anything. Just trying to get an understanding on how you did it specifically in webflow.

Thanks again @timsby

4

hahah no problem, My site is not really a good example of how to use the plugin because I’m doing a few custom techniques for some specific reasons. So why not try a brand new document:

  • Create a new project

  • Set the Body height to 100%

244Ă—525 26.1 KB

  • Create New Div and give class name “parallax” (Can be any name i’m using this for reference). Set height to 100%. Because we have no other elements in our docuemnt i’ve also added 100% bottom margin so we can see Parallax effect.

243Ă—670 30.4 KB

  • Upload a new picture to media library that you want to use as the Parallax image. Click on image to bring up Image Details and click the link icon to open the image in the browser. Take Note of Image URL. Copy and paste for later use.

990Ă—730 696 KB

  • Switch back to Webflow Designer and select our parallax Div. Now click into Setting Tab. The plugin we are using requires us to use custom data attributes. So click the plus symbol to create a new entry.

  • You can now publish and go back into the Webflow Project settings page selecting the “Custom Code” tab. In the footer add this script to call the plugin into our document.
  • (Download the js file and host on your on web hosting server somewhere other than Github... this is just a link to github repository for testing)

2031Ă—1245 117 KB

Hit Publish and your all done! :slight_smile: Test and enjoy!

I have created a project that you can clone.

Be sure to read more about settings and other cool things you could do with plugin:- Parallax.js | Simple Parallax Scrolling Effect with jQuery

8 Likes
5

@MinewireNetwork you’re gonna love this :wink: :point_up: :point_up: :point_up: :point_up: :point_up: Thanks @tim for the write up :smiley:

1 Like
6

Thanks @tim!

The instructions were very helpful.

7

I’m not sure why, but the parallax isn’t working. I uploaded the file to Dropbox and changed the link accordingly and changed all of the settings that he mentioned. I’ll keep trying stuff. :smiley:

Thanks @tim and @Waldo!

8

Thanks a lot @tim !!!

9

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