11499 sujets

JavaScript, DOM et API Web HTML5

Bonjour,

J'utilise le code ci dessous pour faire une rotation (rotateX) sur ma div en fonction du scroll. Et ça marche très bien.

Je voudrais faire la meme chose mais avec l' Alpha de la div.

Je ne vois pas trop comment écrire le css. Car ça doit etre entre 0 et 1, et si je comprend bien le js, mon "+top+" va etre entre 0 et 2000.

J'ai essayé de faire la meme chose en divisant top par 10k pour avoir toujours quelque chose entre 0 et 1 mais cela ne marche pas.

Une idée ?

j'ai essayé de faire comme ça : '-webkit-transform':'alpha('+top/10000+')',.... Mais cela ne fait rien.

$(document).ready(function() {

//scroll

$(window).scroll(function(e) {

var top = $(document).scrollTop();

var wHeight = Math.max(2000,$(window).height());

var actPage = Math.floor((top+(wHeight/2))/wHeight);

//page1 anim

if (actPage == 0) {

$('.headline .accroche').css({'-webkit-transform':'rotateX('+top/5+'deg)','-moz-transform':'rotateX('+top/5+'deg)','-o-transform':'rotateX('+top/5+'deg)','-ms-transform':'rotateX('+top/5+'deg)','transform':'rotateX('+top/5+'deg)'});

}

});

});

Merci
Il s'agit plutot d'opacity que d'alpha.

Enfait, je crois que ça marche si je l'écris comme ça :

$('.texte2').css({'opacity':''+top/10000+''});


Mon probleme c'est que l'opacité va evoluer entre 0 et 0.2, alors que je voudrais qu'au max elle soit à
La c'est plutot peut etre juste une formule à appliquer sur mon top/10000 pour le multiplier par 5 non ?

Si quelqu'un peut me dire comment l'écrire correctement en js.

Merci