Scroll en Y sans raison

Question

julienldt

14 Oct 2020 à 12:20

Bonjour à tous !

J'ai un problème concernant l'affichage de ma page web, j'ai développé hier un slider avec une petite animation en page d'accueil, tout allait bien. Mais lorsque j'essais de créer la suite de la page, un scroll en Y s'active alors que le nouvel élément ne prend pas la largeur de l'écran du tout.. J'ai déjà essayé de régler les width, max-width ainsi que les box-sizing mais rien n'y fait je n'arrive pas à corriger le problème !

Voici ma page HTML, le bloc "homepage-presentation" contient le slider d'accueil et "projects-presentation" est le nouveau bloc qui pose problème (Il y a aussi pas mal de JQuery mais je ne pense pas que le problème vienne de la) :


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Title</title>
    <link rel="stylesheet" href="assets/css/style.css">
</head>
<body>

<div class="navigation-menu">
    <p>Hello World</p>
</div>

<div id="navigation-menu-button">
    <span></span>
    <span></span>
</div>

<div class="homepage-presentation">
    <div class="images-slider">
        <div class="images-list">
            <img src="assets/img/2.JPG">
            <img src="assets/img/1.JPG">
            <img src="assets/img/3.jpg">
            <img src="assets/img/4.JPG">
            <img src="assets/img/5.JPG">
        </div>
        <div class="slider-canvas"></div>
    </div>
    <div class="homepage-title">
        <div class="animation animation-5 text-outer" delayAnimation="4000">
            <div class="text-inner">
                <h1>Mathis Dubost</h1>
            </div>
        </div>
        <div class="animation animation-5 text-outer" delayAnimation="4400">
            <div class="text-inner">
                <p>Art of living</p>
            </div>
        </div>
    </div>
</div>

<div class="projects-presentation">
    <div class="project-display">
        <div>
            <img src="assets/img/4.JPG" alt="thorax mecanique"/>
        </div>
    </div>
</div>

<script src="assets/js/jquery-3.5.1.min.js"></script>

<script>
    /* Images Slider Animation */
    let slider = $('.images-slider');
    let sliderCanvas = $('.slider-canvas');
    let sliderImages = $('.images-list img');

    let currentImage = 0;
    sliderImages.each(function(i) {
        if(i !== currentImage) $(this).css('display', 'none');
    })

    let first = true;

    let startImagesLoop = function(delay, infinite = true, numberOfLoops = 1, currentLoop = -1) {
        if(!first) {
            let nextImage = currentImage + 1 >= sliderImages.length ? 0 : currentImage + 1;
            $(sliderImages[nextImage]).css('display', 'block');
            $(sliderImages[currentImage]).css('display', 'none');
            currentImage = nextImage;
        } else first = false;

        $(sliderImages[currentImage]).addClass('scaleAnimation');
        currentLoop = currentLoop === -1 ? 1 : currentLoop;

        setTimeout(function () {
            if(currentImage >= sliderImages.length - 1 && !infinite) {
                if(currentLoop >= numberOfLoops) return;
                currentLoop++;
            }
            startImagesLoop(delay, infinite, numberOfLoops, currentLoop);
        }, delay);
    }

    console.log((slider.height()));
    sliderCanvas.css('border', (slider.height() / 4) + 'px solid #F2E5D7');
    sliderCanvas.animate({
        borderWidth: "0"
    }, 4000)
    setTimeout(function() {
        sliderCanvas.css('top', '0');
        sliderCanvas.css('bottom', '0');
        sliderCanvas.css('left', '0');
        sliderCanvas.css('right', '0');
        sliderCanvas.addClass('shadowPulse');
    },4000)
    startImagesLoop(150, false, 5);
</script>

<script>
    /* Image Deformation */
    let viewportWidth = $(window).width();
    let viewportHeight = $(window).height();
    let midViewportHeight = viewportHeight / 2;
    let midViewportWidth = viewportWidth / 2;
    let currentMousePos = { x: -1, y: -1 };
    let maxDeg = 5;

    $(window).resize(function() {
        viewportWidth = $(window).width();
        viewportHeight = $(window).height();
        midViewportHeight = viewportHeight / 2;
        midViewportWidth = viewportWidth / 2;
    });

    $(document).mousemove(function(event) {
        currentMousePos.x = event.pageX;
        currentMousePos.y = event.pageY;
        updateImageDeformation();
    });

    let F = function(x) {
        return x * (viewportHeight / viewportWidth);
    }

    let Fb = function(x) {
        return viewportHeight - F(x);
    }

    let C = function() {
        if(currentMousePos.y < midViewportHeight) return maxDeg - (currentMousePos.y / (midViewportHeight / maxDeg));
        else return - (currentMousePos.y - midViewportHeight) / (midViewportHeight / maxDeg);
    }

    let T = function() {
        if(currentMousePos.x < midViewportWidth) return maxDeg - (currentMousePos.x / (midViewportWidth / maxDeg));
        else return - (currentMousePos.x - midViewportWidth) / (midViewportWidth / maxDeg);
    }

    let updateImageDeformation = function() {
        let deg;
        if(currentMousePos.y > F(currentMousePos.x) && currentMousePos.y > Fb(currentMousePos.x)) deg = - T();
        else if(currentMousePos.y < F(currentMousePos.x) && currentMousePos.y < Fb(currentMousePos.x)) deg = T();
        else if(currentMousePos.y < F(currentMousePos.x) && currentMousePos.y > Fb(currentMousePos.x)) deg = - C();
        else deg = C();
        slider.css('transform', 'skew(' + deg + 'deg, 0deg)');
    }
