background preloader

Raphaël Reference

Raphaël Reference
Creates a copy of existing animation object with given delay. delay number number of ms to pass between animation start and actual animation Returns: object new altered Animation object Animation.repeat(repeat)⚓➭ Creates a copy of existing animation object with given repetition. repeat number iterations of animation. Element.animate(…)⚓➭ Creates and starts animation for given element. params object final attributes for the element, see also Element.attr ms number of milliseconds for animation to run easing optional string easing type. callback function callback function. or animation animation object, see Raphael.animation Returns: object original element Acts similar to Element.animate, but ensure that given animation runs in sync with another given element. el element to sync with anim animation to sync with easing type. element Sets the attributes of the element. attrName attribute’s name value object of name/value pairs attrNames array in this case method returns array of current values for given attribute names key any Related:  raphael.js

Raphaël—JavaScript Library HTML5 Video Player | Video.js Tabulous.js Proin elit arcu, rutrum commodo, vehicula tempus, commodo a, risus. Curabitur nec arcu. Donec sollicitudin mi sit amet mauris. Nam elementum quam ullamcorper ante. Aenean tempor ullamcorper leo. Morbi tincidunt, dui sit amet facilisis feugiat, odio metus gravida ante, ut pharetra massa metus id nunc. Mauris eleifend est et turpis. Vestibulum non ante.

Raphael.js Tutorial Preview Download Free Preview Never mind the HTML5 canvas, here’s SVG with Raphael.js! For 15 years, front-end web developers have missed out on one of the most basic parts of any programming environment: drawing. Fortunately, browsers are now capable of displaying SVG: scalable vector graphics. In this 50 minute Raphael.js tutorial, you’ll benefit from tips and tricks we’ve learned from over a decade of working with drawing systems, and several years of working with Raphael. Whether you’re a back-end database developer or a front-end designer, you’ll become confident with basic drawing, text, animation, and interaction that’s now available to you with the straightforward API of Raphael.js and the open standard of SVG. Topics covered: Available as part of a PeepCode Unlimited subscription (including streaming on our iOS app!) Includes a typed transcript. Skills

potomak/jquery-instagram @ GitHub Instagram jQuery plugin A simple jQuery plugin to show a list of Instagram photos. Instagram photos tagged with #hipster. Instagram photos at location 514276. Instagram photos at position (48.858844, 2.294351). License See LICENSE. Authors Giovanni Cappellotto (@johnnyaboh) Download You can download this project in either zip or tar formats. You can also clone the project with Git by running: $ git clone

{{ mustache }} An Introduction to the Raphael JS Library Raphael JS is a lightweight and super-sexy JavaScript framework that allows you to draw vector graphics in your browser! In this tutorial, I will introduce you to some basic drawing functionality, take a look at animation, provide DOM access and finally finish off by creating a cool widget for your site... Framework: Raphael JSVersion: 1.0Difficulty: Beginner to IntermediateEstimated Completion Time: 30 minutes Let's get started by downloading the Raphael JS framework from here. With that downloaded, let's set up a simple HTML document called index.htm and include Raphael in it. N.B. When we draw with Raphael, we do so onto a canvas. I generally prefer the latter method (b), since we usually know where our divs are. All our drawing methods will now be bound to the paper variable. Now that we have our canvas, let's draw some shapes onto it. First off, a circle. This will draw a circle with a radius of 80px with its center placed at x = 100, y = 100. Next, let's draw a rectangle.

Hide your header on scroll - Headroom.js Downloads Note: the sizes shown are after gzipping. What's it all about? Headroom.js is a lightweight, high-performance JS widget (with no dependencies!) Why use it? Fixed headers are a popular approach for keeping the primary navigation in close proximity to the user. Large screens are usually landscape-oriented, meaning less vertical than horizontal space. Headroom.js allows you to bring elements into view when appropriate, and give focus to your content the rest of the time. How does it work? At it's most basic headroom.js simply adds and removes CSS classes from an element in response to a scroll event: Relying on CSS classes affords headroom.js incredible flexibility. Usage Using headroom.js is really simple. With plain JS Include the headroom.js script in your page, and then: var myElement = document.querySelector("header");var headroom = new Headroom(myElement);headroom.init(); With jQuery/Zepto Include the headroom.js and jQuery.headroom.js scripts in your page, and then: With AngularJS

