Странная ошибка !doctype с плагином параллакса 'skrollr'

Итак, за последние два дня это причиняло мне много боли и горя, и я, наконец, сузил проблему, но никоим образом не близок к ее решению.

Я создаю веб-сайт с параллаксом, используя плагин Skrollr. Плагин перестанет работать в моем документе, как только появится <!doctype html>.

Я создал новый простой пример, и он все еще создает ту же ошибку.

Странно то, что на своем сайте они декларируют тот же <!doctype html>, что и я, но там он работает.

Мой код:

<!doctype html>
<html>
<head>
<meta charset="UTF-8" />
<title>Document</title>
<style>

    .section1{
        height:1000px;
        background:gray;
    }

    .section1 img {
        width:2000px;
        height:1000px;
    }

    .section2{
        width:2000px;
        height:1000px;
        background:url('background2.jpg');
        position: absolute;
    }

    .section3{
        width:2000px;
        height:1000px;
        background:url('background3.jpg');
    }

</style>
</head>
<body>

<section class="section1">
    <div style="position:absolute; background:url('background1.jpg') no-repeat; width:100%; height:1000px; background-size:cover;" data-0="top:0;" data-1200="top:350px;"></div>
</section>
<section class="section2"></section>
<section class="section3"></section>

<script src="skrollr.min.js"></script>
<script>
    var s = skrollr.init({
            edgeStrategy: 'set',
            easing: {
                WTF: Math.random,
                inverted: function(p) {
                    return 1-p;
                }
            }
        });
</script>

</body>
</html>

person Chris Till    schedule 25.07.2013    source источник
comment
в каком браузере не работает? если это IE, добавьте в голову ‹meta http-equiv=X-UA-Compatible content=IE=edge,chrome=1›, чтобы IE знал, как правильно отображать (не в режиме причуд)   -  person Louis Ricci    schedule 25.07.2013
comment
Извините, это не работает ни в одном браузере. В данный момент я разрабатываю в Chrome.   -  person Chris Till    schedule 25.07.2013
comment
Вы должны уточнить, что не работает. Видите ли вы какие-либо ошибки в консоли разработчика (F12)? Он вообще работает или совсем умер?   -  person Louis Ricci    schedule 25.07.2013
comment
Полностью мертвый без ошибок в консоли. Как будто плагина нет на сайте.   -  person Chris Till    schedule 25.07.2013
comment
@LastCoder На самом деле. Он перемещает изображение, но не одним движением. Если я прокручиваю вниз и вверх очень быстро, я вижу, что он «привязывается» к тому месту, где он был. Но это мгновенное движение, а не анимация.   -  person Chris Till    schedule 25.07.2013
comment
Просто дружеское напоминание о том, что я разместил решение ниже.   -  person Prinzhorn    schedule 26.07.2013


Ответы (2)


Вы не указали единицу измерения для значения свойства top первого ключевого кадра.

Ваш: data-0="top:0;" Правильно: data-0="top:0px;"

Когда вы опускаете DOCTYPE, браузер становится менее строгим и предполагает, что вы имеете в виду пиксели, когда вы устанавливаете top на 100 или подобное.

См. также: https://github.com/Prinzhorn/skrollr#limitations

Все числовые значения должны иметь одну и ту же единицу измерения. Невозможно анимировать от 0% до 100px. skrollr не будет жаловаться, но результаты не определены.

person Prinzhorn    schedule 25.07.2013
comment
Спасибо, я разобрался с этим прошлой ночью. Теперь все работает как во сне. Отличная работа над плагином кстати. Это, безусловно, лучший плагин параллакса. - person Chris Till; 26.07.2013

Я не могу комментировать, но у меня есть вопрос. Можете ли вы опубликовать немного HTML с вашими CSS и JS, чтобы мы могли лучше рассмотреть.

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

Сверили ли вы свой CSS/JS с их и убедились, что ничего не напутано?

person Jacques ジャック    schedule 25.07.2013
comment
Ага, я даже привязался к их сценарию! Я действительно не могу понять, почему это не работает. Итак, мой проект построен на laravel с шаблонным интерфейсом, grunt и т. Д. Было много переменных, которые могли быть фактором. Итак, я начал снова и создал 1 index.html (в моей операции), который отлично работает, если я удалю тип документа. - person Chris Till; 25.07.2013
comment
Под удалением вы имеете в виду, что вообще не объявляете об этом? Или ты имеешь в виду, что поставил что-то другое? - person Jacques ジャック; 25.07.2013
comment
Не заявляйте об этом вообще. Если я объявлю какой-либо тип документа, он сломается. Я видел другие сайты, использующие этот плагин, и они прекрасно используют doctype. - person Chris Till; 25.07.2013
comment
Сначала я подумал, что IE отображает режим Quirks из-за отсутствия объявления типа документа, но вы сказали, что используете хром для тестирования, верно? Имея это в виду, я проведу небольшое исследование и вернусь к вам. - person Jacques ジャック; 25.07.2013