In this tutorial we demonstrate how to achieve some of the modern and popular header effects such as parallax backgrounds, scroll based animations and more basic responsive layout techniques such as sizing to the viewport height and vertical centering.

These techniques involve the application of several powerful CSS3 properties, and some jQuery magic.

Once complete, you should have a good understanding of what we can achieve with these properties and techniques and you’ll be ready to start experimenting with them to achieve the exact effect you require.

In this tutorial we will be working on this Dark Horizon theme that we developed in a previous tutorial: How to Create a Custom DNN Skin with Bootstrap 3.

This video contains:

• How to run a function when the window is scrolling
• Testing the function and logging to the console
• How to detect the scroll position of the window
• Demonstration of the background-position CSS property
• How to automatically change the background position using scrollTop
• How to adjust position speed
• How to change the opacity of an element based on scroll position