tutorial banniere joyeux noel en svg canvas html5 css javascript json

j encapsule l animation dans un div "headernoel" qui peut avoir n importe quelle dimension.c est ce div qui passera en fullscreen.

un div "noel" qui a un rapport constant = dimension animation originale est centré au milieu du div headernoel.

ce div noel contient l image svg du fond les differents canvas et  les div image 1ere plans

 integration:

je stocke sur canalblog ou archivehost les fichiers:

joyeuxnoelbanniere.svg boulenoel.svg deuxcerfs.svg ( bien mettre width=100% et height=100% dans code svg)

textenoel.svg et

joyeuxnoel.js et joyeuxnoel.html et joyeuxnoelfullscreen.html

integration via iframe:

pour banniere je met:

pour le iframe mettre widthet height100% si le container bonne dimension sinon je peut mettre dimension voulu mais pas mettre fullscreen sinon je pers le clic du lien acceuil

code banniere iframe

pour un post avec fullscreen je met:

je suis oblige de creer dynamiquement iframe car editeur canalblog nettoie tout et enleve fullscreen et mettre pagejoyeuxnoelfullscreen dans src ( car le script fullscreen est dans cette page)

code iframefullscreen dans message

resultat ci dessous

integration via div

comme tous les elements de l animation sont placés dynamiquement via un script il suffit d'appeler le script  qui va tous placer dans le div headernoel

pour passer en mode fullscreen il faut mettre le code fullscreen pour le div

code en construction

techniques misent en jeux:

css,html5,svg,canvas,javascrip,json,poo

outils utilisés:

illustrator,dreamveawer,un livre sur canvas et google

sites utilisés:

au fur et à mesure de l avancement du projet j ai consulté nombreux site

les plus utiles:

http://msdn.microsoft.com/fr-fr/library/ie/bg124132%28v=vs.85%29.aspx

http://svground.fr/

http://www.w3schools.com

http://code.google.com/p/x2js/

difficultées rencontrées:

compatibilité avec les differents navigateurs bien utilise le w3schools

parseerreur lors convertion svg json

modefullscreen chrome ie et ff traite pas le fullscreen de la meme maniere

svg:

code svg qui provoque ralentissement de script dans ie

pour mettre un viewbox a 0 0 largeur hauteur avec illustrator pas le choix il faut creer un nouveau document et copier coller le calque qui vous interesse

element commun a  plusieurs images svg ( genre pour gradient couleur SVGID) qui provoque truc tout laid dans navigateur( il faut renomer avec nom different pour chaque image:facile a faire un editeur html)

javascript:

j ai tout regroupé en un script qui se compose dans l ordre de:

script pour faire innerSVG ( car il n existe pas domscript innerSVG comme innerHTML

script pour convertir json en xml/svg:pas oublie les ' a la fin

placer les differents elements svg gradient image texte et canvas dynamiquement entre deux div noel( attention si pour un div je peux utiliser margin-top pour canvas et svg utiliser top

calculer les points et tangentes de la courbe modeliser par un svg path et les mettres dans tableaux coordonnées

mettre image svg en background d'un div:

pour l image svg mettre: width et height:100% viewbox 0 0 largeur hauteur

et pour le div mettre: