18041 sujets

Questions générales et questions de débutants

[Résolu] Avis Techno > Effet nuages de vapeur actifs sur une image

/ Je suis développeur à mes heures php/css/ ... et des bases de javascript /

Bonjour,

Après des recherches, j'aimerai obtenir un/des avis - je sèche Smiley confus

je recrée un site web pour un ami chercheur et sur sa page d'accueil, il y a une photo d'un cratère qui dégage des vapeurs (un de ses sites de recherche). Et la il me demande si je pourrais pas créer un effet de vapeur qui se dégage... ouai... Il est chercheur, pas dev c'est sur Smiley lol

(A sa décharge, sur son ancien site, il y avait un volcan et j'avais réussi à faire des effets de lave qui se projetait - mais header sous flash, c'était l'époque et l'image était pas bien grande)

Aujourd'hui, image en background (titre devant) et en full width

Point de vue css3, gif/svg animé je pense que c'est mort.

Je me dis que peut être en javascript c'est possible :
- image full width en background
- et devant 1 ou 2 images en png avec des volutes de vapeur sur lesquelles j'applique juste une translation verticale en boucle en javascript
Théoriquement il me semble que c'est possible, en pratique...
Peut être que non, peut être qu'il y a d'autres moyens "plus simples", etc

Je suis preneur de toute proposition (pas trop timeovore Smiley ravi ) avant de lui dire que c'est pas possible Smiley cligne
Reste pour moi le défis potentiel de le faire Smiley biggrin

Merci

PS : J'aurai pas le budget pour aller faire une vidéo sur place Smiley lol
Modifié par Astaryne (19 May 2021 - 23:08)
Slt

si je comprend bien, il y a déjà une image, et toi tu voudrais "ajouter" par dessus cette image un effet de vapeur (un truc du genre)?
Salut !

Merci c'est super - à voir jusqu'où on peut aller, mais au moins ce serait simple à faire ! Enfin ya du code css à comprendre la Smiley ravi
Je vais creuser le sujet

Merci encore Smiley cligne
Modifié par Astaryne (20 May 2021 - 19:53)
Salut Astaryne à mon sens, avec de la lib comme Jquery (ou équivalent) c'est non plus le truc le plus long/complexe à mettre en place, de la manière que t'as déjà envisagé (CaD transform CSS).

Dans tous les cas, je vois que deux méthodes :
- Soit la méthode un peu à l'ancienne, un timeout en JS, à chaque occurrence, tu créé un élément, tu l'anime, tu le détruit (ou alors tu le repositionne en bas). Cet élément possédant un BG de fumée et l'orientation du dit élément changeant à chaque fois et aléatoirement.
- Soit la méthode moderne & frond-end, tu fait tout en CSS avec les animation & transition.
Une méthode que j'utilise pour ma part, c'est de créer les éléments purement esthétiques en JS au chargement de la page.
Dans ton exemple si tu as besoin de 10 div avec chacun un BG de fumée, tu les créés pas en HTML mais en JS avec un event onload ou ready. Ca évite de salir ton code HTML ou PHP avec des balises purement esthétiques et sans rôles ou importance sémantique.
Ensuite, tu détermine 3 valeurs aléatoires par élément, orientation, taille et vitesse que tu stock dans des attributs data ou des variables CSS, selon ce qui fonctionne et la manière d'animer tes éléments. Et tu termine avec des propriété animation CSS pures.

C'est pas ultra long ni ultra casse couille mais c'est que c'est un peu plus long que de designer un submit. J'ai déjà fais plusieurs fois ce genre de trucs mais là j'ai rien sous la main de tout prêt à te filer, my bad. Smiley confused

C'est par contre le genre de petits défis à relever pour progresser en CSS à mon sens. Smiley smile
Salut C@scou !

Merci pour tes propositions.

