Sujet Précédent Sujet Suivant

Demande d'aide pour l'élaboration de deux idées

Fermé
Signaler
Messages postés
4
Date d'inscription
vendredi 23 mai 2014
Statut
Membre
Dernière intervention
23 mai 2014
 -
Messages postés
2829
Date d'inscription
jeudi 10 mars 2005
Statut
Membre
Dernière intervention
11 novembre 2019
 -
Bonjour à tous ,

tout d'abord, merci de lire ce message et de m'aider à réaliser mon projet. Je suis un infographiste diplômé tout récemment et même si ma formation incluait la mise en page de page web, j'avoue qu'au final, le cours laisse bien peu de place à cette portion. Et donc, pour mon portfolio web j'aimerais réalisé quelques trucs (Si possible en HTML, CSS3 uniquement car c'est tout ce que j'arrive à réellement comprendre, maitriser). Je ne vais pas tenter de tout vous expliquez avec des mots parfois difficile à trouver, je vais laisser parler les images.

Premièrement, j'aimerais réaliser un site en scrolling horizontale (Donc, lorsque l'on descend la molette de la souris, le site se déroule vers la gauche) tel que celui-ci: http://www.thehorizontalway.com/ (Dérouler vers le bas pour comprendre)

En fait, c'est exactement ce que je veux, à l'exception que j'ai une bande de navigation à gauche que j'aimerais laisser à sa position peut importe où j'ai dérouler horizontalement dans la page. Cependant, j'aimerais que ce qui se "déroule" reste derrière la bande de navigation, on peu comme cet exemple, sauf que celui-ci est à l'horizontale:
https://www.shellycooperdesign.com/ (Dérouler vers le bas pour comprendre)

Voilà, merci beaucoup pour votre aide, je crois que ce que je demande est compliqué à réaliser mais ce serait un pur cadeau de votre part de m'aider à résoudre ce problème!

Au plaisir de vous lire,

Alexandre,
Infographiste

2 réponses

Réponse 1 / 2

Salut, pour le déroulement latéral il faut utiliser jquery.

google : jquery scoll horizontal

premier lien : https://www.sitepoint.com/10-jquery-horizontal-scroll-demos-plugins/


pour le menu fix

il faut mettre dans ton css par exemple : 

#menu{ position: fixed; }



bonne journée
1
Merci
Merci

Quelques mots de remerciements seront grandement appréciés. Ajouter un commentaire

CCM 41989 internautes nous ont dit merci ce mois-ci

Signaler
Messages postés
2829
Date d'inscription
jeudi 10 mars 2005
Statut
Membre
Dernière intervention
11 novembre 2019
 707
css suffit pour ca pas besoin de jquery
Signaler
Messages postés
4
Date d'inscription
vendredi 23 mai 2014
Statut
Membre
Dernière intervention
23 mai 2014
Merci infiniement pour l'utilité Fixed, si simple et si pratique =)
Réponse 2 / 2
Messages postés
2829
Date d'inscription
jeudi 10 mars 2005
Statut
Membre
Dernière intervention
11 novembre 2019
 707
Salut

en fait le principe est le suivant

<div id="gauche"> ici ce qui est a gauche </div>
<div id="droite">
<div class="box">contenu 1</div>
<div class="box">contenu 2</div>
<div class="box">contenu 3</div>
etc...
</div>

le css

html, body {
margin:0;
padding:0;
height:100%;
}

#gauche {
position:fixed;
top:0;
left:0;
width: 200px;
height: 100%;
border:1px solid black;
background: white;
z-index:10;
opacity:0.8;
}

#droite {
position: relative;
height:100%;
width:5000px; /** a adapter selon le nombre de .box**/
margin : 100px 0 100px 210px;
z-index:1;
}

.box {
display:inline-block;
width: 300px;
height: 500px;
margin: 50px;
border:1px solid black;
}

voila le principe est a adapter selon ce que tu veux.
ca te vas ?
Un petit merci vaut mieux qu'une grande ignorance !
Donc si votre sujet est résolu une réponse avec merci c'est pas de refus.
1
Merci
Merci

Quelques mots de remerciements seront grandement appréciés. Ajouter un commentaire

CCM 41989 internautes nous ont dit merci ce mois-ci

Afficher les 6 commentaires
Signaler
Messages postés
2829
Date d'inscription
jeudi 10 mars 2005
Statut
Membre
Dernière intervention
11 novembre 2019
 707
avec le code que je t'ai donné tu rajoute ce pluging jquery pour scroller avec la molette

tu recupère le js
http://www.designedbyaturtle.co.uk/demos/horizontal-scrolling/jquery.mousewheel.min.js

tu crée un dossier que tu nomme js et que tu mets a la racine de ton site
dans ce dossier js tu mets le fichier "/jquery.mousewheel.min.js"

ensuite dans ta page dans le <head> tu mets ces 2 lignes de code 

 <script src="http://code.jquery.com/jquery-1.8.3.min.js"></script>
 <script src="js/jquery.mousewheel.min.js"></script>

et après <body> tu mets ce code 

<script>
$(document).ready(function() {
$('html, body, *').mousewheel(function(e, delta) {
this.scrollLeft -= (delta * 40);
e.preventDefault();
});
});
</script>

il y avait une petite erreur dans mon css je te le reposte (la les .box seront centrées en hauteur) 

html{
margin:0;
padding:0;
height:100%;
}

body{
margin:0;
padding:0;
height:100%;
min-height:100%;
}

#gauche {
position:fixed;
top:0;
left:0;
margin:0;
width: 200px;
height: 100%;
border-right:1px solid black;
background-color: #FFFFFF;
z-index:10;
opacity:0.8;
}

#droite {
position:absolute;
width: 300px;
height:300px;
width:5000px; /** a adapter **/
top: 50%;
margin: -150px 0 0 260px; /**la moitié de height en margin (-150px)**/
z-index:1;
}

.box {
display:inline-block;
width: 300px;
height: 300px;
border:1px solid black;
margin: 0 50px;
}
Signaler
Messages postés
4
Date d'inscription
vendredi 23 mai 2014
Statut
Membre
Dernière intervention
23 mai 2014
Magnifique! Je vais testé tout ça ce soir ou demain mais en tout cas, je pense que tu as compris ce que je voulais donc ça devrait fonctionner j'en suis sûr.

Merci vraiment.
Signaler
Messages postés
2829
Date d'inscription
jeudi 10 mars 2005
Statut
Membre
Dernière intervention
11 novembre 2019
 707
quand tu auras testé et que ca marche tu pourras mettre le sujet en résolu ;o)
Signaler
Messages postés
23187
Date d'inscription
samedi 22 octobre 2005
Statut
Modérateur
Dernière intervention
28 novembre 2021
 2 293
lut ;)
alors ça donne quoi ?
tu en es où ?
...
Signaler
Messages postés
2829
Date d'inscription
jeudi 10 mars 2005
Statut
Membre
Dernière intervention
11 novembre 2019
 707
C'est vrai tu as testé ? ca donne quoi ?
Posez votre question