Skrollr – CSS animations linked to scroll position
Having seen a few single-page year in review minisites the past few weeks, it’s clear that Skrollr has become the de facto standard to implement parallax scrolling effects into your websites. The idea behind Skrollr is straightforward: link a target CSS property+value to a given scroll position, via data-* attributes: Skrollr will interpolate between the start and end value whilst you scroll. Note that the resulting effect is different from the previously mentioned Scroll Animations. Whereas Scroll Animations triggers an effect when an elements scroll into view (and it cannot be undone once it was started), Skrollr is tightly linked to the actual scroll position/offset: scrolling up will revert the animation.
24 JavaScript Best Practices for Beginners
As a follow-up to "30 HTML and CSS Best Practices", this week, we'll review JavaScript! Once you've reviewed the list, be sure to let us know what little tips you've come across! JavaScript utilizes two different kinds of equality operators: === | !== and == | != It is considered best practice to always use the former set when comparing. "If two operands are of the same type and value, then === produces true and !
How to Use jQuery to Make Slick Page Transitions
Adding the final touches to a site can be the difference between a polished and beautiful site that looks “refined,” and a mediocre site that leaves no impression on visitors. jQuery, the versatile JavaScript library, can be leveraged to create all these fine tuned elements. Today we’re going to look at how to use it to create elegant page transitions. Let’s get to it! If you would like to quickly take a peek at a very simple implementation of this technique, below is the demo for viewing and download. Getting Started With HTML/CSS
Preload Images Sequentially With jQuery
HEADS UP! This article was written in 2007. Information provided might not be valid anymore and should be taken with a grain of salt. Here is a small code snippet I use for preloading images for mouseovers. It uses $(window).bind("load", function() { xxx }) to wait until all page elements have finished loading.
nanoGALLERY - image gallery simplified
The language defined in the browser is used. If no corresponding definition is found, then the default language is used. - Internationalization of UI elements:
Comparison of scrolling animation plugins
Skrollr or ScrollMagic? Which one should you choose and why? This might be the question you ask yourself when you start a scrolling animation project. Here is my opinion on when you should use it and when you should stay away from it. Keep scrolling…
Light Table - a new IDE concept
You can now try Light Table out via the Light Table Playground! Light Table's kickstarter has wrapped up! Despite the dramatic shift toward simplification in software interfaces, the world of development tools continues to shrink our workspace with feature after feature in every release. Even with all of these things at our disposal, we're stuck in a world of files and forced organization - why are we still looking all over the place for the things we need when we're coding? Why is everything just static text? Bret Victor hinted at the idea that we can do much better than we are now - we can provide instant feedback, we can show you how your changes affect a system.
20+ Demos Showing Advanced jQuery Effects
Just a short while ago, Flash was one of the primary technologies used by web designers to add interactivity to a website. Since the introduction of the iPad, with its lack of the Flash Player, there’s an acceleration in the web development world to use alternative technologies to Flash, such as jQuery, Ajax and others. Although Flash is still a very powerful and useful tool, which works great on many cases, several of the effects that web designers are accustomed to creating in Flash, can be just as easily implemented using jQuery. Here are 21 online demos that show the power of jQuery for creating advanced effects and interactivity that can rival Flash. 1. Flip!
How to: Customizing and Theming jQuery UI Datepicker
jQuery UI is simply awesome and due to the ease of use, it is popular and widely used in almost any website that need interactive features. And, in this post, we’ll look at one of the features provided, the Datepicker widget. We will try to learn how to customize the calendar theme, so that you will be able to create your own theme that will correspond to your overall design. However, you need a bit of understanding in JavaScript and familiarity with CSS before following this tutorial. If you’re ready, let’s get started.
Powerange - iOS 7 style range slider
About Powerange Powerange is a range slider control, inspired heavily by iOS 7 and the "Power Rangers" TV series. It is easily customizable, both by CSS and JavaScript.
