SweetAlert A beautiful replacement for Javascript's "Alert" So... What does it do? Here’s a comparison of a standard error message. 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: Download the sweetAlert CSS and JavaScript files. Configuration Here are the keys that you can use if you pass an object into sweetAlert: Contribute
8 JavaScript Libraries to Animate SVG SVG is a resolution-independent graphic. That means it will look good on any type of screen without suffering any loss of quality. Beyond that, you can also makes SVG come alive with some animation effects. In one of the post of our SVG series previously, we have shown you how SVG animation works with the <animate> element albeit at a low level. More on Hongkiat.com: 1. Vivus is a JavaScript library that gives your SVG the appearance of being drawn. For example: The above will animate my SVG element that has the svg-element ID in 200 millisecond. Pin it 2. 3. Velocity is a JavaScript library built for fast animations. 4. RaphaelJS is a library that allows you to draw as well as animate vector graphic SVG on web pages. 5. SnapSVG is another popular JavaScript library for SVG animation developed by Raphael developer, Dmitry Baranovskiy, along with the Adobe Web Platform Team from the ground up. 6. 7. SVG.js is a lightweight library for manipulating and animating SVG. 8.
A Guide to SVG Animations (SMIL) Update December 2015: At the time of this update, SMIL seems to be kinda dying. Sarah Drasner has a guide on how you can replace some of it's features. The following is a guest post by Sara Soueidan. Sara has a knack for digging deep into web features and explaining the heck out of them for the rest of us. Here she digs into SMIL (and friends), and animation syntax built right into SVG, and gives us this epic guide. Overview SVG graphics can be animated using animation elements. <animate> - which allows you to animate scalar attributes and properties over a period of time. In addition to the animation elements defined in the SMIL spec, SVG includes extensions compatible with the SMIL animations spec; these extensions include attributes that extend the functionality of the <animateMotion> element and additional animation elements. SVG animations can be similar to CSS animations and transitions via by their nature. Why Use SVG Animations? SVGs can be styled and animated with CSS (slides).
WURFL.io - Client Side, meet Server Side How SVG Line Animation Works I bet all of you have seen that little trick where an SVG path is animated to look like it's drawing itself. It's super cool. Jake Archibald pioneered the technique and has a super good interactive blog post on how it works. Brian Suda wrote about it on 24 Ways. Polygon used it to great effect on a custom designed article and wrote about it. Codrops has some neat examples. I have very little to add, except my brain just kinda figured it out, so I thought I would explain it one more time the way it clicked for me. 1. 2. 3. We could do that from Illustrator, but we can also do it programatically. That gives us dashes of 20px in length. 4. 5. Watch as we animate the offset of those long strokes: That was a simple as: 6. Nothing really to see, it looks just like the complete shape if it wasn't dashed at all. 7. It will look like the shape isn't there at all. 8. Tada! Live Example
Animer un SVG avec CSS Chris Coyier s'est amusé à créer une petite animation SVG en CSS, sans passer par des bibliothèques compliquées. C'est fait maison, simple, efficace et expliqué de façon claire comme toujours. Par Chris Coyier Il existe plusieurs façons d'animer une image svg, depuis la balise animate jusqu'aux bibliothèques comme Snap.svg ou SVG.js. Je me suis amusé avec ça dernièrement, Wufoo souhaitant rafraîchir le graphisme de ses pubs sur CSS-Tricks. La démo finale est ici. NdT : Pour une introduction générale à SVG, vous pouvez consulter l'excellent article de Chris Coyier Utiliser SVG. 1. Ça va ressembler à une leçon de dessin sommaire, mais notre objectif étant l'animation, nous allons passer sur le reste vite fait. Faire sauter les lettres dans la page. J'ai mis tout ça sur Illustrator : Remarquez que le logo et le texte du slogan sont des formes vectorielles, leur rendu en <path> (chemins) SVG sera très simple. Le texte "Fast." est laissé en tant que texte dans Illustrator. 2. 3. 4. 5. 6.
matthewhudson/device.js SVG Tutorial - SVG Scalable Vector Graphics, SVG, is a W3C XML dialect to mark up graphics. It is partially implemented in Firefox, Opera, WebKit browsers, Internet Explorer and other browsers. This tutorial aims to explain the internals of SVG and is packed with technical details. If you just want to draw beautiful images, you might find more useful resources at Inkscape's documentation page. The tutorial is in an early stage of development. Introducing SVG from Scratch The following topics are more advanced and hence should get their own tutorials. Scripting SVG with JavaScript SVG filters tutorial Animations with SMIL in SVG Creating fonts in SVG Contributors to this page:chrisdavidmills, abuilham, Tigt, Manojkr, trevorh, Jeremie, tdatu, pranavkpr, jswisher, ziyunfei, kperch, Manuel_Strehl, fscholz, Sheppy, A rabbit man 334454, George3, Bedi, Mgjbot, Jonathan_Watt
MixItUp – Plugin jQuery pour filtrer et ordonner du contenu dynamiquement MixItUp est un plugin jQuery dans la lignée de Masonry ou Isotope (Isotope qui utilise d’ailleurs Masonry) qui permettent d’ordonner et filtrer une partie de votre contenu selon des critères entièrement personnalisables. Créez des filtres personnalisés facilement selon le besoin de votre projet. Ses plus Pour ne pas avoir tellement exploré ses grandes soeurs, je vais avoir du mal à bien comparer les extensions, alors je vais surtout vous présenter ce qui m’a plu sur ce plugin jQuery. La facilité de mise en placeL’API qui permet d’accéder à pas mal de chosesLes animations et effet mettant à profit CSS3Le poids du plugin (14ko non gzippé)Possibilité de faire varier la mise en page (plus d’info sur la démo en anglais)Les filtres personnalisables Ses moins Il y en a toujours, voici ceux que j’ai noté : Voyons comment le mettre en place simplement. Mise en place de MixItUp Il ne faut pas oublier que JavaScript doit être une sur-couche à un contenu existant sur votre site web. Voir la démonstration
Medium.js Medium.js This is Medium.js Easy Medium.js keeps HTML code within contenteditable semantic, simple, and clean. Compliant Medium.js is html5 compliant and has been tested in Firefox, Chrome, Safari, Opera, & IE8+. Inspired This script is inspired by Medium's beautiful content editor, something we have aspired to emulate since it's inception. Authors This code is brought to you by: Features Free Library Independent Modern browser compliant Contributions Welcomes WYSIWYG editor or Toolbar ready Keeps HTML organized and semantic (even on paste events) Rich text editing with hotkeys (cmd/ctrl+[b,u,i]) Placeholders Inline, partial, and rich editors Automatics HR (or BR, or P) tag insertion on two empty paragraphs in succession Great for writing titles, comments, or entire articles Much more expressive and customizable than input or textarea Usage Simply include the Medium.js library and CSS, and you are ready to rock. Demos Inline Partial Rich Rich with Insert Html Vivamus eget dolor est. Semantic Options