Не работает parallax.js

Question

Всем доброго времени суток! Решил на скорую руку опробовать плагин parallax.js, но почему-то при подключении вроде бы как у всех происходит ровном счетом ничего. Возможно пропустил какую-то инициализацию плагина или что-то в этом духе сделал неверно? Так же, где-то читал что-то об фиксированной ширине и высоте блоков, но потерял эту информацию. В консоли замечу, что ошибок нету.

Вот блок, в котором нужно сделать параллакс эффект, и мое подключение самого плагина:

<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Web development</title>
  <link rel="stylesheet" href="assets/style.css">
  <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/parallax/3.1.0/parallax.min.js"></script>
</head>

/* Block */

<body>
  <div class="intro" data-parallax="scroll">
    <div class="intro__inner">
      <div class="container">
        <h1 class="intro__title">Web development project</h1>
        <h2 class="intro__suptitle">Very suitable to support all web development projects</h2>
        <div class="buttons__intro">
        <a href="" class="btn__services">Our Services</a>
        <a href="" class="btn__hire">Hire is Now</a>
        </div>
      </div>
    </div>
  </div>
<section class"section1" style="height: 950px">
<h1>Section #1<h1>
</section>
</body>

Стили блока:

body {

  margin: 0;
  font-size: 15px;
  color: #333;
  line-height: 1.6;
  font-weight: bold;
  font-style: bold;
}

.container {
  width: 100%;
  max-width: 1170px;
  margin: 0 auto;
}

/* INTRO */
.intro {
    display: flex;
    justify-content: center;
    flex-direction: column;
    width: 100%;
    height: 937px;
    max-height: 100%;
    background: url("../img/bgintro.jpg") no-repeat;
    background-size: cover;
    background-position: bottom;
    z-index: 10000;
}

.intro__inner {
  width: 100%;
  max-width: 880px;
  margin: 0 auto;
  
  text-align: center;
}

.intro__title {
  font-size: 60px;
  font-weight: 600;
  text-align: center;
  letter-spacing: 5px;

  color: #fff;
}

.intro__suptitle {
  margin-top: 10px;
  margin-bottom: 20px;
  font-size: 22px; 
  color: #ffffff;
  text-align: center;
  font-weight: 400;
}

.buttons__intro {
  padding-top: 110px;
}

.btn__services {
  display: inline-block;
  vertical-align: top;
  padding: 15px 35px;
  font-size: 20px;
    
  border: 3px solid #fff;
  color: #ffffff;
  font-family: 'Roboto' sans-serif;

  text-transform: uppercase;
  text-decoration: none;
  margin-right: 30px;
  transition: 0.3s ease;
}

.btn__hire {
  display: inline-block;
  vertical-align: top;
  padding: 18px 35px;
  font-size: 20px;
  background-color: #00897b;
    
  border: 1px #00897b;
  color: #ffffff;
  font-family: 'Roboto' sans-serif;

  text-transform: uppercase;
  text-decoration: none;
  transition: background-color 0.1s linear;
}

Всем, кто сможет помочь огромное спасибо! :) Я в этом деле новенький еще, поэтому могу чего-то не понимать.

Answer 1

Перемести подключение скриптов в самый низ перед закрывающим тегом body и всё заработает. Сперва надо подключать jquery, затем parallax.

БЛОГ НА HUSL

Не работает parallax.js

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