1
skrollr 라이브러리 (https://github.com/Prinzhorn/skrollr)를 사용하여 간단하다고 생각하는 것을 만들려고합니다.이 기능을 사용하면 맨 위 속성이 트리거 될 때 (상단이 하단 뷰포트보다 25px 위에있는 경우) 불투명도는 0이되며, 사용자가 아래로 스크롤하면 요소의 아래쪽이 하단 뷰포트보다 25px 위에 오면 불투명도가 1로 증가합니다.Skrollr 및 상대 모드가 작동하지 않습니다.
그러나 html 파일을로드하면 콘솔에서 모든 요소가 skrollable-after 또는 skrollable-between으로 표시됩니다. 이는 나중에 두 요소 (적어도 뷰포트가 나중에 두 요소를 모호하게 함). 마지막 요소는 실제로는 뷰포트의 아래쪽에있을 때까지 스크롤 가능한 것으로 명시되어 있습니다.
다양한 애셋을로드 할 때 문제가 될 수 있다고 생각했지만 s.refresh()는 (적어도 내가 사용하는 방식대로) 변경하지 않았습니다.
HTML은 다음과 같습니다. skrollr.js는 Github (0.6.11)의 최신 소스 파일입니다.
모든 안내가 크게 감사하겠습니다.
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="style.css">
<script type="text/javascript" src="skrollr.js"></script>
</head>
<body>
<div class="column"><p>Column 1</p>
</div>
<div class="column"><p>Column 2</p>
<div class="imp-text-one" data--25-bottom-top="opacity: 0;" data--25-bottom-bottom="opacity: 1">This is important text</div>
<div class="placeholder"></div>
<div class="imp-text-two" data--25-bottom-top="opacity: 0;" data--25-bottom-bottom="opacity: 1">This is also important text</div>
<div class="placeholder"></div>
<div class="imp-text-three" data--25-bottom-top="opacity: 0;" data--25-bottom-bottom:"opacity: 1">
This is VERY important text</div>
</div>
<script type="text/javascript">
s = skrollr.init();
</script>
<script>
window.onload = function(){
s.refresh();
}
</script>
</body>
</html>
CSS는 다음과 같습니다 :
는.column {
width: 50%;
float: left;
}
body {
margin: 0;
padding: 0;
}
.imp-text-one {
padding: 50px 10px 50px 10px;
border-style: solid;
}
.imp-text-two {
padding: 50px 10px 50px 10px;
border-style: solid;
}
.placeholder {
height: 400px;
}
.imp-text-three {
padding: 50px 10px 50px 10px;
border-style: solid;
}
응답 해 주셔서 감사합니다. 기술적으로 내가 다시 만들고 싶은 효과는 http://www.crispymtn.com 페이지의 "You and Us : A Love Story"제목 아래에 나와 있습니다. 결과적으로, 아래쪽 뷰포트를 참조해야한다고 생각합니다. (이것이 내 질문에 잘 설명되지 않았다면 사과하십시오.) – Michael
첫 번째 요소에서 점 찍었습니다. 이 요소에 대한 데이터 특성을 제거했습니다. – Michael
DOCTYPE – Prinzhorn