superbe slide animé

[tom-overside]

Bonjour,

J'ai trouvé un site avec un super slide : http://www.weblounge.be/eng/

en regardant le code source j'ai remarqué qu'il utilisait certainement 2 types de slide :
http://css-tricks.com/1695-startstop-slider/
http://css-tricks.com/examples/AnythingSlider/

J'aimerais faire de même sur un site mais je ne sais pas par quoi commencer
Mes premières tentatives n'ont rien donné de propre..

avez-vous une idée pour faire un slide dans le même style ?

[SpaceFrog]

Regarde du coté de jQuery ... ?

[tom-overside]

oui j'ai regardé jquery..

il y a dans le fichier lib.js :

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
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
 
// INDEX (ANYTHINGSLIDER)
	if($('#banner #slides aside').length>0){
		$('#banner .dots ul').remove();	
		$('#banner #slides > aside').show();
		$('#banner #slides').anythingSlider({
			width               : 1231,      //1454// Override the default CSS width
			height              : 328,      // Override the default CSS height
			expand              : false,     // If true, the entire slider will expand to fit the parent element
			resizeContents      : false,      // If true, solitary images/objects in the panel will expand to fit the viewport
			showMultiple        : false,     // Set this value to a number and it will show that many slides at once
			theme               : 'default', // Theme name - adds a class name to the base element "anythingSlider-{theme}" so the loaded theme will work.
			startPanel          : 1,         // This sets the initial panel
			changeBy            : 1,         // Amount to go forward or back when changing panels.
			hashTags            : false,      // Should links change the hashtag in the URL?
			infiniteSlides      : true,      // if false, the slider will not wrap
			enableKeyboard      : false,      // if false, keyboard arrow keys will not work for the current panel.
			buildArrows         : false,      // If true, builds the forwards and backwards buttons
			buildNavigation     : true,      // If true, builds a list of anchor links to link to each panel
			enableNavigation    : true,      // if false, navigation links will still be visible, but not clickable.
			toggleControls      : false,     // if true, slide in controls (navigation + play/stop button) on hover and slide change, hide @ other times
			appendControlsTo    : $('#banner .dots'),      // A HTML element (jQuery Object, selector or HTMLNode) to which the controls will be appended if not null
			enablePlay          : false,      // if false, the play/stop button will still be visible, but not clickable.
			autoPlay            : true,      // This turns off the entire slideshow FUNCTIONALY, not just if it starts running or not
			autoPlayLocked      : false,     // If true, user changing slides will not stop the slideshow
			startStopped        : false,     // If autoPlay is on, this can force it to start stopped
			pauseOnHover        : true,      // If true & the slideshow is active, the slideshow will pause on hover
			stopAtEnd           : false,     // If true & the slideshow is active, the slideshow will stop on the last page. This also stops the rewind effect when infiniteSlides is false.
			playRtl             : false,     // If true, the slideshow will move right-to-left
			delay               : 10000,      // How long between slideshow transitions in AutoPlay mode (in milliseconds)
			resumeDelay         : 0,     // Resume slideshow after user interaction, only if autoplayLocked is true (in milliseconds).
			animationTime       : 1000,       // How long the slideshow transition takes (in milliseconds)
			easing              : "easeInOutExpo",   // Anything other than "linear" or "swing" requires the easing plugin
			maxOverallWidth     : 32766,     // Max width (in pixels) of combined sliders (side-to-side); set to 32766 to prevent problems with Opera			
			onSlideBegin        : function(event, slider){
				if(slider.$targetPage.text().indexOf("Site does matter")!= -1){
					$('#banner #boy').delay(1000).show().animate({left:346,opacity:1}, 1000, "easeOutExpo");
				}else if(slider.$currentPage.text().indexOf("Site does matter")!= -1){
					$('#banner #boy').animate({left:600,opacity:0}, 1000, "easeOutExpo", function(){
						$(this).hide();
					});
				}
			}
		});
		$('#banner #slides').anythingSliderFx({
			inFx : {
				'.slide1 h2' : { left : '0px', duration: 800, easing : 'easeOutExpo' },
				'.slide1 h3' : { left : '0px', duration: 1200, easing : 'easeOutExpo' },
				'.slide2 h2' : { left : '0px', duration: 800, easing : 'easeOutExpo' },
				'.slide2 h3' : { left : '0px', duration: 1000, easing : 'easeOutExpo' },
				'.slide2 figure' : { top : '0px', duration: 1200, easing : 'easeOutExpo' },
				'.slide3 h2' : { left : '0px', duration: 800, easing : 'easeOutExpo' },
				'.slide3 figure' : { top : '0px', duration: 1000, easing : 'easeOutExpo' },
				'.slide3 h3' : { top : '0px', duration: 1200, easing : 'easeOutExpo' }
			},
			outFx : {
				'.slide1 h2' : { left : '1231px', duration: 1200, easing : 'easeOutExpo' },
				'.slide1 h3' : { left : '1231px', duration: 800, easing : 'easeOutExpo' },
				'.slide2 h2' : { left : '1231px', duration: 1200, easing : 'easeOutExpo' },
				'.slide2 h3' : { left : '1231px', duration: 1000, easing : 'easeOutExpo' },
				'.slide2 figure' : { top : '328px', duration: 800, easing : 'easeOutExpo' },
				'.slide3 h2' : { left : '1231px', duration: 1200, easing : 'easeOutExpo' },
				'.slide3 figure' : { top : '328px', duration: 1000, easing : 'easeOutExpo' },
				'.slide3 h3' : { top : '328px', duration: 800, easing : 'easeOutExpo' }
			}
		});
		$("#banner .previous a").click(function(){
			$('#banner #slides').data('AnythingSlider').goBack(true);
			return false;
		});
		$("#banner .next a").click(function(){
			$('#banner #slides').data('AnythingSlider').goForward(true);
			return false;
		});
	}