10 Impressive JavaScript Animation Frameworks Complex and slick JavaScript-based animation has been made easier with the emergence of frameworks and libraries that give developers the ability to create stunning and eye-grabbing animation and transition effects that make it easy these complex tasks. In this article, you will read about the top 10 JavaScript-based animation frameworks and libraries that will enable you to create engaging and captivating user experiences. 1. $fx $fx is a compact and lightweight JavaScript animation library which extends native JavaScript DOM methods with its own animation methods and functions. Its small file size (weighing in at only 3.7 KB), hassle-free implementation, and low learning curve makes $fx a powerful option for adding eye-popping animation effects to your web projects. 2. jsAnim Created by web developer Kevin Dolan, jsAnim is a JavaScript animation framework for creating high-impact and slick animation sequences for web interfaces. 3. scripty2 5. 6. 7. 8. 9. 10. Related content

Creating a chart with raphael.js from a google spreadsheet - Jérémi Joslin's blog We want to get data from a google spreadsheet and display it as a chart using gRaphaël . We are going to transform the following spreadsheet into a bar graph. gRaphaël’s goal is to help you create stunning charts on your website. gRaphaël is based on raphael.js . Raphael.js is a small JavaScript library that should simplify your work with vector graphics on the web. It currently supports Firefox 3.0+, Safari 3.0+, Opera 9.5+ and Internet Explorer 6.0+. You can download the code of the sample at the end of this article. 1. Google spreadsheet offers to serve its data thanks to the Google Data Protocol . 1.1 Preparing our spreadsheet Create a spreadsheet that look like our (2 columns: the first one contain the label, and the second one the data) Save and publish the spreadsheet (Warning! 1.2 Loading the spreadsheet data /* * Specify the information about our spreadsheet */ var spreadsheet_id = "tiRm6cBSE3AZJnyLC6Wlysw" , worksheet_id = "od6" ; 2. You have now a beautiful Graph. see the result

Zepto.js: the aerogel-weight jQuery-compatible JavaScript library The default build includes the following modules: Core, Ajax, Event, Form, IE. Zepto v1.0 used to bundle Effects, iOS3, and Detect modules in the default build. See below for optional modules. Zepto will only set the $ global to itself if it is not yet defined. If you need to support older browers, like Internet Explorer 9 and lower, you can fall back to jQuery 1.x. Note that some optional features of Zepto specifically target mobile browsers; as the original project goal was to specifically provide a leaner alternative to jQuery for the mobile web. Zepto is a good choice for browser extensions (for Safari, Chrome and Firefox) and to develop HTML-based views within native app frameworks, such as PhoneGap. In short, Zepto is expected to work in every modern browser and browser-like environment. zepto.js and zepto.min.js provided above can be used as-is. Refer to the README for instructions on how to build Zepto, including running the tests and contributing patches. Core methods $.each $.extend

Tout [Tutoriaux javascript et PHP] - Scripts, Tutoriaux, Forums pour webmasters et développeurs Introduction Devant le succès des premiers tutoriaux sur le PHP, voici une introduction aux bases de données. L'avantage considérable d'un langage serveur comme le PHP est qu'il peut conserver des données saisies par des utilisateurs, les traiter, les trier et les afficher aux autres visiteurs. Avec le PHP, on peut donc faire des forums, des livres d'or, des sondages. Bref tout ce qui est interactif sur le web. Pour sauver des données, beaucoup pensent que le meilleur moyen est d'utiliser des fichiers texte. C'est une solution possible. C'est donc l'utilisation des bases de données MySQL avec PHP que nous allons aborder dans ce tutorial. PHP est très souvent utilisé en association avec le système de gestion de base de données (SGBD) MySQL. Avertissement 1 : La lecture des tutoriaux "JavaScript et PHP", "Introduction au PHP" et "Traiter des données en PHP" est un pré-requis absolument nécessaire.Avertissement 2 : Ce tutorial est une vulgarisation des bases de données.