background preloader

SlabText – a jQuery plugin for creating big, bold & responsive headlines

SlabText – a jQuery plugin for creating big, bold & responsive headlines
I’ve been wanting to attempt a port of Erik Loyer’s slabtype algorithm for quite some time now and seeing Paravel’s fittext jQuery plugin, in combination with a gloriously hassle-free lunch hour gave me the impetus to attempt it. This is the result – resize the browser viewport to see the effect in action. So what does the script do again? Put simply, the script splits headlines into rows before resizing each row to fill the available horizontal space. The ideal number of characters to set on each row is calculated by dividing the available width by the pixel font-size – the script then uses this ideal character count to split the headline into word combinations that are displayed as separate rows of text. Calculated and preset word combinations While the script does an admirable job at automating the creation of the individual rows, there are certainly situations in which you would choose to control the word combinations used to split the headline. Headers containing links Plugin options

Responsive-content A jQuery plugin that helps you serve different content to different devices. Responsive Content is used to load content that is appropriate to the current device's screen size. It is typically used alongside Responsive Design techniques. Note however that Responsive Design and Responsive Content act on different levels: given a particular screen width, the former applies a particular styling to the same content - whereas the latter actually loads different content. It can be used subtly - for example to cause smaller images to be loaded on smaller devices - or to deliver radically different content to different screen widths or device capabilities. How it works Responsive Content is a coarse-grained content loader, designed to pull an entire block of HTML into the "content" area of a page. The content is loaded as a single HTML fragment using Ajax and inserted into a specified container element. Design Criteria The approach meets these critical criteria: Client Side For example: Server Side

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.