Adaptor, an extensible jQuery content slider | Phil Parsons
This jQuery plugin is a free and lightweight content slider for creating cool 3D (and 2D) slideshows for featured content on your website. In older browsers that do not support CSS3 with 3D transitions the plugin detects them and degrades gracefully to a simple transition maintaining the rich user experience for everyone. The plugin is powered by jQuery and CSS and is designed to be easy to add to an existing web page with the minimal effort on the designer or developer’s part. If you are a developer and want to spice things up a bit the plugin exposes a simple API for adding animation effects and extending it’s core functionality with paging controls and feedback indicators. The full developer documentation for the plugin can be found on the Github project pages —the same place you can download the latest version of the code. Setting up the HTML For 3D effects the HTML will need an outer box within which the animated box will rotate—I call this the view port. Including the jQuery
Implementing Off-Canvas Navigation For A Responsive Website
jQuery.ScrollTo
Notice I've pretty much stopped updating this blog, but the plugin development is still on-going. You can find the link to the Github project page at the bottom of the article. Introduction An article about animated scrolling with jQuery inspired me to make a small, customizable plugin for scrolling elements, or the window itself. How to specify what to scroll ? Simple, all the matched elements will be scrolled, for example: $('div.pane').scrollTo(); If you need to scroll the window (screen), then use: $.scrollTo(); How to specify where ? Settings Getting the real scrollable element out of a node In order to find the real element whose attributes will be animated, you need to call $.fn. $(window). Manually finding the scrolling limit ScrollTo always had an internal function that calculates the scrolling limit for both axes. Overloading This plugin accepts the arguments in two ways, like $.animate(). $().scrollTo( , , ); $().scrollTo( , ); In this second case, you can specify the duration in the hash.
Site of the Month | Showcase
Site of the Month proposes you to find the best creative work of the month in order to discover new ideas for your inspiration and in order to realize all the possible artistic achievements you can reach using modern techniques and tendencies. Site of the Month -it is a productive result of long-lasting searching and finally found creative godsends and solutions based on the laborious work and reliable experience of previous tasks and ideas. Memorable and outstanding works that open new horizons of creativity are proposed for your kind consideration as a Site of the Month, involving you to another world of materialised dreams that are waiting for your active participation. Site of the Month April 2014 Usability of the Month January 2012 HatBox HatBox is another excellent webpage and I especially like that it\'s responsive without any loss of content. Report Dead Link Animation of the Month
scrolldeck.js
Build a web page with each slide as a div. Pro-Tip: Use rem’s to make content scale (resize this window to see) Create section navigation by linking to slide id’s (optional) After linking all the required scripts (jQuery, Scrollorama, scrollTo, easing & scrolldeck), create the slide deck on document ready event. $(document).ready(function() { var deck = new $.scrolldeck(); }); You can configure the settings as follows(example has the default config values assigned) Add animations to slides by adding the "animate-in" or "animate-build" classes to elements in your slides. <div class="slide"><p class="animate-in" data-animation="fly-in-left">This paragraph will fly in from the left. Available animations are "fly-in-left", "fly-in-right", "space-in" and the default which is "fade-in"
How To Create a Horizontally Scrolling Site
If web pages were made out of wood, the grain would be running up and down. Vertical is the natural flow of web layout. When page elements reach the right edge of the browser window and go over, the flow defaults to "wrapping" that element down onto the next line. This natural flow has lead to conventions in web page layout and even into hardware itself. View Demo Download Files The best way to do it I'm going to go out on a limb here and say that I think a table is the best layout technique for a horizontally scrolling site. Set a really wide static width. The <table> method What we need is a page element which can expand horizontally as needed and never "wrap". Let's assume we are trying to lay out a series of blog posts one after another horizontally. <table><tr><td> .. blog post #1 </td><td> .. blog post #2 </td><td> .. blog post #3 </td></tr></table> Yuck, right? Ideally, our page structure would be like this: <article class="post"> .. blog post #1 .. That should do it! The Results
Intriguing animate-on-scroll effect – jQuery tutorial | PeHaa Blog
I suppose that I was not the only one to become speechless in front of the Nizo for iPhone website. In this tutorial we try to recreate the intriguing scrolling effect. We’ll go for simplicity : 5 objects to animate and linear movement, no easing. The basis that opens the door for further elaboration. Click here to see the demo. We’ll start with the html structure : The document is composed of 4 elements header, #separation, section and footer, contained within two divs : #wrap_out and #wrap. Right now, the important point is to set width : 100% and overflow-x: hidden for the #wrap_out. The idea is to encourage the visitor to scroll down by positioning the #separation element at the bottom of the page. To animate the .element we’ll go simple and use a linear function to move it from its initial position to its target position. What happens when we scroll ? move is a function of the scroll value and has two parameters : initial (p0) and final (p1) position of an element.
Fancy Scrolling Sites
In the last year or so, there's been enough sites that do fancy things when you scroll down that it's kind of a trend. I thought I'd blog it, you know, for the sake of history. By "fancy things" I mean something happens when scrolling down besides the site scrolling down. Elements might move around in unexpected ways or change their size/shape/color/content in some way. It's easier to just experience some of these yourself than listen to me try to fumble through explaining it. These screenshots also don't do much justice. So how do they do that? JavaScript. Know any others? Add them in the comments. Share On
parallax
Parallax Scrolling Scripts and Plugins Parallax scrolling sites have been a pretty hot UX thing of late, being showcased on various blogs. Although the “ooooh! aahhh!”-ness of it all has subsided, I think this type of site is certainly a legitimate design and development option for many brands. To help you choose a JavaScript or jQuery library or plugin for doing this sort of thing (unless you’re a masochist and want to write one from scratch!) New Book: Learning CSS3 Animations Earlier this year, I had the privilege of assisting as a technical reviewer for a book by Pearson Education called Learning CSS3 Animations and Transitions. The book is authored by Alexis Goldstein who also co-authored HTML5 and CSS3 for the Real World with Estelle Weyl and me. Roundup of HTML-Based Slide Deck Toolkits I recently looked into some options for building a slideshow presentation for display in the browser.
