Почему не работает анимация wow.js и animate.css?

Question

Анимация должна работать только когда до нее доскролишь. А она вообще не работает.

.box {
    width: 100px;
    height: 100px;
    background-color: red;
    margin: 0 auto;
    margin-top: 50px;
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.0.0/animate.min.css"/>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    
   <p><!--Здесь очень длинный текст  --></p>
  
   <div class="box wow  animate__flipInX"></div>
   
   
   
    <script src="https://raw.githubusercontent.com/graingert/WOW/master/dist/wow.min.js"></script>
    <script>
      new WOW().init();
    </script>
</body>
</html>

Answer 1

Суть проблемы

Если заглянуть в консоль, то там будет сообщение:

Refused to execute script from 'https://raw.githubusercontent.com/graingert/WOW/master/dist/wow.min.js' because its MIME type ('text/plain') is not executable, and strict MIME type checking is enabled.

C 2011-го года github (пост в блоге) отадёт заголовок X-Content-Type-Options: nosniff, который заставляет современные браузеры делать проверку типа контента в соответсвии с укзанным в заголовках.

Решение

Оригинал

Неплохой практикой является использования сервиса jsDelivr

Формат ссылки: https://cdn.jsdelivr.net/gh/<Пользователь>/<Репозиторий>@<Бранч/версия>/<Файл>

Т.е. в данном случае ссылка будет выглядеть так: https://cdn.jsdelivr.net/gh/graingert/[email protected]/dist/wow.min.js

1.3.0 - это последний релиз на момент ответа

БЛОГ НА HUSL

Почему не работает анимация wow.js и animate.css?

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

Суть проблемы

Решение