 code pour une animation html5 "retina", ou comment contraindre un canvas par CSS |
 |
Bienvenue invité ( Connexion | Inscription )
 26 Aug 2018, 17:11
Message
#1
|
|
 Macbidouilleur d'argent !  Groupe : Membres Messages : 792 Inscrit : 14 Nov 2003 Lieu : Genève Membre no 11 656  |
Bonjour,
Je dois réaliser une animation HTML5 "retina" et je fais mes essais avec animate CC d'Adobe. Pour une animation de 300x250 pixels "affichée", je réalise donc l'animation à 600x500 pixels sous animale CC. Après publication, j'essaie de contraindre en CSS mon caneva au petit format, mais rien ne fonctionne. Quelque chose comme : Code <canvas id="canvas" width="600" height="500" style="width:300px;height:250px;"></canevas> n'a aucun effet sur le code généré par Animate CC. (référence : forum Adobe) Comment puis-je m'y prendre ? Je ne trouve aucune doc à ce sujet (ou alors, c'est l'exemple que j'ai cité ci dessus) merci pour toute aide de votre part. |
 |
 
|
 |
Réponse(s)
|
30 Aug 2018, 00:23
Message
#2
|
|
|
Macbidouilleur d'argent ! Groupe : Membres Messages : 792 Inscrit : 14 Nov 2003 Lieu : Genève Membre no 11 656 |
Merci pour ta réponse zzibes !
Je ne comprends pas bien pourquoi nous serions obligé d'utiliser du javascript pour afficher un canvas à 50%. Impossible de le contraindre par du CSS ? Et j'imagine qu'il devrait y avoir un moyen, avec les media queries peut-être, d'afficher une petite animation pour les écran normaux et une animation 2x plus grande pour les écrans rétina, un peu sur cette base pour les images : Code <!doctype html> <html lang="fr"> <head> <style> div#monimage{width: 300px; height: 250px; } @media only screen and (-webkit-max-device-pixel-ratio: 1.5), only screen and (-o-max-device-pixel-ratio: 3/2), only screen and (max--moz-device-pixel-ratio: 1.5), only screen and (max-device-pixel-ratio: 1.5) { div#monimage{ background: url(monimage.jpg) no-repeat; } } @media only screen and (-webkit-min-device-pixel-ratio: 1.5), only screen and (-o-min-device-pixel-ratio: 3/2), only screen and (min--moz-device-pixel-ratio: 1.5), only screen and (min-device-pixel-ratio: 1.5) { div#monimage{ background-image: url([email protected]); background-size: 300px 250px; } } </style> </head> <body> <div id="monimage"></div> </body> </html> ... et l'image [email protected] est 2 fois plus grande que monimage.jpg. Ou faudra-t-il attendre html6 ? ps. si jamais, pour la clarté du forum, essaie d'utiliser les balises <code>blablabla</code> (en fait entre crochet [] pour que ça marche), pour afficher du code. (ou il y a un bouton en dessous des polices) 
Ce message a été modifié par toluol - 30 Aug 2018, 00:29. |
|
|
|
Les messages de ce sujet
toluol code pour une animation html5 "retina" 26 Aug 2018, 17:11
Philippe64 Bonjour,
Si tu mets la page en ligne ce sera plus ... 26 Aug 2018, 17:37 toluol voici mon exemple test.
J'ai beau enlever les... 26 Aug 2018, 20:17 yponomeute Salut,
Un simple coup d'oeil à ton fichier i... 27 Aug 2018, 07:37 toluol J'avais bien essayé de modifier cela aussi (2... 27 Aug 2018, 08:39 zzibes Salut,
si tu inspectes la balise de ton div ... 27 Aug 2018, 10:05 toluol Hum... Ben, le "300" dans l'index.... 27 Aug 2018, 10:44 zzibes Visiblement tu as cru changer mais ça n'est p... 27 Aug 2018, 10:46 toluol Ah bon ? ... Ben pourtant, je lis bien "300... 27 Aug 2018, 10:59 zzibes Ok. On s'est mal compris. Étant donné que l... 27 Aug 2018, 14:56 toluol non, l'animation du test 2 est rogné (le mot ... 27 Aug 2018, 15:54 zzibes ok je comprends mieux ton pb, n'ayant pas cré... 27 Aug 2018, 18:42
No6 Citation (toluol @ 30 Aug 2018, 01:23) Ou... 7 Sep 2018, 16:31
scoch Citation (toluol @ 30 Aug 2018, 01:23) Je... 11 Sep 2018, 15:07 toluol Effectivement, tout est plus clair maintenant ... 4 Oct 2018, 14:55 |
2 utilisateur(s) sur ce sujet (2 invité(s) et 0 utilisateur(s) anonyme(s))
0 membre(s) :
| Nous sommes le : 13th November 2025 - 00:09 |