Great video! Question. I use the chrome browser and can’t see the effects when I’m trying to do them and even after I choose 1 and save it. Any recommendations
From Squarespaces helps docs: Image effects only appear on browsers and devices that support WebGL, a tool that works with your device's graphics processor. To test if your browser supports this, visit get.webgl.org. If a browser doesn't support WebGL, the section background remains static.
How do you resize these background images with the effects in mobile. I have used 'liquid' on an image. On desktop it's fine, but on mobile, the image is zoomed and does not fit the container. It happens with all my background images and I have asked two squarespace leaders who are also none the wiser about this issue. I can't find any css for adjusting background images with effects to resize for mobile. If I change the section height, the changes are also on desktop and it does change the length on the images so it does not fit the page or container fully
Have you reached out to Squarespace support? They should be notified of the problem so they can pass it on to the developer team. It sounds like a complex issue so I can't give you an answer in a youtube comment, but send me an email with the link to your site and I'll see if I can come up with something after looking.
You can add site wide animations in the design panel. Those animations will also affect the logo on page load fading it in. But you can't apply parallax to the logo
@@SEWebDesign Thanks for reply. I thought that might be the case. How about using something like this : www.quackit.com/css/functions/css_translate3d_function.cfm All I want to do is make my logo slowly move up and off the page as I scroll down. If you have any ideas, that'd be great!
@@pleasurecomplex7061 check out my scroll reveal video on my channel. You might be able to use that to scroll it out. Honestly I am not exactly sure how that would be done though
![How to Add Parallax Effect to Background Images on Squarespace 7.1 [No Code Solution]](http://i.ytimg.com/vi/TsOVKxTvSsg/mqdefault.jpg)
I was breaking my head with the code so glad I found this. Super helpful! :)
This is such great news! Thanks for the update, Chris!
You are welcome Leah!
Thank you for letting us know about these! So helpful! Definitely going to try it out 👍
You are welcome! It is definitely an easy way to add a little extra to your designs!
Great video! Question. I use the chrome browser and can’t see the effects when I’m trying to do them and even after I choose 1 and save it. Any recommendations
From Squarespaces helps docs: Image effects only appear on browsers and devices that support WebGL, a tool that works with your device's graphics processor. To test if your browser supports this, visit get.webgl.org. If a browser doesn't support WebGL, the section background remains static.
Thanks for showing us this simple solution!
You are welcome Julien!
Thank you, this was was so helpful and huge time saver.
Awesome! I am so glad Sharon!
Thank you!
No problem!
great video, doesnt work for videos right?
Is there any way to have "gif previews" or "zooms" on normal videos that I've added to the site?
Thanks!
Is there a way of appending parallax to the page logo/header?
Non really scratch the itch though do they? The zoom out option is the closest IMO
Agreed the image effects could be much better, hopefully they will keep optimizing them!
thank you
You are welcome!
How do you resize these background images with the effects in mobile. I have used 'liquid' on an image. On desktop it's fine, but on mobile, the image is zoomed and does not fit the container. It happens with all my background images and I have asked two squarespace leaders who are also none the wiser about this issue.
I can't find any css for adjusting background images with effects to resize for mobile. If I change the section height, the changes are also on desktop and it does change the length on the images so it does not fit the page or container fully
Have you reached out to Squarespace support? They should be notified of the problem so they can pass it on to the developer team. It sounds like a complex issue so I can't give you an answer in a youtube comment, but send me an email with the link to your site and I'll see if I can come up with something after looking.
Any thoughts on how to add parallax to a video banner in 7.1?
Hi Jerrod, unfortunately not
I can’t seem to do it, I am using my iPad Squarespace app and none of these features appear?! Please help
a year later and no response lol
wow
Seems long overdue, and kind of limited, isnt this kind of the visual meat and potatoes everyone wants?
Yes I agree. This is what we get for now though. Hopefully they start to ramp things up soon. The latest updates have been pretty disappointing
Is there a way of appending parallax to the page logo/header?
You can add site wide animations in the design panel. Those animations will also affect the logo on page load fading it in. But you can't apply parallax to the logo
@@SEWebDesign Thanks for reply. I thought that might be the case. How about using something like this : www.quackit.com/css/functions/css_translate3d_function.cfm
All I want to do is make my logo slowly move up and off the page as I scroll down. If you have any ideas, that'd be great!
@@pleasurecomplex7061 check out my scroll reveal video on my channel. You might be able to use that to scroll it out. Honestly I am not exactly sure how that would be done though