Не анимируется wow.js с fullPage.js из-за позиционирования

Question

помогите, пожалуйста, не срабатывает анимация при скролле от wow.js, точнее она срабатывает сразу как загружается сайт. Я понимаю, что дело в позиционировании div'ов, но не могу понять как пересобрать сайт, чтобы wow.js и fullpage.js заработали. Помогите, пожалуйста. Я применил scrollBar: true.

html:

<body>


<div id="fullpage">
    <section class="section">

        <div class="mouse-parallax wow animate__fadeInRight">
            <h1 class="parallax-text wow animate__fadeInDown ">Перевал Дятлова
            <span class="parallax-text-p" ><br> перевал на Северном Урале между горой <span class="parallax-text-p-light" title="Холатчахль — гора на Северном Урале, на границе Республики Коми и Свердловской области, высотой 1096,7 метра над уровнем моря.">Холатчахль </span> и <span class="parallax-text-p-light" title="Безымянная высота - это ( в данном случае ) гора, которая не имеет название, но имеет установленную высоту.">безымянной </span> высотой 905,<br> стоящей несколько особняком к востоку от <span class="parallax-text-p-light" title="Главный Уральский хребет — горный хребет c высотой 1410,7 м, расположенный на территории Свердловской области и Пермского края, Россия.">Главного Уральского хребта </span>. <br>Находится на крайнем северо-западе Свердловской области в Ивдельском городском <br> округе, в 128 км северо-западнее города <span class="parallax-text-p-light" title="Ивдель — город в Свердловской области России, административный центр Ивдельского городского округа. Самый северный город области."> Ивдель</span>.</span> 
            </h1>
            <div class="mouse-parallax-sky"></div>
            <div class="mouse-parallax-rock"></div>
            <div class="mouse-parallax-camp"></div>   
        </div>

    </section>



    <section class="section">

        <div class="history-content">
            <div class="history-img"><img class="o wow animate__bounceInLeft" src="history/o.png"></div>
            <div class="history-text wow animate__bounceInLeft">Предисловие.</div>
        </div>

    </section>

    <section class="section">
        <h1>Предисловие.</h1>
        
    </section>


</div>
    
    <!-- Wow.js -->
    <script src="js/wow.min.js"></script>
              <script>
              new WOW().init();
              </script>

     <!-- js файлы плагина fullpage -->
    <script src="libs/fullpage/jquery.fullPage.min.js"></script>
     <!-- инициализация плагина fullpage -->
    <script>
        $(document).ready(function () {
          $('#fullpage').fullpage();
        });
    </script>

    <script src="js/script.js"></script>

</body>

css:

body,html{
    overflow: hidden !important;
}

/* tooltip css */
.mytooltip{
font-family: 'Roboto', sans-serif !important;
font-size: 88px !important;
color: #17181e !important;
width: 100vh !important;
border-radius: 50px !important;
}

/* parralax css */
.mouse-parallax {
    height: 100%;
}
.mouse-parallax-sky,
.mouse-parallax-rock {
    position: absolute;
    background-position: center center;
    background-repeat: no-repeat;
    width: 100%;
    height: 100%;
    transition: all 0.1s ease;  
    background-image: url("theme/rock.png");
    background-size: cover;
}
.mouse-parallax-rock {
    background-image: url("theme/sky.png");   
}
.mouse-parallax-camp {
    position: absolute;
    background-position: center center;
    background-repeat: no-repeat;
    width: 100%;
    height: 100%;
    transition: all 0.1s ease;  
    background-image: url("theme/camp.png");
    background-size: cover;   
}

.parallax-text{
    color: #23304e;
    font-family: 'Roboto', sans-serif;
    font-size: 300px;
    position: absolute;
    margin: 500px;
    line-height: 35%;
    z-index: 1;
}
.parallax-text-p{
    color: #17181e;
    font-family: 'Roboto', sans-serif;
    font-size: 88px;
    text-transform: uppercase;
}
.parallax-text-p-light{
    color: #d2691e;
    transition: all 0.5s;
}

.parallax-text-p-light:hover{
    color: #ff9900;
    transition: all 0.5s;
}



/* history css */
.history-content{
    background-color: #23304e;
    height: 100%;
}
.history-img{
    float: left;
    width: 50%;
    height: 100%;
}
.o{
    width: 2020px;
    height: 4000px;
}
.history-text{
    padding: 300px;
    width: 50%;
    height: 100%;
    color: #f4eddc;
    font-size: 120px;
    float: left;
}

js:

let sky = document.querySelector('.mouse-parallax-sky');
let rock = document.querySelector('.mouse-parallax-rock');
let camp = document.querySelector('.mouse-parallax-camp');
window.addEventListener('mousemove', function(e) {
    let x = e.clientX / window.innerWidth;
    let y = e.clientY / window.innerHeight;  
    sky.style.transform = 'translate(-' + x * 100 + 'px, -' + y * 15 + 'px)';
    rock.style.transform = 'translate(+' + x * 50 + 'px, -' + y * 15 + 'px)';
    camp.style.transform = 'translate(-' + x * 10 + 'px, -' + y * 15 + 'px)';
});

$(document).ready(function () {
    $(document). tooltip(
        {
            tooltipClass:"mytooltip",
            track:true,
        });
})

$(document).ready(function() {
    $('#fullpage').fullpage({
        scrollBar: true,
    });
});

БЛОГ НА HUSL

Не анимируется wow.js с fullPage.js из-за позиционирования

Ответы (0 шт):