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"
Item Blur Effect with CSS3 and jQuery. Today we want to show you how to create a simple blur effect for text-based items.
The idea is to have a set of text boxes that will get blurred and scaled down once we hover over them. The item in focus will scale up. Fullscreen Image Blur Effect with HTML5. Today we want to share a neat image blur effect with you.
Using canvas, we want to blur images on the transition to another one, creating a smooth effect. View demo Download source We will be using Stack Blur, which is a fast, almost Gaussian blur for Canvas by Mario Klingemann from Quasimondo. 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. Many, many more examples can be viewed further down the page. Arctext.js - Curving Text with CSS3 and jQuery. While CSS3 allows us to rotate letters, it is quite complicated to arrange each letter along a curved path.
Arctext.js is a jQuery plugin that let's you do exactly that. Based on Lettering.js, it calculates the right rotation of each letter and distributes the letters equally across the imaginary arc of the given radius. View demo Download source While CSS3 allows us to rotate letters, it is quite complicated to arrange each letter along a curved path. Arctext.js is a jQuery plugin that let’s you do exactly that. How it works. Shutterstock.github. Graphing Toolkit Rickshaw provides the elements you need to create interactive graphs: renderers, legends, hovers, range selectors, etc.
You put the pieces together. See Demo → Built on d3.js It's all based on d3 underneath, so graphs are drawn with standard SVG and styled with CSS. Open Source Rickshaw is free and open source, available under the MIT license. Getting Started Here's a minimal but complete working example. Area Graphs Lines Bars Scatterplot Interactive Legend Add a basic legend: Add functionality to toggle series' visibility on and off: Highlight each series on hover within the legend: Add drag-and-drop functionality to re-order the stack (requires jQueryUI): Interactive Hover Details Show the series value and formatted date and time on hover: Specify formatting callbacks to customize output: See the custom formatter and subclass examples for more. Annotations. Shuffle Text Effect with jQuery. 20+ Useful jQuery Google Maps Tutorials and Plugins. jQuery Google maps has become extremely popular among the internet users primarily for its easy-to-use techniques those are needed to locate a particular position on the world map.
Let us discuss some of the tutorials, resources as well as plugins of jQuery Google maps. There are plugins available which are used to include the longitude, latitude as well as text (for the name of a particular place) on the Google maps. In order to do that the user needs to reserve or book an API key available online. If any user wants to add Google maps to his website, jQuery plugin are used. However, these plugins can be used to make the webpage free from any unnecessary feature in order to make the page look sleek and tidy. Jeditable - Edit In Place Plugin For jQuery. Hi!
My name is Jeditable and I am inplace editor plugin for jQuery. With few lines of JavaScript code I allow you to click and edit the content of different html elements. I am based on Dylan Verheul’s editable. Spin.js. ResponsiveSlides.js · Responsive jQuery slideshow.