background preloader

Adaptive Thumbnail Pile Effect with Automatic Grouping

Adaptive Thumbnail Pile Effect with Automatic Grouping

jQuery Burn jQuery Burn is a plugin which adds a flame-like effect to text using multiple text-shadows, animated by repeatedly changing their horizontal offsets. The effect can be somewhat CPU intensive (especially for older computers), so use it sparingly. It can be stopped and restarted dynamically, colored, stretched, offset, sped up and slowed down. Download Fastest way to get started: get the minified versions of the JS. Download Plugin Visit GitHub See the unminified source and the project history. Project GitHub Include jQuery and jRumble Include jQuery and jQuery Burn just before your closing body tag. Initialize jQuery Burn on a Selector You can do this in a script tag within your HTML or in an external JavaScript file. <h1 class="burning">I'm on fire! $(document).ready(function() { $('.burning').burn();}); I'm on space-fire! I am le tired! Creating jQuery Burn lead to a lot of firsts for me, so I'd love for it to be learning tool for others. Smooth animation Automatic scaling Target text Target container

L’accessibilité et le responsive : un certain conflit d’intérêt ? | Édition Nº7 Si vous vous considérez webdesigner/intégrateur au top de votre art, vous êtes sans doute habitué à contempler les constantes nouvelles tendances que l’on voit défiler dans nos métiers. Évidemment, j’imagine que vous ne vous autorisez pas à embrasser ces nouvelles tendances sans en remettre en cause les impacts sur les axes habituels de la qualité web (que ce soit par les dégradations apportées par la technologie en elle-même, ou parce que nous en sommes encore au stade de peaufinage des bonnes pratiques). Dans tous les cas, la “mode” du Responsive Web Design ne peut pas avoir échappé à votre radar, et vous vous êtes peut-être même trouvés en situation de tenter d’en décortiquer les usages pour vous faire un avis critique. Vous avez entendu à droite et à gauche “Le responsive, ça fait mal aux performances !”, alors vous avez peut-être décidé que le responsive, c’est bien, mais c’est sans doute mal aussi un peu parfois ! L’accessibilité : restons pragmatiques ! La fureur du “Responsive”

Mosaic - Sliding Boxes and Captions jQuery Plugin Features So, what exactly does Mosaic do? Automatically generates sliding boxes & captions Allows slide & fade animations with custom directions Preloads images within boxes Options There are a number of available options, shown below with their default values. For options able to be turned on/off - 1 is on, 0 is off. animation : 'fade', speed : 150, opacity : 1, preload : 1, anchor_x : 'bottom', anchor_y : 'left', hover_x : '0px', hover_y : '0px' animation Controls which effect the sliding box uses. speed Defines speed of the animation. opacity Accepts any value 0-1 (decimals included). preload Overlays and backdrops are faded in after the page has loaded. anchor_x, anchor_y Horizontal and vertical anchor points for the overlay (eg. left, right, top, bottom). hover_x, hover_y Horizontal and vertical overlay hover positions. Legacy Versions Sliding Boxes and Captions with jQuery (3/31/09) - (Original Post) Available for Hire Email the details of your project to

SocialCount, a jQuery Plugin for Lighter & Faster Social Networking Widgets Posted by Zach on 11/26/2012 You’re minding your own business, casually browsing around on the World Wide Web. You navigate to a page that begins to load and render, but suddenly it stalls. Social Networking widgets are a digital blot on the beautiful canvas we call the web. Design considerations aside, the widgets’ biggest affliction is their file size. A discerning developer might begin to wonder if it is possible to use these sharing tools without adversely affecting page performance and accessibility. To solve these problems, we built SocialCount. See it in action SocialCount’s live demo will show you a variety of sizes and orientations. How to use it Add socialcount.js and socialcount.css to your page, ideally the CSS in the \<head> and JS at the end of the \<body>. Use the included Markup Generator to create your baseline HTML. <ul class="socialcount" data-url=" data-counts="true"><li class="facebook"><a href="

960 Grid System SweetAlert So... What does it do? Here’s a comparison of a standard error message. The first one uses the built-in alert-function, while the second is using sweetAlert. Normal alert Code: alert("Oops... Sweet Alert sweetAlert("Oops Pretty cool huh? More examples In these examples, we're using the shorthand function swal to call sweetAlert. Download & install Method 1: Install through bower: $ bower install sweetalert Method 2: Install through NPM: $ npm install sweetalert Method 3: Download the sweetAlert CSS and JavaScript files. Configuration Here are the keys that you can use if you pass an object into sweetAlert: Methods SweetAlert also comes with some simple methods that you can call: Contribute

Calendario: A Flexible Calendar Plugin A jQuery calendar plugin for creating flexible calendars. View demo Download source Today we want to share a flexible calendar concept with you. Calendars can be a very tricky thing when it comes to their layout and responsiveness. This is an experiment for trying out some grid layouts that can be applied to calendars. Please note that the demos will only work as intended in browsers that support the new CSS properties used here, especially calc(). The calendar designs are based on these two beauties found on Dribbble: For the calendar plugin to work, we simply need a container with the class “fc-calendar-container”: The plugin can be called like this: $( '#calendar' ).calendario(); The plugin will create a calendar with the following structure: The calendar will consist of a head for the listing of the weekdays and a body with rows for the days of the month. <div class="fc-content"><span class="fc-date">14</span><span class="fc-weekday">Wed</span><div></div></div> Options Demos

5D Institute | The Future of Immersive Design