Проблемы с настройкой Parallax.js

Question

Я хотел бы использовать Parallax.js для проекта, но до сих пор у меня были проблемы с его воспроизведением на существующем сайте.

Вот где я зацикливаюсь:

Я хочу применить плагин к элементу, высота которого масштабируется, чтобы соответствовать содержимому внутри него, и имеет минимальную высоту 300 пикселей

Parallax.js, кажется, переопределяет это и изменяет высоту в зависимости от размера экрана. Могу ли я предотвратить это?

До сих пор я не смог ничего "увидеть". В документации упоминается, как сделать целевой div прозрачным, но мне не повезло

Пример Codepen, который я пытаюсь подражать: Простая прокрутка Parallax parallax.js

Мой Codepen: Существующий сайт, хочу добавить параллакс в #hero

CSS я использовал для достижения "простого" фиксированного эффекта BG

#hero {
background-image: url("http://pixelcog.github.io/parallax.js/img/stellar-spire-eagle-nebula-1400x900.jpg");
background-repeat: no-repeat;
background-size: cover;
background-blend-mode: overlay;
background-position: 0 0;
background-attachment: fixed;
}

Любые советы / предложения / конструктивная критика приветствуются! Уже потратил смущающее количество времени, потянув за это мои волосы.

Answer 1

Я хочу применить плагин к элементу, высота которого масштабируется, чтобы соответствовать содержимому внутри него, и имеет минимальную высоту 300 пикселей

Parallax.js, кажется, переопределяет это и изменяет высоту в зависимости от размера экрана. Могу ли я предотвратить это?

Вы пытались обернуть #hero и применяя параллакс к родителю? Так что внутренний бок оставлен в покое сценарием параллакса (при перемещении его родителем)?

Сценарии, такие как ползунки или параллакс, и т. Д. Работают, автоматизируя применение необходимых правил CSS к элементу, как вы узнали. Когда это происходит, и это вступает в конфликт с вашим CSS, избегайте борьбы и отодвиньте ваш контент от влияния правил стиля скрипта.

Другими словами, дайте сценарию обертку для работы и держите содержимое для себя подальше от жадных щупальцев сценария, которые вызывают у вас кошмары.