Parallax Scrolling in 7.1

Hi,

Is there any CSS coding or code injections for parallax scrolling in 7.1?

Thanks

@tuanphanor anyone else?

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

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!

Guys if you go to his site he has an update, it worked fine for me man! Thanks @derricksrandomviews

Well, this code works from Ghost Plugins -- but is for image blocks: https://www.ghostplugins.com/steps/yd93lg7f

@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

On 4/30/2020 at 12:12 AM, 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 coders to do basic edits to the site...good luck!

Umm - what template are you in for 7.1???  I've tried multiple images and get same issue.  In the comments on the schwartz page, they also mention same issue...

2 minutes ago, Meeeee said:

Umm - what template are you in for 7.1???  I've tried multiple images and get same issue.  In the comments on the schwartz page, they also mention same issue...

https://collie-collie-pedb.squarespace.com/ 

pw: gkoustascare123

I think im using "colima"

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;

  }}

<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

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 😊

Hi all, 

I have used the updated code by schwartz-edmisten but would like the code to target specific images only and not background images as a whole. Does anyone know how to do this please?

Thanks in advance

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

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

Is there a way to create a parallax effect on half of a section like the images here? 

https://www.playandpublic.com/services

@tuanphan are you able to assist here?

Parallax Scrolling in 7.1

CODE LINK: https://www.patreon.com/posts/how-to-add-to-in-109132362

☕ Did I help? Buy me a coffee?