![]() ![]() There are a couple of predefined elements I’m using that we need to examine. Now, we need slow way down and look at what we’ve just done. Time for you tweak it and make it your own! This parallax technique only relies upon the basic CSS and lightweight jQuery plugins to create the effect. From navigation bars to the Lettering.js jQuery plugin, there's no limit. Of course, there are all kinds of HTML and JS additions you can make. Don't worry, you'll be a pro before you know it! Just remember that each page you add needs to have this HTML, the CSS, and the parallax.js file updated with the new page. You can add as many pages as you want, but it takes some work to get all the CSS, and JS working together. You can add all kinds of extra navigation elements on your own time, but I just wanted a simple, ready to rollout, vertical parallax system that I could easily implement and edit later.ĭid you like that nice, smooth movement? Pretty slick, eh? You can either scroll or click on the navigation elements below. This is a sample Parallax scrolling site with three pages. Now, we can start to add content to the HTML. Open up the “01-start-here.html” file from the download to double check your work. In the head section of the HTML, we have the links to our files, so make sure you save this HTML file in the main folder with the CSS file in a sub-folder called “css” and the JavaScript in a folder called “js”, or this won’t work. This won’t get you much, but it’s a critical start. You’re going to copy and paste the following code: Open up a new HTML document in your favorite HTML or text editor. Download the full assembly of files using the link above. Other files include the images that I used for this tutorial that you will (hopefully) replace later. Parallax.js – the jQuery effect that makes the Parallax effect work.Modernizr.js – a jQuery effect that gives us a nice smooth scrolling effect if navigation elements are clicked.jQuery 1.6 – the jQuery engine that makes all things work. ![]() ![]() You’re going to need four pre-built files: To get started, download the resources needed to complete the tutorial. So, hold on and have some fun as we scroll into the interesting rabbit hole of Parallax effects. Unless you are using perfect squares in your background images, you’re going to want the transparent PNG format. I have not tested the GIF format, and JPG files will not be transparent. If you want to use your own images, make sure they are transparent PNG files. You can add text or use images easily, although this tutorial will use images as background, floating elements. I like this Parallax version (and I tried dozens), because it has three independent layers that you can easily adjust. Too many other tutorials throw you right into the fray, leaving out a lot of the details that you’ll need for editing the design. The rest of this tutorial will focus on walking you through how to slowly build up this effect so that you can modify it to suite your specific needs. I couldn’t have put this together without his work and want to make sure to acknowledge his hard work. This Parallax effect was initially developed by Jonathan Nicol over at Pixel Acres/F6 Design. Here’s the final version of what you’ll be creating and the resource files for it: But this is as easy as it gets, and the steps I’ve broken this tutorial down into should be simple enough for even a novice to follow. True to form, this tutorial isn’t easy for those who do not have any experience with modifying JavaScript or CSS. I’ve been wanting to implement a Parallax effect for awhile, but I couldn’t find an “easy” technique anywhere. ![]()
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |