Discussion :

[Fredovsky]

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 !

[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

[RomainVALERI]

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

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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

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

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

[asagtoth]

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

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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

[Fredovsky]

Merci ça fonctionne impek !

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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');	
}

[asagtoth]

nickel

[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