Скачать с ютуб Creating an animated loading screen for Squarespace (7.0 & 7.1) в хорошем качестве

Creating an animated loading screen for Squarespace (7.0 & 7.1)

Whether you call it pre load screen, splash screen, loading screen, loading animation or anything else, if you're looking to build a temporary "cover" for the content of your client's site before making a big reveal, this tutorial is for you! There's more than one way to create and implement this type of element on a website, but today I want to share with you the one that I've found most flexible, based on the kind of animation we'll be giving it. Enjoy! You can grab the code over here: https://beatrizcaraballo.com/blog/cre... ----------------------------- //Links mentioned Cubic-bezier curve tool: https://cubic-bezier.com/#.17,.67,.83... Bennet Feely's Cubic Bezier examples: https://codepen.io/bennettfeely/pen/D... --------------------------------------------------------------- Sidenote: we actually used another tool from Bennet Feely in this other tutorial:    • How to create custom shapes for image...  . He created the clippy tool too! https://bennettfeely.com/clippy/ --------------------------------------------------------------- ----------------------- //Timestamps 00:00 - Intro 01:16 - Building the loading screen with HTML 02:40 - Adding the necessary CSS to set up our loading screen 05:16 - Adding the logo to our preload screen 09:47 - Animating the logo to make it rotate 15:57 - Animating the whole loading screen to slide out and reveal the page content 22:35 - Modifying the transition of the loading screen when leaving the window ----------------------- //Helpful links ⇝ Find the code you need amongst hundreds of Squarespace tutorials and snippets: https://beatrizcaraballo.com/codebase ⇝ Receive new Squarespace CSS tricks and exclusive offers on an often-ish basis: https://beatrizcaraballo.com/vip ⇝ Get in touch: https://beatrizcaraballo.com/contact ------------------------------------------------------------------- Music from #Uppbeat (free for Creators!): https://uppbeat.io/t/jonny-boyle/tres... License code: DT8VYCZ0NE1FUHWY