besoin d'aide parallaxe et menu par xRaiizendiablo - page 1

Bonjour j'ai besoins d'aide car j'aimerais faire un site web avec du parallaxe mais aussi une barre menu qui se déroule a gauche de la page web le problème c'est que quand j'ai mis ma bar de menu mon parallaxe a disparu et quand j'affiche le menu une partie du parallaxe ce monde pouvez vous m'aider ?

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>test projet</title>
        <link rel="stylesheet" href="style.css">
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
        <script src="jquery/parallax/parallax.min.js"></script>
        <script src="js/script.js"></script>
    </head>
    <body>
            <div class="container2">
                    <div id="sidebar">
                        <ul>
                            <li><a href="#">Acceuil</a></li>
                            <li><a href="#">Tuto</a></li>
                            <li><a href="#">Utilisateur</a></li>
                                <li><a href="#">Connexion</a></li>
                        </ul>
                    </div>
                    <div class="main-content">
                        <div class="swipe-area"></div>
                        <a href="#" data-toggle=".main-content" id="sidebar-toggle">
                            <span class="bar"></span>
                            <span class="bar"></span>
                            <span class="bar"></span>
                        </a>
                        <div class="content">
                           <!--page principal-->
                           <div class="container">
                                <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. 
                                    Rem voluptatem porro, dolores itaque ipsam non nesciunt 
                                    ea enim ipsa placeat voluptates quis officia vitae repudiandae 
                                    illum harum, maxime delectus maiores.
                                    Lorem ipsum dolor sit amet consectetur, adipisicing elit. 
                                    Rem voluptatem porro, dolores itaque ipsam non nesciunt 
                                    ea enim ipsa placeat voluptates quis officia vitae repudiandae 
                                    illum harum, maxime delectus maiores.Lorem ipsum dolor sit amet consectetur, adipisicing elit. 
                                    Rem voluptatem porro, dolores itaque ipsam non nesciunt 
                                    ea enim ipsa placeat voluptates quis officia vitae repudiandae 
                                    illum harum, maxime delectus maiores.</p>
                    
                            <div class="parallax" data-parallax="scroll" 
                            data-naturalWidth="1781" data-naturalHeight="3170" 
                             data-image-src="img/plage.jpg"></div>
                    
                        </div>
                        <div class="container">
                                <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. 
                                    Rem voluptatem porro, dolores itaque ipsam non nesciunt 
                                    ea enim ipsa placeat voluptates quis officia vitae repudiandae 
                                    illum harum, maxime delectus maiores.
                                    Lorem ipsum dolor sit amet consectetur, adipisicing elit. 
                                    Rem voluptatem porro, dolores itaque ipsam non nesciunt 
                                    ea enim ipsa placeat voluptates quis officia vitae repudiandae 
                                    illum harum, maxime delectus maiores.Lorem ipsum dolor sit amet consectetur, adipisicing elit. 
                                    Rem voluptatem porro, dolores itaque ipsam non nesciunt 
                                    ea enim ipsa placeat voluptates quis officia vitae repudiandae 
                                    illum harum, maxime delectus maiores.</p>
                    
                             
                                    </div>
                           <!--fin page principal-->
                          <div class="large"></div>
            
                          <div class="large">Pied de page</div>
                        </div>
                    </div>
                </div>

    </body>
</html>

//tollbar
$(document).ready(function() {
    $("[data-toggle]").click(function() {
      var toggle_el = $(this).data("toggle");
      $(toggle_el).toggleClass("open-sidebar");
      $('#sidebar').toggleClass('change-sidebar');
    });
       
  });

/*debut parallax*/
.container{
    max-width: 960px;
    margin: 0 auto;
    background: #f9f9f9;
    font-size: 24px;
    padding: 25px;
}
.parallax {
    min-height: 500px;
    min-width: 100%;
    position: relative;
    background: transparent;
}
/*fin parallax*/

/*debut toolbar*/
body, html {
    height: 100%;
    margin: 0;
    font-family: helvetica;
    font-weight: 100;
}
.container2 {
    position: relative;
    height: 100%;
    width: 100%;
    left: 0;
}
 
.main-content.open-sidebar {
    left: 240px;
}
#sidebar {
    position: fixed;
    z-index: 1000;
    left: -240px;
    background: #DF314D;
    width: 240px;
    height: 100%;
    box-sizing: border-box;
      -webkit-transition:  left 0.4s ease-in-out;
    -moz-transition:  left 0.4s ease-in-out;
    -ms-transition:  left 0.4s ease-in-out;
    -o-transition:  left 0.4s ease-in-out;
    transition:  left 0.4s ease-in-out;
}
.change-sidebar{
  left: 0px !important;
}
#sidebar ul {
    margin: 0;
    padding: 0;
    list-style: none;
}
#sidebar ul li {
    margin: 0;
}
#sidebar ul li a {
    padding: 15px 20px;
    font-size: 16px;
    font-weight: 100;
    color: white;
    text-decoration: none;
    display: block;
    border-bottom: 1px solid #C9223D;
    -webkit-transition:  background 0.3s ease-in-out;
    -moz-transition:  background 0.3s ease-in-out;
    -ms-transition:  background 0.3s ease-in-out;
    -o-transition:  background 0.3s ease-in-out;
    transition:  background 0.3s ease-in-out;
}
#sidebar ul li:hover a {
    background: #C9223D;
}
.main-content {
    width: 100%;
    height: 100%;
    padding: 10px;
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    position: relative;
  left: 0;
      -webkit-transition:  left 0.4s ease-in-out;
    -moz-transition:  left 0.4s ease-in-out ;
    -ms-transition:  left 0.4s ease-in-out;
    -o-transition:  left 0.4s ease-in-out;
    transition:  left 0.4s ease-in-out;
}
.main-content .content{
    box-sizing: border-box;
    -moz-box-sizing: border-box;
padding-left: 60px;
width: 100%;
}
.main-content .content h1{
    font-weight: 100;
}
.main-content .content p{
    width: 100%;
    line-height: 160%;
}
.main-content #sidebar-toggle {
    background: #DF314D;
    border-radius: 3px;
    display: block;
    position: relative;
    padding: 10px 7px;
    float: left;
}
.main-content #sidebar-toggle .bar{
     display: block;
    width: 18px;
    margin-bottom: 3px;
    height: 2px;
    background-color: #fff;
    border-radius: 1px;   
}
.main-content #sidebar-toggle .bar:last-child{
     margin-bottom: 0;   
}
.large{
  margin-top: 800px;
}

-
Edité par xRaiizendiablo 14 décembre 2018 à 20:18:54

besoin d'aide parallaxe et menu

besoin d'aide parallaxe et menu

Supprimer

Modérer

Signaler le message aux modérateurs