![]() ![]() These will definitely get your attention, determining you to want to know more about them. Check out these outstanding designs and start scrolling to unveil their full design. Scrollorama.This post showcases 15 sites that take parallax scrolling to the next level by combining CSS animations and JavaScript to manipulate page elements upon scroll to immerse the user into a developing story.Īs new CSS properties are becoming widely supported, designers are combining tools to create amazing websites that were once only feasible in Flash. These plugins make it easy to tap into their functionality with simple parameters. To create the fancy scrolling effects we’re going to use two ready made plugins named Curtain.js and Scrollorama. Once the CSS styling is complete each slide of the design is stacked in a boring vertical layout, so let’s change that with the help of some cool jQuery plugins. The :nth-child() selector makes it easy to target each consecutive list element without the need for additional class names. Once all the individual sections and textual content is added to the HTML, these slides can be styled to match the original design.įloat: left box-shadow: 0 0 20px rgba(0,0,0,0.5) line-height: 0 įor the series of video thumbnail images each element is styled with transform:rotate() and z-index rules to match the random layout used in the original concept. The series of YouTube video screenshots in my design are all added in their own unordered list. this is the place to go!Īny elements that you want to use as part of a parallax illusion will all need to be added as individual elements. I also post random content over on my personal blog. Now we have our concept design in place and all the image resources exported we can begin building the site in HTML and CSS, starting with the HTML structure. Often you can get away with quite low file sizes while maintaining decent image quality.Ĭompile all the graphics into an images folder and group them by section with consistent file names. Alter the compression of the JPEG image to fine tune the file size. In some sections of my design I use a large background image. Repeating patterns are the easiest way to fill the screen with a nice looking background, these can be exported as small image files and will tile to fill the screen with a cool texture. ![]() Instead of using full alpha transparency with PNG-24, I used PNG-8 image formats with a carefully selected Matte colour. ![]() My design is very image intensive, so I had to be careful not to go overboard with file sizes. Each section of my site includes a title, description, photo and button.īegin exporting all the required imagery ready for creating the design in HTML and CSS. These parallax and scrolling effects work best with full screen designs, so I used repeating patterns or background images to fill the screen. The design conceptīefore jumping into any code flesh out your design in Photoshop and develop each individual slide. With the help of some cool jQuery plugins clever scrolling and parallax illusions are added to inject an element of fun and novelty to the site. Each website has its own individual section in a series of ‘slides’ laid out vertically. This tutorial will be a walkthrough of my design process for a simple portal site that presents all of my websites and social profiles. In this tutorial we’ll use a couple of readily available jQuery plugins to quickly put together a cool little single page website of our own, complete with fancy scrolling effects. It has become a great tool to create a fun browsing experience that responds to the user’s controls as they scroll up and down the page. I’m sure we’re all familiar with the popular parallax effect in web design. ![]()
0 Comments
Leave a Reply. |
Details
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |