9 Inspirational Website Effects Deconstructed

Posted in Tips, Tools, Web Design • Posted on 17 Comments

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!

1. Parallax Effect

nike-website-deconstructed

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.

How to recreate

Ian Lunn wrote an amazing tutorial on how to recreate the Nike’s Parallax Effect. Check it here Nikebetterworld Parallax Effect Demo.

2. Mouse Drag

yessbmx-website-deconstructed

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.

How to recreate

The solution is called Dragdealer. Check the link for more information.

3. Sliding Panel

Sponstour-website-deconstructed

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.

How to recreate

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.

4. Konami Code

philipandrews-website-deconstructed

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

How to recreate

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

5. Hover Effect

designflavr-website-deconstructed

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.

How to recreate

Noura Yehia wrote another great tutorial on how to achieve this so go over DevSnippets and take a look. Panel slides on hover effect

6. Loading Page

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.

How to recreate

Go over Gayadesign for more information, download and demo. Preload your website in style

7. Scrollbar

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.

How to recreate

On their site you can find more information including the download link and some demos. Check jScrollPane.

8. Mouse Wheel

cpeople-website-deconstructed

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.

How to recreate

Brandon Aaron has a great and simple to use jQuery mouse-wheel support plugin. Check his page for more information.

9. Slide Navigation

spoonjuice-website-deconstructed

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.

How to recreate

Visit Tympanus website and check their amazing tutorial.

18 Written ArticlesWebsite

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.

17 Comments Best Comments First
  • James

    Monday, September 5th, 2011 21:44

    7

    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!

    +1
    • James

      Monday, September 5th, 2011 21:46

      6

      Opps this was meant for @Ruben, but hey if you know too Dainis all the better ahha.

      0
      • Ruben D'Oliveira

        Tuesday, September 6th, 2011 18:18

        11

        Hey James,

        Didn’t test it on iPhone but I will take a look into that and get back to you.

        Cheers!

        0
        • James

          Wednesday, September 7th, 2011 15:45

          16

          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

          0
  • Michael Francis

    Monday, September 5th, 2011 22:42

    8

    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!

    0
  • Dainis Graveris

    Sunday, September 4th, 2011 13:48

    1

    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? :)

    0
  • Tanya

    Monday, September 5th, 2011 20:55

    5

    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!

    0
  • Ruben D'Oliveira

    Monday, September 5th, 2011 03:54

    2

    Seems a great idea.. Let’s see if they are interested ? ;)

    0
  • Jane

    Monday, September 5th, 2011 18:18

    3

    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 )))

    0
  • Theo

    Tuesday, September 6th, 2011 00:19

    9

    Very useful article, thanks!

    0
  • Matthew

    Monday, September 19th, 2011 11:11

    17

    I just loved the concept and implementation of Nike website…simply brilliant to say the least !

    0
  • Ruben D'Oliveira

    Tuesday, September 6th, 2011 18:21

    12

    Hi PeHaa. Nice tutorial you got there. I will keep the reference for a future article. Thank you!

    0
  • Allen

    Wednesday, September 7th, 2011 10:52

    15

    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.

    -1
  • Gautam Lakum

    Monday, September 5th, 2011 14:42

    4

    Seems really a good article. Sure others will enjoy this.

    -1
  • Matthew

    Monday, September 19th, 2011 11:11

    17

    I just loved the concept and implementation of Nike website…simply brilliant to say the least !

    0
  • Allen

    Wednesday, September 7th, 2011 10:52

    15

    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.

    -1
  • Ruben D'Oliveira

    Tuesday, September 6th, 2011 18:21

    12

    Hi PeHaa. Nice tutorial you got there. I will keep the reference for a future article. Thank you!

    0
  • Theo

    Tuesday, September 6th, 2011 00:19

    9

    Very useful article, thanks!

    0
  • Michael Francis

    Monday, September 5th, 2011 22:42

    8

    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!

    0
  • James

    Monday, September 5th, 2011 21:44

    7

    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!

    +1
    • James

      Monday, September 5th, 2011 21:46

      6

      Opps this was meant for @Ruben, but hey if you know too Dainis all the better ahha.

      0
      • Ruben D'Oliveira

        Tuesday, September 6th, 2011 18:18

        11

        Hey James,

        Didn’t test it on iPhone but I will take a look into that and get back to you.

        Cheers!

        0
        • James

          Wednesday, September 7th, 2011 15:45

          16

          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

          0
  • Tanya

    Monday, September 5th, 2011 20:55

    5

    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!

    0
  • Gautam Lakum

    Monday, September 5th, 2011 14:42

    4

    Seems really a good article. Sure others will enjoy this.

    -1
  • Jane

    Monday, September 5th, 2011 18:18

    3

    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 )))

    0
  • Ruben D'Oliveira

    Monday, September 5th, 2011 03:54

    2

    Seems a great idea.. Let’s see if they are interested ? ;)

    0
  • Dainis Graveris

    Sunday, September 4th, 2011 13:48

    1

    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? :)

    0

Comments are closed.

54.83.172.112 - unknown - unknown - US