Quantcast
Viewing all articles
Browse latest Browse all 12

Easy parallax scrolling for Foundation 5

I sure do enjoy a good front-end web framework. It makes designing a nice looking website much easier and quicker.

I'm starting to work with the new Foundation 5 framework and I wanted to add a nice parallax scrolling plugin to it. After looking through a ton of GitHub repos I found a great parallax plugin that can easily be added to your Foundation 5 project.

The plugin I decided on in stellar.js . It allows you to easily add parallax scrolling effects by adding some data attributes to you markup. It can be added to any project easily, especially if you've installed the sass version of Foundation 5 with bower package manager.

navigate to your project directory in the terminal:

bower install jquery.stellar

badabing its that easy! now include:

<script src="bower_components/jque
ry.stellar/jquery.stellar.min.js"></script>

easily add a basic parallax scrolling background:

<body data-stellar-background-ratio="0.5">

boom! now you website is really popping.

stellar.js is an awesome jQuery plugin and you don't need to be using Foundation in order to use it. I just wanted to point out how easy it is to add to your Foundation 5 project with bower package manager.

If you want to do it the old fashioned way you can always download it from the github repo and include it into your project! Be sure to check out the documentation to see all the things you can do with this awesome jQuery plugin.

Resources:


Viewing all articles
Browse latest Browse all 12

Trending Articles