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

Fermé

Maarek28 Messages postés 4 Date d'inscription vendredi 23 mai 2014 Statut Membre Dernière intervention 23 mai 2014 - 23 mai 2014 à 14:19
animostab Messages postés 2829 Date d'inscription jeudi 10 mars 2005 Statut Membre Dernière intervention 11 novembre 2019 - 26 mai 2014 à 02:29

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

A voir également:

Demande d'aide pour l'élaboration de deux idées
Deux comptes whatsapp - Guide
Deux ecran pc - Guide
Itinéraire google map entre deux adresses - Guide
Excel fusionner deux cellules - Guide
Fusionner deux fichiers excel - Guide

2 réponses

Réponse 1 / 2

Utilisateur anonyme
23 mai 2014 à 15:22

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

animostab Messages postés 2829 Date d'inscription jeudi 10 mars 2005 Statut Membre Dernière intervention 11 novembre 2019 738
23 mai 2014 à 15:42

css suffit pour ca pas besoin de jquery

Maarek28 Messages postés 4 Date d'inscription vendredi 23 mai 2014 Statut Membre Dernière intervention 23 mai 2014
23 mai 2014 à 17:49

Merci infiniement pour l'utilité Fixed, si simple et si pratique =)

Réponse 2 / 2

animostab Messages postés 2829 Date d'inscription jeudi 10 mars 2005 Statut Membre Dernière intervention 11 novembre 2019 738
Modifié par animostab le 23/05/2014 à 15:58

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.

Maarek28 Messages postés 4 Date d'inscription vendredi 23 mai 2014 Statut Membre Dernière intervention 23 mai 2014
23 mai 2014 à 17:51

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.

animostab Messages postés 2829 Date d'inscription jeudi 10 mars 2005 Statut Membre Dernière intervention 11 novembre 2019 738
Modifié par animostab le 23/05/2014 à 20:38

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

Maarek28 Messages postés 4 Date d'inscription vendredi 23 mai 2014 Statut Membre Dernière intervention 23 mai 2014
23 mai 2014 à 21:11

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.

animostab Messages postés 2829 Date d'inscription jeudi 10 mars 2005 Statut Membre Dernière intervention 11 novembre 2019 738
24 mai 2014 à 00:15

quand tu auras testé et que ca marche tu pourras mettre le sujet en résolu ;o)

bg62 Messages postés 23590 Date d'inscription samedi 22 octobre 2005 Statut Modérateur Dernière intervention 15 avril 2024 2 362
24 mai 2014 à 11:27

lut ;)
alors ça donne quoi ?
tu en es où ?
...

Discussions similaires

Un seul de mes écouteurs marche. Que faire ?

2 comptes facebook avec même mail et même nom

Comment supprimer une conversation Messenger pour les 2 personnes ?

Un seul de mes écouteurs iPhone fonctionne. Que faire ?

Une des deux oreillettes bluetooth ne marche pas

Discussions similaires

Newsletters