에러가 나요~index.html:143 Uncaught TypeError: Cannot read property 'style' of undefined
0
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
body {
overflow-x: hidden;
}
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
section.title_wrap{
position:fixed;
height:800px;
width:100%;
top:0;
left:0;
}
.coverImg{
position:absolute;
width:100%;
height:100%;
background: url(img/back.jpg) center center/cover no-repeat;
}
.cover {
position:absolute;
width:100%;
height:100%;
background-color:rgba(0, 0, 0, 0.123);
}
h1 {
position:absolute;
color:#eee;
text-align:center;
padding-top:320px;
font-size:50px;
width:100%;
}
section.textwrap{
position:relative;
width:100%;
margin-top:800px;
background-color:#fff;
padding:100px;
}
p {
color:#111;
font-size:15px;
margin-bottom:80px;
line-height: 1.9;
}
</style>
</head>
<body>
<section class="title_wrap">
<div class="coverImg"></div>
<div class="cover"></div>
<h1>title</h1>
</section>
<section class="textwrap">
<div class="inner_wrap">
<p>
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Officiis vero consequatur dolore maiores
possimus, dolores, deserunt mollitia impedit at labore quisquam odit cumque! Rerum sapiente in quo
consectetur voluptas, quod perspiciatis! Incidunt quae suscipit dolorum quaerat enim, at quas modi eius
corrupti explicabo. Ratione voluptatum tenetur voluptates quasi suscipit distinctio voluptate iusto
incidunt? Libero eveniet ipsum aperiam. Repellat ipsa ratione laborum ipsum explicabo placeat! Sapiente
itaque totam ad inventore veritatis explicabo expedita placeat, officiis repellendus! Illum, asperiores
impedit. Similique excepturi ipsam omnis rerum fugit dicta facere quisquam distinctio consequuntur, aut
sit voluptatem consectetur corporis quod nesciunt unde mollitia illo doloremque harum. Natus unde
accusamus dignissimos ducimus corrupti tempore veritatis mollitia fugiat, impedit voluptates minus est?
Debitis, maxime? Magni exercitationem atque iure, sunt quam suscipit eum consequuntur ullam unde ipsum
maxime commodi praesentium cum rem esse rerum maiores in dignissimos magnam earum dolorum odit,
perspiciatis velit. Voluptatem iure vitae obcaecati et ad voluptatibus hic, perspiciatis quaerat fuga ab
nulla dicta unde, placeat nisi exercitationem, repellat commodi provident asperiores. Ex, porro, ab
neque repudiandae autem officiis pariatur cumque eius blanditiis minus qui, obcaecati incidunt nesciunt
earum eveniet nam distinctio accusantium rerum possimus nihil facilis? Voluptatem nobis id mollitia,
modi molestias itaque autem.
</p>
<p>
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Officiis vero consequatur dolore maiores
possimus, dolores, deserunt mollitia impedit at labore quisquam odit cumque! Rerum sapiente in quo
consectetur voluptas, quod perspiciatis! Incidunt quae suscipit dolorum quaerat enim, at quas modi eius
corrupti explicabo. Ratione voluptatum tenetur voluptates quasi suscipit distinctio voluptate iusto
incidunt? Libero eveniet ipsum aperiam. Repellat ipsa ratione laborum ipsum explicabo placeat! Sapiente
itaque totam ad inventore veritatis explicabo expedita placeat, officiis repellendus! Illum, asperiores
impedit. Similique excepturi ipsam omnis rerum fugit dicta facere quisquam distinctio consequuntur, aut
sit voluptatem consectetur corporis quod nesciunt unde mollitia illo doloremque harum. Natus unde
accusamus dignissimos ducimus corrupti tempore veritatis mollitia fugiat, impedit voluptates minus est?
Debitis, maxime? Magni exercitationem atque iure, sunt quam suscipit eum consequuntur ullam unde ipsum
maxime commodi praesentium cum rem esse rerum maiores in dignissimos magnam earum dolorum odit,
perspiciatis velit. Voluptatem iure vitae obcaecati et ad voluptatibus hic, perspiciatis quaerat fuga ab
nulla dicta unde, placeat nisi exercitationem, repellat commodi provident asperiores. Ex, porro, ab
neque repudiandae autem officiis pariatur cumque eius blanditiis minus qui, obcaecati incidunt nesciunt
earum eveniet nam distinctio accusantium rerum possimus nihil facilis? Voluptatem nobis id mollitia,
modi molestias itaque autem.
</p>
<p>
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Officiis vero consequatur dolore maiores
possimus, dolores, deserunt mollitia impedit at labore quisquam odit cumque! Rerum sapiente in quo
consectetur voluptas, quod perspiciatis! Incidunt quae suscipit dolorum quaerat enim, at quas modi eius
corrupti explicabo. Ratione voluptatum tenetur voluptates quasi suscipit distinctio voluptate iusto
incidunt? Libero eveniet ipsum aperiam. Repellat ipsa ratione laborum ipsum explicabo placeat! Sapiente
itaque totam ad inventore veritatis explicabo expedita placeat, officiis repellendus! Illum, asperiores
impedit. Similique excepturi ipsam omnis rerum fugit dicta facere quisquam distinctio consequuntur, aut
sit voluptatem consectetur corporis quod nesciunt unde mollitia illo doloremque harum. Natus unde
accusamus dignissimos ducimus corrupti tempore veritatis mollitia fugiat, impedit voluptates minus est?
Debitis, maxime? Magni exercitationem atque iure, sunt quam suscipit eum consequuntur ullam unde ipsum
maxime commodi praesentium cum rem esse rerum maiores in dignissimos magnam earum dolorum odit,
perspiciatis velit. Voluptatem iure vitae obcaecati et ad voluptatibus hic, perspiciatis quaerat fuga ab
nulla dicta unde, placeat nisi exercitationem, repellat commodi provident asperiores. Ex, porro, ab
neque repudiandae autem officiis pariatur cumque eius blanditiis minus qui, obcaecati incidunt nesciunt
earum eveniet nam distinctio accusantium rerum possimus nihil facilis? Voluptatem nobis id mollitia,
modi molestias itaque autem.
</p>
</div>
</section>
<script>
let scrollTop =0;
let coverImg;
let cover;
window.onload = function(){
coverImg = document.getElementsByClassName('coverImg')[0];
cover = document.getElementsByClassName('cover')[0];
cover.style.opacity= .3;
}
window.addEventListener("scroll",function(e){
scrollTop = document.documentElement.scrollTop;
coverImg.style.backgroundPosition = "center top";
})
</script>
</body>
</html>답변 2
0
안녕하세요. 이렇게 바꿔서 테스트 해보세요~
background-image: url(이미지);
background-size: cover;
background-repeat: no-repeat;
background-position: center center;mouse position interpolation과 transition linear interpolation의 차이
0
76
1
mousemove 시 따라 다니는 커서 이미지 wheel 할 경우
0
183
2
부드러운 움직임 구현1 강의 부분 질문있습니다.
0
150
2
go live 실시간 크롬
0
324
1
javascript 도움말 vsCode 확장팩 문의!
0
366
1
블로그 상단 페럴렉스 효과 구현 질문 있습니다!
0
359
1
마우스 인터렉티브 변형 질문
0
341
1
안녕하세요. 수업 잘 듣고 있습니다. 포트폴리오 관련 질문도 가능할까요?
0
399
1
나비가 버튼위로올라가면 버튼의 hover기능이 멈춰버려요
0
347
1
perspective에 대해서
0
287
1
CSS에서 궁금했던 부분 -실전 페럴렉스 강의 부분
0
483
1
requestAnimationFrame 질문
0
365
1
리뉴얼 이전 강의 파일
0
444
1
코드가 미리보기로 보여주는 확장프로그램이 뭔가요?
0
749
1
수업 파일 부탁드립니다~
0
326
1
배경질문
0
356
1
textWrap의 position을 relative로 주는 것에 대해 질문있습니다!
0
290
1
safari에서 position fixed가 잘 동작하지 않습니다
0
984
1
addEventListener후에 익명함수 실행할때 뒤에 false는 어떤 역할을 하는건가요?
0
558
1
스피드 변수로 scrollTop을 두는 이유가 무엇인가요?
0
366
1
완성파일 어디서 받아볼 수 있나요 ?
0
436
1
완성 파일 요청 드립니다.
0
306
1
사진들이 상단 nav바를 침범하는데 침범 못하게 어떻게해야할까요?
0
156
1
리액트로 하면 어떻게 해야할지 작성해주실수있나요?
0
370
1