Jump to content

Moving images on scroll

Recommended Posts

Hello hello!

I'm trying to find a way to achieve moving images vertically on scroll but I'm a bit confused with CSS and JAvascript etc.

Here's the result I want to achieve : https://revampdesignstudio.com/branding

I do not have a website online right now on which to implement it but I want to know the main code to add it to my future site. (I'm still wireframing my website at the moment)

I'm quite new to CSS and newbie at Javascript but I'm on my way to learn  so any help will be really appreciated 😄

Link to comment
  • Replies 9
  • Views 5.2k
  • Created
  • Last Reply

Top Posters In This Topic

42 minutes ago, derricksrandomviews said:

This may point you in the right direction:

 

Hey, thank you for the link, I've already seen this video and it's not quite what i'm looking for. I want to have animation of images only when scrolling up and down, not animation consistenly. Any ideas? 

 

best,

J

Link to comment
  • 9 months later...

Hi @creedon

no not exactly, i just did a quick scribble, ill attach photos but im either looking to try to figure out how to do a horizontal scroll per project so like the 1 & 3 image. Either all the same size image or do variation of sizes, and each image can be a link to the project page with more on that project.

Or the second image do some sort of static side with text while the other side will move and scroll through the images/text while linking to the full pages. And once it goes through a select number of projects continues down the page as a whole.

 

I tried to play around with the slide show but wont let me show more then one image at a time and ideally id like to have 2-3 project on page with the edges of the other images peaking off screen

IMG_0375.PNG

IMG_0376.PNG

IMG_0377.PNG

Link to comment

@jenniferboddam

In v7.1 check the Gallery page section to see if one of the styles there will work for your needs.

1614258253_ScreenShot2021-08-01at12_54_06PM.thumb.png.355bae8bc6929e1e9bc64db898bb9101.png

There are several styles in there so one might meet your need.

332788714_ScreenShot2021-08-01at1_09_57PM.thumb.png.ec7e7bfe690cc1002dbaf0510b8ff1d7.png

Find my contributions useful? Please like, upvote, mark my answer as the best ( solution ), and see my profile. Thanks for your support! I am a Squarespace ( and other technological things ) consultant open for new projects.

Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.