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

Parallax Scrolling in 7.1


theokoustas

Question

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

Create an account or sign in to comment

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

√ó
√ó
  • Create New...