📌패럴렉스 스크롤 만들기 background-attachment: fixed;
안녕하세요 TriplexLab입니다.
오늘 해볼 것은 바로 패럴렉스 만들기입니다.
패럴렉스란 나눠진 페이지를 스크롤할 때 뒷 배경을
고정시켜 놔서 안 움직이게 하는 것입니다.
즉 스크롤을 하면 다음 페이지가 현재 페이지를 덮습니다.
라고 생각하시면 이해하시기 편합니다.
브라우저 호환성에 대해서 먼저 체크를 해보죠!!
Can I use... Support tables for HTML5, CSS3, etc
CSS background-attachment Method of defining how a background image is attached to a scrollable element. Values include `scroll` (default), `fixed` and `local`.
caniuse.com
실제 실습을 통해서 만든 최종 결과물입니다.
이제부터 한번 따라 해 볼까요??ㅎ
<style type="text/css">
html,body {height: 100%;}
.bg{
width: 100%;
height: 100%;
background-image:url(./img/nitish-meena-99219.jpg);
background-repeat: no-repeat;
background-position: center center;
background-size: cover;
/*이 속성을 써 줘야지만 위에 결과물을 낼수가 있습니다.*/
background-attachment: fixed;
}
.bg2{
height: 100%;
background-image:url(./img/mahkeo-222765.jpg);
background-repeat: no-repeat;
background-position: top center;
background-size: cover;
/*이 속성을 써 줘야지만 위에 결과물을 낼수가 있습니다.*/
background-attachment: fixed;
}
.bg3{
height: 100%;
background-image:url(./img/nitish-meena-111116.jpg);
background-repeat: no-repeat;
background-position: bottom center;
background-size: cover;
/*이 속성을 써 줘야지만 위에 결과물을 낼수가 있습니다.*/
background-attachment: fixed;
}
</style>
<body>
<div class="bg"></div>
<div class="bg2"></div>
<div class="bg3"></div>
</body>
bg, bg2, bg3 각각에
background-attachment: fixed; 있는데 하나씩 없는 상태에서도
스트롤 느낌을 다르게 줄 수도 있습니다.^^
예를 들어서. bg2에만그럼 스크롤 내릴 때 느낌이 다르게 느껴질 거예요^^
이걸 응용해서. bg에 다라가
<style type="text/css">
html,body {height: 100%;}
.bg{
width: 100%;
height: 100%;
background-image:url(./img/nitish-meena-99219.jpg);
background-repeat: no-repeat;
background-position: center center;
background-size: cover;
/*이 속성을 써 줘야지만 저런 결과물을 낼수가 있습니다.*/
background-attachment: fixed;
}
.bg2{
height: 100%;
background-image:url(./img/mahkeo-222765.jpg);
background-repeat: no-repeat;
background-position: top center;
background-size: cover;
}
.bg3{
height: 100%;
background-image:url(./img/nitish-meena-111116.jpg);
background-repeat: no-repeat;
background-position: bottom center;
background-size: cover;
/*이 속성을 써 줘야지만 저런 결과물을 낼수가 있습니다.*/
background-attachment: fixed;
}
</style>
<body>
<div class="bg"></div>
<div class="bg2"></div>
<div class="bg3"></div>
</body>
👉전체 소스코드
전체 소스코드를 github에도 공유합니다.😃🔥
GitHub - younhoso/younhoso
Contribute to younhoso/younhoso development by creating an account on GitHub.
github.com
👉결과) 패럴렉스 스크롤 만들기
패럴렉스 스크롤 결과
