Next, we’ll initialize the plugin and modify a few of its default options. In our case, the majority of elements (apart from the masonry elements) will appear with a small slide animation, thus we’ll give them data-aos="fade-up", like this. The value of this attribute can receive different keywords such as fade-up, fade-down and flip-left which indicate the type of effect. In actual fact, I’ve already covered that requirement in previous tutorials:įor this example, we’re going to use AOS.js, a straightforward JavaScript library that I really like.Īs a first step, we’ll add the custom data-aos attribute to the target elements. JS plugins, Intersection Observer API, etc.) to accomplish it. There are a number of different ways (e.g. Up to this point, our page looks great! But, let’s go one step further and bring life to specific elements as they come into view. Great job, folks! Without putting too much effort, we managed to build a beautiful Material Design landing page.īut, let’s be honest, there’s still enough room for improvement, right! 7. Animate Elements on Scroll Note that the footer section doesn’t include anything special, so we’ll omit it for the sake of simplicity. Plus, for readability reasons, we’ll create an empty image overlay by using the ::after pseudo-element:Īnd the styles for the overlay. The hero section (or “banner section”) will contain a fullscreen background image and two headings. Note that in a real page, inside the header we would have a navbar with links to the different sections. Initially, its background will be transparent, but after 50px of scrolling it will become white: The page header will behave as a fixed positioned element and include only an external call-to-action button. Note: you might find this tutorial on collapsing margins interesting whilst we’re on the subject: Later, as we’ll see, this wrapper element will receive a negative top margin, so its contents will overlap the bottom part of the first section.
We’ll place the last four sections inside the main element. We’ll first define a header, five sections, a footer, and a back to top button. With all the required stuff in place, let’s examine the page markup. Similarly, the JavaScript editor will contain five files: With all the above in mind, in the CSS editor of our pen we’ll include three files: Next, we’ll import AOS.js, an easy-to-use library which will reveal our elements as we scroll down the page. For example, our page won’t contain a range slider, so there’s no need to incorporate the noUISlider slider. Keep in mind that we’ll only include the assets that we’re going to use. Include the Required CSS & JS Librariesįor the purposes of this exercise, we’ll have to download and include a bunch of files in our pen.įirst, we’ll import the required Material Kit files by following the instructions on this page. Happily enough, this UI Kit comes with well-organized documentation and three pre-built pages for speeding up the learning process.
Unpkg material 2 dev pro#
Expanding on the "card" motifs that debuted in Google Now, Material Design uses more grid-based layouts, responsive animations and transitions, padding, and depth effects such as lighting and shadows.”Ĭreated by Creative Tim, not only does it customize the default appearance of Bootstrap 4 components, but also it implements its own styles.Īpart from the free standard version, there’s also a premium variant called Material Kit Pro with even more features and capabilities. “Material Design is a design language that Google developed in 2014. As already mentioned, Material Kit is a free Bootstrap 4 UI Kit inspired by Google’s Material Design.
0 kommentar(er)
