theokoustas

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"

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!

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

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!

Hi,

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

Thanks

@tuanphanor anyone else?

19 hours ago, tuanphan said:

Edit the code I sent, to this and add to Home > Settings > Advanced > Code Injection > Header

<style>
/* remove image blocks padding */
[data-section-id="5e73347bc0821f49f60360e0"] .image-block {
    padding: 0 !important;
}
</style>

If you want to donate, use this link

Hi, The mobile version is not working! the 0 padding top and bottom! on the sides its fine tho

1 hour ago, tuanphan said:

Can you take screenshot? It worked here.

With image padidng top/bottom, add to Home > Design > Custom CSS

[data-section-id="5e73347bc0821f49f60360e0"] .image-block {
    padding-top: 5px !important;
    padding-bottom: 5px !important;
}

 

Hi the desktop padding   worked perfectly thank you so much! One last thing and im done... the top and bottom padding in mobile version did not work, Also I would love to donate for your services where can I do that? Thanks again for your patience

2 hours ago, tuanphan said:

Do you use Larger screen? Top/bottom padding, you mean section padding or image blocks padding?

Edit above code to this

[data-section-id="5e73347bc0821f49f60360e0"] .content-wrapper {
    padding-left: 0 !important;
    padding-right: 0 !important;
    padding-bottom: 1px !Important;
    padding-top: 1px !important;
    max-width: 100% !important;
}

 

Yea, I want image padding... top and bottom...Also the code didnt work again for the desktop version  xD

7 minutes ago, tuanphan said:

Can you take screenshot your site? 

remove padding top/bottom, add this to above code

padding-bottom: 1px !Important;

padding-top: 1px !important;

--

collie-collie-pedb.squarespace.com

pw: gkoustascare123

So the bottom and top padding didnt work what u sent me that i added to the previous content wrapper in the injection code.... Anyways desktop version is not getting affected either.

8 minutes ago, tuanphan said:

Above code for Desktop version ☘️

Its not working in the desktop version 😕 P.s I also wanted and top and bottom btw 0 padding! I might just go back to 7.0 man this 7.1 is terrible 😞 So little information online and its so limitted, anyways if u cant find what it is im just gunna start over... Thanks alot for everything

Its not working in the desktop version 😕 P.s I also wanted and top and bottom btw 0 padding!

4 minutes ago, tuanphan said:

I see it works here? Try adding this code to Home > Settings > Advanced > Code Injection > Footer

<style>
  [data-section-id="5e73347bc0821f49f60360e0"] .content-wrapper {
    padding-left: 0 !important;
    padding-right: 0 !important;
}
</style>

When you're done, reload your site & see result

Thank you very much, it worked on the mobile version but i also want it on the desktop version if possible! ( I understand its not in the subject of the forum)

1 minute ago, tuanphan said:

Can you keep the code? I will check again.

Also, which plan do you use? Personal or Business

Business! Also I guess I can just do each image on its own... its 17px rightt now around each image... instead of content wrapper do i put the class id of that specific image mabey? 

4 minutes ago, tuanphan said:

Add to Home > Design > Custom CSS

[data-section-id="5e73347bc0821f49f60360e0"] .content-wrapper {
    padding-left: 0 !important;
    padding-right: 0 !important;
}

 

So yea this happened just a bit of grey was added on some edges!

4 minutes ago, tuanphan said:

Which images? Can you take screenshot?

Hi @tuanphan!

First of all, you've been a big help in general in this forum and thank you! Im on 7.1,  can i have the block images be in full bleed ( like touch the edges of the screen and with eachother? in other words no padding in this specific area) thanks! 

collie-collie-pedb.squarespace.com

pw: gkoustascare123

On 4/23/2020 at 3:49 PM, tuanphan said:

Can you share link to page in screenshot?

Hi @tuanphan,

sorry for the late reply! thank you

collie-collie-pedb.squarespace.com

pw: gkoustascare123

Hi @tuanphan!

First of all, you've been a big help in general in this forum and thank you! Im on 7.1, and have around 6 images with overlay links on top of them. and they go in twos as u scroll down, On mobile version its starts with the first picture (Left) then second block (right) and so on... but for some reason the 4th picture(desktop on the right) is in the 5th position in mobile version wtf!  Lastly, can i have the block images be in full bleed ( like touch the edges of the screen and with eachother? in other words no padding in this specific area) thanks!