Parallax Scroll(패럴랙스 스크롤링)효과를 응용해서 구현해봤어요 !
패럴랙스 스크롤링 효과는?
- background-attachment: fixed; 로 백그라운드를 고정
- 그 위에 텍스트나 이미지 등을 올림
- 하단의 백그라운드가 올림
- 시각적으로 패럴랙스 스크롤링 효과를 준다 !
팰럴랙스 효과를 응용해서 마우스 커서주변만 밝혀주는 효과를 구현 !
위 효과의 CSS소스를 볼게요 !
.mouse__wrap {
cursor: none;
}
header, footer {
z-index: 2;
}
.mouse__text {
width: 100%;
height: 100vh;
overflow: hidden;
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
}
.mouse__text p {
font-size: 3vw;
line-height: 1.6;
z-index: 2;
}
.mouse__text p:first-child {
font-size: 2.5vw;
}
.mouse__cursor {
position: absolute;
left: 0;
top: 0;
width: 200px;
height: 200px;
border-radius: 50%;
border: 1px solid #fff;
background-color: rgba(255, 255, 255, 0.4);
background-image: url(img/mouseEffect03-min.jpg);
background-size: cover;
background-position: center center;
background-attachment: fixed;
/* 고정효과 */
z-index: 1;
}CSS 소스중 mouse__cursor 부분에서 패럴랙스효과 줬어요 !
이미지를
background-size: cover;
// 이미지를 커버로 바꾸고
background-position: center center;
// 백그라운드 포지션을 중앙에 둬서
// 기본 배경화면의 위치와 동일하게 해줍니다. letf, top : 0 ;<< 도 같은 이유로 줬어요 !
background-attachment: fixed;
// background-attachment: fixed를 통해서 화면에 고정 시키면
width, height 안에 범위엔 항상 화면이 밝게 나와요 !
script를 볼게요 !
const cursor = document.querySelector(".mouse__cursor");
const circle = cursor.getBoundingClientRect();
window.addEventListener("mousemove", e=>{
gsap.to(cursor,{
duration : 0.5 ,
left : e.pageX-circle.width/2 ,
top : e.pageY-circle.right/2
})
})이게 모지.. ? getBoundingClientRect()?
console.log(cursor.getBoundingClientRect()) 로 어떤 내용을 가지고 있는지 찍어 봤어요
// bottom: 200,
// height: 200,
// left: 0,
// right: 200,
// top: 0,
// width: 200,
// x: 0,
// y: 0,
// [[Prototype]]: DOMRect
getBoundingClientRect의 리턴값으로 이런 정보들을 가지고 있어요 리턴값들의 알아볼게요 !
메서드가 반환하는 DOMRect 객체의 width와 height 프로퍼티는
콘텐츠의 width/height뿐만 아니라 padding과 border-width도 포함합니다.
표준 박스 모델에서, 이는 엘리먼트 + padding + border-width의 width 또는 height 프로퍼티와 동일합니다.
하지만 box-sizing: border-box가 해당 엘리먼트에 설정되어 있으면 이는 width 또는 height와 직접적으로 동일합니다.
아래 이미지를 참조해서 어느 위치에 해당하는값을 반환하는지 알아 볼게요 !
그리고
window.addEventListener("mousemove", e=>{})효과로 마우스를 따라다니며 화면을 밝혀주는 효과를 구현했어요 !
이전 포스팅에서 마우스 이펙트효과 주는법을 자세히 알아봐요 !
오늘도 고생하셨어요 n_n