Stellar.js не работает

Question

Я пытаюсь использовать Stellar.js для создания простого параллакса с двумя элементами тега изображения, но он не работает. Я пробовал несколько различных конфигураций. Теперь у меня есть буквально копия вставных скриптов Stellar.js собственного автора (применяется к моим собственным элементам html и css).

Я определил размеры изображений в пикселях, установил их в абсолютное и относительное позиционирование, добавил атрибут data-stellar-background-ratio, объявил все сценарии для jQuery и Stellar и искал везде решение, но ничего работает. Я новичок в jQuery, но из каждого учебника, который я могу найти, я понимаю, что это должно быть просто, но он отказывается делать что-либо. Это очень расстраивает.

Может кто-нибудь, пожалуйста, скажите мне, что я делаю неправильно. Я скопировал фрагменты кода ниже:

<img src="images/header_Splash.png" width="886" height="478" alt="" id="headerSplash" data-stellar-background-ratio="1.25"/> 

Это один из образов я пытаюсь применить параллакс эффект.

</footer> 

    <script src="jquery.min.js"></script> 
    <script src="jquery.stellar.min.js"></script> 
    <script src="script.pre.js"></script> 

Эти ссылки сценариев в нижней части моего HTML только перед </html>.

$(function(){ 
$.stellar({ 
    horizontalScrolling: false, 
    verticalOffset: 200 
}); 

Это файл script.pre.js, что я скопировал из кода Stellar.js учебник сайта http://markdalgleish.com/examples/mobileparallax/index.pre.html

Ноу Есть много вещей, которые я могу переключаться с Stellar.js, но мое понимание что для простого эффекта это все, что нужно.

Что мне здесь не хватает?

Answer 1

Похоже, что вы хотите использовать атрибут данных звездного соотношения вместо данных звездного фон соотношение на теге изображения.

данных звездного фона соотношение следует использовать для элементов, которые имеют стиль фона изображения применяется к элементу, такие как DIV.

Пример: div { background-image: url ("/ img/круги.png"); }

В этом случае изображение должно рассматриваться как элемент для прокрутки, а не фоновое изображение.

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

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