Jump to content

Parallax Scrolling in 7.1

Recommended Posts

the problem with that code @derricksrandomviews is that it creates a quite blurry image underneath -- and I'm not finding a way to resolve it.  

In fact, I have this same issue.  I have this code, which creates a very nice image (even works on mobile), but it doesn't show up the first image until scroll starts.   So it looks like blank page. Unbelieveable.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/scrollax@1.0.0/scrollax.min.js"></script>
<script>
  $('.has-background').attr('data-scrollax-parent', 'true');
  $('.has-background .section-background').attr('data-scrollax', 'properties: { translateY: "40%" }');
  $.Scrollax();
</script>
<style>
  .has-background {overflow: hidden;}
</style>

I tried this great tutorial from Will Myers: https://www.will-myers.com/adding-parallax-effect-to-a-background-image-in-squarespace-71 but that is code creates a blurry background, so for me it's unusable.  It's also incredibly time consuming for many pages.  

And also tried youre recommendation of: https://schwartz-edmisten.com/blog/how-to-add-parallax-to-squarespace-7-1 but also blurry.  

Would love some help with this as well.  @tuanphan you wanna take a look?  

J

Edited by Meeeee
Link to comment
10 minutes ago, Meeeee said:

the problem with that code @derricksrandomviews is that it creates a quite blurry image underneath -- and I'm not finding a way to resolve it.  

In fact, I have this same issue.  I have this code, which creates a very nice image (even works on mobile), but it doesn't show up the first image until scroll starts.   So it looks like blank page. Unbelieveable.


<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/scrollax@1.0.0/scrollax.min.js"></script>
<script>
  $('.has-background').attr('data-scrollax-parent', 'true');
  $('.has-background .section-background').attr('data-scrollax', 'properties: { translateY: "40%" }');
  $.Scrollax();
</script>
<style>
  .has-background {overflow: hidden;}
</style>

I tried this great tutorial from Will Myers: https://www.will-myers.com/adding-parallax-effect-to-a-background-image-in-squarespace-71 but that is code creates a blurry background, so for me it's unusable.  It's also incredibly time consuming for many pages.  

And also tried youre recommendation of: https://schwartz-edmisten.com/blog/how-to-add-parallax-to-squarespace-7-1 but also blurry.  

Would love some help with this as well.  @tuanphan you wanna take a look?  

J

So I shouldnt even try it? I guess Ill wait for someone to reply. thanks!

Link to comment

@theokoustas reload the page in another browser.  Does the first image load?  Again, for me it just loads after I scroll.  I suppose not a big deal if you put parallax in the middle of the page that you're scrolling through, but if you want it on the top section, not sure how to get that first image or section loaded then activate the parallax.

https://www.dropbox.com/s/qi3dv05puuotcu8/ss-screenshot-parallax-bug2.mov?dl=0

Edited by Meeeee
Link to comment
6 minutes ago, Meeeee said:

@theokoustas reload the page in another browser.  Does the first image load?  Again, for me it just loads after I scroll.  I suppose not a big deal if you put parallax in the middle of the page that you're scrolling through, but if you want it on the top section, not sure how to get that first image or section loaded then activate the parallax.

I tried in mozzila and chrome it works fine, are you sure you got it from his website? https://schwartz-edmisten.com/blog/how-to-add-parallax-to-squarespace-7-1 , anyways mabey its the template im using ? Its like they made 7.1 less compatible, which means we have to become fucking coders to do basic edits to the site...good luck!

Edited by theokoustas
Link to comment

CSS code working on a specific section.

[data-section-id=""]{

  .section-background,.content-wrapper {

    background-image:url();

    background-attachment: fixed !important;

    background-position: center center!important;

    background-repeat: no-repeat !important;

    background-size: cover !important;

  }}

Link to comment
  • 4 weeks later...
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/scrollax@1.0.0/scrollax.min.js"></script>
<script>
  $('.has-background').attr('data-scrollax-parent', 'true');
  $('.has-background .section-background').attr('data-scrollax', 'properties: { translateY: "30%" }');
  $.Scrollax();
</script>
<style>
  .has-background {overflow: hidden;}
</style>

The above update #2 from https://schwartz-edmisten.com/blog/how-to-add-parallax-to-squarespace-7-1 seems to work fine without messing up the quality of the image

Link to comment
  • 3 weeks later...
On 6/2/2020 at 1:59 AM, eranga said:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/scrollax@1.0.0/scrollax.min.js"></script>
<script>
  $('.has-background').attr('data-scrollax-parent', 'true');
  $('.has-background .section-background').attr('data-scrollax', 'properties: { translateY: "30%" }');
  $.Scrollax();
</script>
<style>
  .has-background {overflow: hidden;}
</style>

The above update #2 from https://schwartz-edmisten.com/blog/how-to-add-parallax-to-squarespace-7-1 seems to work fine without messing up the quality of the image

Thanks for this thread! I was having the exact same issue but the updated code works great and doesn't reduce the quality of the images 😊

Link to comment
  • 4 weeks later...
  • 2 years later...
1 hour ago, clockyer said:

I've used this code brilliantly, and it works well. However does anyone know what code I need to include to exclude the effect appearing on the footer (where I have an image). Thanks

If you share url, we can take a look

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

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.