How To Create WebFont Icons From Scratch

There’s been a lot of discussion in design communities as of late into WebFont Icons. There’s no doubt, that image/raster based icons in web design are fast becoming a relic of the past.
Since the early days of CSS, image based icons in web design have been an industry standard. But that has all changed as screens with higher PPI’s and PAR’s have become increasingly affordable. Having said that, the vast majority of displays used to browse the web at the moment, are still using around 72 – 150 PPI, well below minimum requirements for ‘retina’ support.

Tweet

Getting Started With SASS

You’ve probably heard a lot about things like Sass, Grunt, Less or even Gulp and other web deployment related workflows lately. People everywhere are raving over Sass and Grunt as if they’re gods gift to front-end developers. 

Tweet

Is Photoshop Still Industry Standard?

I guess a more appropriate title would be “Should Photoshop Still Be Industry Standard?“. Like a lot of people, I’ve been an avid fan of Photoshop for quite some time now. It’s been my go-to tool for the best part of 6 years for a range of purposes, from photography to web design.

Tweet

Case Study: Apple’s “Exploring New Depths”

Today we’ll be doing a bit of a web design and development “case study”, something i’ll be exploring more regularly in the future on this site.

Tweet

110+ Best High-Quality Free WordPress Themes

No matter what your design, coding or blogging experience, WordPress is easily the most comprehensive, reliable and complete content management system.

Tweet

Animating Images With CSS Keyframes

A few weeks ago, I came across this video by Joe Fellows explaining how to create “parallax” effects on photos using a combination of Photoshop and After Effects. After watching it, it got me thinking – “Why not try to create similar effects for images on the web with CSS keyframe animations?”

Tweet

Injecting SVG With JavaScript

“Injecting SVG” – it sounds kinda complicated I know, but trust me it’s not. It’s actually super-simple! Right now you’re probably thinking “Why would you use JavaScript to inject SVG markup? What is it? And how does it work?” Let me explain.

Tweet

Understanding CSS 3D-Transforms

3D transforms can be a bit of a mind-boggling concept at first, particularly given that the HTML canvas (your screen) is a 2D space. While most of us understand the most commonly used 3dtransform - transform: translate3d(x, y, z), there are other values that can effect 3D rendering such as rotating, backface-visibibility, perspective and lots more.
Let’s take a look at better understanding the spectrum of css 3d transform properties.

Tweet

A Super-Simple Way To Use SVG

Instead, I thought I’d share a super simple way to use SVG with you, quite possibly the easiest way. Everyone’s talking SVG these days and it’s something I’ve been advocating for quite a while on this site.

Tweet

SVG Magnify/Zoom Effect With JavaScript

SVG is such a great web technology with so much potential for all kinds of things. Did you know you can run “inline” JavaScript within SVG markup? I’ve been experimenting a lot with SVG over the past few weeks with the aim of trying to expand its uses beyond just icons.

Tweet

Understanding and Using The Golden Ratio In Web Design

Great web design these days is often the result of two things – usability testing and great aesthetics. If both of these facets remain true, for the most part a design will be successful.
However on the aesthetic side of things, creating a a clear, intuitive and user friendly design solution can be the result of many things such as grids, typography, consistent UI elements and well structured layout.

Tweet

Animating SVG With Clipping Masks and CSS

SVG animation is pretty popular these days and has lots of potential for innovation and ingenuity. Over the past few months we’ve seen some brilliant examples on the web with the use of jQuery, Snap.svg and even simple CSS.

Tweet

Expanding Your Skill-Set: From Design to Development

So you’re a talented designer. You worked your way up the food chain from Design College, to freelance work, to well established design firms and back to freelance again (because you hated working for other people). You’ve designed everything from apps and websites, to posters and products; however you feel slightly vexed as to what to do next.
Good news, you’re in a perfect position to expand your skill-set. However there’s a fork in the road ahead of you in your career path with perhaps one of the most critical decisions you will ever make. You can either go left into Art Direction, or right into Development.
I’m not going to toss up which one is better than the other, that’s a discussion for another day. So let’s say, for the sake of brevity, you have decided you want to get into development.
Good choice! As someone who has followed a similar path, for me – the transition was a very steep learning curve, but a relatively quick one, as my thirst for more knowledge drove me to learn quickly.
Before we delve into the primary substance of this article, I will not be explaining how to code or what a <div> is. While specifics are important, this article is aimed at helping you better understand the thinking behind development from a designer’s perspective.
So how do you make the expansion? Here are some tips that should help you through the process.

