So here is collection of cool CodePens featuring Parallax animation effects in pure CSS for inspiration to use in an upcoming project or learning a new trick in the quest to do more with front end. When building single-page sites, generally you rely on javascript plugins to create effects for images and animations. Pure CSS parallax is also easier to implement than Javascript, and is often more performant. It creates a sense of depth and overall it’s a fun experience. It’s a CSS experiment designed to keep you scrolling down all day long (or just take the elevator).The parallax effect is created when the user is scrolling through a website and multiple backgrounds or images are moving at different speeds. This is more of a fun experiment, 19 kilometers long. By imagining that Earth is 100 pixels wide, the website will take you through the Solar System at a speed of 7,000 pixels per second until you finally reach Mars, 428,000 pixels away. This cool website will give you a sense of how far Mars is from our planet. Follow the cartoon girl (Jen) and cartoon boy (Omar) as they walk you through the different website sections and the history behind their creative studio. These are ThingsĪ lighthearted website with lots of cartoon illustrations created by Jen Adrion and Omar Noory. Full of fun facts you probably don’t know and a funny timer that says how long you have wasted reading the infographic when you should be doing work. AtlassianĪ meaningful infographic on how people usually waste their time at work. Smart USAĪ cool website for one of the most eco-friendly lines of cars on the market today. It’s full of quick tips on how to help your wallet "lose the bulge". Bellroy: Slim Your Walletīellroy, a wallet manufacturer, has a special page on their website called "Slim Your Wallet". Yes, the colorful and attractive design elements and the great use of scrolling really help the storyline. Your entire story consists of six chapters, and as you scroll down, the parallax makes you’re feeling the story. This web site takes guests on a journey on-line. In this way, the user can familiarize themselves with the strengths of the presented product. It uses 3D models that appear, rotate, and respond to scrolling down the website. Inception ExplainedĬonfused with what happened in Inception? If you still want to know, this website breaks down the movie plot in easily digestible chunks, going down level by level all the way to limbo. The Boat is among the most spectacular examples of visible storytelling in our checklist of parallax web site designs. The website of Tag Heuer is a great example of the use of parallax for a multi-dimensional product presentation - unique watches. Its products are laid out nicely with easy navigation options. Cascade Brewing CoĪnother example of a website that makes good use of creative design elements to promote its products. All that combine to produce an experience that transcends that of an ordinary product commercial. Activate DrinksĪ great parallax scrolling website with vivid colors and cool 3D visual effects. MutantLabsĪ website with design elements befitting a creative studio that dabbles with innovative games on multiple platforms. The site’s catchy music changes as you scroll down. Recommended Reading: Showcase Of Beautiful Movie Website Designs NASA Prospectīrought to you by a team of student designers at the University of South Dakota, NASA Prospect is an interactive story of two prospectors from Earth, Nicolas and Ema, who are trying to find remnants of human music contained in the golden recorders. The screenshots here do not do the sites justice be sure to click on the relevant links to view the beautiful animations/presentations in action on the respective websites. Some of them tell wonderful stories, most of them are highly interactive but all of them give you great reason to keep scrolling. We will be showcasing 15 site designs that utilize scrolling to keep their visitors engaged and stay on the page. Sometimes though, a site design uses a technique that is just right no other method could give a similar or better result or impact. In using many aspects of web design, some designers prefer using the same style or technique, while others like to revamp their website design to reflect the latest new trend.
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |