joyeuxnoelsapinvert

projet en stand bye

à partir de cette image .ai

je souhaite realiser cette banniere animée avec texte joyeux noel qui clignote.... un pere noel qui passe et floconss qui tombent

je souhaite faire une banniere 1120px * 200px a partir image.ai

1/dans illustrator je creer ma banniere avec le meme rapport les dimensions sont pas importante puisque image vectoriel

je travail donc en 1990px par 400px pour mon format document je creer mon image en prenant en consideration le fait qu il y aura  le fond le plan moyen eet le 1er plan et aussi le texte

une fois mon image complete  je peux sauver separement au format svg ( j utilise .....) le fond le plan intermediaire le 1er plan le texte ( ps j efface les calques inutiles quand je sauvegarde)

le fond: degrade de gris sera fait en css =oko , en.png 5120*1037:26ko

fond neige gris:place dans un div avec fondgris.svg (1,61ko)en background image en .png 5120*1044=44ko

pere noel en traineau:place dans un canvas

fond neigeblanche et arbre:placé dans un div avec fondneigeblancheetarbre.svg ( 750ko)en backgroundimage en.png ultrahd 160ko

flocons qui tombent:placé dans un canvas

sapins et cadeaux:dans un div avec backgroundimage sapincadeau.svg 900ko  en png uhd 325ko

texte:soit un div soit un canvas police.ttf 923ko .png uhd 913ko .svg 446ko

si je souhaite une image png( tout a fait possible ) je sauvegarde en png avec une resolution de 300ppi pour avoir une image en 5120px*1044px ( correspond a de l ultra hd cf ici donc vous etes tranquille pour un moment)et vu que mon images est repetitive le .png ne sera pas trop lourd ( c est une autre paire de manche avec images complexes)

pour reduire poid fichier je peux aussi utiliser un background repeat si image bien symetrique

bien regler votre format document sur 0px 0px largeur hauteur sinon probleme ensuite avec view port

2/pour le texte.svg j ouvre le fichier avec dreamweaver et je modifie le with:1990px height 100px en 100% et 100%  je verifie bien que le 1er est un id et un style="fill sinon je le rajoute je sauve avec l option vector et pas svg

     width="100%" height="100%"  viewBox="0 0 1990 100" style="enable-background:new 0 0 1120 200;" xml:space="preserve">
<g id="winterflake" style="fill:red;stroke:green;">
    

affichage et clignotement du texte joyeuxnoel:

1ere méthode:  

je creer le texte dans illustrator avec une police adequate je le sauve en svg donc j ai un textejn.svg.pour le faire clignoter je fais changer le fill color et stroke color dans mon svg pour cela je dois importer le contenu de mon image textejn.svg dans ma balise div textejn.j utilise XMLHttpRequest et XMLSerializer(); et serializeToString(d) et innerHTML

et ensuite je change le fill et stroke avec un setinterval

scripttextejnserializerxml

2eme méthode:

j integre mon texte.svg dans mon div à l aide d'un object:textejnavecobject

3eme méthode:

je passe directement par un canvas avec contextet.globalCompositeOperation = "source-in" ca fait comme un "masque"

4eme méthode:

j'integre font et utilise canvas texte insertionpoliceetcanvastexte