---

Expansion Is Not Transition

Firstly I want to clear a few things up. Transitioning is different to expanding your skills. There is absolutely no logical reason as to why you should stop designing and start developing. Your design skills and knowledge, (no matter your expertise) are an asset, they’re an asset to learning development, they’re an asset to earning money, they’re an asset to your life in general.
With the way the web design and development industries are progressing at the moment, it’s becoming increasingly frequent to see multidisciplinary professionals. The creative world is fast-becoming an amalgamation of skills, knowledge and software accessible to anyone.
Adobe’s “The New Creatives” campaign, launched in September, was aimed at targeting this newly developing niche.

Art Directors are becoming animators. Print designers are becoming web designers. Illustrators are also photographers, who are editors who also shoot film. These are the New Creatives, and Adobe is celebrating their work with a new campaign that makes them the face of our marketing—both literally and figuratively.

Now, just like any advertising / marketing campaign, I’ll bet you dollars to doughnuts that campaign was based on a significant amount of viable market research. Probably with some sort of industry forecasting involved.
So aim at expanding your skills, you shouldn’t aim at changing your working title, nor do you need to stop designing. However what you can do is aim at developing a new skill-set that will make you a more dynamic professional, with a broader range of offerings.

---

You Know Design

You understand design, deeply. You already understand the why. You understand visual aesthetics. Your eye is well trained and can quickly examine and analyze every detail of a given design in a matter of seconds – resulting in you thinking, there needs to be 3pixels more space between that logo and it’s text. Designers are critical thinkers and visual-critical thinking is an indispensable skill and mindset to have. It helps you evaluate design dimensions, ratios, proximity, color, balance, space, tone, direction and a whole lot of other stuff quickly and decide what needs to be changed.
You understand how to design. You understand the process of designing, from pen and paper, to wireframes, to Photoshop and Illustrator. You understand the thought process and the workflow to creating a well-designed project.
However you might not realize that while many developers may not have the graphic design software proficiency you have, a lot of them have similar skills. Meaning, while many of your design-specific skills are exclusive, other can be relative and applied to web development.

---

Design and Development Are Separate

There’s a good reason the two professions are for the most part separate, they are completely different in process, in principle and in execution.
Development requires a different approach to design. As a designer, you’ve always focused on the “why”, however development is the “how”. In a well thought-out project, the “why” should have been addressed long-before the development stage begins.
This why/how argument forms the basis of rivalry between the two trades. Recently, I was reading an article by a design student saying that this rivalry begins at an educational level, where the two professions are told not to like each-other. However, rather than arguing one is more important than the other, understanding both will no-doubt result in better work, regardless which you are doing.
So keep them separate. For example, one mistake I made when first learning web development (having already been a web designer), was going back and forth between the two processes. For example just because I knew both, I would find myself half-designing things, then thinking, “I don’t need to finish designing this part, I’ll just finish it off when coding.” This became a messy workflow, as I would find myself continually refreshing browsers or designing in chrome – trying to figure out the “why” and the “how” at the same time. Pretty soon I realized there’s no reason to skip or change workflows just because I know both. They are separate for a reason, finish one, start the other.

---

Development and Software

Throughout your web design years, you’ve had to keep up with the ever changing landscape of design software, Adobe’s industry monopoly, and their continuous affinity for developing new software that’s totally unnecessary. You’ve learned that while understanding design and having a trained eye are great, they are skills that are ultimately inhibited by your software-skills.
Development couldn’t be further on the opposite side of the spectrum. In development, knowledge is power, and knowledge is certainly not based on how to use Adobe Dreamweaver – you can build an entire website from notepad.
Instead, your understanding and knowledge of mark-up languages is what builds the foundation of your skill-set. For example, in programming school, a lot of software-developers spend their entire first year understanding language formatting before vocab is even started.
While it seems slightly excessive, this learning model is probably a good way to start in web development, as it helps you understand the principles from which the languages work.
While web development may not require extensive knowledge of complex software, a good way of thinking about this software vs knowledge relationship is that code mark-up can be arranged differently to produce the same solution or result.
This forms the essence of good development. Think of it as writing sentence, you can use different vocabulary to create the same meaning, however it may be more difficult to read, interpreted differently or even sound too complex. Your sentence structure and vocabulary decisions dictate meaning, perception and ultimately paint a picture of a given subject. If you’re language skills are good enough, you can make the complex, become rudimentary.

