Итак, за последние два дня это причиняло мне много боли и горя, и я, наконец, сузил проблему, но никоим образом не близок к ее решению.
Я создаю веб-сайт с параллаксом, используя плагин 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>