Jump to content

Custom Code for Parallax resizing image on mobile

Recommended Posts

Site URL: https://oleander-wedge-k254.squarespace.com/

Hi there,

I'm trying to add parallax scrolling into my site using the below code I found on a YouTube tutorial. Even though we've got the - height: 100% - bit in there ...

  • 1. the background images only take up the top portion of the container on certain screen sizes
  • 2. my foreground images come out HUMONGOUS on mobile (this is secondary and seems like a separate issue)

Any advice on how to use parallax but keep the background images filling the height of the container in any viewing format?

Thanks so much!!

https://oleander-wedge-k254.squarespace.com/

Password: Kessiah

Using this code (disabled on the site right now):

<script src="https://cdn.jsdelivr.net/npm/simple-parallax-js@5.5.1/dist/simpleParallax.min.js"></script>
<script>
  var images = document.querySelectorAll('.section-background img');
  new simpleParallax(images, {
    scale: 1.5,
    delay: 3
  });
</script>
<style>
.simpleParallax (
  height: 100%
  )
</style>

 

Link to comment
  • Replies 0
  • Views 565
  • Created
  • Last Reply

Archived

This topic is now archived and is closed to further replies.

×
×
  • 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.