![]() You can easily create videos in Canva, but you can create GIFs too.Įach different page in your design will be a frame of your animationįor each page, you can set the time of the page Here are two DIY friendly options:īoy oh boy do we love Canva. If you're not a designer pro, you might be wondering how the heck you're supposed to create one of these GIFs. PS - if you do want to add silly GIF memes to your site, we recommend ! The following CSS, inserted via the Squarespace CSS Editor will make the "tearing" nearly imperceptible between sections on the example site you provided.Although they're animated, GIFs are actually a type of image, which means that you can upload them into any areas that you can add images around your Squarespace site! This opens up a lot of opportunities for animated images.Īside from the obvious (adding silly GIF memes to your blog posts), you can really do SO much with GIFs in terms of bringing some life to your site! However, it can still work adequately in your situation, where images are butted-up against one-another (and where the color across the top/bottom of an image is relatively consistent across the width of the image). This works better in situations where each section with a background image alternates with a section with flat background color. ![]() The work-around for this white space gap "tearing" between Squarespace parallax index page sections is to create an element "behind" the image in each section, then fill that element with a color (or gradient) that is similar to that which is seen in the transition area between the two sections. I can't really capture the white spaces I'm getting since they appear while scrolling and go away when I stop. I've included an example of the flickering I'm getting on the parallax sections of my site (the 1px black line through the image) below. I don't know if it's necessary to supply my custom code or not, but I can revise this post to include some if people think it's necessary. Thanks in advance for any help! And sorry if this isn't really the right place to ask. If I remove the flexbox part of my code, the white spaces above and below the parallax image is a little bit better, but the problems still persist. I've tried removing my custom code, changing the height of the parallax sections, and changing the width of my browser to fix it, but nothing seems to work to stop the jitter and flickering. I'm able to use basic CSS and HTML to make something look the way I want, but I'm fairly inexperienced and don't know where to begin with something like fixing the parallax of a Squarespace site and hope someone can point me in the right direction (or tell me that it's hopeless, which is fine too). ![]() I'm using the Moshka (Brine) template currently and I've read a little bit that this particular family of templates has problems with parallax, but I'm hoping that maybe someone has an idea I can try to fix these problems using custom code injections. I have my parallax (index page) sections at 100vh and all of my images and sections full width using flexbox. I know this isn't a typical StackOverflow coding problem, but I wanted to get some insight on how to fix the jitter, whitespaces above and below my image, and flickering in my parallax sections while scrolling on a Squarespace site I'm creating for a client.
0 Comments
Leave a Reply. |