Partage

Image "animée" en fond

Sujet résolu

19 février 2013 à 16:12:46

Bonjour,

J'ai déjà posté ce sujet dans le forum HTML(http://www.siteduzero.com/forum/sujet/image-animee-en-fond-d-ecran?page=1#message-84111722) mais j'ai pensé qu'il était peut être plus approprié de le mettre ici.

Sur mon site web, j'aimerais en fond une image avec arabesque(exemple : http://www.stickexpress.fr/99-146-thickbox/arabesque-papillon.jpg).

En fait j'aimerais qu'au début il n'y ai rien et que en partant d'en bas à gauche petit à petit ça fasse apparaitre les différentes "branches".

Je ne sais pas si je me suis bien exprimée. Quelqu'un pourrait-il m'aider svp ?

Merci d'avance =)

Anonyme

19 février 2013 à 20:27:07

Cela parait difficile en fond du body, mais c'est possible dans un container

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<meta name="generator" content="PSPad editor, www.pspad.com">
<title></title>
<style type="text/css">
#pge {display:block;height:600px;background:url(arabesque-papillon.png) no-repeat;background-position:center top; }
</style>
</head>
<body>
<div id="pge"></div>
<script type="text/javascript">
var opacity=0;

// document.getElementById("pge").opacity=opacity;
function increaseOpacity(){
	opacity+=0.002;
	document.getElementById("bdy").style.opacity=opacity;
	document.getElementById("bdy").style.filter='alpha(opacity='+(100*opacity)+')';
	if (opacity<1) setTimeout(increaseOpacity,300);
}
increaseOpacity()
</script>
</body>
</html>

Les deux syntaxes assurent la compatibilité avec les anciennes versions d'Internet explorer...

RacletteFanboy

19 février 2013 à 22:02:35

Ta solution 007Julien fait un fadeIn sur l'élément.

Je pense que ce bout de code reflète plus sa demande (attention CSS3 + jQuery, mais faisable sans jQuery):

http://jsfiddle.net/BeCx8/2/

-
Edité par RacletteFanboy 20 février 2013 à 8:53:53

anais1477

20 février 2013 à 13:04:21

C'est presque ça et si je ne trouve pas comme j'aimerais je prendrais ta solution, merci =)

J'aimerais quelque chose de ce style: http://www.templatehelp.com/preset/pr_preview.php?i=11610&pr_code=z6kE3jSbnYztA9KlWlwRj8Cb702DWV

Vous voyez que les branches se déroulent une à une.

J'ai vu la solution de dessiner en flash mais bon c'est pas ma spécialité donc je vais mettre des heures, et j'ai peur que ce soit lourd.

Sinon il y a les canvas en javascript où j'utiliserais des courbes de béziers. Mais j'essaye de faire des choses toutes simples et je n'y arrive pas,c'est trop compliqué. Si quelqu'un pourrait m'expliquer clairement je ne dis pas non

Sinon si vous avez encore d'autres solutions je vous écoute

Davounet

20 février 2013 à 13:43:01

Si tu veux afficher les branches une par une, tu seras obligé de les dessiner, de les extraire de l'image globale d'une quelconque manière que ce soit.
Ca dépend vraiment du degré de détail et du temps que tu veux passer pour obtenir un résultat satisfaisant.

Anonyme

20 février 2013 à 14:12:02

Il est certainement possible, si le gif animé est vraiment trop lourd (*), de construire un petit script (sans jQuery et fonctionnant sur la plus-part des navigateurs) chargeant et faisant apparaître progressivement (à l'aide de quelques setTimout) les différentes branches...

(*) Cela reste à tester, les aplats et le fond transparent se prêtent bien à la compression des gifs.

anais1477

20 février 2013 à 21:02:31

Donc en gros il faudrait que je prenne une image, que je découpe chaque branche en plusieurs images et les faire apparaitre une par une avec jquery ?

Anonyme

20 février 2013 à 21:18:10

Pour ma part, je ferais sans jQuery en quelques dizaines d'octets !

-
Edité par Anonyme 20 février 2013 à 21:19:48

anais1477

21 février 2013 à 10:01:31

Je ne comprends alors pas ton idée =/

peux-tu me réexpliquer stp ?

GeoffreyZéro

21 février 2013 à 11:18:16

Attention, il ne s'agit pas simplement de faire apparaître une image de droite à gauche (ou même de façon radiale comme dans le script de shichon) : ta forme décrit des boucles, donc tu vas te retrouver parfois à afficher une portion de la fin d'une branche avant d'en avoir affiché de début.

De plus, découper l'image en plusieur parties est lourd en terme de balisage si tu comptes faire ça en HTML et pourrait ne pas être complètement fluide à l'exécution, en plus d'être complètement inutile en terme de contenu (le HTML, c'est pour le contenu)

Je recommande soit de réaliser l'animation dans un canvas, soit de la réaliser dans un logiciel de dessin en exportant un spritesheet (là, évidemment, tu as plutôt intérêt à ce que l'animation soit relativement courte).