Après plusieurs heures de test sur la solution css proposé, j'abandonne...
ce que je veux faire n'est pas comparable dans le sens où moi c'est des volutes que je souhaite faire bouger et pas une image complètes de volutes on va dire. Dans ce dernier cas c'est assez simple, on ne voit pas les transitions entre les images avec le jeu des transparences. Dans mon cas si... et en vertical ça n'arrange rien. En plus ce qu'à fait le gars, c'est une combinaison de css et d'animation... déjà le gars bravo. Donc déjà pour comprendre c'est compliqué, et je ne pense pas que ça ira dans mon cas

Donc en effet j'ai pensé au jquery, je m'y suis mis ce soir. La je maîtrise encore moins que le css Smiley sweatdrop
Mais j'arrive à faire bouger des images ! bah pas comme je veux par contre...
J'ai ça en html
<script>
	$(document).ready(function(){
  		$("button").click(function(){
    		$("#image1").animate({top: '0px'});
  		});
	});
</script>
<body>
	<div class="container">
    <button>Start Animation</button>
		<div id="image1"><img src="fog_perso1.png" alt=""></div>
		<div id="image2"><img src="fog_perso2.png" alt=""></div>
        <div id="image3"><img src="fog_perso3.png" alt=""></div>
	</div>
</body>

Le bouton c'est juste pour tester / et en css
.container {
	width:2000px;
	height:800px;
	overflow: hidden;
	position: relative;
	background:url(accueil_bg.jpg) no-repeat left;
}
#image1, #image2, #image3 {
	position:absolute;
	width:2000px;
	height:800px;
	margin:0 auto;
	left:0;
	bottom:-800px;
}
#image1 {
	z-index:200;
}
#image2 {
	z-index:300;
}
#image3 {
	z-index:400;
}

Rien de très compliqué - en fait j'ai 3 images que je veux faire bouger - après je pourrais en mettre plus mais pour le moment ça suffira Smiley biggrin

Si tu veux voir les images
https://sebbrico.fr/upload_perso/accueil_bg.jpg
https://sebbrico.fr/upload_perso/fog_perso1.png
https://sebbrico.fr/upload_perso/fog_perso2.png
https://sebbrico.fr/upload_perso/fog_perso3.png

Toutes les images ont la même taille - on commence simple - j'ai fais les fog sous toshop Smiley ravi

Déjà problème 1 j'arrive pas à faire bouger l'image jusqu'à +800px, puisque je veux qu'elle traverse le div de background...
Ensuite 2 ya le fait de faire tourner ça en boucle et de régler la vitesse, mais cela ne m'inquiète pas, juste des paramètres, quand j'arriverai au 1...
Ce qui m'inquiète par contre c'est le lancement de plusieurs animations en parallèle et en décalé avec des jeux de transparences et des vitesses différentes.
J'ai bien lu la doc sur les param de transparence, le fait de lancer des anim mais dans la doc c'est à la suite, pas en parallèle, avec un jeu de transparence fixe, etc..
Moi ce que je souhaite en gros :
Lancement Image 1 > transparence de 0 à 100 puis à 0, vitesse de x
2 secondes plus tard (donc animation non terminée)
Lancement Image 2 > transparence de 0 à 100, vitesse de y
etc...
Est-ce possible en Jquery ?

Et la tu me dis de combiner css et jquery. Tu veux ma mort c'est pas possible ! Smiley biggol
Pourquoi pas, mais je vois pas du tout comment ça fonctionne...

Après c'est un défis perso que je me lance, c'est tout Smiley lol Rien ne m'oblige à le faire dans les faits. Mais bon, faut bien de temps en temps !
Modifié par Astaryne (24 May 2021 - 22:47)
Modérateur
Bonsoir,

avec une animation sur background-position, tu devrais t'en sortir je pense:

exemple avec tes images en lignes : https://codepen.io/gc-nomade/pen/RwpVevB

