**Kevin’s Wildlife Sanctuary at Paradise Falls is a fictional website I created as a project in Advanced Web Design during my studies towards my masters in Web Design and Online Communication through the University of Florida. Many of the aspects in this site were required per project requirements and was created for education purposes. I am in no way affiliated with Pixar or Disney.**
Requirements for project 3:
- Designed around an animal theme
- CSS animation only, no JavaScript/JQuery, Lightbox, or Fancybox
- Animated CSS based Navigation
- Image CSS hover effect
- Form of Psuedo Classes & Psuedo Elements
SUMMARY:
I decided to use this project opportunity to unleash my creative side and fully immerse myself in a theme environment. After seeing this site needed to have an animal theme I began brainstorming fictional Disney “worlds” for inspiration that I could bring to life. One of my favorite Pixar movies is UP, an animated movie in which an elderly man, Mr. Fredrickson, lives out his lifelong dream of visiting a South American wilderness Paradise Falls; via flying with balloons tied to his house. Along his journey he encounters Russell a child stowaway on the house, and at Paradise Falls Kevin, a giant bird (who despite his name is a female) or mythical “snipe” who explorers have been trying to discover for years.
In an effort to keep Kevin safe from future poachers I created Kevin’s Wildlife Sanctuary at Paradise Falls which is funded by Mr. Frederickson and run by Russell, Doug, and Alpha.
The goal of this site is storytelling. My goal is to have the user continue their journey, exploring with the characters and environments they know and love.
Interactive CSS Elements:
Logo:
The custom logo I created was inspired by Kevin himself. His easily noticed outline is the center point of the logo replacing the I in Kevin. The color scheme was taken from the colors within Kevin’s coat.
Kevin Wildlife Sanctuary Logo
Homepage:
The first CSS animation can be seen when entering the homepage. The page opens with a safari image as the background bringing the user within a wilderness. Before you can even realize it Kevin, who is known as a speedy bird, races across the screen using CSS animation to reveal the sanctuaries logo. You may also notice that the logo in the top left moves back and forth, further revealing how quick Kevin is that it causes the logo to shake. (Incase you missed the quickness of Kevin, you can see her run again by clicking on the large logo in the center of the homepage).
Navigation Links:
When the user navigates to the About Us link, and the curser is placed over the link a different CSS animation is revealed. A blink effect is used on the links which turns it to a blur, another reveal of the quickness of Kevin. A Page transition is also used between the web pages, it is a 1 page CSS scoll.
Screenshot of Kevin’s Wildlife Sanctuary homepage
About Us Page:
The About Us page welcomes the user to another section of the wilderness showcasing content about the sanctuary and displays a photo of Russell, who cares for Kevin. If the user hovers over the image a CSS animation appears and reveals a photo of Russell and Kevin playing together. A Psuedo element can also be down with the first letter of each paragraph being colored.
Kevin’s Wildlife Sanctuary About Us screenshot
Meet Kevin:
Kevin’s Page is another welcoming area in the wilderness. This page displays to the user information specific to Kevin and her life at the sanctuary. A photo of Kevin creeps from the left and if the user hovers over her face she is seen opening her mouth (this is another easter egg as she is a known screecher from the movie although no sound is heard).
Kevin’s Wildlife Sanctuary Meet Kevin screenshot
Stay Connected:
Finally, if the user wishes to continue following Kevin at Paradise Falls they can sign up to receive email notifications about the sanctuary. To tie in the theme of staying connected no matter where you travel and the storyline of the movie, Mr. Frederickson’s house is seen flying, thanks to another CSS animation, in the background from balloons over Paradise Falls.
Kevin’s Wildlife Sanctuary Meet Kevin Stay Connected screenshot
CONCLUSION:
Kevin’s Wildlife Sanctuary at Paradise Falls website was my favorite to design. I was able to allow my creativity to flow in the hopes of immersing the user within the movie theming and expectations.
To view the full website and see the CSS animations in action click here.
