Great question! You can change the X axis part of the keyframe animation to the Y axis so it's vertical, like this: @keyframes SlideIn { 0% { transform: translateY(+100%); } 100% { transform: translateY(0); } }
Great question! We would need to create a custom animation for the blocks, or use a carousel/banner list section with items. I don't have a code for that off the top of my head, but I will put it on my to do list and brainstorm a bit; stay tuned ;)
Becca. Thank you I'm using this. The only difference is that when mine slides in the background color is white. Do I need to script to tell the background to be black so that it's not stark?
And yet again i figured out that I had to add the body { background-color: #000000 }. It's painstaking sometimes but it's rewarding when you figure it out.
Hi there, does this add a slide function to the top of every page? Is there an option to add it to one specific area of the home page? I have squarespace IDs plugin so I can find out the block I want to use. Thanks, Clare
Great question! We have a few options here; you can set up a solid page section background and make the background sticky or create a page background with css and make all the page section backgrounds transparent. If you email me some details about your project I'm happy to help you create the right code! You can reach me directly at support-at-insidethesquare-.co
Good question! I know they have a huge budget, but that commercial made it seem personal, which I loved. As a huge space nerd, this was my favorite commercial this year 🤩
This is so cool, Becca! You are by far the best Squarespace coding nerd out there that is such a joy to follow.
Thank you so much 🥰
Whoa! You rock thanks so much. Been watching Square Space tutorials for three days and this is something that finally makes sense to me.
You're very welcome - I'm so happy my content is helpful for you! 😊
Hi Becca, if I want the page to slide up, almost like a parallax effect, what do I change?
Great question! You can change the X axis part of the keyframe animation to the Y axis so it's vertical, like this:
@keyframes SlideIn {
0% {
transform: translateY(+100%);
}
100% {
transform: translateY(0);
}
}
Very cool! Thanks for sharing!
Excellent! Thank you very much
You are welcome!
Man your channel is priceless!
Thank you so much - glad you like my content! 🥰
I love this, such a fun code!!
I think so too; glad you're a fan! ❤️👽
Love the slide-in! Would this animation work for blocks in a section? How would you target the blocks specifically with the specific section?
Great question! We would need to create a custom animation for the blocks, or use a carousel/banner list section with items. I don't have a code for that off the top of my head, but I will put it on my to do list and brainstorm a bit; stay tuned ;)
Becca. Thank you I'm using this. The only difference is that when mine slides in the background color is white. Do I need to script to tell the background to be black so that it's not stark?
And yet again i figured out that I had to add the body { background-color: #000000 }. It's painstaking sometimes but it's rewarding when you figure it out.
Yay! Glad you made it work 🙌
Hi there, does this add a slide function to the top of every page? Is there an option to add it to one specific area of the home page?
I have squarespace IDs plugin so I can find out the block I want to use.
Thanks, Clare
Interesting question! We don't have a delayed load for page content, so this animation is designed to be a single page at a time.
Great tutorial as always, thank you. One question thoug I am unable to find that template, maybe I am overlooking something, but I am just unable to.
They put it on a special page that i linked to in the description - hellodownthere.com
@@InsideTheSquare I went there but when I click the Button at the end of the page it sends me to the regular template section. 🤷♂️
if you wait a few seconds, the template will load. it is in the regular template section: www.squarespace.com/templates/hellodownthere
Do you have code for a static background image? Thanks so much!!
Great question! We have a few options here; you can set up a solid page section background and make the background sticky or create a page background with css and make all the page section backgrounds transparent. If you email me some details about your project I'm happy to help you create the right code! You can reach me directly at support-at-insidethesquare-.co
Awesome!
Thanks - I was excited about this one! 🙌
Nice one Becca! I saw the Super Bowl add on RUclips. So fun! I wonder how that came to be? Does someone in sqsp hq know Scorsese’s granddaughter?
Good question! I know they have a huge budget, but that commercial made it seem personal, which I loved. As a huge space nerd, this was my favorite commercial this year 🤩
😀👍👍👍