</script>


<script>
    /* Animation when element is visible */
    let $animation_elements = $('.animation');
    let $window = $(window);

    function check_if_in_view() {
        let window_height = $window.height();
        let window_top_position = $window.scrollTop();
        let window_bottom_position = (window_top_position + window_height);

        $.each($animation_elements, function() {
            let $element = $(this);
            let element_height = $element.outerHeight();
            let element_top_position = $element.offset().top;
            let element_bottom_position = (element_top_position + element_height);

            //check to see if this current container is within viewport
            if ((element_bottom_position - 20 >= window_top_position) &&
                (element_top_position + 20 <= window_bottom_position)) {
                if($element.attr('delayAnimation') !== null) {
                    setTimeout(function() {
                        $element.addClass('active');
                    }, $element.attr('delayAnimation'));
                } else $element.addClass('active');
            } else {
                $element.removeClass('active');
            }
        });
    }

    $window.on('scroll resize', check_if_in_view);
    $window.trigger('scroll');
</script>

<script>
    /* Navigation menu */
    let btnNav = $('#navigation-menu-button');
    let isOpen = false;

    btnNav.click(function() {
        if(!isOpen) {
            $(this).find('span').each(function(i) {
                if(i === 1) {
                    $(this).css('transform', 'rotate(45deg)')
                    $(this).css('width', '30px')
                    $(this).css('margin-top', '-1px')

                } else {
                    $(this).css('transform', 'rotate(-45deg)')
                    $(this).css('width', '30px')

                }
            })
        } else {
            $(this).find('span').each(function(i) {
                if(i === 1) {
                    $(this).css('transform', 'rotate(0)')
                    $(this).css('width', '25px')
                    $(this).css('margin-top', '6px')

                } else {
                    $(this).css('transform', 'rotate(0)')
                    $(this).css('width', '40px')

                }
            })
        }
        isOpen = !isOpen;
    })

</script>

</body>
</html>

Et voici mon fichier CSS :


@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@400;500;700;900&family=Shadows+Into+Light&display=swap');

* {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}

html {
    width: 100vw;
    height: 100vh;
}

body {
    width: 100%;
    max-width: 100vw;
    height: 100%;
    max-height: 100vh;
    box-sizing: border-box;
}

#navigation-menu-button {
    padding: 10px;
    position: fixed;
    z-index: 10;
    cursor: pointer;
    right: 0;
    top: calc(50% - 8px);
    display: flex;
    flex-direction: column;
    align-items: flex-end;
}

#navigation-menu-button span {
    background-color: #363537;
    height: 1px;
    width: 40px;
    transition: all 0.3s;
    border-radius: 1px;
}

#navigation-menu-button span:last-child {
    width: 25px;
    margin-top: 6px;
}

.navigation-menu {
    position: fixed;
    top: 0;
    right: 0;
    width: 0;
}

.homepage-presentation {
    width: 100vw;
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #F2E5D7;
}

.images-slider {
    background-color: #F2E5D7;
    height: 50%;
    width: 60%;
    box-sizing: border-box;
    position: relative;
    background-size: 100%;
    border: none;
    background-position: center;
}

.slider-canvas {
    position: absolute;
    top: -1px;
    bottom: -1px;
    right: -1px;
    left: -1px;
}

.images-slider .images-list {
    width: 100%;
    height: 100%;
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
}

.images-list img {
    width: 100%;
}

.homepage-title {
    position: absolute;
    margin-left: auto;
    margin-right: auto;
    left: 0;
    right: 0;
    text-align: center;
    border-top: 2px solid #fff;
    border-bottom: 2px solid #fff;
}

.homepage-title h1 {
    font-family: 'Playfair Display', sans-serif;
    color: #fff;
    font-weight: 400;
    font-size: 6rem;
}

