Sujet Précédent Sujet Suivant

Help pour création d'un slide en CSS et JS

Résolu/Fermé
valentom Messages postés 43 Date d'inscription lundi 31 août 2009 Statut Membre Dernière intervention 6 octobre 2015 - 20 févr. 2014 à 10:53
Pierrecastor Messages postés 41475 Date d'inscription mercredi 5 novembre 2003 Statut Modérateur Dernière intervention 12 mars 2025 - 21 févr. 2014 à 11:07
Bonjour à tous,

Voila je suis actuellement en train de coder mon portfolio et j'aurais voulu un effet de slide entre les différents liens de mon menu comme sur ce site :

http://static.livedemo00.template-help.com/wt_37928/#!/home

J'ai bien fouiné le code source mais je n'arrive pas à distinguer les propriétés utilisées pour faire ce slide...

Quelqu'un serait-il m'aider ?

Merci,

valentom
A voir également:

4 réponses

Réponse 1 / 4
valentom Messages postés 43 Date d'inscription lundi 31 août 2009 Statut Membre Dernière intervention 6 octobre 2015 2
21 févr. 2014 à 09:04
Personne pour me venir en aide ? :(
0
Réponse 2 / 4
Pierrecastor Messages postés 41475 Date d'inscription mercredi 5 novembre 2003 Statut Modérateur Dernière intervention 12 mars 2025 4 145
21 févr. 2014 à 09:11
Salut

Tu as plusieurs include dans le fichier scripts.js :

Je pense que c'est celui la :

http://static.livedemo00.template-help.com/wt_37928/js/content_switch.js
0
Réponse 3 / 4
valentom Messages postés 43 Date d'inscription lundi 31 août 2009 Statut Membre Dernière intervention 6 octobre 2015 2
21 févr. 2014 à 09:13
Perso, j'ai vu ce fichier la :

http://static.livedemo00.template-help.com/wt_37928/js/main.js

Dedans y'a la fonction qui modifie la position des bloques nan ?

Et je dois en faire quoi du script "content_switch.js" ?

J'ai quelque chose à modifier
0
Pierrecastor Messages postés 41475 Date d'inscription mercredi 5 novembre 2003 Statut Modérateur Dernière intervention 12 mars 2025 4 145
21 févr. 2014 à 09:39
Heu, si tu pose la question, l'utilisation de ce fichier risque de ne pas être évidente pour toi.

Ce que tu doit en faire va aussi dépendre de la façon dont est codé ton site.

J'ai trouvé un exemple de ce genre avec les codes de transition ici :

https://stackoverflow.com/questions/6124802/animate-slideshow-horizontally-on-click

http://jsfiddle.net/roXon/9dT9T/1/
0
valentom Messages postés 43 Date d'inscription lundi 31 août 2009 Statut Membre Dernière intervention 6 octobre 2015 2
21 févr. 2014 à 09:43
Merci je vais voir ça je te tiens au courant :)
0
valentom Messages postés 43 Date d'inscription lundi 31 août 2009 Statut Membre Dernière intervention 6 octobre 2015 2
21 févr. 2014 à 10:00
Cool c'est presque ce que je veux, tout ce qui me gène c'est la vitesse d'animation et les titre qui bouge.

J'ai juste de deux trois questions :

Pour les titres je dois enlever quoi pour que l'animation n'est pas lieu (je parle du titre qui monte bien sur) ?

Est ce que je peux avec ce script faire en sorte que les blocs viennent du bord de la page et qu'ils ne soit pas collés les uns aux autres ?

Que dois-je supprimer pour éviter l'auto redimensionnement ?

Merci,

Valentom
0
Pierrecastor Messages postés 41475 Date d'inscription mercredi 5 novembre 2003 Statut Modérateur Dernière intervention 12 mars 2025 4 145
21 févr. 2014 à 10:04
Pour les titres, tu supprime toute la partie "title animation".
0
valentom Messages postés 43 Date d'inscription lundi 31 août 2009 Statut Membre Dernière intervention 6 octobre 2015 2
21 févr. 2014 à 10:05
Oui je m'en douté mais je voudrais gardé la partie "BtnActive" pour que la page active se fasse remarquer, comme une surbrillance.
0
Réponse 4 / 4
valentom Messages postés 43 Date d'inscription lundi 31 août 2009 Statut Membre Dernière intervention 6 octobre 2015 2
21 févr. 2014 à 10:33
Pour l'instant mon code html ressemble à ça et je pense que j'ai mis tout les bloques comme il fallait pour que ça colle avec le Javascript mais les blocs se mettent les uns en dessous des autres... 

<!DOCTYPE html>

<html>

<head>
	
	<title>PortFolio</title>
	<LINK rel='stylesheet' type='text/css' href='./css/menu.css'>
	<LINK rel='stylesheet' type='text/css' href='./css/body.css'>
	<script src="./js/script.js"></script>
	<script src="./js/jquery-1.6.4.min.js"></script>


</head>

<body>

<div id="slider_container">
	<div id="content_slider">

		<header>
		<div id='nav'>
			<ul>
				<li>Projects</li>
				<li>Skills</li>
				<li>HOME</li>
				<li>About</li>
				<li>Contact</li>
			</ul>
		</div>
		<hr class='barre_menu'>
		</header>


		<div id="slider">
			
			<div class="box"> <!--home page-->
			
                              Premier Bloc / Page Home

			</div>
			
			<div class="box"> <!--skills page-->
					
                               Deuxième Bloc / Page Skills

			</div>
					
			<div class="box"> <!--projects page-->

			       Troisième Bloc / Page Project

			</div>
				
			<div class="box"> <!--about page-->
				
                              Quatrième Bloc / Page About

			</div>
				
			<div class="box"> <!--contacts page-->

                              Cinquième Bloc / Page Contact
					
			</div>
		</div>

	</div>
</div>

<footer>

<hr>
© Copyright , All Right Reserved


</footer>



</div>

	</body>
</html>
0
valentom Messages postés 43 Date d'inscription lundi 31 août 2009 Statut Membre Dernière intervention 6 octobre 2015 2
21 févr. 2014 à 11:06
J'ai compris le souci... ça vient de jquery, la version que j'ai téléchargé n'était pas la bonne du coup j'ai pris le script ce trouvant dans le code source c'est à dire :

<script type='text/javascript' src='http://code.jquery.com/jquery-1.6.js'></script>

Et la BAAM Magie les blocs se positionnent les uns à côté des autres :)

Maintenant y'a de la mise en page à faire ^_^

Merci encore pour ton soutien PierreCastor :)

Si jamais j'ai d'autres questions je reposterai ici.
0
Pierrecastor Messages postés 41475 Date d'inscription mercredi 5 novembre 2003 Statut Modérateur Dernière intervention 12 mars 2025 4 145
Modifié par Pierrecastor le 21/02/2014 à 11:08
Merci pour le retour, bon courage pour la suite. :-)

Tu peut passer ton topic en résolu avec le lien : "Marquer comme résolu" en haut.
0

Discussions similaires

Javascript Arrondi à 2 chiffres après la virgule
jeremy -
gravityaerox -

Bonjour,

je cherche une fonction javascript qui permettrait d'arrondir un nombre à deux chiffres après la virgule (un peu comme number_format du php), car la fonction round() ne permet d'arrondir qu'à l'unité!

Merci
Ciao

JérémyConfiguration: Windows Vista
Firefox 2.0.0.14

12 réponses