---

Developers Solve Problems

As a designer, you’ve been taught (or taught yourself) to solve problems. Your design work solves problems, branding problems, website problems, app problems, client problems.
Just like designers, developers solve problems too. There are so many considerations to take. Here’s an analogy:
Let’s say you need to design an icon. You may have a better understanding of Photoshop and be able to finish it in half the time as opposed to using Illustrator. However vector work should be done in Illustrator. Not only is illustrator more efficient, it has a broader and more powerful export spectrum. So you do it in Illustrator.
A developer has similar decisions to make. The equivalent would be how to implement that icon. You could use a PNG with CSS, maybe even use retina media queries, which is a rudimentary, bog-standard method. However it’s not scalable, it will make the page load slower through more HTTP requests and it’s not dynamic (can’t change colors or animate). So you use an SVG.
It’s all about the “how”, how to implement in the most efficient and effective way, while maintaining support and functionality.

---

Learning Development Will Improve Your Design Work

Have you ever worked with a developer who doesn’t really like you much, he feels annoyed whenever you pass work to him and frowns upon your workflow. Ever wondered why?
Let’s use the icon example again. You designed it in illustrator; you used complex object blending and labelled all the layers with spaces (e.g layer 1 instead of layer_1). It may look all organized for you, but when you hand it over for web implementation, this can cause issues. When you export the SVG code, all the grouping is wrong and the spaced layer names create two different IDs. You’re hindering workflow.
However if you understand the development side, you will be able to design in a way that makes implementation easier and more efficient. Furthermore if you do both, you’ll make your own life much easier.

---

Your Thinking Will Change

There’s no two-ways around this, if your way of thinking and perception of design doesn’t change, then you simply haven’t understood web development. Your ideas will change, how you see things will change. You will no longer solely be fascinated by the “why”, but start to question “how”.

---

Summary

Like I said before, the web design and development industry is becoming increasingly amalgamated. Designer-Developers are becoming the prototype of tomorrow’s modern web. While there will always be specialists in each profession, and workflows between them might not change much, the multifaceted creative is becoming an increasingly prevalent vocation.

---

Where to start?

There are a number of ways to start learning basic web development. From my experience, I would say the best thing to do is to focus on understanding language-structures and relationships before you start using them. Here are a few useful links to get started.

• Webtuts+  -A great resource for learning from the envato family.
• Codecademy – Learn to create interactive websites, fun games, and killer apps
• Treehouse – Learn how to build websites & apps, write code or start a business.
• Lynda.com - If you went to design school recently, this is what teachers asked you to use when they’re too lazy to do their job.
• P2PU’s School of Webcraft – High quality web development courses
• Code School - In browser web video lessons.

Tweet

Full Page Web Backgrounds Part 1 | Design

Full page web backgrounds have become a great dynamic effect to use for a range of projects. Different styles in both design and development mean you can create some interesting effects.
In this two-part tutorial, I will be showing you how to create 4 different web background effects all the way from design to implementation. In this first installment, we’ll be focusing on designing our backgrounds, while in part two, we’ll look at a number of cool ways we can enhance them on implementation for the web.
Here is a quick overvier of the backgrounds we’ll be creating:

• Semi-Clear Blurred Background
• Fully Blurred Background
• Pixelated Background
• Vector Background

Just a quick note before we start, this tutorial assumes you have a basic understanding of Adobe Photoshop and Adobe Illustrator. Also, I’ve linked the source files at the bottom of the article which includes all the original files, as well as the PSD’s and Illustrator files. Let’s get started!

---

1. The Semi-Clear Background

The semi-clear blurred background is a great technique, particularly for large backdrops in web design. It’s also the easiest to create. For the purposes of this tutorial, I’m using a photo of New York City which you can download here.
The first thing we need to do is fix up the colors slightly as the default photo looks a little dull. However it’s important with this kind of background to keep the colors real and not too ‘hipster instagram’ ish. I just prefer to keep the image clear for this type of thing, however if you like hipster filters, feel free to use them. Keep in mind once we apply the blur, a lot of the colors get accentuated. I’m not going to go into the filters, as it’s not the point of the tutorial, however you can check them out in PSDs.
For the blur go to Filter -> Blur -> Lens Blur. You can play around with the settings a little if you like. The important thing here is make sure there’s a balance in how blurred the effect is. I like to still be able to make out basic objects of photo such as people, or signs or traffic lights for example. Here’s a screenshot of the settings I have used:



