Comment ont-t-ils fait cet effet (vertical scroll) ?

Version imprimable

31/05/2009, 16h58
Fredovsky

Comment ont-t-ils fait cet effet (vertical scroll) ?

Bonjour !

Je souhaite faire sur mon site un effet similaire a celui présent sur ces deux sites :

http://www.virginfestival.ca/
http://www.vimeo.com/

Je parle des images sur les côtés qui bougent selon le scroll.

J'ai posté ici pensant qu'il s'agit de JS, mais pardonnez moi si c'est du CSS ou autre.

Ou puis-je trouver ce script ou similaire ?

Merci !
31/05/2009, 19h28
SpaceFrog

Non non tu as raison c'est bien du js...
Mon fillot m'a filé il y a peu un petit script gérant ce genre de déplacements, si il lit ce message... sinon il faudra attendre mardi que je retourne au boulot.
Ou bien en core regarder du coté de jquery ou scriptaculous qui propose ce genre d'animation

pour virginfestival, je confirme : c'est du jQuery ^^
Code:

1 2 3 4 5 <script language="javascript" type="text/javascript" src="_js/jquery.min.js"></script> <script language="javascript" type="text/javascript" src="_js/jquery.tweet.js"></script> <script language="javascript" type="text/javascript" src="_js/jquery.timers.js"></script> <script language="javascript" type="text/javascript" src="_js/global.js"></script> <script language="javascript" type="text/javascript" src="_js/swfobject.js"></script>
L'autre c'est mootools et peut-être une interaction avec du flash... il faudrait regarder plus en détails

Code:

<script type="text/javascript" src="/assets/js/get/25351/mootools.v1.11_jsmin,mootools_ext,land,forage,share,moo_rainbow,embed,flash.detection,swfobject.v1.5,paginator"></script>

01/06/2009, 00h47
olivierPa

Bon, perso, sur vimao, j'ai pas toujours le meme comportement
suivant le navigateur...
Par exemple, avec opera, l'image de fond est fixe,
alors que sous firefox, il y a un effet dynamique (les elements bougent).

Si tu veux seulement avoir un fond fixe lors du scrolling, tu peux le faire avec du css uniquement: tu ajoutes

background-attachment:fixed;

et c'est fait.
Sur ces 2 sites, l'effet est un peu plus complexe (et tu as en effet besoin de JS).

Olivier.
02/06/2009, 19h34
Fredovsky

Merci pour ces infos,

Je vais me pencher un peu plus sur JQuery et Scriptaculous.

Si quelqu'un à d'autres informations, ou une méthode pour obtenir cette effet je suis preneur !

A+

Fred !

en fouillant un peu le fichier global.js, j'ai trouvé cette fonction:

Code:

1
2
3
4
5
6
7
function scrollclouds() {
	$('#cloud1, #cloud2, #cloud3, #cloud4').stop();
	$('#cloud1').animate({top:-($(window).scrollTop() * .4)}, 2550, 'easeOutQuad');	
	$('#cloud2').animate({top:-($(window).scrollTop() * .5)}, 2600, 'easeOutQuad');	
	$('#cloud3').animate({top:-($(window).scrollTop() * .35)}, 2400, 'easeOutQuad');	
	$('#cloud4').animate({top:-($(window).scrollTop() * .6)}, 2650, 'easeOutQuad');	
}

associé à ça

Code:

1
2
3
4
<div id="cloud1" class="cloud"><img src="_global_images/cloudSM.gif" /></div>
        <div id="cloud2" class="cloud"><img src="_global_images/cloudLG.gif" /></div>
        <div id="cloud3" class="cloud"><img src="_global_images/cloudLG.gif" /></div>
        <div id="cloud4" class="cloud"><img src="_global_images/cloudSM.gif" /></div>

ça devrait marcher enfin reste à savoir d'où vient la fontion animate peut être Jquery

Merci ça fonctionne impek !

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
var scrolldelay;
 
jQuery.extend( jQuery.easing,
{
	easeOutQuad: function (x, t, b, c, d) {
		return -c *(t/=d)*(t-2) + b;
	}
 
});
 
$(document).ready(function(){
	if(jQuery.easing.easeOutQuad != undefined) {
		$(window).scroll(function(){ 
			window.clearTimeout(scrolldelay);
			scrolldelay = window.setTimeout(scrollclouds, 200); 
		});
	}
 
});
 
function scrollclouds() {
	$('#cloud1, #cloud2, #cloud3, #cloud4').stop();
	$('#cloud1').animate({top:-($(window).scrollTop() * .4)}, 2550, 'easeOutQuad');	
	$('#cloud2').animate({top:-($(window).scrollTop() * .5)}, 2600, 'easeOutQuad');	
	$('#cloud3').animate({top:-($(window).scrollTop() * .35)}, 2400, 'easeOutQuad');	
	$('#cloud4').animate({top:-($(window).scrollTop() * .6)}, 2650, 'easeOutQuad');	
}

03/06/2009, 21h06
asagtoth

nickel
10/06/2009, 01h50
fbouvard

Bonsoir,
Je désire aussi utiliser le même effet mais j'ai peu de connaissances et je ne trouve pas où mettre ce code pour le faire fonctionner. Vous pouvez préciser svp ?

Merci