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.
0 comentarios:
Publicar un comentario