![]() I just get a white screen, so I don't think this is perhaps working the way you think it is. Yeah, I just tested that if you don't call Context::Sync() nothing is drawn to the screen. I must be missing something here because that doesn't make sense to me how this is working. The world doesn't have anything to do with 2D drawing though as far as I know, but even then Sync() on the context is what draws to the screen the 2D stuff. Map:Load() is a blocking function and doesn't come back until it's done as far as I know (yes it calls the callback for each entity it loads but shouldn't come back from the Load() call in order to reach your context:Sync() in your main loop). I wonder if the call to update the context in App.lua is still running during Map:Load(), as the world (self.world) is never destroyed or created for each map load - the original always exists. You probably don't need to "fill the screen with black" by drawing the rectangle, but that's what I have until I update it and I hope this helps.īesides drawing a black rectangle you could use a table with the images If Map:Load(self.mapfile, "LoadingScreen") = false then return false end ntext:DrawRect(0, 0, App.window:GetWidth(), App.window:GetHeight()) Local y = (App.window:GetHeight() / 2) - (self.DefaultFont:GetHeight() / 2) Local x = (App.window:GetWidth() / 2) - (self.DefaultFont:GetTextWidth(loadingText) / 2) Sidenote: while editing this tutorial I realized we used another tool by Bennet in a previous tutorial, the Clippy tool!Īnd there you have it! Now you now how to build a pre load screen for Squarespace from scratch.The way I displayed the loading text (in App.lua): You can use the easing tool or Feely's CodePen to skip the guesswork on this part. This part is completely optional but I feel it adds a little extra to the whole customization. Last but not least, I’ll show you a really easy way we can create an even cooler slide-out effect through the cubic-bezier easing. But, if you’re looking for a fade-out effect, you can swap the transform property for opacity instead (not shown in the vid).Ģ2:35 - Modifying the transition of the loading screen when leaving the window In this step, you’ll be able to decide the edge towards which the screen will slide into. Next, we’ll move onto animating the full splash screen so that it goes away after a specific amount of time and reveals the content behind it. We’ll have to set up a simple animation for this and then decide the time we want the turn to take and how many times we want it to rotate.ġ5:57 - Animating the whole loading screen to slide out and reveal the page content We’ll begin with the logo and make it rotate 360deg through the transform property. Then, we’ll bring in the actual icon through the background-image property and adjust it to our needs.Ġ9:47 - Animating the logo to make it rotateĪfter our two pieces of the puzzle are in place, it’s time for the fun part: creating the animations! With the background in place, we’ll now take care of the logo container! We’ll build this one up inside the background holding it, based on the size we’d like the image to have. Once the divs are in place, it’s time to move onto the CSS! We’ll begin by creating the actual screen background, making sure it covers the entire browser window and doesn’t scroll when users scroll.Ġ5:16 - Adding the logo to our preload screen Depending on whether you want to have it showing up on all pages of the site or not, you can set up this part of the code either inside the Code Injection Section area of each page (Page > Cog next to it > Advanced > Header Code Injection) or inside the full site (Settings > Advanced > Code Injection).Ġ2:40 - Adding the necessary CSS to set up our loading screen Are you ready for this one? Let’s get to it!Ġ1:16 - Building the loading screen with HTMLįirst things’ first, we need to set up our HTML to be able to have the corresponding containers we need to build the screen. ![]()
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |