A fixed header that will animate its size on scroll. The inner elements will also adjust their size with a transition.Once a certain amount of the page gets scrolled, the header will decrease its size and the inner elements will adjust their font-size/line height. There are example media queries for dealing with different screen sizes.
Archive for 2013
Tweet to Unlock with jQuery & PHP
In this tutorial article, let’s create simple “Tweet to Unlock” feature for your web page using jQuery Ajax and PHP.
Events are triggered when user successfully tweets the page, to capture some information from Twitter, we can add a “listeners” to the actions users perform in Web Intents. Once we know the user has Twitted the page, we can make an Ajax request to a PHP file, which will respond to this request by sending the unlocked data to user browser. Here’s complete code example of a page which has some content to be unlocked by Twitting.
How to Integrate Simple Parallax with Twitter Bootstrap
Thanks to the flexibility of Twitter Bootstrap, you’re not in any way limited only to the framework’s default container and grid styles. It can actually be quite easy to introduce new layout options to your site without needing to worry about disrupting Bootstrap’s functionality. With this tutorial, we’ll learn how to do that by integrating a simple scrolling parallax effect to the page.
SpriteClip.js : jQuery Frame-by-frame Animations
SpriteClip.js is a jQuery plugin that makes it easy to make snazzy frame-by-frame animations like this by emulating the functionality of the MovieClip class in ActionScript 3.0.
It works by animating the background-image property of a dom node where the “frames” are spaced out equally. Eg. if the sprite is laid out horizontally and each frame is 20px wide, frame 1 will be at background-position: 0 0 and frame 2 will be at background-position: -20px 0