c'est ici qu'est gérée l'animation et le slide..
mais je ne comprend toujours pas pourquoi mon slide ne fonctionne pas..
plus précisément les liens back et next dirigent vers une page inexistante..

html :

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
28
<section  id="banner">
      <div id="slider">
	        <div id="slides">
		        <aside class="slide1">
			        <h2><a href="/webdesign/" title="Webdesign">Texte blabla</a></h2>
			        <h3><a href="/webdesign/" title="Website design">Site does matter</a></h3>
		        </aside>
				<aside class="slide2" style="display:none">
			        <aside>
			        <h2><a href="/webdesign/" title="Webdesign &amp; webdevelopment">We <span>design</span> Websites*</a></h2>
			        <h3>Easy to use, easy to update
			        <span>*Html5 &amp; Css3, Flash, Shops,<br>for iphone, ipad, android ...</span></h3>
			        </aside>
			        <figure><img src="/images/photo_slider2.png" alt="Webdesign ontwerp"></figure>
		        </aside>
		        <aside class="slide3" style="display:none">
			        <aside>
			        <h2><a href="/graphic-design.php" title="Graphic design">We create <span>high quality</span> designs*</a></h2>
			        </aside>
			        <figure><img src="/images/photo_slider3.png" alt="Grafisch ontwerp"></figure>
			        <h3>*<br>Logos<br>Brochures, Flyers,<br>Adverts, <br>Business cards<br>Photography,<br>and more!</h3>
		        </aside>
	        </div>
	        <div class="previous"><a href="/?foto=3"><img src="images/arrow_left.png" alt="Previous"></a></div><div class="next"><a href="/?foto=2"><img src="images/arrow_right.png" alt="Next"></a></div>	        
    	</div>   	
    	<figure id="boy"><img src="/images/photo_boy.png" alt="Site does matter"></figure>   
 
</section >

[NoSmoking]

pas trop regardé mais on trouve

Code :

buildArrows  : false,    // If true, builds the forwards and backwards buttons

il suffit peut être de mettre à true ??