Finally, ad a quick noise filter by going to Filter -> Noise -> Add Noise. Put the settings at about 2-3%. The effect needs to be really subtle. The result should look similar to below.

---

2. Fully Blurred Background

The fully blurred background works in a similar way as the one above. When you’re creating these kind of backgrounds however, it’s good to use photos with lots of color. I’ve found nature photos work the best. The advantage of using a photo, rather than using arbitrary gradients, is that you get a blur effect that’s completely unique. We’ll be using this photo here.

Open up the photo in Photoshop. Duplicate the layer 3 times. On the top layer apply a Radial Blur with the threshold at 55. Set the Layer Opacity to 40%.

For the second layer, apply a Gaussian Blur at 50%. Set the Layer Opacity to 82%.
For the final Layer add a strong Lens Blur, with the Layer Opacity at 100%
Finally add a Color Correction Filter effect on the top of all the layers – see PSD, flatten the image and and Noise Filter at 2%.





The result should look similar to the image below.

---

3. Pxielated Background

This is a pretty popular effect, and really easy to create. We’ll be using the blurred background above as a base.
Continuing on from the previous background in Photoshop. Go to Filter -> Pixelate -> Mosiac. Set the cell size on 50. Finally add a Noise Filter of about 4.3%. That’s it! Your result should look like this:

---

4. Vector Background

The vector background is another popular effect and again, quite easy to make. We’ll be using Adobe Illustrator. Open up a 4800px x 3000px blank document. Next using the pen tool, or using the shape tool create a series of inter-connecting triangles. You can create any design you like really, the idea is that it’s abstract. Feel free to experiment with different shapes. My art board looks like this:



Next, use the gradient tool to apply different gradients to each triangle. Try to use colors that are complementary with each other. After adding the various gradients, you should have something like this:


Finally, export the file to PNG, open it up in Photoshop and add a Noise Filter. The final render will then look like so.

---

That’s it for this tutorial. In part 2, I will be showing you how to implement these on the web with some cool effects.
Download Source Files

Part 2>>

Tweet

Full Page Web Backgrounds Part 2 | Implementation

In this two-part tutorial, I will be showing you how to create a number of different web background effects all the way from design to implementation. In Part 1, we created 4 backgrounds using Adobe Photoshop and Illustrator. In this part, we’ll look at a number of cool ways we can enhance them on implementation for the web.
In Part 1, we created the following backgrounds:

• Semi-Clear Blurred Background
• Fully Blurred Background
• Pixelated Background
• Vector Background

For each background, I’ve then created 6 different effects. Check out the demos as well as the source files below.

Download Source Files       View Demo

---

Basic Setup

The background setup is pretty simple. The best way is to simply apply a class to the <body> and use CSS to apply the background, like so:

