0
저는 개발중인 사이트에 Stellar.js (http://markdalgleish.com/projects/stellar.js/)를 구현하려고합니다. 나는 시각적 스크롤링을 윈도우/바디를 사용하는 대신에 콘테이너 내부에 넣을 필요가 있음을 깨달았습니다 (뷰포트를 고려하여 iPad에서 작동하기 위해). 스크립트가 제대로 시작되지 않는 것 같습니다. 여기 div에서 Stellar.js를 시작할 수 없습니다.
내가 사이트에 설치를했습니다 구조입니다 -HTML
<header></header>
<!-- keeping this content outside of #content because of a prefixed alignment -->
<div id="content">
<section id="example" data-stellar-background-ratio="1">
<img src="example-1.png" data-stellar-ratio="2" data-stellar-offset="-25">
<img src="example-2.png" data-stellar-ratio="3" data-stellar-offset="-50">
<img src="example-3.png" data-stellar-ratio="4" data-stellar-offset="0">
</section>
</div>
CSS
#content {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
section {
background-attachment: fixed;
width: 100%;
height: 100%;
position: relative;
}
img:first-child {
position: absolute;
top: 0;
left: 300px;
}
img:nth-child(2) {
position: absolute;
z-index: 99;
top: 0;
right: 150px;
}
img:nth-child(3) {
position: absolute;
z-index: 99;
top: 0;
left: 100px;
}
자바 스크립트
$('#content').stellar({
horizontalScrolling: false
});
내가 볼 수있는 시차 이미지 내부 섹션 가져 오기 표시 : 없음,하지만 그 이외의 스크립트가 실행중인 것 같습니다. JS 오류가 없습니다.
실제로 필요한 것이 없습니다. 나는이 문제를 포기하고 수십 가지 접근법을 시도했다. –