Split Screened "versus" design with interactive hover, interactive overlay, and static background.
Link to project: Coming Soon
Tech used: HTML, CSS, JavaScript
I started off with a base HTML page and added some basic text. Then I applied some CSS using some variables in certain spots; this is easier to use as opposed to typing out the same styles over and over. Finally, I applied JS for the functionality of transitioning from one side of the page to the other. In the future, I'd like to improve on some styling such as make the side that isn't being hovered over a little darker so that the user can focus on who is being highlighted.
- Plans to create second, more in-depth, page to each Anime character depicting their story.
- Added video clips in case anyone is interested to watch.
- Will more than likely convert this in to a React project.
- Improve on styling.
I learned to create a visual effect using a cool combination of CSS along with JS. Using the mouseleave event creates a cool transition from one side of the page to the other side. This was created in my earlier days of being a developer, so throughout this project, I learned a lot insofar as how the basics of Javascript works. I learned how to remove classes over a list of classes and how to add them as well.