Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
Advanced Search
  • 1

Parallax Scrolling in 7.1


theokoustas

Question

  • Answers 13
  • Created
  • Last Reply

Top Posters For This Question

Top Posters For This Question

Popular Posts

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¬†ūüėä

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

<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> &lt

13 answers to this question

Recommended Posts

  • 0

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 post
  • 0
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 post
  • 0

@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 post
  • 0
Posted (edited)
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 post
  • 0

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

Edited by Meeeee
Link to post
  • 0

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 post
  • 0
<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 post
  • 0
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 post
  • 0

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

Link to post

Create an account or sign in to comment

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


√ó
√ó
  • Create New...