Bonjour à vous,
il y a quelques jours j'ai vu une certaine animation qui me plait, mais je n'ai aucune idée de ce qu'elle est, de la manière dont elle se fait, ce qui me rend donc incapable de la reproduire sur mon site...
J'ai pris une vidéo pour vous montrer : https://youtu.be/f_k8SB1Ctsk
(Ce sont les "nothing found" qui apparaissent, ce qui m'interesse réellement est le fait que le texte se "déplace" et disparaisse, et en plus apparaissent à une position aléatoire)

Merci d'avance à vous

D accord je vais essayer ça, merci beaucoup

En effet c'est possible avec du CSS, mais sur ton site ils utilisent le JS, tu peux donc regarder la fonction searchTrash() dans la source à l'adresse http://sandwichsimulator.com/src/sandwich.js

Bon pour aller plus vite voilà le bout de code qui nous intéresse:
var position = $('#trash').position(); position.left = position.left + 100 + (Math.floor((Math.random() * 100) + 1)); position.top = position.top + (8*Math.floor((Math.random() * 10) + 1)); var offset = $("#trash").offset(); position.left = (position.left + offset.left); position.top = (position.top + 80); var span = "<span class='trash' style='opacity:0;color:red;position: absolute;top:"+position.top+"px;left:"+position.left+"px'>Nothing found</span>"; var newPosition = position.left + 40; $('body').append($(span).animate({left:newPosition+'px',opacity:'1'}, 1000).fadeOut('Slow', function() { $(".trash:hidden").remove(); }));

Tu peux essayer de coller ce bout de code sur la page du jeu dans la console JS de ton navigateur, ça fonctionne ! (pour accéder à la console : sur Chrome, FF et IE tu fais F12 puis tu cherche l'onglet "Console" et Ctrl+Shift+I sur Opéra)

Comment ça marche ?
- Eh bien tout d'abord on génère les coordonnées du span qui contient le texte "Nothing found" (à l'aide de la fonction Math.random())
- Puis on crée le span avec comme position les coordonnées générées précedemment et une opacité de 0 (c'est à dire que l'élément est transparent) et on ajoute le span au body
- Ensuite, à l'aide de jQuery (je ne sais pas si tu code en JS mais regarde ici si tu ne connais pas : https://jquery.com/) on anime la propriété CSS "opacity" (on passe de 0 à 1, afin de rendre l'élément opaque) et on déplace le span de 40 pixels vers la droite
- Et à la fin on rend de nouveau l'élément transparent à l'aide d'une animation jQuery et on le supprime du DOM !

Voilà

Parfait.
T'es super sympa, merci mon ami.

Y a pas de quoi