Django сайт вау. js и анимировать. css не работает - PullRequest
Новая
       31

Django сайт вау. js и анимировать. css не работает

0 голосов
/ 19 июня 2020

Я получил анимацию. css, чтобы работать нормально, но когда я импортировал wow. js в свою папку stati c, он не работал на прокрутке или просто в целом. Часть анимации работает только без класса "wow".
Поскольку мой веб-сайт построен с использованием django, я не уверен, имеет ли это какое-либо отношение к этому. Вот код, который включает файлы анимации и wow. 

<link rel="stylesheet" href="{% static 'css/animate.css' %}">

это единственный, который работает: 

<div class="container">
    <h1 class="animate__animated animate__bounce" style="color:black;">An animated element</h1>

все они не работают, и я не знаю что я делаю неправильно: 

    </div>
    <div class="container">
    <h1 class="wow animate__bounce" style="color:black;">An animated element</h1>
    </div>
    <div class="container">
    <h1 class="wow bounce" style="color:black;">An animated element</h1>
    </div>
    <div class="wow bounce">
    <h1 class="wow bounce" style="color:black;">An animated element</h1> 
    </div>

I have these loaded in as well:

    <script language="javascript" type="text/javascript" src="{% static 'js/wow.min.js' %}"></script>
    <script>new WOW().init();</script>

Прикрепленное изображение моей иерархии папок

Вау. js не работает везде, где я помещаю контейнеры на страницу . Весь этот код находится в моей базе. html папка (см. Прикрепленное изображение)

Это мой журнал консоли: 

[19/Jun/2020 17:46:10] "GET /favicon.ico HTTP/1.1" 404 4547
[19/Jun/2020 17:46:20] "GET / HTTP/1.1" 200 7917
[19/Jun/2020 17:46:20] "GET /static/css/master.css HTTP/1.1" 200 
1631
[19/Jun/2020 17:46:20] "GET /static/css/animate.css HTTP/1.1" 200 
95376
[19/Jun/2020 17:46:20] "GET /static/css/blog.css HTTP/1.1" 200 506
[19/Jun/2020 17:46:20] "GET /static/js/wow.min.js HTTP/1.1" 200 8155
[19/Jun/2020 17:46:20] "GET /media/blog_pic/markus-spiske- 
qjnAnF0jIGk-unsplash.jpg HTTP/1.1" 200 634265
[19/Jun/2020 17:46:20] "GET /media/blog_pic/IMG_4779_1s6meGH.jpg 
HTTP/1.1" 200 829413
[19/Jun/2020 17:46:20] "GET /media/blog_pic/kelly-sikkema- 
lJrTJHzQjOs-unsplash.jpg HTTP/1.1" 200 162152
[19/Jun/2020 17:46:20] "GET /static/pictures/linkedin-logo.png 
HTTP/1.1" 200 3346
Not Found: /favicon.ico
[19/Jun/2020 17:46:21] "GET /favicon.ico HTTP/1.1" 404 4547

На моем веб-сайте они находятся ниже с другой информацией (я не включал, так как это было бы слишком беспорядочно в этой теме), но даже не анимируется, когда в них есть класс "вау" или нет.
Если кто-нибудь может помочь, дайте мне знать. Спасибо

1 Ответ

0 голосов
/ 04 сентября 2020

Я не мог работать с версиями CDN, пока не наткнулся на недавнее видео на YouTube.

Обходной путь - загрузить мастер wow и извлечь его в папку stati c вашего проекта . 

<!-- CSS -->
<!-- Animate  local static CSS -->
<link rel="stylesheet" href="{% static 'WOW-master/css/libs/animate.css' %}" >

<!-- JS -->
<!-- LOCAL STATIC WOW JS -->
<script src="{% static 'WOW-master/dist/wow.min.js' %}" ></script>

У меня это работает, по крайней мере, сейчас.

Видео на YouTube: https://www.youtube.com/watch?v=fM1WKHW7k8I&feature=youtu.be

...