L'idée du canvas peut être pas mal : en fait tu placerais un canvas blanc au dessus de l'image, que tu gommerais au fur et à mesure pour faire apparaître les branches. Tu peux utiliser un script comme celui-( http://ramkulkarni.com/blog/record-and-playback-drawing-in-html5-canvas/ ) pour réaliser l'animation à la souris ou à la tablette graphique (en repassant soigneusement sur les branches et en enregistrant ce que tu fais, branche par branche).

Il faut voir le poids que représente les données en sortie, mais de ce que j'ai compris, le script ne stocke que les coordonnées de la souris en fonction du temps, ce qui peut se révéler relativement léger au final (ne pas hésiter à supprimer des frames dans l'array fourni - par exemple une frame sur deux ou deux frames sur trois selon la vitesse à laquelle tu dessines).

anais1477

21 février 2013 à 17:05:55

Pas mal ton idée mais comment je gommerais ? toujours avec les courbes de béziers ?

GeoffreyZéro

21 février 2013 à 19:37:58

Où tu vois des courbes de Bézier ? Le script en question enregistre la positon du curseur en fonction du temps, donc si tu dessines sur un fond blanc un point noir d'un diamètre suffisant à chaque emplacement, en suivant la cadence de l'enregistrement , tu vas te retrouver avec l'animation d'un masque de fusion. Tu peux en suite utiliser les modes de fusion du canvas ou toute autre méthode pour effacer une partie du cache ou au contraire révéler une partie de l'image. C'est au choix. Regarde la doc de canvas (celle de MDN est bien).

On pourrait décrire la position des points avec des courbes de Bézier, ce serait plus léger en terme de poids (beaucoup moins de points), mais ça t'obligerait à implémenter un parser de courbes de Bézier dans ton script. C'est déjà plus musclé. Perso j'ai pas fait l'essai mais ça doit être faisable.

GeoffreyZéro

21 février 2013 à 19:52:22

Euh, en te relisant, si tu penses à la solution logicielle. Tu peux gommer avec n'importe quoi. Perso je ferais ça dans Flash avec des interpolations de forme (sauf que j'exporterais en PNG plutôt qu'en SWF). Après, chacun fait comme il peut avec ce qu'il a.

Anonyme

22 février 2013 à 0:04:56

Cela parait bien compliqué pour réaliser quelque chose qui ne fonctionnera pas sur tous les navigateurs... La solution proposée fonctionne à condition, bien entendu, de classer les images et de lancer leur apparition progressivement.

Le jeu en vaut-il cependant la chandelle ? Seul anais1477, auteur de la question, peut répondre !

Pour ma part, j’ai tendance à penser que ce genre d'animation, comme les menus très alambiqués, perdent de plus en plus de leur intérêt d'abord parce que les utilisateurs se lassent très vite de voir toujours les mêmes animations, ensuite, parce que l'usage des téléphones et autres tablettes conduit à rechercher par priorité les contenus.

Ceci dit, un site vitrine, peut mériter de tels efforts de présentation lorsqu'il sont en rapport avec le contenu.

-
Edité par Anonyme 22 février 2013 à 0:16:07

GeoffreyZéro

22 février 2013 à 0:28:56

La solution utilisant CSS3... utilise CSS3. Mais bon, je vais pas défendre le canvas plus que ça. Ce n'est applicable que parce qu'il est simple d'enregistrer l'animation. C'est aussi beaucoup plus riche au niveau des possibilités de rendu.

La meilleure solution pour moi c'est une animation image par image avec un spritesheet. ça marche partout et c'est pas si lourd si l'animation ne dure pas plus d'une seconde et demi (à 18 images par secondes ça fait 24 frames sur un spritesheet en noir et blanc en png-8... faut voir combien ça pèse mais ça doit être raisonnable.). Par contre il faut un bon logiciel pour générer les frames sans trop se faire chier.

anais1477

22 février 2013 à 10:02:22

Geoffrey mon animation durerait plutôt dans les 5 secondes ... et ta solution semble encore plus compliquée que les courbes de bézier xD

En tout cas, merci à tous d'avoir tenter de m'aider. La solution la plus appropriée est donc les canvas mais c'est très compliqué à réaliser et comme tu as dit :

007Julien a écrit:

Le jeu en vaut-il cependant la chandelle ? Seul anais1477, auteur de la question, peut répondre !

En voyant la complexité de chacune des solutions je pense que non. Je vais continuer à chercher si jamais quelqu'un propose un script déjà fait, mais sinon je pense me tourner vers une solution qui m'a été donnée plus haut par shicon64 qui est d'utiliser la fonction animate de jquery : http://jsfiddle.net/BeCx8/2/ Le rendu final ne sera pas celui que j'attendais mais s'en rapproche, avec peu d'efforts à donner

Merci à tous de votre aide !

-
Edité par anais1477 22 février 2013 à 10:07:01

GeoffreyZéro

22 février 2013 à 10:23:34

Tu as une notion de "compliqué" qui m'échappe un peu. Quand on veut réaliser une animation, de fait, on passe pas l'étape de l'animation. Plus l'animation est complexe, plus on y passe de temps.

À une époque on t'aurait proposé Flash. C'est léger et les possibilités sont illimitées, mais tu n'échappes pas à l'étape de l'animation.

anais1477

22 février 2013 à 11:28:21

Oui, j'ai déjà réfléchis au flash. Mais voila je n'ai jamais fais de graphisme ou quoi, cela me prendrait donc des heures pour quelque chose qui au final ne me servira peut être pas longtemps

GeoffreyZéro

22 février 2013 à 14:26:04

Haaaa... je pensais que c'est toi qui avait dessiné l'arabesque.

anais1477

29 janvier 2014 à 15:25:47

Résolu

-
Edité par anais1477 31 janvier 2014 à 10:49:05