I noticed that for the past two projects, I was getting frustrated once I reached the css part, especially the positioning. For today’s project, I decided to focus on css positioning. I decided to have a fixed scene and then have items appear in the scene when the user scrolls down.
I found my background for the “fixed scene” by googling free clip art and backgrounds. Sometimes finding the right image takes a lot of time and makes you wish you could draw them yourself!
Two main things I learned today:
1. vw and vh
I used CSS3’s vh to set the height of the divs, one unit reflects 1/100th the height of the viewport so I set the height to 100vh. This set the height of the divs so that the user will always see the top scene before scrolling down and revealing the bottom scene.
These units can also be used to specify the content in a document. For example, I could set my images so that the height does not exceed the viewport by writing height: 85vh. (Not setting it to 100 gives the picture a little breathing room on the page.)
2. Creating a full page background
I thought I could simply set the background image of the first div but this does not take up the whole page (there are white spaces). I wrapped the background image in a div and made the div twice as big as the browser window. Then I gave the image a min width and height of 50% to preserve the aspect ratio.
After setting up the two divs, all I had to do was set the bottom div with relative positioning and then use absolute positioning to place the characters.
However, I ran into another problem when I realized that at different browser sizes, the images I placed on the trees would not be in the right places anymore. (This was because of how I set the full page background to scale to the viewport.) To fix this I placed a fixed tree in the top scene and then placed the items so that they would appear on the tree.