Partage

Particles.js qui prend toute la taille navigateur

Sujet résolu

15 mai 2018 à 12:56:33

Bonjour,

J'ai un problème concernant mon "particles.js" que j'utilise en tant que background de mon site, mon "HOME". Je voudrais qu'il prenne la taille du navigateur entièrement et automatiquement peut importe la taille d'écran.

Donc la j'ai beau tout faire pour y arriver, il veut pas bouger d'un poil. J'ai toujours ma navbar en vue juste en dessous et je veut pas la voir étant donné que je veut qu'il prenne toute la taille du navigateur.

Que faire ?

Je vous envoie mon HTML / CSS

"particles.js" c'est sa: https://vincentgarreau.com/particles.js

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
        <title>Site Portfolio GM</title>

        <!-- BOOTSTRAP CSS -->
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.3/css/bootstrap.min.css" integrity="sha384-Zug+QiDoJOrZ5t4lssLdxGhVrurbmBWopoEl+M6BdEfwnCJZtKxi1KgxUyJq13dy" crossorigin="anonymous">

        <!-- OTHERS CSS -->
        <link href="https://fonts.googleapis.com/css?family=Oswald|Teko" rel="stylesheet">
        <link rel="stylesheet" href="css/lightbox.css">
        <link rel="stylesheet" href="css/hover.css">
        <link rel="stylesheet" href="css/style.css">
    </head>
    <body>

        <!-- HEADER -->
        <header>

            <!-- PARTICLE.JS BACKGROUND -->
            <div id="particles-js">
                <div class="ptext">
                    <p>Hello, I'm <span class="gm">Grégory Moulinneuf</span>.</p>
                    <br>
                    <p>I'm a future DIMI.</p>
                    <br>
                    <a href="#" class="btn">View my work</a>
                </div>
            </div>
            <script type="text/javascript" src="js/particles.js"></script>
            <script type="text/javascript" src="js/app.js"></script>

            <!-- NAVBAR -->
            <nav class="navbar navbar-expand-lg navbar-light bg-light">
                <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation">
                    <span class="navbar-toggler-icon"></span>
                </button>
                <div class="collapse navbar-collapse" id="navbarNavAltMarkup">
                    <div class="navbar-nav">
                        <a class="nav-item nav-link active navhome" href="#">HOME<span class="sr-only">(current)</span></a>
                        <a class="nav-item nav-link" id="Work" href="#">WORK</a>
                        <a class="nav-item nav-link" href="#">ABOUT</a>
                        <a class="nav-item nav-link" href="#">CONTACT</a>
                    </div>
                </div>
            </nav>

        </header>

        <section class"work">
            <div class="container-fluid">

                <div class="row no-padding">
                    <figure class="col-lg-6">
                        <a href="images/Work1.jpg" alt="Affiche Hip Hop 2K19" data-lightbox="work" data-title="">
                          <img class="picture" src="images/Work1.3.jpg" alt="Lil Pump" onmouseover="this.src='images/Work1.2.jpg'" onmouseout="this.src='images/Work1.3.jpg'"> 
                        </a>
                    </figure>
                </div>  

            </div>
        </section>

        <!-- OPTIONAL JavaScript -->
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
        <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.3/js/bootstrap.min.js" integrity="sha384-a5N7Y/aK3qNeh15eJKGWxsqtnX/wWdSZSKp+81YjTmS15nvnvxKHuzaWwXHDli+4" crossorigin="anonymous"></script>
        <script src="js/script.js"></script>
        <script src="js/lightbox.min.js"></script>
        <script src="js/parrs.js"></script>

    </body>
</html>

/* CSS GENERAL */

body {
    font-family: 'Teko', sans-serif;
    margin: 0;
    padding: 0;
    height: 100vh;
}

.no-padding [class^=col] {
    padding: 0;
}

/* HOME */
#particles-js {
    margin: 0;
    padding: 0;
    whidth: 100%;
    height: 100%;
    background: #343434;
}

.ptext {
    color: #ffffff;
    position: absolute;
    text-align: center;
    top: 40%;
    width: 100%;
    line-height: 0.4em;
    font-size: 60px;
}

.gm {
    color: #009c8f
}

.btn {
    color: #fff;
    text-decoration: none;
    border: #fff 1px solid;
    padding: 0 25px;
    border-radius: 10px;
    line-height: 2em;
    font-size: 30px;
}

.btn:hover {
    color: #fa5d4a;
    border: 1px solid #009c8f;
}


/* NAVBAR */
.navhome {
    margin-left: 120px;
}

.logo {
    margin-right: 20px;
    margin-left: 10px; 
    width: 65px;
    height: 55px;   
}

.navbar {
    margin: 0;
    background-color: #262626!important;
    border-bottom: 2px solid #fa5d4a;
    
}

.nav-link {
    color: #ffffff!important;
    font-size: 15px;
    padding: 0;
    margin-right: 30px;
    margin-top: 4px;
    margin-bottom: 4px;
}

.nav-link:hover{
    color: #009c8f!important;
}

/* WORK */
.work figure img {
    height: auto;
    max-width: 100%;
}

Merci de votre aide !

Je tien aussi à m’excuser car j'avais déjà posté le même problème avec mon premier compte qui a totalement bug. Mdp changé Email introuvable enfin bref je sais pas se qui ces passer.

Cordialement,

Gregory.

-
Edité par dualGCS 15 mai 2018 à 12:59:33

MrChampy

15 mai 2018 à 14:37:07

Salut,

Déjà tu as des erreurs dans ton HTML et dans ton CSS.

Ensuite, si tu veux que tes particles soient en background, pourquoi placer cette div dans le header ? Mets la donc en fin de page avant la fin de ton body, AVEC LES SCRIPTS PARCE QUE LES SCRIPTS EN MILIEU DE PAGE C'EST CACA.

dualGCS

15 mai 2018 à 17:01:44

Merci de ta réponse Champy,

Oui je sais il doit y'avoir des erreurs, je suis encore étudiant et c'est un site portfolio pour mon jury en Juin.

Du coup quelles sont les erreurs ?

Comment je fait alors avec mon "particles.js" ? Parce que en soit je veut qu'il soit que en haut de page et la navbar en dessous. du coup j'ai mis sa en haut du html dans un header c'est pas bon ?

-
Edité par dualGCS 15 mai 2018 à 17:03:15

MrChampy

15 mai 2018 à 17:10:34

Ah je pensais pas que tu voulais qu'il soit ici, du coup tu peux le laisser je pense, laisse moi regarder un peu.

Sinon il te manque un = à <section class"work"> et c'est width et non whidth.

Et place tes scripts avant la fermeture de ta balise <body>, pas juste après tes particles.

-
Edité par MrChampy 15 mai 2018 à 17:11:07

dualGCS

15 mai 2018 à 17:20:29

Ok je te remerci !

Tien je t'envoie la correction, j'ai enlevé du CSS en trop que j'avais oublié et les script en bas de page

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
        <title>Site Portfolio GM</title>

        <!-- BOOTSTRAP CSS -->
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.3/css/bootstrap.min.css" integrity="sha384-Zug+QiDoJOrZ5t4lssLdxGhVrurbmBWopoEl+M6BdEfwnCJZtKxi1KgxUyJq13dy" crossorigin="anonymous">

        <!-- OTHERS CSS -->
        <link href="https://fonts.googleapis.com/css?family=Oswald|Teko" rel="stylesheet">
        <link rel="stylesheet" href="css/lightbox.css">
        <link rel="stylesheet" href="css/hover.css">
        <link rel="stylesheet" href="css/style.css">
    </head>

    <body>

        <!-- HEADER -->
        <header>

            <!-- PARTICLE.JS BACKGROUND -->
            <div id="particles-js">
                <div class="ptext">
                    <p>Hello, I'm <span class="gm">Grégory Moulinneuf</span>.</p>
                    <br>
                    <p>I'm a future DIMI.</p>
                    <br>
                    <a href="#" class="btn">View my work</a>
                </div>
            </div>

        

        <!-- NAVBAR -->
        <nav class="navbar navbar-expand-lg navbar-light bg-light">
            <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation">
                <span class="navbar-toggler-icon"></span>
            </button>
            <div class="collapse navbar-collapse" id="navbarNavAltMarkup">
                <div class="navbar-nav">
                    <a class="nav-item nav-link active navhome" href="#">HOME<span class="sr-only">(current)</span></a>
                    <a class="nav-item nav-link" id="Work" href="#">WORK</a>
                    <a class="nav-item nav-link" href="#">ABOUT</a>
                    <a class="nav-item nav-link" href="#">CONTACT</a>
                </div>
            </div>
        </nav>
        
        </header>

        <section class="work">
            <div class="container-fluid">

                <div class="row no-padding">
                    <figure class="col-lg-6">
                        <a href="images/Work1.jpg" alt="Affiche Hip Hop 2K19" data-lightbox="work" data-title="">
                            <img class="picture" src="images/Work1.3.jpg" alt="Lil Pump" onmouseover="this.src='images/Work1.2.jpg'" onmouseout="this.src='images/Work1.3.jpg'"> 
                        </a>
                    </figure>
                </div>  

            </div>
        </section>

        <!-- OPTIONAL JavaScript -->
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
        <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.3/js/bootstrap.min.js" integrity="sha384-a5N7Y/aK3qNeh15eJKGWxsqtnX/wWdSZSKp+81YjTmS15nvnvxKHuzaWwXHDli+4" crossorigin="anonymous"></script>
        <script type="text/javascript" src="js/script.js"></script>
        <script type="text/javascript" src="js/lightbox.min.js"></script>
        <script type="text/javascript" src="js/particles.js"></script>
        <script type="text/javascript" src="js/app.js"></script>

    </body>