tout est placé sur body, cependant, html peut recevoir un nuage et l'image de fond, body 1 ou 2 nuages . cela te permet de placé 4 images dans animation différentes.
body a aussi (comme un div) deux pseudos elements a dispos, chacun pouvant recevoir une image et une animation différente Smiley smile tu y est presque.

cdt
Modifié par gcyrillus (25 May 2021 - 00:32)
Meilleure solution
Bonsoir gcyrillus

> Va se tirer une balle pour le temps passé à chercher comment le faire et reviens
> *Pan* Smiley biggol

MERCIIIIIIIIII !!! Smiley lol

Je ne comprends pas tout ce que tu me dis pour mettre ça dans une ou des div mais je vais regarder ça !
Je t'embrasserai presque !!! Smiley biggrin

Merci beaucoup !

EDIT : petite question, on peut jouer sur la transparence aussi avec ta solution ? j'avais fait les images plus accentuées car je pouvais régler après - si non > toshop Smiley biggrin
Modifié par Astaryne (25 May 2021 - 00:59)
Modérateur
Bonjour,

je n'avais pas vu ta réponse,

il y a background-blend-mode pour melanger plusieurs image de fond (voir mix-blend sur MDN)

Puis il y a aussi opacity, et eventuellment filter:contrast(x%) brightness(x%) ; qui peuvent aussi être utilisé et inclus dans les keyframes de l'animation.

Pour le dispatch sur plusieurs conteneurs, voici l'idée de base : https://codepen.io/gc-nomade/pen/LYWLNbR

il y a aussi clip-path (ajout en exemple) qui peut-être utile (eventuellement mask aussi)

Cdt
Modifié par gcyrillus (25 May 2021 - 15:00)
Bonjour,

merci pour toutes ces infos !
Je vais regarder ça aussi. Mais je bloque sur un truc
En prenant un exemple simple qui marche sur la base de ton post précédent :

#container {
	width:100%;
	height:600px;
	margin:0 auto;
	background: url(accueil_bg.jpg);
	background-position:center center;
}
#image1 {
	height:600px;
	position:relative;
	background:
    url(fog_perso1.png) 20% 50%;
    animation: bg1 10s infinite linear ;
	background-size:100% auto;
}
@keyframes bg1 {
  50% {
	  background-position: 
      80% 250%;
  }
  to {
	  background-position: 
      140% 550%;
  }
}

Les images vont du bas vers le haut.
SI j'ai bien compris la doc les 20% 50 % c'est left top
Ce qui est étrange en soit... normalement en css c'est d'abord top...
Donc dans mon exemple, pour le top, le nuage commence à 50%, à 50% des 10s, il est à 250% et à la fin des 10s il est à 550%
C'est bien ça ?
Quand je regarde j'ai des doutes... où ça joue sur la vitesse aussi ?
Par contre pour le left je comprends pas... vu qu'elle va vers le haut... ?
Où je rate un truc. J'ai beau testé, ça m'aide pas pour comprendre ces paramètres et la doc est pas très explicite sur ce point...
Une petite explication please ?
Modifié par Astaryne (25 May 2021 - 19:32)
Modérateur
bonsoir,

en fait si ton image a une taille supérieur en hauteur que son conteneur en passant de background-position: 0 0; a background-position: 0 100% , l'image va remonter pour aligner sa partie basse avec le bas du conteneur , si l'image est moins haute, alors elle va descendre , si elle a la même hauteur, ... elle ne bouge pas d'un pouce.

regarde la partie à propos des % dans la définition sur MDN : https://developer.mozilla.org/fr/docs/Web/CSS/background-position

Cdt
Modifié par gcyrillus (25 May 2021 - 19:31)
ok, donc ça veut dire que le premier paramètre dans mon cas ne sert à rien ? faut juste que je joue sur le deuxième, vu que je veux que du bas vers le haut.
Modérateur
en lisant la definition sur le lien précedement donné on y lit :

