Parallax Scrolling
Parallax Scrolling is a way to add a sense of depth and scale to a website. Separating the layers and changing how they move with each other gives a perceived sense of 3D depth to a page. This can be a good way to draw users' attention to specific elements. For sites with a lot of information, it can also be a good way to break up content on a website. Implementing a parallax effect on a website is a modern touch to help keep users engaged with a website.
To create my parallax scrolling effect I found an image and used Photoshop to create a layer mask. Once the image and masker were ready to use I used a header element to create an area to contain the image. Then I used a div container to use as the masking layer. I used an H1 element to place the words in the header and gave it a fixed position. To keep the background image with the mask layer I used the CSS properties background-position: bottom; and background-size: cover for the site header image. Then for the mask image layer I used the CSS properties mask-position: bottom; and mask-size: cover; to keep the the images aligned. This allowed the text to scroll in between them.
Dark Mode
Dark mode is a trend that is not going away. It is integrated into the majority of operating systems to provide light and dark mode options. Other than providing users with another aesthetic option dark mode does offer some real benefits to users. Using dark mode can help to reduce eye strain and provide energy savings to users with OLED screens. It is not recommended to use pure white or pure black for these dark modes because the contrast can become too high making it hard to read the website. It is not always as simple as inverting the colors from your design. Sometimes you might need to desaturate some of the colors to make the contrast of the website easier on the eyes. Creating a dark mode takes careful consideration to make a cohesive design between the two different modes.
To give my website the option between light mode and dark mode I added a data-theme to the HTML element. I created CSS custom properties for the dark and light themes. To switch between the two different themes I added a button. JavaScript was used to activate the button to change the theme. The script uses an event listener to call the data-theme attribute in the HTML document. It also checks for the system theme settings and tries to match it and if not it will check to see if there is a preference stored in the local storage and if not it will default to the light theme. Once the button is clicked that preference will be stored in the local storage for the next time the user returns.
Reflection
This learning module allowed me to pick topics that I thought were relevant to emerging web trends. I chose to explore dark mode and parallax scrolling. I am grateful to learn how to implement them into a website because they are becoming quite common for web pages to have. Through applying parallax scrolling, I learned how to create a layer mask in PhotoShop and use the CSS mask property to help create a layer for the text the scroll through. Adding a dark mode option for my page taught me how to consider design elements when they will be switched between light and dark modes. It also taught me how to use JavaScript to call a button to switch the theme and store the settings in local storage. These topics helped to expand my knowledge of design concepts, applying JavaScript, utilizing new CSS techniques, and utilizing Photoshop in my workflow.
resources
Create a layered parallax effect with HTML & CSS