Total Followers 132,503
As you may know, there are lots of great tutorials out there which can definitely help you practice, learn and achieve amazing results. The good thing about having so many tutorials to learn from is precisely that – you have a large variety of sources to choose from. Sometimes though, the tutorials aren’t clear, or difficult to understand or you just can’t apply it in the real world.
Have you ever come across a website with such a great design or effects that your inner voice screams wow, making you wonder how it would be possible for you to recreate the effect? The purpose of this article is to provide you with resources and insights about how you can learn from your favourite websites, learning and taking advantage from real implemented effects and functionalities.
So let’s get started!
Click the image above to visit the Nike website and scroll-down the page. Cool isn’t it? The illusion is called a Parallax Effect. This effect is relatively recent in web design but you can see dozens and dozens of websites using it already. This is not the only illusion you can get with a Parallax effect, actually the most common illusion is the one used on the Silverback website (resize the browser window to see the effect in action). Basically you are seeing several elements (in this case backgrounds) moving at different speeds with the posterior element going over the previous one.
Ian Lunn wrote an amazing tutorial on how to recreate the Nike’s Parallax Effect. Check it here Nikebetterworld Parallax Effect Demo.
Yess BMX uses one of my favourite functionalities on a website which is mouse drag. These days it is still relatively rare to find a website where you can drag elements with your mouse. Nevertheless, that doesn’t mean you can’t easily have it on your page.
Dragdealer is a drag-based JavaScript component that embraces endless front-end solutions. Elegantly crafted for JavaScript-aware coders.
The solution is called Dragdealer. Check the link for more information.
I’ve decided to include this jQuery sliding effect since it’s widely used these days and it looks great almost everywhere. Building a sliding panel it’s relatively simple and you have tons of ways to do it. Check one way to do it below.
Connor Zwick from Nettuts wrote a fantastic tutorial on how to build a login form using a sliding panel. Check it here Build An Incredible Login Form With jQuery.
To be honest I haven’t heard about this one until very recently and I was amazed and spent a good time having fun with every page I have found using the Konami Code. The author was inspired by the cheat code that appeared in many of Konami’s video games going all the way back to 1986. Now imagine using a similar concept on a website and… magic happens! Visit the website above and use the combination provided in the end of this paragraph. You can also visit konamicodesites.com and prepare yourself for some fun. Unfortunately Facebook is not using Konami Code anymore but many others are.
To enter use the following combination with your arrow keys: up up down down left right left right B A
Matt Kirman has an old but still efficient short script on how to recreate the Konami code on his webpage. Check it here How to recreate the Konami code in Javascript
You probably have seen this effect a million times but since you’ve been a bit lazy and still aren’t using it, I decided to include it so you can stop making excuses. Now seriously, this sliding effect is losing its status as trendy since it is so massively used, but the point is that you can change the hover effect at will. Apply for instance a fade effect with a border color change – It will look good and modern.
Noura Yehia wrote another great tutorial on how to achieve this so go over DevSnippets and take a look. Panel slides on hover effect
Vivascom website has a simple but nice jQuery loading script working. The script can load a part or an entire page, it includes a nice looking animation and works in all browsers except IE6 (but you don’t need that one do you?).
This preloader has it all. Loading bar, custom animations and getting all images included in the web page.
Go over Gayadesign for more information, download and demo. Preload your website in style
At Sapphire Sound’s What We Do section you can see they have a good looking scrollbar to scroll the content inside the div on the right side. In order to do that, they make use of a great jQuery plugin called jScrollPane.
jScrollPane is a cross-browser jQuery plugin by Kelvin Luck which converts a browser’s default scrollbars (on elements with a relevant overflow property) into an HTML structure which can be easily skinned with CSS.
On their site you can find more information including the download link and some demos. Check jScrollPane.
One thing I love when I visit a website is to check that someone cared about usability and user experience. That’s the case of the agency Creative People. Their website is awesome and I loved the fact that they’ve implemented mouse wheel support on some of their sub-pages. Click the Web, Brand or Social buttons and use your mouse wheel. These days there is absolutely no reason to limit the user to a left and right arrow in order to navigate through a list of elements. Small details like these increase the overall quality of a page.
Brandon Aaron has a great and simple to use jQuery mouse-wheel support plugin. Check his page for more information.
Spoon Juice website design is incredible and the same applies to its navigation. Again one of my favourite aspects in this kind of navigation is the usability and efficiency it offers. Spoon Juice built its own script but you can easily build an equally awesome navigation of your own following the tutorial below.
Visit Tympanus website and check their amazing tutorial.
Get The Only Freelancer crash course you will ever need to read!
I am a Portuguese UI/UX designer, visual designer and writer. I have a Bachelor's Degree in Information Technology and Multimedia and I'm addicted to web technologies and design. Feel free to check my work on Behance or Dribbble. You can also follow me on Twitter.
Monday, September 19th, 2011 11:11
I just loved the concept and implementation of Nike website…simply brilliant to say the least !
Wednesday, September 7th, 2011 10:52
Thanks for the article Ruben.
FYI konami code doesn’t always work depending on your OS and browser. It won’t work on FF (MacOSX) for instance.
Tuesday, September 6th, 2011 18:21
Hi PeHaa. Nice tutorial you got there. I will keep the reference for a future article. Thank you!
Tuesday, September 6th, 2011 00:19
Very useful article, thanks!
Monday, September 5th, 2011 22:42
Great examples. One of them did not work for me (sapphire sound- the scroll bar effect). Is this because I am using Google Chrome???
Still, I would love to use many of these ideas for my clients’ projects!
Tuesday, September 6th, 2011 18:15
Hi Michael,
jScrollPane works on Chrome. Without more info I can’t help you but take a look at the support link http://jscrollpane.kelvinluck.com/#support
Thanks for reading!
Monday, September 5th, 2011 21:44
Hey Dainis, amazing collection here, really inspirational!
I was wanting to create the effect on yessbmx.com but make it so that it also translates well to iphone with a tough-slide action, any ideas on how to achieve this?
Big fan of your tweets too, keep it up!
Monday, September 5th, 2011 21:46
Opps this was meant for @Ruben, but hey if you know too Dainis all the better ahha.
Tuesday, September 6th, 2011 18:18
Hey James,
Didn’t test it on iPhone but I will take a look into that and get back to you.
Cheers!
Wednesday, September 7th, 2011 15:45
Nice one Rube – I tested and although it does work, it’s only the arrows that allow for the slides to navigate – I am putting some research into trying to get this to work on iphone this week with a touch-slide action, let me know if you discover anything.
Cheers
James
Monday, September 5th, 2011 20:55
More than brilliant idea, thank you so much for this remarkable post! If there will be more such type deconstructions it will be fantastic source for all those people who want to expand their knowledge and practice new skills. Thank you, Ruben!
Monday, September 5th, 2011 14:42
Seems really a good article. Sure others will enjoy this.
Monday, September 5th, 2011 18:18
Hi, tnx for the great article, i loved it
It would be pretty nice to know how the navigation at Vivascom was created, those sliding backgrounds. They’re something great )))
Tuesday, September 6th, 2011 18:26
Hello Jane,
Those sliding backgrounds are the same as the Nike website.. parallax!
Check the link and the demo – http://www.ianlunn.co.uk/blog/code-tutorials/recreate-nikebetterworld-parallax/
Thank you.
Tuesday, September 6th, 2011 18:27
Oh I forgot to tell you about the sliding effect. They make use of the ScrollTo and localscroll plugins. Check them here: http://flesler.blogspot.com/
Monday, September 5th, 2011 03:54
Seems a great idea.. Let’s see if they are interested ? ;)
Sunday, September 4th, 2011 13:48
Oh Ruben, I must say I really love this article idea, maybe a quiz could be useful, where we could ask readers of website effects they wanted to recreate the most but had no idea how to do it? :)
Get The Only Freelancer crash course you will ever need!
If not, then it's time to learn how to:
You can trust 1stWebDesigner to help you become a better web designer!
- Jacob Cass | Just Creative
Just enter your name and email below and click Get Updates!
Dainis Graveris
Sunday, September 4th, 2011 13:48
Oh Ruben, I must say I really love this article idea, maybe a quiz could be useful, where we could ask readers of website effects they wanted to recreate the most but had no idea how to do it? :)
Michael Francis
Monday, September 5th, 2011 22:42
Great examples. One of them did not work for me (sapphire sound- the scroll bar effect). Is this because I am using Google Chrome???
Still, I would love to use many of these ideas for my clients’ projects!
Ruben D'Oliveira
Tuesday, September 6th, 2011 18:15
Hi Michael,
jScrollPane works on Chrome. Without more info I can’t help you but take a look at the support link http://jscrollpane.kelvinluck.com/#support
Thanks for reading!
James
Monday, September 5th, 2011 21:44
Hey Dainis, amazing collection here, really inspirational!
I was wanting to create the effect on yessbmx.com but make it so that it also translates well to iphone with a tough-slide action, any ideas on how to achieve this?
Big fan of your tweets too, keep it up!
James
Monday, September 5th, 2011 21:46
Opps this was meant for @Ruben, but hey if you know too Dainis all the better ahha.
Ruben D'Oliveira
Tuesday, September 6th, 2011 18:18
Hey James,
Didn’t test it on iPhone but I will take a look into that and get back to you.
Cheers!
James
Wednesday, September 7th, 2011 15:45
Nice one Rube – I tested and although it does work, it’s only the arrows that allow for the slides to navigate – I am putting some research into trying to get this to work on iphone this week with a touch-slide action, let me know if you discover anything.
Cheers
James
Tanya
Monday, September 5th, 2011 20:55
More than brilliant idea, thank you so much for this remarkable post! If there will be more such type deconstructions it will be fantastic source for all those people who want to expand their knowledge and practice new skills. Thank you, Ruben!
Ruben D'Oliveira
Monday, September 5th, 2011 03:54
Seems a great idea.. Let’s see if they are interested ? ;)
Jane
Monday, September 5th, 2011 18:18
Hi, tnx for the great article, i loved it
It would be pretty nice to know how the navigation at Vivascom was created, those sliding backgrounds. They’re something great )))
Ruben D'Oliveira
Tuesday, September 6th, 2011 18:26
Hello Jane,
Those sliding backgrounds are the same as the Nike website.. parallax!
Check the link and the demo – http://www.ianlunn.co.uk/blog/code-tutorials/recreate-nikebetterworld-parallax/
Thank you.
Ruben D'Oliveira
Tuesday, September 6th, 2011 18:27
Oh I forgot to tell you about the sliding effect. They make use of the ScrollTo and localscroll plugins. Check them here: http://flesler.blogspot.com/
Gautam Lakum
Monday, September 5th, 2011 14:42
Seems really a good article. Sure others will enjoy this.
Theo
Tuesday, September 6th, 2011 00:19
Very useful article, thanks!
Matthew
Monday, September 19th, 2011 11:11
I just loved the concept and implementation of Nike website…simply brilliant to say the least !
Allen
Wednesday, September 7th, 2011 10:52
Thanks for the article Ruben.
FYI konami code doesn’t always work depending on your OS and browser. It won’t work on FF (MacOSX) for instance.
Ruben D'Oliveira
Tuesday, September 6th, 2011 18:21
Hi PeHaa. Nice tutorial you got there. I will keep the reference for a future article. Thank you!