Changer couleur positionnement de la souris

Bonjour,

Je recherche à reproduire l'effet présent sur ce site, un changement de dégradé de couleur sur l'élément.
Je ne sais pas si c'est envisageable en CSS, aucun problème pour au passage de la souris changer la couleur, appliquer un filtre, transparence etc... mais alors obtenir ce type d'effet c'est pas évident

http://mindie.co

Merci pour votre aide.
Cordialemement

Bonsoir,

Regardes le code source

.truc {
  Des propriétés...
  background: linear-gradient(#ff4549, #fc3aa2);
  D'autres propriétés...
}

Ne reste plus qu'à te documenter

Oui mais cette ligne de code va juste me permettre de réaliser un dégradé, au lieu que mon backgroud soit bleu il tendra du bleu au rouge.

Le code source ne donne pas d'indication sur l'effet souhaité, changement de dégradé en fonction du positionnement de la souris.

merci

Re,

Ma faute, j'ai lu un peu vite et sur iPad l'effet est inopérant (ou j'ai raté un truc)
Il te faut regarder du côté des codes JavaScript alors

De ce côté là, je pense, mais je suis loin d'être un expert :

function t(n) {
                    var t,
                    r;
                    0 > n ? (t = a(e[1][0], e[0][0], - n), r = a(e[1][1], e[0][1], - n))  : (t = a(e[2][0], e[1][0], n), r = a(e[2][1], e[1][1], n)),
                    document.documentElement.style.background = 'linear-gradient(#' + t + ', #' + r + ')'
                }

Quelques pointures trainent sur le forum et sauront certainement, mieux que moi, te venir en aide et t'expliquer ce script si besoin

Je ne pense pas que l'on puisse faire cela uniquement en CSS (capture de la position de la souris notamment...)

Bon courage.

Merci pour les renseignements j'ai bien lu le fichier java http://www.mindie.co/dist/js/index.js

je ne sais pas s'il est possible de dupliquer ce code et de l'appeler pour le header de ma page wordpress

mercide ton, temps

Bonjour et bienvenue sur le forum, wejustpixel

wejustpixel a écrit :
Merci pour les renseignements j'ai bien lu le fichier java

Attention, Java n'est pas la même chose que Javascript. Deux langages qui n'ont rien à voir :

Quelqu'un ? a écrit :
In Fact, Java is to JavaScript as ham is to hamster.

wejustpixel a écrit :
je ne sais pas s'il est possible de dupliquer ce code et de l'appeler pour le header de ma page wordpress

Dupliquer ce code s'en regarder comment il marche et le coller dans ton contexte, oui tu peux essayer, tu as a peu près zéro chances sur 1000 pour qu'il se passe quoi que ce soit (à part des erreurs dans la console du navigateur ^^). Ça ne vas pas marcher magiquement dans un contexte probablement totalement différent Il va obligatoirement falloir regarder de plus près comment ça fonctionne et le refaire pour ton cas à toi

Donc, comme je te l'avais dit dans une discussion sur une autre communauté, il faut grosso modo utiliser JS pour récupérer la position du curseur et s'en servir pour faire un calcul qui fera varier le gradient CSS3 sur une plage de couleurs. Par contre, cela nécessite forcément un peu de connaissances JS et CSS3. Si tu peux/veux, tu peux t'attaquer un premier jet sur jsFiddle et Codepen, comme ça nous aurons quelque chose sous la main pour pouvoir t'aider

salut,
ça sera une véritable gymnastique d'essayer de comprendre ce code précisément car il est passé par Closure Compiler. Tu peux déjà le rendre un peu plus lisible en suivant ce lien.
Si non le principe a été grosso modo évoqué par audrasjb à cela près qu'il faudra choisir une méthode de calcul sur une plage de couleurs prédéfinie en passant par "parseInt" pour les calculs hexadécimaux.
Il n'y a rien d'extraordinaire je pense.

Hello,

+1@audrasjb et Zelalsan
@Zelalsan, Firebug se débrouille plutôt bien aussi pour rendre plus lisible les codes minifiés

@wejustpixel, juste se questionner sur l'intérêt/besoin réel d'un tel effet

Bon, dû à un mauvais timing de réveil et pour ne pas laisser un saut du lit à 5h du mat improductif, j'ai pondu un exemple.
Y'a des repères en haut juste pour indiquer les couleurs choisies mais tu comprendras qu'ils sont à enlever par la suite.
J'ai préféré utilisé les couleurs RGB pour mieux visualiser les calculs. Il ne te reste qu'à générer les gradients en fonction des couleurs données.

@6l20> je ne l'ai jamais remarqué. Disons que c'est plus simple d'avoir du code JS dans son IDE directement