Create a web page named transitions.html in your courses/csci240 directory and create a CSS file named transitions.css in your courses/csci240/css directory.
Add the content below to your web page.
Add a navigation bar to your web page.
- The navigation bar should contain at least 3 working links.
- The links should include transitions to noticeably and visually change the state of the links. Make your transitions unique.
- It should remain fixed in place at the top of the screen when the web page is scrolled. Add enough content to page (e.g. Lorem Ipsum text) so that you can test this feature.
Add a slider to your page.
- Only part of the slider should be initially visible.
- When the user hovers over the visible part of the slider, the page should use the transform property to slide the slider on screen.
- The slider should contain at least 3 working links.
Add an image in the center of the page.
- The image should use an animation to modify the image when the page loads.
Use the demo found here as a visual reference. Note that I wrote “visual reference”. I do not want you to simply recreate the demonstration page. If your page looks like the demonstration page, you will not receive full credit.
© 2020 – 2021, Eric. All rights reserved.