Animated Scroll to Top 244

Animated Scroll to Top

Due to a number of requests, I'm writing a detail tutorial on how to create an animated scroll to top as seen on Web Designer Wall. It is very simple to do with jQuery (just a few lines of code). It checks if the scrollbar top position is greater than certain value, then fade in the scroll to top button. Upon the link is clicked, it scrolls the page to the top. View the demo to see it in action.

Demo Scroll to Top

Download Demo Zip

Cross-Browser HTML5 Placeholder Text 109

Cross-Browser HTML5 Placeholder Text

One of the nice enhancement in HTML5 web form is being able to add placeholder text to input fields. Placeholder attribute allows you to display text in a form input when it is empty and when it is not focused (it clears the field on focus). This is a nifty feature, but it is not supported by all browsers yet. This tutorial will show you how to use Modernizr to detect if placeholder is supported, or else use jQuery to display the fallback placeholder text dynamically.

Demo HTML5 Placeholder

Download Demo Zip

HTML5 Grayscale Image Hover 279

HTML5 Grayscale Image Hover

Once upon a time, grayscale image has to be manually converted in order to be displayed on the web. Now with HTML5 canvas, images can be manipulated into grayscale without having to use image editing software. I've put together a demo to show you how to use HTML5 & jQuery to dynamically clone color images into grayscale (see demo). Credits: thanks to Darcy Clarke (my Themify's partner) for the jQuery and Javascript code.

View Demo HTML5 Grayscale

ScrollTo Posts With jQuery 122

ScrollTo Posts With jQuery

Inspired by the CargoCollective and David DeSandro's site, I asked my Twitter followers (@nickla) on how to do the scrollto posts with jQuery. Within a day, Ben Bodien of Neutron Creations sent back a quick demo on how to replicate the similar result with the ScrollTo plugin. The script finds your current view position and scroll to the next or previous post accordingly. Check out the demo to see what I'm talking about.

View Demo Scrollto Posts

SWFaddress and Best Samples 83

SWFaddress and Best Samples

Don't you find it frustrating to browse Flash sites because you can't use the browser's back/forward button or send your friend to a certain section? The solution to this problem would be SWFaddress — a small Javascript library that lets you create virtual URLs for Flash and Ajax. SWFaddress has been around since 2006, and surprisingly not all Flash sites are utilizing this tool. In this post, I've collected 20 sites (Flash and Ajax) that are using SWFaddress.

Maximize the Use of Hover 136

Maximize the Use of Hover

Usually, we create hover effects by changing: font color, font styles, border styles, background, and etc. But there are a lot more that we can do with hover. We can use hover to beautify design, minimize clutter, and display additional information. In this article, I'm going to provide various examples of websites that maximize the use of hover. Also, I will provide several quick tutorials on how to create different mouse hover effects. So, read on.