articles on

Web Design: Sites Using Parallax

Web Design: Sites Using Parallax

It's been a really long time since the last time I published a web design post, but recently I've been crazy about sites using parallax. It's elegant and super dynamic, giving users a new kind of experience, different of that same old, same old way of viewing websites. So I've listed some notable usage of parallax. Of course that these are only a tiny selection and there's plenty more out there in the wild. I'd love to get to know more like theses, so if you know any more examples, don't forget to share it with us in the comments section below. I hope you enjoy my selection. Cheers! ;) Make your money matter Careers at Grooveshark Numero10 Lix Pen Aquatilis Joy Interactive iStrategyLabs 150 Pixels Fixed Jan Ploch Made in days Annexcore Shadow theme Nodo Albino Tonnina

Super Easy Parallax Effect with jQuery

Super Easy Parallax Effect with jQuery

We have gotten quite a few emails from people asking how we did the parallax effect on the new design. We are not master of Javascript but we always like to learn and explore new things. That was the case of the parallax effect. This kind of effect brings us back memories from the 8 and 16 bit video-game eras and it was a really good exercise to improve our web design skills. So for this tutorial we will show you how we did the parallax effect you see in the blog. The first thing to do is try to get familiarize with HTML/CSS and Javascript. It's also important to understand the behavior of the objects you will try to animate. For the parallax the logic is that two or more elements move in a different speed to give a sense of depth. Step 1 Open your HTML editor or text editor. I am using Espresso for this tutorial, but that is not really important. After that create a new document and make sure you save it as .html. Let's write a basic HTML 5 file. Use the image below for reference. Step 2 Let's now make sure we add our jQuery library link within the <head> tag. You can simply link straight to the jQuery website or Google code. Step 3 Another nice thing to do is to use custom fonts that are not the limited websafe ones. I am using Google Web Fonts for that. The font I will use for this tutorial is Oxygen. Step 4 For this tutorial we will create a basic card with an image and some information. The idea is that the image will scroll slower than the content that will scroll on top of the image. Basically we will have: Create a <section> tag for the card; Add a <img> tag with the link to the image you want to use. Add a <div> after the <img>. This <div> will be the info about the image, in our case the movie Hobbit. Add some info about the video. We use IMDB to get that http://www.imdb.com/title/tt0903624/ Your HTML will look like the image below. Step 5 Save and preview it in the browser. As you can see, it's a raw html page. Step 6 Time to add some style. Starting with the "body" tag. Lets remove the padding and margin, let's also use the custon font and a background from Subtlepatterns. Step 7 Now let's work on the card. For the #box (the ID added to the <section>) add the width, height, margin, background and use relative for the position. To make the card scrollable use "overflow:scroll". For the image, use position:absolute. Another important thing to do is to set the background color for the <div> with the info. This <div> will scroll on top of the image. Step 8 Here is a preview of the HTML with styles. Step 9 Time to make the Parallax work. Let's use jQuery to get the scrolling event. To do that we just need to use $("element").scroll(callback), in our case $("#box").scroll(function(){}); Step 10 Now let's get the value of the scroll, use .scrollTop(). For more information about jQuery you can use http://visualjquery.com/ - so here will will get the value of the scroll of the card and assign it to a variable call "s" Step 11 To make the parallax work is pretty simple, we will divide the value of the scroll by 3 and use CSS to move the image. For this tutorial I used -webkit-transform: translateY. It only works on Webkit browsers. For full production you will have to create a version for each browser if you decide to use the transform. You could also use "top", but it wouldn't work really well on mobile. Conclusion & Demo Everytime you scroll the image will move a third of the distance of the rest of the content. That is what we used for the blog, however for mobile you will have to use other event handlers, especially for iOS that doesnt have the "scroll" event. You can see the demo below or clicking here.

Stereoscopic Images Inspiration

Stereoscopy (also called stereoscopic or 3-D imaging) is any technique capable of recording three-dimensional visual information or creating the illusion of depth in an image, that's the Wikipedia definition. This type of image is getting quite popular, so I decided to create a collection of stereoscopic samples, which the technique that can be explained by overlapping our left and right eyes usually do about an image. The parallax is the horizontal distance between the left and right image that appears in the objects relative to the observer, is responsible to make these images look 3d, That is why the stereoscopic cameras takes the snapshots using two lenses. via DPUF. About the Author Hey buddies! I'm Marcos Torres, a 19 years old art director/freelancer from Brazil, I'm here to bring some new interessant stuff to you. You can see my portfolio at http://flickr.com/marcostorres. Any request or jobs oportunities send to marcostorres90@gmail.com, also follow me on twitter