background preloader

Reveal.js - The HTML Presentation Framework

Reveal.js - The HTML Presentation Framework
The HTML Presentation Framework Created by Hakim El Hattab and contributors Hello There reveal.js enables you to create beautiful interactive slide decks using HTML. This presentation will show you examples of what it can do. Vertical Slides Slides can be nested inside of each other. Use the Space key to navigate through all slides. Basement Level 1 Nested slides are useful for adding additional detail underneath a high level horizontal slide. Basement Level 2 That's it, time to go back up. Slides Not a coder? Point of View Press ESC to enter the slide overview. Hold down alt and click on any element to zoom in on it using zoom.js. Touch Optimized Presentations look great on touch devices, like mobile phones and tablets. Markdown support Write content using inline or external Markdown. <section data-markdown> ## Markdown support Write content using inline or external Markdown. Fragments Hit the next arrow... ... to step through ... ... a fragmented slide. Fragment Styles grow shrink fade-out current-visible Related:  JS/jQuery

jsAnim - Free JavaScript Animation Library Getting Started with the JavaScript Version of the GreenSock Animation Platform (GSAP) « GreenSock The GreenSock Animation Platform (GSAP) animates anything JavaScript can touch (CSS properties, SVG, React, canvas, generic objects, whatever) and solves countless browser inconsistencies, all with blazing speed (up to 20x faster than jQuery). See "Why GSAP?" to learn why it's used by 6,500,000 sites and every major brand. Hang in there through the learning curve and you'll discover how addictive animating with code can be. Quick links We'll cover the most popular features here but keep the GSAP docs handy for all the details. First, let's talk about what GSAP actually does... GSAP as a property manipulator Animation ultimately boils down to changing property values many times per second, making something appear to move, fade, spin, etc. For example, changing the x coordinate of an object from 0 to 1000 over the course of 1 second makes it move quickly to the right. DOM, SVG, <canvas>, and beyond GSAP doesn't have a pre-defined list of properties it can handle. What's GSAP Exactly? GitHub

Turn.js: The page flip effect in HTML5 JavaScript - Galileo Computing - OpenBook Copyright © Rheinwerk Verlag GmbH 2001 - 2002Für Ihren privaten Gebrauch dürfen Sie die Online-Version natürlich ausdrucken und speichern. Ansonsten unterliegt das <openbook> denselben Bestimmungen wie die gebundene Ausgabe: Das Werk einschließlich aller seiner Teile ist urheberrechtlich geschützt. Alle Rechte vorbehalten einschließlich der Vervielfältigung, Übersetzung, Mikroverfilmung sowie Einspeicherung und Verarbeitung in elektronischen Systemen.Die Veröffentlichung der Inhalte oder Teilen davon bedarf der ausdrücklichen schriftlichen Genehmigung der Rheinwerk Verlag GmbH. [Rheinwerk Computing] jQuery Fundamentals Simple jQuery Accordion – Norman's Blog Wie macht man eigentlich.. Habt ihr schon mal eine Seite mit so einem netten Accordion-Effekt gesehen und euch gefragt wie das geht? Ich erkläre es euch, schaut euch doch aber erstmal die Demo an, damit ihr wisst, was ich meine. Wie ihr seht, klappt immer der Bereich auf, auf den geklickt wird. HTML-Gerüst Bevor wir anfangen müssen wir unser HTML aber entsprechend vorbereiten.. Jeder dieser Blöcke besteht aus einer Überschrift, die später anklickbar sein wird und einem Container, der den eigentlichen Inhalt des Blocks enthält. jQuery-Code Nun zum eigentlichen Code. Nun zur Erklärung, was da eigentlich abläuft.. Erst nachdem das DOM vollständig geladen ist, greift das Script.Schließe alle Container, deren Übschrift nicht die Klasse trigger_active hat.Klickt man auf ein Element der Klasse trigger wird geprüft: Hat es auch die trigger_active-Klasse? Styling per CSS Um das Ganze noch abzurunden, hier der CSS-Code der Demo. Allerdings ist das natürlich nur ein sehr rudimentäres Aussehen.

