Demande d'aide pour l'élaboration de deux idées
Maarek28
Messages postés
4
Date d'inscription
Statut
Membre
Dernière intervention
-
animostab Messages postés 2829 Date d'inscription Statut Membre Dernière intervention -
animostab Messages postés 2829 Date d'inscription Statut Membre Dernière intervention -
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
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
A voir également:
- Demande d'aide pour l'élaboration de deux idées
- Nombre de jours entre deux dates excel - Guide
- Deux ecran pc - Guide
- Comment faire deux colonnes sur word - Guide
- Deux whatsapp sur un téléphone - Guide
- Connecter deux airpods mac - Guide
2 réponses
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 :
bonne journée
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
animostab
Messages postés
2829
Date d'inscription
Statut
Membre
Dernière intervention
738
css suffit pour ca pas besoin de jquery
Maarek28
Messages postés
4
Date d'inscription
Statut
Membre
Dernière intervention
Merci infiniement pour l'utilité Fixed, si simple et si pratique =)
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.
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.
Oui tout cela me semble bien mais en fait selon ce que je peux voir, je dois déterminer une grandeur de page sur la largeur à l'avance (Ce qui n'est pas le cas pour un défilement vertical)
Et donc, je pense que ce que tu me donne ne me permet pas de dérouler vers la droite en utilisant la molette de la souris (Si oui, j'aimerais savoir quel partie du code le permet car là je ne vois pas)
En tout cas, merci si c'est le mieux que je peux obtenir du CSS/HTML ce sera parfait.
Et donc, je pense que ce que tu me donne ne me permet pas de dérouler vers la droite en utilisant la molette de la souris (Si oui, j'aimerais savoir quel partie du code le permet car là je ne vois pas)
En tout cas, merci si c'est le mieux que je peux obtenir du CSS/HTML ce sera parfait.
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
et après <body> tu mets ce code
il y avait une petite erreur dans mon css je te le reposte (la les .box seront centrées en hauteur)
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;
}
