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
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