a écrit :
<position>
Une valeur <position>. Une position définit un couple de coordonnées XY qui permet de placer un objet par rapport aux bords de la boîte d'un élément. Une position peut être définie avec une ou deux valeurs.La première correspond à la position horizontale et la seconde à la position verticale.

Si la valeur passée n'est pas un mot clé mais un chiffre (+unité) , alors il te faut les deux selon mon interprétation (verticalité)
as tu repéré l'histoire de décalage ? peut être sympa dans ton cas pour les navigateurs qui le supportent.

Cdt
Modifié par gcyrillus (25 May 2021 - 20:42)
J'ai continué sur ta première méthode et ça donne ça :
https://codepen.io/astaryne/pen/ExWXomO

J'ai 4 images avec des positions et des vitesses différentes.
Je suis assez satisfait du résultat Smiley lol
Ya peut être moyen d'optimiser

Le point qui est le plus problématique avec cette méthode c'est qu'il faut adapter la différence de % entre le début et la fin de l'animation en fonction de la hauteur de la div pour éviter l'effet de saut de l'image (Pour 500px, c'est 267%, pour 600px c'est 457% - faut y aller petit à petit Smiley confus ), comme aussi il est mieux de mettre la même opacité au début qu'à la fin pour la même raison.
C'est peut être logique. Toujours est-il que pour le moment j'ai pas encore testé avec une div à 50% de haut car si c'est vraiment fonction.... pouahhh
Et j'ai enlevé le background size, avec une taille de div fixe ça créait que des pb avec les div des Fog surtout en redimensionnant la fenêtre.

Le décalage je l'ai lu dans la doc en effet.
Je te dirai que j'ai pas testé pour le moment car j'ai joué sur les durées et les positions de départ.
Après si tu me dis que tout les navigateurs ne le supportent pas... mouai. Je cru voir que animate était bien supporté pourtant ???

Et dernière question, c'est gourmant en ressource ces mouvements d'images ? faut peut être que je pense à ne pas les mettre pour les téléphones et/ou tablettes
Modifié par Astaryne (25 May 2021 - 23:41)
Modérateur
Bonjour,

pour la gourmandise en ressources, je ne saurais te dire, nos ordinateurs, mobiles et navigateurs d' aujourd'hui ont du mal a être saturés.

Pour le background-position, si tu ne souhaite pas te servir des pourcentages avec un background-size pour accorder ses deux là, alors utilise dans le positionnement la hauteur de l'image X fois de façon a ce que la hauteur de l'image et son décalage puissent s'accorder au pixel prés, pour monter ce sera des valeurs négatives.

Pour les 'décallages' , cela semble en effet fonctionné partout, sauf , par exemple, sur ma TV connecté android qui embarque une version de chrome apparemment limité que je n'arrive pas à mettre à jour (pas de grid ni de flex non plus) mais je ne suis surement pas représentatif de ton public Smiley cligne

Cdt
Modifié par gcyrillus (26 May 2021 - 13:13)
Bonsoir,

c'est sur qu'aujourd'hui y a même des mobiles qui vont plus vites que des pc Smiley lol
Je pense que je vais faire quand même les images et le css pour des résolutions < 1000px, ça divisera déjà par 2 au moins la taille des fichiers et peut être les ressources. 2000px, je suis allé un peu large pour la majorité des pc.

Pour le background position, je vais regardé ça. Tout comme je vais jeter un œil plus poussé sur tes autres propositions quand j'aurai un peu plus de temps. La c'était juste du bonus pour lui faire plaisir Smiley ravi Heureusement que c'est un ami Smiley cligne

En tout cas merci pour ton aide. J'avais jamais utilisé animate avant (pas besoin) ça été très instructif.

Et non ta TV connecté android n'est pas représentative ! Smiley lol Le public c'est des chercheurs - déjà que le mien il n'arrive même pas à redimensionner une image... mais il n'est pas représentatif non plus Smiley biggrin

Cdt
Seb
Modifié par Astaryne (26 May 2021 - 23:47)
Sujet clos
Aller à