body.background{
background: url(Background.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}

In the demo’s I then just added an simple overlay effect on top of the background. Simply create a div inside the body.

#overlay-effect {
opacity: 0.2;
background-color: #364549;
background-image: -webkit-linear-gradient(30deg, #364549, transparent 5px, #fff);
background-image: -moz-linear-gradient(30deg, #364549, transparent 5px, #fff);
background-image: linear-gradient(30deg, #364549, transparent 1px, #fff);
background-size: 20px 20px;
position: fixed;
top: 0;
left: 0;
min-width: 100%;
min-height: 100%;
}

The overlay effects use the same logic. Let’s run through it. First we set the opacity low, so you can see the background below. Then we create a background-color, in this case, dark blue. Then we create CSS linear-gradient going from the same dark blue to transparent, and set the gradient spread to 5px. Finally we set the background size to 20px. The gradient then repeats and creates a pixelated effect over the background.



Try experimenting with different values. Once you get the hang of using CSS graidents, you can create some interesting effects. To get you going I’ve made a number of different effects for each background. Take a look in the demo below.

---

Download Source Files         View Demo

<< PART 1

Tweet

How To Create a Parallax Scrolling Website | Part 1

One of the biggest trends in web design is the famed parallax scroll effect. In this 2-Part tutorial I’m going to show you how to create a basic parallax website with some simple makeup using a plugin called stellar.js.

Download Source Files View Demo

---

Introduction

The parallax scrolling effect has been around for a while now and with the popularization of flat design it’s become an essential skill for any developer or designer. Usually parallax websites use some form of story to emphasise the effect and user experience. As the user scrolls the page, a story is told through a virtual journey of animation and interaction.

---

Understanding Parallax Scrolling

You might have heard the word floating about, particularly amongst ‘savvy’ designers who throw it around as a sort of “I’m a really cool designer” statement. However if you’re not sure exactly what it means, it might seem a little ambiguous or even complicated. Let’s clear things up a little.
The actual word parallax is derived from the Greek παραλλαξη (parallaxis), which means alteration. Objects which are closer to the eye have a larger parallax than objects which are in the distance. This means that objects which are closer to us can appear to move faster than objects in the background.
In terms of web design, this is most commonly achieved through layering objects and backgrounds and applying different scrolling or animation speeds to create the illusion of depth.
Technically, the effect is created by created through keeping the viewport in a fixed position and scrolling a background, along with “foreground” objects through the viewport. If you’re a visual thinker like me, the best way of understanding this is through a diagram.
Very general parallax scrolling theory

A closer look at how the background/view-port scrolling relationship works.

---

Parallax Examples

Now that we better understanding what a parallax design is, let’s take a look a few examples on the web:





If you play close attention to the relationship between the “background” and “foreground” objects, as well the backgrounds, you’ll notice that although all these examples are considered “parallax”, they each use a slightly different technique to produce the effect.
It’s also worth noting that the best examples use some form of story-telling to deliver an idea or a message. This is what makes a parallax effect so great, the ability to tell a story through user-interaction.

---

Setting Things Up

As with most projects, the best place to start is pen and paper. Before you jump into any code, create a quick sketch up of how your page will work. If you’re working with a web designer or you design yourself, you should then fully design your layout in something like Photoshop before starting.

---

Project Overview

This tutorial will be split into 3 parts. In this part we’ll create the basic layout and scrolling effects for the backgrounds. In Part 2, we’ll then create our foreground and background objects. Finally in Part 3, we’ll animate our objects for maximum parallax effect.
Let’s take a look at our project setup:

To demonstrate a parallax website, I’m making a mock-up website for a free typeface called Prime, which comes from independent font foundry FontFabric. If you’re a typography enthusiast their site is definitely worth checking out. We’ll be using a few of the images from their font mock-up to display a folio style promotional website for the typeface.
We’ll create a parallax scrolling background, along with a navigation bar which indicates the slide which is being displayed and a download link.

---

Plugins

To achieve our desired effect we’ll be using 3 jQuery plugins:

Stellar.js

Stellar.js is a jQuery based plugin by Mark Dalgleish which makes it easy to create parallax scrolling sites. This forms the basis of our parallax design by creating the scrolling effect. There are other plugins available for more complex effects, however this one is really simple and easy to use.

Waypoints

Waypoints is a jQuery plugin from Caleb Troughton which executes a function whenever you scroll to an element, allowing the navigation to detect which slide is being displayed.

jQuery Easing

jQuery easing is a plugin for advanced easing effects. We’ll use this to add a smooth transition when we click on a navigation link.

---

Document Setup

Let’s take a look at our documents setup. Mainly our external script references so you know how things will be setup in the head.
Here we have referenced our external style-sheet, CSS reset, jQuery library and plugins, along with our own custom JavaScript scripts.

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Create a Parralax Website</title>

<link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/3.3.0/build/cssreset/reset-min.css">
<link rel="stylesheet" type="text/css" href="css/style.css">

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript" src="js/js.js"></script>
<script type="text/javascript" src="js/jquery.stellar.min.js"></script>
<script type="text/javascript" src="js/waypoints.min.js"></script>
<script type="text/javascript" src="js/jquery.easing.1.3.js"></script> 

</head>

---

Slides

Before we worry about the navigation let’s focus on the slides, which will form the base of our setup. You can do this through <ul> list, however I find it easier to just use divs.

<div class="slide" id="slide2" data-slide="2" data-stellar-background-ratio="0"></div><!--End Slide 2-->
<div class="slide" id="slide3" data-slide="3" data-stellar-background-ratio="0"></div><!--End Slide 3-->

Each div is given the same class of “slide” for general styling and then a subsequent id of “slide1” – “slide2” – “slide3” and so on. We then use the HTML5 data attribute to name the slide – i.e. “data-slide=’number’ ”.  Finally we add another data attribute of  ”data-stellar-background-ratio”. This is specific to the stellar.js jQuery plugin and tells the plugin at what ratio the speed of the element should scroll.
The “stellar ratio” sets the speed that the background or the element will scroll. A ration of 0.5 will cause an element to scroll half the regular scrolling speed, a ratio of 1 will have no effect, while a ratio of 2 will make the element scroll at double the speed.
Like we discussed earlier, to create an effective parallax effect of depth, you want the background scrolling at a single speed, while varying the scroll-speeds of objects. For the moment, we’ll just setup up the backgrounds and navigation, however once we start adding scrolling objects, it’s important to understand how to effectively create depth. We’ll get into this in more depth in Part 2.
Background scrolling is where a lot of parallax designs can fall-short. To create a true parallax effect, you want the backgrounds to be fixed on the viewport, rather than just stack vertically.
The theory for our background-scrolling is that the slides are stacked in order of top to bottom, however rather than simply scrolling down through each slide, they are all fixed into the center of the viewport. This way as you scroll from one slide to the other the viewport displays a corresponding amount of each slide relative to the scrolling amount, while keeping everything centered. This creates the illusion of them being stacked upon each-other and really kicks in the parallax effect.

---

The Navigation Markup

The navigation will remain in a fixed position throughout the site and displays colored circles with a white center when the corresponding slide is active. We’ll be creating the circles exclusively in CSS, however we set our box-shadow (circle outline) and background color inline in the HMTL. This way we can simply change the background color in our CSS when the link is active.
You’ll notice for each navigation link, we apply the “data-slide” of the corresponding slide. We’ll then setup the links in jQuery later so that each link slides to a slide.

<ul class="navigation">
<li data-slide="1" style="box-shadow: 0 0 0 3px #1a1a1a;background-color: #1a1a1a;" ></li>
<li data-slide="2" style="box-shadow: 0 0 0 3px #ffee00;background-color: #ffee00;"></li>

---

The CSS

The CSS can get a little messy if you don’t understand things, however because we’re just setting up our backgrounds, it’s relatively straight forward.
For the slides we use some pretty simple CSS using the “background” attributes to set the color, size, position and image for the backgrounds.

.slide {
background-attachment: fixed;
width: 100%;
height: 100%;
position: relative;
overflow: hidden;
}
#slide1 {
background-image: url(../images/prime01.png);
background-color: #1a1a1a;
background-repeat: no-repeat;
background-position: center !important;
-webkit-background-size: 700px 300px;
-moz-background-size: 700px 300px;
background-size: 700px 300px;
}

For the navigation we set up the fixed <ul> and then simply create our circles for the corresponding <li>’s. Finally we add a hover/active class which we’ll toggle later using jQuery.

.navigation {
position: fixed;
z-index: 1;
background: rgba(255, 255, 255, 0.2);
padding: 20px;
}
.navigation li {
width: 10px;
height: 10px;
border-radius: 5px;
margin: 0 auto;
position: relative;
-webkit-transition: all .2s ease-in-out;
-moz-transition: all .2s ease-in-out;
-o-transition: all .2s ease-in-out;
-ms-transition: all .2s ease-in-out;
transition: all .2s ease-in-out;
margin-bottom: 25px;
}
.navigation li:hover,.navigation li.active {
background-color: #fff !important;
cursor: pointer;
}

Finally we add a download button as well as an arrow on the first slide.

.download {
background: url(../images/download.png) no-repeat;
position: fixed;
right: 50px;
top: 20px;
height: 32px;
z-index: 1;
color: #fff;
text-decoration: none;
padding-top: 30px;
text-align: center;
width: 70px;
background-position: center -3px;
}

.arrow {
width: 100%;
height: 100%;
margin: 0 auto;
position: relative;
background-image: url(../images/arrow.png);
-webkit-background-size: 64px;
-moz-background-size: 64px;
background-size: 64px;
background-position: center 600px !important;
background-repeat: no-repeat;
background-attachment: fixed;
}

---

The jQuery

Ok here’s where things really come to life. We have a number of things we need to do, mainly for the navigation and waypoints. Also I’ve overridden the browser’s default mouse-wheel and keyboard scroll functions with an easing function. This way, for browsers like Chrome, when a user scrolls with the mouse-wheel or the keyboard, the effect eases rather than being blocky.
I’ve noted the jQuery below so you know what’s going on.

jQuery(document).ready(function ($) {
//initialise Stellar.js
$(window).stellar();
//Cache variables for Stellar.js in the document
var links = $('.navigation').find('li');
slide = $('.slide');
button = $('.button');
mywindow = $(window);
htmlbody = $('html,body');
//Set up for waypoints navigation
slide.waypoint(function (event, direction) {
//cache the variable of the data-slide attribute associated with each slide
dataslide = $(this).attr('data-slide');
//If the user scrolls up change the navigation link that has the same data-slide attribute as the slide to active and
//remove the active class from the previous navigation link
if (direction === 'down') {
$('.navigation li[data-slide="' + dataslide + '"]').addClass('active').prev().removeClass('active');
}
// else If the user scrolls down change the navigation link that has the same data-slide attribute as the slide to active and
//remove the active class from the next navigation link
else {
$('.navigation li[data-slide="' + dataslide + '"]').addClass('active').next().removeClass('active');
}

});
//waypoints doesnt detect the first slide when user scrolls back up to the top so we add this little bit of code, that removes the class
//from navigation link slide 2 and adds it to navigation link slide 1.
mywindow.scroll(function () {
if (mywindow.scrollTop() == 0) {
$('.navigation li[data-slide="1"]').addClass('active');
$('.navigation li[data-slide="2"]').removeClass('active');
}
});
//Create a function that will be passed a slide number and then will scroll to that slide using jquerys animate. The Jquery
//easing plugin is also used, so we passed in the easing method of 'easeInOutQuint' which is available throught the plugin.
function goToByScroll(dataslide) {
htmlbody.animate({
scrollTop: $('.slide[data-slide="' + dataslide + '"]').offset().top
}, 2000, 'easeInOutQuint');
}

//When the user clicks on the navigation links, get the data-slide attribute value of the link and pass that variable to the goToByScroll function
links.click(function (e) {
e.preventDefault();
dataslide = $(this).attr('data-slide');
goToByScroll(dataslide);
});

//When the user clicks on the button, get the get the data-slide attribute value of the button and pass that variable to the goToByScroll function
button.click(function (e) {
e.preventDefault();
dataslide = $(this).attr('data-slide');
goToByScroll(dataslide);
});
//Mouse-wheel scroll easing
if (window.addEventListener) window.addEventListener('DOMMouseScroll', wheel, false);
window.onmousewheel = document.onmousewheel = wheel;
var time = 350;
var distance = 100;
function wheel(event) {
if (event.wheelDelta) delta = event.wheelDelta / 50;
else if (event.detail) delta = -event.detail / 1;
handle();
if (event.preventDefault) event.preventDefault();
event.returnValue = false;
}
function handle() {

$('html, body').stop().animate({
scrollTop: $(window).scrollTop() - (distance * delta)
}, time);
}

//keyboard scroll easing
$(document).keydown(function (e) {
switch (e.which) {
//up
case 38:
$('html, body').stop().animate({
scrollTop: $(window).scrollTop() - distance
}, time);
break;
//down
case 40:
$('html, body').stop().animate({
scrollTop: $(window).scrollTop() + distance
}, time);
break;
}
});
});

---

Summary

Parrallax scrolling is a fantastic effect in web design and development and continues to evolve as people continually push the boundaries on what’s possible. Today I have shown you the basic setup for a parallax scrolling website, using some pretty simple markup and plugins.
I hope through reading and interacting with this tutorial, you have a better understanding of how to create a parallax scrolling website.

---

Download Source Files View Demo

Part 2 >>

Tweet

How To Create a Parallax Scrolling Website | Part 2

One of the biggest trends in web design is the famed parallax scroll effect. In this second installment of this tutorial, we’ll be finishing off our basic parallax website by adding background and foreground objects. 
If you missed Part 1 and want to quickly catch up, you can can read it all here.

Download Source Files View Demo

---

The Theory

As we discussed in Part 1, one of the most important parts of creating a parallax effect, is creating depth. A big part of this is done by creating background and foreground objects that scroll at different speeds, relative to the background. An object that’s closer, will appear larger, but should also move more quickly. Background objects are the opposite. This is the essence of what a parallax effect is, in both web and the real-world.
If you still find it difficult understanding the concept, here’s an example. Say you’re in a car on the highway, your travelling at 100 km/h. If you look out the window to the side, objects that are closer will appear to move faster than those at a distance. The further you look into the horizon, the slower the objects appear to move.

---

Adding Objects

Starting off, where we left-off in Part 1, Let’s add some objects to one of the slides. We’ll be adding some 3D letters, as well as some circles:

div class="slide" id="slide4" data-slide="4" data-stellar-background-ratio="0">
<div class="wrapper">
<div class="letter" id="letter-a" data-stellar-ratio="1.6" data-stellar-vertical-offset="-375"></div>
<div class="letter" id="letter-b" data-stellar-ratio="0.5" data-stellar-vertical-offset="-124"></div>
<div class="letter" id="letter-c" data-stellar-ratio="1.6" data-stellar-vertical-offset="-450"></div>
<div class="circle yellow small" id="circle1" data-stellar-ratio="0.5" data-stellar-vertical-offset="-150" style="left:-400px !important;"></div>
<div class="circle yellow small" data-stellar-ratio="0.5" data-stellar-vertical-offset="-170" style="left:645px !important;"></div>
<div class="circle yellow medium" data-stellar-ratio="1.6" data-stellar-vertical-offset="-250" style="left:-610px !important;"></div>
<div class="circle yellow large" data-stellar-ratio="1.6" data-stellar-vertical-offset="-950" style="left:600px !important;"></div>
<div class="circle yellow large" data-stellar-ratio="2" data-stellar-vertical-offset="-770" style="left:-1150px !important;"></div>
</div>

Styling The Objects

As you can see, we’ve added a wrapper inside the slide – this is just to keep the objects horizontally centred. Next I’ve added the letters, along with some circles of varying size. As you can see, the larger the circle or object, the higher “data-stellar-ratio” used, which controls the speed the object scrolls at. Finally, so all the objects aren’t on the same horizontal axis, we can offset them vertically using the “data-stellar-vertical-offset” attribute. This simply offsets the object vertically by a given amount.

---

Now let’s style our objects in CSS:

/******************************
PARALLAX OBJECTS
*******************************/
.wrapper {
width: 1300px;
height: 150%;
overflow: visible;
margin: 0 auto;
position: absolute;
left: 50%;
text-align: center;
margin-left: -650px;
}
.letter {
position: relative;
background-position: center !important;
display: inline-block !important;
}
#letter-a {
width: 120px;
height: 130px;
background: url(../images/letter_a.png) no-repeat;
left: 120px;
-webkit-background-size: 120px 130px;
-moz-background-size: 120px 130px;
background-size: 120px 130px;
right:425px;
left:0 !important;
}
#letter-b {
width: 58px;
height: 98px;
background: url(../images/letter_b.png) no-repeat;
-webkit-background-size: 58px 90px;
-moz-background-size: 58px 90px;
background-size: 58px 90px;
left: 100px;
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-o-transform: rotate(45deg);
-ms-transform: rotate(45deg);
transform: rotate(45deg);
right:335px;
left:0 !important;
}
#letter-c {
width: 130px;
height: 177px;
background: url(../images/letter_c.png) no-repeat;
-webkit-background-size: 130px 177px;
-moz-background-size: 130px 177px;
background-size: 130px 177px;
left: 305px;
}
.circle {
margin: 0 auto;
position: relative;
background-position: center !important;
display: inline-block !important;
}
.yellow {
background-color: #ffee00;
}
.black {
background-color: #1a1a1a;
}
.small {
width:60px;
height:60px;
border-radius:30px;
}
.medium {
width: 120px;
height: 120px;
border-radius: 60px;
}
.large {
width: 240px;
height: 240px;
border-radius: 120px;
}

As you can see, we basically just set a background image for the letters. The circles are created using pure CSS by setting a width and height, and setting the border-radius to half of those values. If you scroll through slide 4, the objects should create depth through size and scroll speed variances. Pretty cool right?

---

Conclusion

As you can see, we can create a simple parallax site quite quickly and easily. Using a plugin is one way to achieve this is just way of doing it. There are so many options, to create different effects. If you really want to tailor the parallax effect to specifics, I would advise creating the effect from scratch, which can be done quite easily using jQuery. The important thing here is understanding how it works and the core principles, once you’ve done that, you can create some awesome effects!

<< Part1

Tweet