Adding Parallax Effect to Background Image in Squarespace 7.1

Поделиться
HTML-код
  • Опубликовано: 26 янв 2025

Комментарии • 51

  • @abi-at-WillMyersSupport
    @abi-at-WillMyersSupport 2 года назад

    Hi all, in an effort to provide quicker responses to your comments, we need to update this channel to a “Brand” account. Unfortunately this means any previous comments left by Will are going to be deleted.
    If you’re watching this video and it looks like a question or comment has gone unanswered, please ask again and we will respond as soon as we can!
    We will be updating this account on July 20th, 2022. Thanks for your understanding!

  • @MythicRuns
    @MythicRuns 2 года назад +2

    Buddy the most under viewed and under rated video ever. Super straight forward and easy to follow. Amazing buddy, thank you so so much :-)

  • @SpruceGooseTV
    @SpruceGooseTV 2 года назад +1

    Hey man! Love the video. Is it possible to achieve this same effect with a background video instead of a background image?

  • @AshaGlenn
    @AshaGlenn 11 месяцев назад

    Thank you! Been looking everywhere for this! I'm going to have to join your code curious membership.

  • @devenishjp
    @devenishjp 2 года назад

    Hi Man Love this video, I Install a long time ago and it was working great, a few days ago I noticed that stop to work, I check all the code and it´s fine, but the effect its not working. Do you know why is that? Thanks a lo for the video again

  • @aqdasshah7910
    @aqdasshah7910 3 года назад

    From where can we get that CSS snippet you pasted in custom CSS? Im a beginner, so bit confused!

  • @betsyandfrancis
    @betsyandfrancis 4 года назад

    Mate great work - nice and easy to follow along to. Good luck everything. Theres definitely a huge need for what you're doing. Thanks again, James

  • @ruslanleonov
    @ruslanleonov 3 года назад

    Thank you Will! Is it possible to add this parallax only for desktop view and leave a standard Tilt effect for mobile version? Thanks in advance

  • @Pawcraw
    @Pawcraw 4 года назад

    Would this same method work for embedded video links? Can't seem to figure that out exactly.

  • @chelseaodonnell3926
    @chelseaodonnell3926 4 года назад

    Is there a way for this to work on a logo placed as an image with social links? When i place it like that it doesn't seem to have a section-id like it does when its text

  • @danielapalomo7164
    @danielapalomo7164 2 года назад

    Great video!!! Thanks for sharing! I do have a question…the first time I did this it came out perfect, but now I tried it again and the image I’m using as background is very blurry. I did use different images just in case and they all end up blurry. Do you happen to know why this happens? 🙏🏼

    • @abi-at-WillMyersSupport
      @abi-at-WillMyersSupport 2 года назад

      Hey Daniela, are the images large enough to be stretched across a background? Feel free to send a link over for us to take a look.

  • @RichLeo
    @RichLeo 2 года назад

    Nice video Will, solved my problem. Thank you sir.

  • @nolansmith1279
    @nolansmith1279 4 года назад

    Fantastic plugin, had to purchase the automated slideshow because it was so great. Thanks for your help Will !

  • @kimchimonkey
    @kimchimonkey 4 года назад +2

    Thanks for the great video tutorial. I noticed that the effect didn't work on mobile though.

    • @lea.fly_
      @lea.fly_ 4 года назад

      ​@@will-myers I have read somewhere (and experienced) that using the image focal point does not work when using parallax at the same time. Is there a chance to disable the code for mobile, so that I can use the focal point option again?

  • @taniagarcia576
    @taniagarcia576 4 года назад

    Thank you! Is it possible to add more than one image?

  • @theaieyee
    @theaieyee 2 года назад

    I pasted your code in custom css got the section id from squarespace id finder and paste image url still it's not working at all. Help me

    • @abi-at-WillMyersSupport
      @abi-at-WillMyersSupport 2 года назад

      Hey, sorry that this isn't working for you. Could you share a link to your site so we can take a look?

  • @geeroniiimo
    @geeroniiimo 3 года назад

    someone know how can I improve the quality of the image? its so poor

  • @llamallamaduckkk
    @llamallamaduckkk 3 года назад

    hello, thank you so much for this tutorial. It worked great! Having an issue with some empty space at the bottom and top of the image as i scroll all the way though. Feels like the height isn't enough and its just 2 empty bars above and below the image. is there a way to fix this?

  • @carrie20074
    @carrie20074 4 года назад

    Im using Squarespace 7.0 and just noticed parallel has started to jump in safari. Its very smooth in chrome, I noticed it jumping when i added a video to my main page. Could it be the parallax is conflicting with the animation?

  • @kailathomas6401
    @kailathomas6401 4 года назад

    Awesome tutorial! Any tips on how to add a color overlay or change image opacity?

    • @kailathomas6401
      @kailathomas6401 4 года назад

      Never mind, figured it out!

    • @nataschabuehnerkemper6051
      @nataschabuehnerkemper6051 3 года назад

      @@kailathomas6401 Hi! Would you mind sharing how you figured this out? I'd like to add a slight overlay to a background image to make the text more legible. TIA!

  • @estellecdupuis
    @estellecdupuis 3 года назад

    Hey Will, great tutorial but for some reason I don't see the "inspect" option when I right-click, even when the screen is maximized. Anyone knows how to fix this?

  • @nicolekesselring3398
    @nicolekesselring3398 4 года назад +1

    thank god i found this video. i was about to switch back to my old template solely because of them not having parallax

  • @lea.fly_
    @lea.fly_ 4 года назад

    For me this code is working on Chrome and Safari but not on Firefox. Did you experience this issue too?

  • @alinearnold2178
    @alinearnold2178 4 года назад

    Do you need to have the premium account to get the "ispect" to show up? When I right click it doesn't appear as an option..

    • @gwenlotus245
      @gwenlotus245 4 года назад

      u can inspect any page without any premium acc. use chromium-based browsers (such as- chrome, edge, brave etc). For firefox -> right click and inspect element.(or push F12 key)

  • @tonymega5866
    @tonymega5866 4 года назад

    Confirmed that this works. Like Will says, it's not a full parallax effect, but it's nice. Seems to me that the effect is limited by the relatively small height of the section. Another program I use (Blocs), allows parallax to be applied to 2 adjacent "blocks", which really improve the effect. This video (ruclips.net/video/8X3l0K7Lqa8/видео.html) demonstrates, starting at the point where parallax is applied to the adjacent block at 4:29. Makes me wonder if that could be done here with 2 adjacent sections?

  • @Hannah-grace-n
    @Hannah-grace-n 5 лет назад

    Amazing Will! Thank you! Any chance you know how to set up categories/ or tags with gallery pages (I'm new to using SS)? I basically want links to display "signage", "stationery" etc and when clicked on it will show just those pictures with that category attached. But when the gallery is clicked - all on the page is displayed. I hope that makes sense.

  • @christylang9387
    @christylang9387 4 года назад

    Thanks! This worked great on desktop and iphone, but changes the image a big blur on ipad view. Do you know of a fix?

    • @potzok
      @potzok 4 года назад

      hello Christy ^^ how did you make it work for mobile? it works perf for desktop but not iphone. thanks, Diana

  • @kondjanegongo796
    @kondjanegongo796 4 года назад

    Dude, you're a life saver.

  • @tayobello1935
    @tayobello1935 4 года назад

    Thank you Will! It was really helpful but I can’t get the code to work for me don’t know what am doing wrong.

    • @julesxxxooo
      @julesxxxooo 3 года назад

      @@will-myers Hopefully that is not their answer to parallax, those effects are barely noticeable. Your solution works much better. Thank you!

  • @dianayu1648
    @dianayu1648 4 года назад

    Thanks Will!! You are awesome

  • @englishconversationschool
    @englishconversationschool 3 года назад

    Really Amazing work. Thanks a lot

  • @jalleystudios
    @jalleystudios 4 года назад

    Hey Will, thanks for this. I find that when doing this tutorial that the image (that gets placed in the background)becomes very blurry, rendering this useless for me at least. I tried to upload an even higher resolution, but same issue. Thanks in advance! Thoughts? J

    • @steelandoakco
      @steelandoakco 4 года назад +1

      I've had the same problem, works great but blows out the image, any solutions? great video btw!

  • @julienroussel_media
    @julienroussel_media 4 года назад

    Great tutorial. Thank you!

  • @ThePaigeMonece
    @ThePaigeMonece 4 года назад

    Thank you! Thank you! Thank you!

  • @carpbaitusa
    @carpbaitusa 4 года назад

    Would this work on Squarespace 7?

    • @carpbaitusa
      @carpbaitusa 4 года назад

      Will Myers thank you for your response, unfortunately on mine it doesn’t show that option somehow... I used commerce clay template

  • @jvco8729
    @jvco8729 4 года назад

    Thanks man, you have knowledge

  • @johnharrison1264
    @johnharrison1264 5 лет назад

    Great job fella

  • @mmazz414
    @mmazz414 3 года назад

    Squarespace is dragging in some of the most easy, intuitive functions for website building today. I also learned that I their header transparency doesn't even work. Oofta.

  • @angelaroh
    @angelaroh 5 лет назад

    Thank you !!!! Thank you so much !!!!