/https%3A%2F%2Fprofilepics.canalblog.com%2Fprofilepics%2F8%2F0%2F803567.jpg)
12 novembre 2013
Publicité
Publicité
10 novembre 2013
variable avec nom dynamique en javascript
25 octobre 2013
horloge digital toute bete
<!DOCTYPE html>
<html>
<body>
<p id="demo"></p>
<script>
var myVar=setInterval(function(){myTimer()},1000);
function myTimer()
{
var d=new Date();
var t=d.toLocaleTimeString();
document.getElementById("demo").innerHTML=t;
}
</script>
</body>
</html>
25 octobre 2013
Snap.svg : une nouvelle bibliothèque JavaScript par Adobe
Baptisée Snap.svg, cette dernière propose des interfaces de programmation permettant d'animer et de manipuler des contenus SVG. Pour mémoire, le format graphique SVG, Scalable Vector Graphique, permet de représenter une forme géométrique en interprétant les données d'un code XML. Cette librairie fonctionne en outre avec n'importe quel fichier SVG, qu'il ait été conçu par Illustrator, Inkscape ou Sketch.
Développée par Dmitry Baranovskiy, concepteur de la bibliothèque Raphaël, Snap.svg est compatible avec les navigateurs modernes, à savoir IE9+, Safari, Chrome, Firefox et Opera. Il est ainsi possible d'ajouter des masques, d'effectuer du clipping ou d'ajouter des dégradés. Snap.svg est distribué sous la licence Apache 2.
a savoir ie ne prend pas en charge animationsvg (smil)
firefox utilise beaucoup uc avec image.svg
sous chrome tout fonctionne correctement
Publicité
Publicité
22 octobre 2013
creation montre en javascript css svg
en construction
je vais essayer ecrer montre comme celle que j ai realisé en flash
http://animationswf.canalblog.com/archives/2013/10/22/28264637.html
1/les aiguilles
2/les chiffes
3/le fond animé du cadran
17 octobre 2013
tutorial caase brique en html5 javascript canvas svg
17 octobre 2013
banniere en html 5 css canvas svg suite
1/utilisation d'image svg
je vais utiliser image svg pour l image de fond et le traineau du pere noel et aussi peut etre pour le texte
http://msdn.microsoft.com/fr-fr/library/ie/gg589526%28v=vs.85%29.aspx
http://lipn.univ-paris13.fr/~cerin/maitrise/svg
http://jeremie.patonnier.net/post/2010/06/29/Introduction-a-SVG
http://www.gchagnon.fr/cours/xml/svg.html
http://www.svgbasics.com/paths.html
http://ux.saggezza.com/articles/creating-a-svg-sprite/
http://www.w3schools.com/cssref/pr_class_display.asp
2/convertir traineau en svg ok fait
avec flash decompiler j extrait le sprite traineau
dans flash je fais disocier et degrouper les graphique puis copier
je colle dans illustrator et sauvegarder en svg
petit probleme rencontre lors conversion image ai en svg:dans l image ai il y avaient calques mode superposition dans svg ca n existe pas il faut donc rajouter un filtre svg sur le calque pour que le filtre apparaisse lors de la conversion
3/faire suivre au traineau une trajectoire ( dans mon cas une courbe sinusoidale) ok fait
http://stackoverflow.com/questions/13932704/how-to-draw-sine-waves-with-svg-js
https://developer.mozilla.org/en-US/docs/Web/SVG/SVG_animation_with_SMIL
4/connaitre position et angle traineau sur la trajectoire ( en ai besoin pour etincelle)
la c'est dur
http://msdn.microsoft.com/fr-fr/library/ie/gg193979%28v=vs.85%29.aspx#example5
https://developer.mozilla.org/en-US/docs/Web/SVG
how-to-manipulate-translate-transforms-on-a-svg-element-with-javascript-in-chrom
https://developer.mozilla.org/en-US/docs/Web/API/SVGTransform
http://www.w3.org/TR/SVG/animate.html#ValueAttributes
http://msdn.microsoft.com/en-us/library/ie/ff972117%28v=vs.85%29.aspx#properties
5/parenthese j ai trouve ca
http://dropthebit.com/592/pathanimator-moving-along-an-svg-path/
6/deplacement traineau:utilisation requestanimationframerate
http://creativejs.com/resources/requestanimationframe/
7/petit détour sur le dom ( display object manager) des navigateurs
http://www.phpied.com/rendering-repaint-reflowrelayout-restyle/
8/javascript prototype
http://blog.xebia.fr/2013/06/10/javascript-retour-aux-bases-constructeur-prototype-et-heritage/
9/je vais essayer mettre image svg dans script pour avoir seulement un script a inserer
http://code.google.com/p/x2js/
http://goessner.net/download/prj/jsonxml/
http://www.utilities-online.info/xmltojson/#.UotxMeImiwV
http://www.alsacreations.com/article/lire/1161-json-ajax-jquery-jsonp-getjson.html
http://stackoverflow.com/questions/9723422/is-there-some-innerhtml-replacement-in-svg-xml
10/pour verifier syntaxe et tester
http://www.w3schools.com/default.asp
http://www.w3schools.com/cssref/tryit.asp?filename=trycss3_transform-origin
http://jsfiddle.net/73g7t/395/
11/utilisation font svg
je peux realiser le texte avec canvas le default c est qu il faut incorporer la fonte ou alors utiliser une fonte commune
http://schepers.cc/svg-webfonts
https://developer.mozilla.org/en-US/docs/Web/SVG/Tutorial/SVG_fonts
19/filtre
http://stackoverflow.com/questions/14307079/make-blend-modes-in-svg-actually-work
http://msdn.microsoft.com/fr-FR/library/jj206437.aspx
http://svground.fr/filtres.php
les filtres pour le blendmode qu on trouve parfois dans image ai ne fonctionnent pas dans tous les navigateurs malheureusement
20/animation rapide dans navigateur
http://www.html5rocks.com/en/tutorials/speed/high-performance-animations/
21/inserer image svg dans canvas
http://getcontext.net/read/svg-images-on-a-html5-canvas
https://developer.mozilla.org/en-US/docs/HTML/Canvas/Drawing_DOM_objects_into_a_canvas
http://stackoverflow.com/questions/12673527/html5-canvas-use-image-as-mask
12 octobre 2013
banniere en html 5 css canvas svg
en construction
je vais essayer de reproduire cette baniere que j avais realisé en flash
1/les liens pour me documenter:
comment choisir entre canvas et svg
http://svgweb.googlecode.com/svn/trunk/docs/UserManual.html
http://image.online-convert.com/convert-to-svg
http://srufaculty.sru.edu/david.dailey/svg/SVGAnimations.htm
http://www.alsacreations.com/tuto/lire/1421-svg-initiation-syntaxe-outils.html
http://jeremie.patonnier.net/post/2010/06/29/Introduction-a-SVG
http://tontof.net/?2012/05/25/23/58/40-gif-apng-webp-versus-canvas
2/realisation des etincelles avec canvas
14 septembre 2013
script diaporama
Publicité
Publicité