 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. |
|
|
|
|
7 Sep 2018, 16:31
Message
#3
|
|
 Oui ? Groupe : Membres Messages : 3 889 Inscrit : 24 Jun 2003 Lieu : BZH Membre no 8 224 |
Citation (toluol @ 30 Aug 2018, 01:23)  Ou faudra-t-il attendre html6 ? nan ça existe déjà, il faut utiliser la balise picture Code <picture> <source srcset="examples/images/extralarge.jpg" media="(min-width: 1000px)"> <source srcset="examples/images/art-large.jpg" media="(min-width: 800px)"> </picture> comme tous les navigateurs ne l'implémentent pas toujours, tu peux ajouter un polyfill pour le cas ou => https://github.com/paulirish/matchMedia.js/ explications : https://wooster.checkmy.ws/2014/04/picturef...ponsive-images/ Ce message a été modifié par No6 - 7 Sep 2018, 16:32. -------------------- "Je sais que vous croyez comprendre ce que vous pensez que j'ai dit, mais je ne suis pas sûr que vous réalisiez que ce que vous avez entendu n'est pas ce que je pense."
(Alan Greenspan) |
|
|
|
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
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 |
1 utilisateur(s) sur ce sujet (1 invité(s) et 0 utilisateur(s) anonyme(s))
0 membre(s) :
| Nous sommes le : 18th July 2025 - 06:28 |