.homepage-title p {
    font-family: 'Shadows Into Light', cursive, sans-serif;
    color: #fff;
    font-weight: 400;
    font-size: 2rem;
}

.projects-presentation {
    width: 40%;
    height: 100vh;
    box-sizing: border-box;
}

.project-display {
    width: 100%;
}

.project-display img {
    width: 100%;
}

.shadowPulse {
    /* animation-name: shadowPulse; */
    animation-duration: 0.3s;
    animation-iteration-count: 1;
    animation-timing-function: linear;
    animation-fill-mode:forwards;
}

@keyframes shadowPulse {
    0% {
        -webkit-box-shadow: 0 0 0 0 rgba(0,0,0,0.83);
        -moz-box-shadow: 0 0 0 0 rgba(0,0,0,0.83);
        box-shadow: 0 0 0 0 rgba(0,0,0,0.83);
    }

    100% {
        -webkit-box-shadow: 0 3px 18px -7px rgba(0,0,0,0.83);
        -moz-box-shadow: 0 3px 18px -7px rgba(0,0,0,0.83);
        box-shadow: 0 3px 18px -7px ;
    }
}

.scaleAnimation {
    animation-name: imageScaleAnimation;
    animation-duration: 30s;
    animation-iteration-count: 1;
    animation-timing-function: linear;
    animation-fill-mode:forwards;
}

@keyframes imageScaleAnimation {
    0% {
        width: 100%;
        /* transform: scale(1); */
    }

    100% {
        width: 120%;
        /* transform: scale(1.1); */
    }
}

/*
*  ANIMATIONS
*/

.text-outer {
    display: block;
    overflow: hidden;
}

.text-inner {
    transform: translateY(100%);
    display: block;
    transition: transform 1s cubic-bezier(.165,.84,.44,1);
}

.animation-4 {
    color: rgba(0, 0, 255, 0);
    font-size: 3rem;
    font-family: 'Roboto Slab', sans-serif;
}

.animation-4-letter {
    color: black;
    animation-duration: 0.3s;
    animation-name: slidein;
}

.animation-1 {
    opacity: 0;
    transform: translateY(100%);
    transition-timing-function: ease-in;
    transition: 0.2s;
}

.active.animation-1 {
    transition: 0.2s;
    transition-timing-function: ease-out;
    transform: translateY(0);
    opacity: 1;
}

.animation-2 {
    opacity: 0;
    transform: translateX(-100%);
    transition-timing-function: ease-in;
    transition: 0.2s;
}

.active.animation-2 {
    transition: 0.2s;
    transition-timing-function: ease-out;
    transform: translateX(0);
    opacity: 1;
}

.animation-3 {
    opacity: 0;
    transform: scale(0);
    transition: 0.2s;
}

.active.animation-3 {
    transition: 0.2s;
    transform: scale(1);
    opacity: 1;
}

.animation-5 {
    font-family: 'Roboto Slab', sans-serif;
}

.active.animation-5 .text-inner {
    transform: translateY(0);
}

.line-animation {
    height: 6px;
    width: 0;
    transition: 0.2s;
}

.active.line-animation {
    transition: 0.2s;
    width: 300px;
    background-color: #322F37;
}

J'ai mis tout le code dans le doute, désolé si ca fait beaucoup Smiley sweatdrop

J'espère que quelqu'un pourra m'aider !
Merci d'avance, Julien

parsimonhi

Modérateur

14 Oct 2020 à 18:56

Bonjour,

Il y a un scroll en hauteur (normal puisque la hauteur du contenu est plus haute que la fenêtre). Mais je ne vois aucun scroll possible en largeur (pas de scroll bar en bas de l'écran).

Peut-être n'ai-je pas compris la question ?

Amicalement,

julienldt

14 Oct 2020 à 20:02

Bonjour Parsi,

merci pour ton aide encore une fois, tu es toujours là pour aider Smiley smile

Oui tu as bien compris la question, c'est étrange que tu n'ai pas de scroll horizontal j'en ai pourtant un sur ma version locale..

Je te mets une capture d'écran, mais c'est peut être la présence d'images que j'ai en local et que tu n'as pas sur ton poste qui créer cette différence car le code est exactement le même, j'ai essayé avec plusieurs navigateurs et le problème est toujours là

Voici la capture d'écran :
https://image.noelshack.com/fichiers/2020/42/3/1602698500-bug.png

parsimonhi

Modérateur

14 Oct 2020 à 20:10

Bonjour

Quel ordi et quel navigateur ? (et vide le cache aussi)

Amicalement,
Modifié par parsimonhi (14 Oct 2020 - 20:10)

Sujet clos

CSS et mise en forme, CSS3

Scroll en Y sans raison