Footerįor the footer section we've used one of our freebie templates and we only changed up the colors. This animation takes some time to complete, and since we don't want our gallery leaving the screen without finishing its transition, we pause the scrolling for a while. The first row moves from right to left and the second row moves in the opposite direction. It consists of a set of images on two rows. We have prepared a beautiful scroll animation for our gallery example.
The images in the first row are rotated clockwise and the ones on the second row are flipped horizontally. Our "About us" example consists of pretty circular avatars aligned on two rows. In our example, we will have the features appear from different sides of the screen. Big icons and text are a must have, but you can also spice things up with eye-catching animations. Feature Listįeature lists are the place where you showcase what your product is capable of. We've accomplished this using offsets, which tell the library to start the animation earlier than it normally should. Here we have three inline paragraphs which will appear one after the other. Other than that our parallax is just an image inside a wrapper div, with transitions at different speeds and some smart CSS. It consists of a huge, fixed image spreading across the background, which we see only a portion of depending on how far we've scrolled. The parallax is probably the most popular scroll animation we see these days. Here are a few practical examples that show you what you can do. Using these data attributes, you can create all kinds of interesting effects. The library smoothly transitions from one to the other. As you can see, the animation itself is done via CSS properties (note that you need to specify the colors as rgb). The first attribute will tell Scrollr when the animation starts and the second one when it should end. We have a simple div with a pair of attributes. Here's the most basic example, which animates a div from blue to red: Once you have the Scrollr library in your page, you add data attributes to the elements you wish to animate while the page is scrolled. Want to learn how it was made? Keep on reading! Introduction to Scrollr See the website that we were able to build with it: Parallax Website
The library is very powerful and you can create all kinds of scroll animations with it. After that's done, calling skrollr.init() will enable Scrollr for all elements on the page.
#GOOGLE WEB DESIGNER TUTORIAL PARALLAX DOWNLOAD#
To use Scrollr, you only need to download it's source and create a link to it in your HTML. We are going to use Scrollr today as it is the most popular and works on mobile devices. Some of the popular choices are Scrollr, scrollMagic, Parallax.js, scrollReveal.js and others. The usual way that these websites are built is by using a JavaScript library. You can think of this article as a collection of building blocks which you can mix and match into an impressive interactive web page. This is why today we're going to show you a few practical examples for building them. Websites with scroll animations are all the rage these days.
0 kommentar(er)
