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"

Elastislide - A Responsive jQuery Carousel Plugin Elastislide is a responsive image carousel that will adapt fluidly in a layout. It is a jQuery plugin that can be laid out horizontally or vertically with a pre-defined minimum number of shown images. View demo Download source With the responsive awakening in web design it becomes important to not only take care of the visual part of a website but also of the functionality. In a carousel, one could think that simply making its container “shorter” will solve the problem on smaller screens, but in some cases (e.g. when we have bigger images) it might be reasonable to resize the items as well. Elastislide uses the jQuery++ for the swipe events on touch devices. The beautiful images are by talented Sherman Geronimo-Tan and they are licensed under Creative Commons Attribution 2.0 Generic (CC BY 2.0). The HTML Structure When using the plugin, you’ll simply have to apply it to an unordered list with images (optionally with anchors). Use your preferred ID and call the plugin like this: Options Demos

Five Responsive Web Design Pitfalls To Avoid Note: this piece was originally published on Net Magazine, who recently nuked about 10,000 articles when they moved over to Creative Bloq. In an effort to preserve the writing I did for them, I’m republishing those articles here on my blog. This article is still alive over at Creative Bloq, so you can also read it there. There are number of nasty traps to avoid when making your site responsive. Brad Frost of R/GA reveals five of the biggest ones and how to sidestep them Creating great responsive experiences requires a hell of a lot more than media queries. Here are some of the pitfalls you want to avoid as you travel down the responsive road: 1. Because responsive sites share a single code base, they have a better chance of achieving content parity, which is great. Follow this simple guide: don’t penalise users for the device they happen to be browsing with. 2. A normal page on Barack Obama’s responsive site weighs over 4MB. 3. 4. 5. 320px. 480px. 768px. 1024px. Do the evolution

scrollorama Disclaimer: This is an experimental, just-for-fun sort of project and hasn’t been thoroughly tested. Design and build your site, dividing your content into blocks. Embed scrollorama.js after jQuery and initialize the plugin, passing the blocks class selector as a parameter. Target an element and animate its properties. The animation parameters you can use are: Hook into the onBlockChange event. scrollorama.onBlockChange(function() { alert('You just scrolled to block#'+scrollorama.blockIndex); }); Note: If you are not using the pinning feature, it is recommended you disable it.

Responsive Image Gallery with Thumbnail Carousel A tutorial on how to create a responsive image gallery with a thumbnail carousel using Elastislide. Inspired by Twitter's "user gallery" and upon a request to show an integration of Elastislide, we want to implement a responsive gallery that adapts to the view-port width. The gallery will have a view switch that allows to view it with the thumbnail carousel or without. View demo Download source Today we want to show you how to create a responsive image gallery with a thumbnail carousel using Elastislide. We’ll use the jQuery Touchwipe Plugin that will make it possible to navigate the images by “wiping” on the iPhone and iPad. The images in the demo are by über-talented Sherman Geronimo-Tan and you can find his Flickr photostream here: Sherman Geronimo-Tan’s Flickr Photostream The photos are licensed under the Creative Commons Attribution 2.0 Generic (CC BY 2.0) License. So, let’s do it! The Markup For the HTML structure we’ll have a main wrapper with the class “rg-gallery”. The CSS

Long Shadow Generator jQuery Mobile | jQuery Mobile Isotope 960 Grid System jQuery UI jQuery Masonry Support & FAQs | Marvel Why do you need to access my Dropbox? Marvel runs completely off Dropbox meaning that we need you to give our app permission to use your PSDs and images so you can add them to your prototypes. The beauty of using Dropbox is that all your prototypes are updated automatically whenever you update the design file. We only use the images you select and never access any other files. What browsers do you support? We are fully compatible with Safari and Chrome. Do you support Google Drive and Box? We don’t right now but this might be something we might add in the future depending on demand. My company blocks Dropbox, how can I use Marvel? You don’t need Dropbox installed to use Marvel but you do need to be able to authenticate on Dropbox.com. If you can’t access the site then sadly you cannot use the service. However you can still use our iPhone app to create prototypes :) What kind of security do you have? Marvel takes data security and the privacy of your personal information very seriously. No!

jQuery