Streaming live at 10am (PST)

Parallax scrolling design


#1

Hi,
I’m looking to recreate the parallax scrolling I have on my homepage on my services page. There’s an image that’s static in the background I think and the scrolling takes place over it.

How do I do this again with another photo on my “Services” page?

Thanks
Ashley


https://preview.webflow.com/preview/blog-1-324f36?utm_source=blog-1-324f36&preview=eb5ad576e3e11f04021f19204b042860


#2

Hello @Ashley_Janelle

The latest posts image right?


#3

The image must be set as a background > fixed

Here’s a screen record > https://www.useloom.com/share/f649399c34844b38a4b920100668ff18

Hope this helps

Piter :webflow_heart:


#4

Hi, Thanks so much for the video! So i think I added the image with all of the setting to that page all the way at the bottom. However now I’m trying to add text on top of that area. Can you help with that? It will be text that will automatically change after a few seconds or the user can scroll horizontally thought via a “>” icon or something like that… these are customer quotes so there will be more than one.

Thank you,

Ashley


#5

Hello,

Here right

If you will add testimonials why not using a slider to display them?


#6

How can i use a slider?


#7

Hi, Please see the testimonials on this page as this is how I’d like it to behave. So there’s parallax scrolling along with a slider.


#8

Okey, let me try making a slider and I will share it here with you :blush:


#9

Is this what we are looking to achieve? > https://parallax-slider.webflow.io/


#10

yes that is correct. How would I implement this?


#11

Hello again :wave:

You can clone the project and copy/paste the slider element > https://webflow.com/website/Parallax-Slider

How to copy and paste between projects > https://university.webflow.com/article/copying-and-pasting-between-projects

Hope this helps :webflow_heart:


#12

Sorry I’m confused. Exactly what am I copying? the link you have there?


#13

Click on the link and clone the project > https://webflow.com/website/Parallax-Slider > open your site in a tab and open the project I’m sharing in another tab.

Click on section/testimonial-section

Copy (CMD + C on Mac or CTRL + C on Windows) > Paste the section into your project (CMD + V on Mac or CTRL + V on Windows)

If you don’t understand I will try again :blush:

Piter :webflow_heart:


#14

It’s still not working for some reason. Do you mind doing a video? When I copy it doesnt copy anything so there’s nothing to paste.


#15

Here’s a screen record > https://www.useloom.com/share/55a392da71154bd09e847c0ac22b9f8a

What I’m doing:

1. Opening the projects in separate tabs

2. Going to the parallax slider project (the one you need to clone)

3. Click on the slider section > ctrl + C for copy

4. Open the other project > click on the body > ctrl + V for paste

If you’re using Mac you need to press command + C for copy and command + V for paste.

Hope this helps. Feel free to reach out :webflow_heart:


#16

Ok its still not working. Are you able to do it for me? nothing is copying


#17

Hm that’s very strange…Do you copy from the read-only link? From here > https://preview.webflow.com/preview/parallax-slider?utm_medium=showcase&utm_source=parallax-slider&preview=ddcc31ef99292f49e66976d7743a7a98

You need to clone the project first. I don’t have notification about you cloning the project.

Click here > https://webflow.com/website/Parallax-Slider > Click on clone (top right corner)

Tell me when you clone it.

Piter :webflow_heart:


#18

ok ive cloned it… now do I paste it?


#19

ok I think I got it now however how can I add another testimonial?


#20

Hi again :wave:

After cloning the project you need to open the two projects in different tabs. Your site and the one with the slider. You copy from the slider project > paste into your project.

Yes, I can see the slider

Here’s a screen record where you can see how I’m adding more slides/testimonials > https://www.useloom.com/share/ec8404cacb1949df92a0c9406c913258

Option one (easier)

1. Click on the testimonial slide element

2. Open the slider to see the content inside

3. Click on a slide (It does not matter which slide)

4. Copy the slide > Copy (CMD + C on Mac or CTRL + C on Windows)

5. Click on the mask element

6. Paste > (CMD + V on Mac or CTRL + V on Windows)

To edit go to your new slide and open the content. See screen record > https://www.useloom.com/share/dfa74aaccbd5474c85a3ead839f186dc


Option two (longer)

1. Click on the testimonial slide element

2. Click on settings

3. Click on + Add Slide

4. Your new slide will be empty

5. Click on a slide with content and copy the div called > testimonial-slider-content > Copy (CMD + C on Mac or CTRL + C on Windows)

6. Click on the new slide and paste the the div there > (CMD + V on Mac or CTRL + V on Windows)

To edit go to your new slide and open the content. See screen record > https://www.useloom.com/share/dfa74aaccbd5474c85a3ead839f186dc

Piter :webflow_heart: