11492 sujets

JavaScript, DOM et API Web HTML5

JQuery parrallax : image qui ne s'affiche pas

Problème résolu !
L'appel à la méthode 'parallax' du plugin jQuery Parallax n'était pas bon. Le tutoriel d'Alsacréations indique, aujourd'hui dimanche 21 juin 2015 :
$("élément").parallax(xPosition, adjuster, inertia, outerHeight);

Or il semblerait que la signature de la fonction ait changé dans la dernière version du plugin ('jquery.parallax-1.1.3.js') :
$("élément").parallax(xPos, speedFactor, outerHeight);
(speedFactor = intertia ; deuxième remarque : c'est l'argument adjuster qui a disparu).

Il faudrait mettre à jour le tutoriel Smiley smile

================================================================================
Bonjour à tous,

J'essaie de mettre en place un effet parallaxe de défilement sur deux sections verticales, mais je rencontre un petit problème. En effet, quand je défile (verticalement), l'image de ma première section apparaît bien, mais pas la seconde. Le conteneur des deux sections, lui, s'affiche correctement. Je vais décrire la structure de ma page au troisième paragraphe de ce message, puis je vous montrerai le code-source. J'espère que cela vous permettra de m'aider. Si ce n'est pas le cas, n'hésitez pas à me demander + d'infos Smiley smile

Pour mettre en place cet effet, j'ai suivi le tutoriel Zoom sur l'effet parallax.

Structure de ma page (du haut vers le bas)
Un élément header contenant un titre et un menu (pas écrits dans le tuto).
Un élément section (la première slide) et son élément div (le conteneur).
Un élément div (pas écrit dans le tuto, mais il permet d'indiquer à l'internaute de scroller). Ce div contient un lien, mis en display inline-block avec une hauteur particulière.
Un élément section (la deuxième slide) et son élément div (le conteneur).

Apparence
Je vous invite à jeter un coup d'oeil aux sources (juste en-dessous). J'ai évidemment supprimé (ou remplacé par des '...') les lignes que j'ai jugées inutiles pour la résolution de mon problème. Cela concerne le HTML et le CSS (ce dernier reste pourtant assez long).

HTML

<body onload = "setParallax();">
<!----------------------------------------------------------------------------------------------------------- HEADER -->
<header>
    <h1><a href = "#">...</a></h1>
    <nav>
        <a href = "#">...</a>
        <a href = "#">...</a>
        <a href = "#">...</a>
        <a href = "#">...</a>
        <a href = "#">...</a>
    </nav>
</header>

<!-------------------------------------------------------------------------------------------------------- 1st SLIDE -->
<section id = "first_slide">
    <div class = "content_container">
        <header><h2>...</h2></header>

        <section id = "...">
            <span id = "...">...</span>
            <span id = "...">...</span>
            <span id = "...">...</span>
        </section>

        <section id = "..."><h3>...</h3><div class = '...'></div>...</section>
        <section id = "..."><h3>...</h3><div class = '...'></div>...</section>
    </div>
</section>

<!--------------------------------------------------------------------------------------------------- 1st BOTTOM BAR -->
<div id = "bottom_bar">
    <a href = "#">... ?</a>
</div>

<!-------------------------------------------------------------------------------------------------------- 2nd SLIDE -->
<section id = "second_slide">
    <div class = "content_container">
        ...
    </div>
</section>

</body>


CSS

/*============================================================================================================ HEADER */
body>header:first-child {
    padding : 20px;
    margin-bottom : 50px;
    position : fixed;
    top : 0;
    right : 0;
    left : 0;
}
header>h1, header>nav {
    display : inline;
}

/*========================================================================================= SLIDE'S CONTENT CONTAINER */
.content_container {
    width : 1163px;
    margin : 0 auto;
}

/*======================================================================================================= FIRST SLIDE */
#first_slide {
    height : 1000px;
    padding-top : 150px;
    background: url("images/background.png") no-repeat fixed center 0, #F1F1F1;
}

#first_slide > header {
    margin : 0 0 25px 100px;
}

#presentation, #who_am_i, #why {
    display : inline-block;
    vertical-align : top;
}

#presentation>span {
    display : block;
    margin-bottom : 15px;
}

/*============================================================================================ BOTTOM SCROLLING BLOCK */
#bottom_bar {
    height : 5px;
    margin-top : -238px;
}
#bottom_bar>a {
    box-sizing : border-box;
    display : inline-block;
    float : right;
    margin-top : -55px;
    padding : 20px;
    width : 200px;
    height : 55px;
}

/*====================================================================================================== SECOND SLIDE */
#second_slide {
    height : 1000px;
    background: url("images/fond_projets.jpg") no-repeat fixed center 0, #F1F1F1;
}


Voilà. Encore une fois, si vous avez besoin d'informations que j'aurais oubliées, n'hésitez pas à me les demander.

Je vous remercie d'avance et vous souhaite à tous une très bonne fin de week-end.
A+ ! Smiley smile
Modifié par Nohak_ (21 Jun 2015 - 18:31)
Sujet clos
Aller à