Changer couleur d'arrière-plan sur le rouleau

Je veux créer un effet comme celui sur la page suivante http://readymag.com/ où la couleur d'arrière-plan change en fonction de la position de défilement, mais je n'ai aucune idée de comment y arriver et je ne peux pas comprendre leur code.Changer couleur d'arrière-plan sur le rouleau

J'ai vu quelques exemples qui changent d'une couleur à l'autre mais je ne sais pas comment le faire avec plusieurs couleurs. (Je voudrais être en mesure de spécifier chaque couleur)

Toute aide serait grandement appréciée.

Michael.

Source

2013-05-30 Michael Bole

Est-ce que vous comprenez 'sin' et 'cos'? Comprenez-vous qu'une représentation hexadécimale d'une couleur n'est encore qu'un nombre entier? À partir de ces deux concepts, vous pouvez faire pivoter les couleurs à l'infini, à n'importe quelle étape de votre choix. – crush

en plus c'est pour aider les gens avec un problème spécifique, ne pas faire leur travail .... – mercsen

Je n'ai demandé à personne de faire un travail, tout ce que je cherche est d'apprendre des ressources où je peux obtenir l'effet désiré comme je suis un peu perdu, ce n'est pas grand chose à demander. –

Voici une façon simple de le faire:

HTML

<body onscroll="scroll()"> 
    ... 
</body>

JavaScript

// HSL Colors 
var colors = [ 
    [0, 100, 50], 
    [113, 75, 25], 
    [240, 87, 40], 
    [328, 24, 40] 
], 

el = document.getElementsByTagName('body')[0], // Element to be scrolled 
length = colors.length,       // Number of colors 
height = Math.round(el.offsetHeight/length); // Height of the segment between two colors 

function scroll() { 
    var i = Math.floor(el.scrollTop/height),  // Start color index 
     d = el.scrollTop % height/height,  // Which part of the segment between start color and end color is passed 
     c1 = colors[i],       // Start color 
     c2 = colors[(i+1)%length],     // End color 
     h = c1[0] + Math.round((c2[0] - c1[0]) * d), 
     s = c1[1] + Math.round((c2[1] - c1[1]) * d), 
     l = c1[2] + Math.round((c2[2] - c1[2]) * d); 
    el.style['background-color'] = ['hsl(', h, ', ', s+'%, ', l, '%)'].join(''); 
}

Exemple de travail: http://jsbin.com/elolud/2/edit

Source

2013-05-30 20:21:12 Vadim

Merci de me répondre, Vadim. Belle approche si j'ai remarqué que cela semble être assez aléatoire, en passant par la teinte, des suggestions quant à la façon dont je pourrais obtenir plus de contrôle sur les couleurs? –

@MichaelBole J'ai mis à jour un post avec un script avec la même approche qui vous donne le contrôle sur les couleurs. – Vadim

Wow, c'est parfait, merci pour les commentaires aussi, ça m'aide à mieux comprendre car je suis plutôt novice! –

Changer couleur d'arrière-plan sur le rouleau

Répondre

Questions connexes