이상한! parallax plugin 'doctype bug'

좋아,이 때문에 지난 2 일 동안 많은 고통과 슬픔이 생겨 결국 문제를 좁히지 만 해결 방법이 거의 없습니다.이상한! parallax plugin 'doctype bug'

나는 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>

출처

2013-07-25 Chris Till

어떤 브라우저에서 작동하지 않습니까? IE의 경우 IE가 제대로 렌더링되도록 알고 있기 때문에 머리에 을 추가하십시오 –

죄송합니다. 모든 브라우저에서 작동합니다. 지금 크롬에서 개발 중입니다. –

"작동하지 않음"에 대해 자세히 설명해야합니다. 개발자 콘솔 (F12)에 오류가 표시 되나요? 그것은 완전히 기능했거나 완전히 죽었습니까? –

첫 번째 키 프레임의 top 속성 값에 대한 단위를 지정하지 않았습니다.

너의 : data-0="top:0;" 수정은 : data-0="top:0px;"

DOCTYPE를 생략 브라우저는 덜 엄격하게하고 top에 100 또는 유사한을 설정할 때 픽셀을 의미 가정합니다.

은 참조 : https://github.com/Prinzhorn/skrollr#limitations

모든 숫자 값이 같은 장치를 가지고있다. 0 %에서 100px로 애니메이션을 적용 할 수는 없습니다. skrollr는 불평하지 않지만 결과는 정의되지 않습니다.

출처

2013-07-25 18:24:38 Prinzhorn

고마워, 어젯밤에 그걸 알아 냈어. 모든 것은 꿈처럼 지금 일합니다. 플러그인 btw에 좋은 작품. 거기까지는 최고의 시차 플러그인입니다. –

내가 말씀 드릴 수 없습니다,하지만 난 질문이 있습니다. CSS와 JS로 일부 HTML을 게시하여 더 나은 모양을 얻을 수 있습니까?

메모는 코드와 자신의 코드가 다르며, 그렇지 않은 경우 논리적으로 동작해야합니다.

CSS/JS를 확인하여 뭔가 엉망이되었는지 확인 했습니까?

출처

2013-07-25 14:41:17 Jacques

그래, 나는 심지어 그들의 스크립트에 링크 된 핫! 왜 이것이 작동하지 않는지 나는 정말로 이해할 수 없다. 그래서 내 프로젝트는 프론트 엔드의 상용구 및 꿀꺽 꿀꺽 마는 소리 같은 laravel을 기반으로합니다. 요인 일 수있는 많은 변수가있었습니다. 그래서 다시 시작해서 doctype을 제거하면 완벽하게 작동하는 index.html을 1 개 만들었습니다. –

제거하면 전혀 선언하지 않는다는 의미입니까? 아니면 뭔가 다른 것을 설정한다는 의미입니까? – Jacques

전혀 선언하지 마십시오. 내가 doctype을 선언하면 중단됩니다. 나는이 플러그인을 사용하는 다른 사이트를 보았고 Doctype을 잘 사용하고있다. –

답변

관련 문제