저는 시차 사이트가 작동하는 방식과 유사한 슬라이드 지향 웹 사이트를 만들고 있습니다. 그러나 지금까지 js가 없으며, CSS도없고, 스크롤도 지연되지 않았습니다. 지금까지 js가 없기 때문입니다.텍스트의 스크롤을 금지합니다.
저는 처음 두 슬라이드를 작업 중입니다. 첫 번째 슬라이드에는 그라디언트와 투명도를 사용하는 css와 뷰포트를 덮는 그림의 영향에 사용 된 빈 섹션과 헤더 및 탐색이 맨 위에 있습니다.
두 번째 슬라이드에는 뷰포트를 덮는 다른 그림이 포함 된 모든 slide2를 나타내는 섹션과 자체 div에서 식별되고 배경색과 텍스트가있는 일부 텍스트가 있습니다.
여기에 문제가 있습니다. background-attachment와 background-position을 사용하여 배경색을 고정시킬 수있었습니다 : 화면의 왼쪽 상단, 높이 : 100 %; 폭 : 15 %; 이렇게하면 배경이 스크롤되지 않게되지만 텍스트에는 아무런 영향을 미치지 않습니다.
텍스트가 스크롤되지 않도록해야하므로 배경에서의 위치가 변경되지 않습니다. 따라서 텍스트가 배경으로 스크롤되는 대신 커튼이 상승하여 아래의 텍스트를 드러내는 것과 같습니다.
나는 위치를 고정하려고 시도했지만 슬라이드 1의 빈 섹션의 투명도 영향을 없애고 어떤 이유로 든 내가 준 Z- 인덱스를 무시하고 모든 후속 슬라이드 (이상하게도 헤더, 빈 섹션 및 슬라이드 1을 구성하는 img의 z- 인덱스를 따르십시오).
CSS로이 작업을 수행 할 수 있습니까? 나는 아직 j를 모른다. 그러나 나는 그것을 배우고 있으며, 스크롤링에 자주 사용된다는 것을 알고있다. 그래서 유일한 수정 사항이 js라면, 나는 그것을 사용하는 것에 반대하지 않습니다. 단지 그것을 atm으로 이해하지 못할 것입니다.
HTML5
<html>
<head>
</head>
<body>
<div id="headerContainer">
<div id="containerRow">
<header id="home">
<a href="#home" title="Top"><img id="logo" src="images/logo/MASKAUTONOMY.png" alt="Logo" style="height:75px; margin:25px 0px 0px 25px; padding:0;"></a>
</header>
<nav>
<ul>
<li>
<a href="#home" title="Home">HOME</a>
</li>
<li>
<a href="#about" title="More Links">ABOUT</a>
</li>
<li>
</ul>
</nav>
</div><!--End containerRow-->
</div><!--End table headerContainer-->
<section class="ribbon">
</section><!--Section left blank to make ribbon with gradient affect-->
<Section class="slide1">
<h1>Company Slogan</h1>
</section>
<section id="about" class="slide2">
<div id="slide2Text">
<h1><span>Mask</span> Autonomy</h1>
<p class="companyInfo">Some stuff
</p>
<p> some more stuff.
</p>
</div><!--End of slide2Text-->
</section>
<section id="services" class="slide3">
<ul>
<li>List of things we do
</li>
<li>More things we do
</li>
</ul>
</section><!--End of slide3-->
</body>
</html>
CSS
body {
padding: 0px;
}
#headerContainer {
height: 10vh;
width: 100%;
margin: 0px;
padding: 0px;
display: table;
position: relative;
z-index: 999;
background-color: #e1e3e9;
}
header {
display: table-cell;
}
nav {
margin: 0px;
padding: 0px;
display: table-cell;
width: 100%;
text-align: right;
white-space: nowrap;
overflow: hidden;
}
nav ul li {
margin-right: 0px;
padding-right: 25px;
display: inline-block;
*display: inline;
*zoom: 1;
font-size: 1.2vw;
font-family: arial;
}
nav ul li:last-of-type {
margin-right: 47px;
padding: 0px;
}
.ribbon {
position: relative;
height: 4vh;
width: 100%;
background-color: #e1e3e9;
z-index: 998;
}
.slide1 {
color: #e0e0e0;
height: 86vh;
background-image: url(../../Documents/DOCS/Stycorp/Website/Images/bckgrnd.jpg);
background-repeat: no-repeat;
background-attachment: fixed;
background-position: center center;
overflow-x: hidden;
margin-bottom: 0px;
padding: 0px;
position: relative;
z-index: 997;
}
.slide1 h1 {
position: relative;
top: 60%;
left: 47px;
font-size: 4vh;
}
.slide2 {
position: relative;
height: 100vh;
background: url(images/Charlotte.jpg) no-repeat center center fixed;
background-size: cover;
z-index: 989;
}
#slide2Text {
position: static;
background-color: #7d8e9e;
background-attachment: fixed;
background-position: left top;
height: 100%;
width: 15%;
text-align: center;
font-size: 2.33vh;
}
#slide2Text h1 {
position: relative;
top: 2.5%;
font-weight: normal;
text-transform: uppercase;
}
#slide2Text span {
color: #a9aba5;
font-weight: normal;
text-transform: uppercase;
}
.companyInfo {
color: #e0e0e0;
}
.slide3 {
position: relative;
z-index: 994;
height: 100vh;
}
좋아, 어쩌면이 단축되지 :
다음은 간단한 코드입니다. 죄송합니다. 슬라이드 2에서 텍스트를 가져 와서 배경 부착물 : 슬라이드 2의 고정 부분을 투명도를 어지럽히 지 않고 스크롤하면 슬라이드 1에 영향을 미치고 슬라이드 3은 슬라이드 2에서 스크롤 할 수 있습니까?