BookBlock: A Content Flip Plugin - Demo 2 January 2013 Monday Tuesday Wednesday Thursday Friday Saturday Sunday 7Mon 8Tue 9Wed 10Thu 11Fri 12Sat 13Sun 14Mon 15Tue 16Wed 17Thu 18Fri 19Sat 20Sun 21Mon 22Tue 23Wed 24Thu 25Fri 26Sat 27Sun February 2013 4Mon 5Tue 6Wed 7Thu 8Fri 9Sat 10Sun 11Mon 12Tue 13Wed 14Thu 15Fri 16Sat 17Sun 18Mon 19Tue 20Wed 21Thu 22Fri 23Sat 24Sun March 2013 25Mon 26Tue 27Wed 28Thu 29Fri 30Sat 31Sun April 2013 1Mon 2Tue 3Wed 4Thu 5Fri 6Sat 7Sun 8Mon 9Tue 10Wed 11Thu 12Fri 13Sat 14Sun 15Mon 16Tue 17Wed 18Thu 19Fri 20Sat 21Sun 22Mon 23Tue 24Wed 25Thu 26Fri 27Sat 28Sun May 2013 6Mon 7Tue 8Wed 9Thu 10Fri 11Sat 12Sun 13Mon 14Tue 15Wed 16Thu 17Fri 18Sat 19Sun 20Mon 21Tue 22Wed 23Thu 24Fri 25Sat 26Sun 27Mon 28Tue 29Wed 30Thu 31Fri June 2013 3Mon 4Tue 5Wed 6Thu 7Fri 8Sat 9Sun 10Mon 11Tue 12Wed 13Thu 14Fri 15Sat 16Sun 17Mon 18Tue 19Wed 20Thu 21Fri 22Sat 23Sun 24Mon 25Tue 26Wed 27Thu 28Fri 29Sat 30Sun July 2013 August 2013 5Mon 6Tue 7Wed 8Thu 9Fri 10Sat 11Sun 12Mon 13Tue 14Wed 15Thu 16Fri 17Sat 18Sun 19Mon 20Tue 21Wed 22Thu 23Fri 24Sat 25Sun 26Mon 27Tue 28Wed 29Thu 30Fri 31Sat September 2013 2Mon 3Tue 4Wed 5Thu 6Fri 7Sat 8Sun 9Mon 10Tue 11Wed 12Thu 13Fri 14Sat 15Sun 16Mon 17Tue 18Wed 19Thu 20Fri 21Sat 22Sun

jQuery++ jQuery One Page Navigation Plugin Sep 26, 2010 When appropriate, I am a fan of the one-page sites. I really like the ones that add smooth scrolling and highlight the navigation depending upon which part of the page you have scrolled to. Here are a few examples: Brizk Design and Crush + Lovely. I finally have a freelance project where a one-page site makes sense, so I needed to write the JavaScript to make the navigation work how I wanted. I wanted the page to scroll smoothly when the navigation was clicked, so I used the jQuery ScrollTo plugin. If you want to skip ahead, you can check out the demo and download the plugin from GitHub. The Markup I started with an unordered list for the navigation and a bunch of sections: The JavaScript Then, I added jQuery, the ScrollTo plugin, and my plugin to the page: Finally, I just need to call my plugin on the navigation: $(document).ready(function() { $('#nav').onePageNav();}); Options There are a few options for this plugin: And that’s it.

slick - the last carousel you'll ever need Set up your HTML markup. <div class="your-class"><div>your content</div><div>your content</div><div>your content</div></div> Move the /slick folder into your project Add slick.css in your <head> <link rel="stylesheet" type="text/css" href="slick/slick.css"/> // Add the new slick-theme.css if you want the default styling <link rel="stylesheet" type="text/css" href="slick/slick-theme.css"/> Add slick.js before your closing <body> tag, after jQuery (requires jQuery 1.7 +) Initialize your slider in your script file or an inline script tag When complete, your HTML should look something like: NOTE: I highly recommend putting your initialization script in an external JS file. Set up your HTML markup. <div class="your-class"><div>your content</div><div>your content</div><div>your content</div></div> Move the /slick folder into your project Add slick.css in your <head> Add slick.js before your closing <body> tag, after jQuery (requires jQuery 1.7 +) When complete, your HTML should look something like:

Parsley - The ultimate documentation Frontend form validation Parsley is a javascript form validation library. It helps you provide your users with feedback on their form submission before sending it to your server. It saves you bandwidth, server load and it saves time for your users. Javascript form validation is not necessary, and if used, it does not replace strong backend server validation. That's why Parsley is here: to let you define your general form validation, implement it on the backend side, and simply port it frontend-side, with maximum respect to user experience best practices. Parsley 1.x versions Parsley's current stable and supported versions are 2.x. Data attributes Parsley uses a specific DOM API which allows you to configure pretty much everything directly from your DOM, without writing a single javascript configuration line or custom function. Configuration You'll see along this documentation and through examples various available configuration options. Basic installation That would look pretty much like this:

How to create an animated sticky header, with CSS3 and jQuery Trends come and trends go. The ones that stick around the longest do so because they solve a particular problem. A trend that’s popular right now for that very reason, is sticky elements; elements that behave normally until we scroll, and then maintain their presence on the page somehow. The trend started with sidebars, but where it’s really grown in popularity is headers. Why? Because headers tend to contain navigation, and persistent navigation is popular with users. In this tutorial we’ll create a header that sticks to the top of the viewport, but so that it doesn’t interfere with the content, we’re going to minimize it when the user scrolls down the page. Here’s what it’s going to look like when we’re done: If you’d like to follow along with the code, you can download it here. The HTML The HTML for our example is really simple, all we need is an h1 inside a header. <header><h1>Sticky Header</h1></header><img src="large-image.jpg" width="782" height="2000" alt="Big Image" /> The jQuery

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