Может ли Джекилл поддерживать эффект параллакса? - PullRequest
Новая
       33

Может ли Джекилл поддерживать эффект параллакса?

1 голос
/ 28 октября 2019

Я создал пустой блог jekyll и включил parallax.js в CDNlink, а ссылка: (script type = "text / javascript" src = "https://cdnjs.cloudflare.com/ajax/libs/parallax/3.1.0/parallax.min.js">), но когда я запустил его в localhost, эффект перемещениято, что я импортировал, не работает. В моем приложении rails, которое я создал, оно прекрасно работает там. Также, если я разверну его на страницах GITHUB, будет ли работать параллакс? Что я должен сделать, чтобы решить эту проблему? Я загружаю на страницы github https://lazospap.github.io/LazPap/. Нужно исправить многое, но пока я не вижу изображения.

1 Ответ

1 голос
/ 28 октября 2019

ДА, эффект параллакса может работать на страницах Github.

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

Правила, которым нужно следовать

1. Ничто не может быть помещено после </body></html>
Первая ошибка, которую я вижу, состоит в том, что ничто не может быть помещено после </body></html>. Ваш файл макета содержит это: 

  </body>
</html>
<!-- Bootstrap core JavaScript -->
<script src="https://blackrockdigital.github.io/startbootstrap-creative/vendor/jquery/jquery.min.js"></script>
<script src="https://blackrockdigital.github.io/startbootstrap-creative/vendor/bootstrap/js/bootstrap.bundle.min.js"></script>

<!-- Plugin JavaScript -->
<script src="https://blackrockdigital.github.io/startbootstrap-creative/vendor/jquery-easing/jquery.easing.min.js"></script>
<script src="https://blackrockdigital.github.io/startbootstrap-creative/vendor/magnific-popup/jquery.magnific-popup.min.js"></script>

<!-- Custom scripts for this template -->
<script src="https://blackrockdigital.github.io/startbootstrap-creative/js/creative.min.js"></script>

Это должно быть: 

<!-- Bootstrap core JavaScript -->
<script src="https://blackrockdigital.github.io/startbootstrap-creative/vendor/jquery/jquery.min.js"></script>
<script src="https://blackrockdigital.github.io/startbootstrap-creative/vendor/bootstrap/js/bootstrap.bundle.min.js"></script>

<!-- Plugin JavaScript -->
<script src="https://blackrockdigital.github.io/startbootstrap-creative/vendor/jquery-easing/jquery.easing.min.js"></script>
<script src="https://blackrockdigital.github.io/startbootstrap-creative/vendor/magnific-popup/jquery.magnific-popup.min.js"></script>

<!-- Custom scripts for this template -->
<script src="https://blackrockdigital.github.io/startbootstrap-creative/js/creative.min.js"></script>

</body></html>

2. Открывайте и закрывайте тело только один раз
Вы встраиваете контент в свой макет. В вашем макете есть открытое тело и тег закрытия тела ... однако, ваш контент также имеет открытое тело и тег закрытия тела. Поэтому вы открываете и закрываете тело вашего HTML-файла дважды. Удалите его в вашем файле содержимого, и ваши настроены. Найдите <body id="page-top"> и </body> в этом файле и этот файл и удалите их.

3. Используйте макеты для (сложного) HTML и JS
Код < 150 в строке 184 ошибочно экранируется. Вероятно, это связано с тем, что вы пишете сложные HTML и JS в файле уценки. Вы можете предотвратить это, объединив HTML из «index.md» и «default.html» в файл «home.html» в каталоге макета. Ваш файл index.md должен затем ссылаться на «home» как макет, а не «по умолчанию». Вот ошибка: 

SyntaxError: missing ) after conditionLazPap:184:34

4. Вызывайте функции только после того, как они объявлены
Я знаю, что становится трудно понять, когда вы используете 'defer', но практическое правило - вызывать функцию только после того, как вы ее объявили. Параллакс - это функция, которая объявляется в строке 71 default.html : 

<script type="text/javascript"src="https://cdnjs.cloudflare.com/ajax/libs/parallax/3.1.0/parallax.min.js"></script>

Но вы вызываете функцию внутри части содержимого этого же файла в строке 38. Это неработать, и если он это делает, то это исключительно из-за оператора 'defer'.

5. Используйте baseurl
Когда вы размещаете на Github Pages, вам нужен базурл. Ссылка на ваши изображения /images/HTML_5.png. Поскольку вы размещаете на страницах Github, ваш baseurl должен быть /LazPap, поэтому ваш URL становится /LazPap/images/HTML_5.png. Подробнее о baseurl ...

Более простое решение ...

Вы начали с копии этого кода: https://blackrockdigital.github.io/startbootstrap-creative/.Самый простой способ добиться эффекта, подобного параллаксу, - добавить правило CSS JUST ONE к исходному коду: 

header.masthead {background-attachment: fixed;}

Хотя это решение, которое я бы использовал, оно, вероятно, не то, что вам нужно, так какВы специально упомянули параллакс и решение javascript.

...