</html>

/* CSS GENERAL */
body {
    font-family: 'Teko', sans-serif;
    margin: 0;
    padding: 0;
    height: 100vh;
}

.no-padding [class^=col] {
    padding: 0;
}

/* HOME */
#particles-js {
    margin: 0;
    padding: 0;
    width: 100%;
    height: auto;
    background: #343434;
}

.ptext {
    color: #ffffff;
    position: absolute;
    text-align: center;
    top: 40%;
    width: 100%;
    line-height: 0.4em;
    font-size: 60px;
}

.gm {
    color: #009c8f
}

.btn {
    color: #fff;
    text-decoration: none;
    border: #fff 1px solid;
    padding: 0 25px;
    border-radius: 10px;
    line-height: 2em;
    font-size: 30px;
}

.btn:hover {
    color: #fa5d4a;
    border: 1px solid #009c8f;
}


/* NAVBAR */
.navhome {
    margin-left: 120px;
}

.navbar {
    margin: 0;
    background-color: #262626!important;
    border-bottom: 2px solid #fa5d4a;

}

.nav-link {
    color: #ffffff!important;
    font-size: 15px;
    padding: 0;
    margin-right: 30px;
    margin-top: 4px;
    margin-bottom: 4px;
}

.nav-link:hover{
    color: #009c8f!important;
}

/* WORK */
.work figure img {
    height: auto;
    max-width: 100%;
}

-
Edité par dualGCS 15 mai 2018 à 17:22:15

dualGCS

17 mai 2018 à 9:21:30

Bonjour,

j'ai toujours pas réglé mon problème quelqu'un a une solution ?

Bonne journée !

Offkors

17 mai 2018 à 11:07:00

Salut,

Un background-size:cover; sur l'élément que tu souhaites, as-tu essayé ?

Si toutefois ça ne te pose pas de problème tu peux aussi nous donner l'url de ton site pour avoir un réel aperçu des choses afin de faire des tests dans la console du navigateur.

Tiens-nous au courant !

-
Edité par Offkors 17 mai 2018 à 11:08:58

MrChampy

17 mai 2018 à 11:17:12

Re,

J'avais zappé désolé ! Aurais-tu une version en ligne comme le suggère mon VDD ? Ce serait carrément plus simple.

dualGCS

17 mai 2018 à 12:27:49

Merci de ta réponse Offkors,

Alors non mon site est en construction, il est pas en ligne encore.

"background-size: cover;" ne marche pas :'(

Je peut vous partagé mon dossier via google Drive si vous voulez

Noxon

17 mai 2018 à 12:51:05

Salut,

Sans rendu difficile de t'aider. Je ne sais pas ce que tu comptes faire avec ton header (s'il sera full-width ou pas) donc le mieux serait que tu sortes ton bloc qui porte l'ID "particles-js" et que tu le mettes dans <body>.

Ensuite, si ton script fonctionne bien, tu devrais avoir un canvas généré à l'intérieur. Il s'agit d'un container pour ce canvas... et c'est tout ! Donc il va falloir sortir tout les élements paragraphes que tu as mis dedans, et les mettre dans un autre bloc, en dessous. On pourra lui donner la classe "presentation" par exemple.

Donc ton block d'id "particles-js", on va le forcer à prendre la dimension de la fenêtre, mais on va aussi le mettre en absolute :

body {
  position: relative;
}
#particles-js {
  position: absolute;
  top: 0; 
  left: 0;
  width: 100%; 
  height: 100vh;
  z-index: -1; 
}
#particles-js > canvas {
  width: 100%;
  height: 100%;
}

Et enfin, on va faire pareil pour le contenu "presentation" (on pourra aussi éventuellement centrer le contenu à l'aide des propriétés flex)

.presentation {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  min-height: 100vh;
  width: 100%;
}

Et là normalement, on est bon.

Et veille aussi à utiliser un reset, du style "normalize.css", parce que sans ça, tu risques d'avoir des marges indésirables sur tes blocs, et sur le body.

-
Edité par Noxon 17 mai 2018 à 12:52:17

dualGCS

17 mai 2018 à 13:16:19

Bonjour Noxon !

T'est un dieu merci ! Sa marche parfaitement pour l'instant ! C'est exactement se que je voulais, merci beaucoup !

Quand il serra fini je le mettrais en ligne je vous tien au courant pour la suite si j'ai d'autre problème mais sa devrais être bon !

A bientôt !

-
Edité par dualGCS 17 mai 2018 à 13:23:46