[CSS] 움직이는 하늘 배경 만들기 (linear-gradient, background-position, keyframes animation + pointer-events )

 

 

나무 가득한 화면을 만들어보고 싶다는 생각이 문득 들어서, 가지고 있던 어두운 나무 png파일을 이용하여 숲을 조성(?)했다. 그런데 그냥 하늘을 하자니 너무 심심한 것 같아서, gradient를 준 background에 애니메이션을 추가하면 어두운 하늘, 밝은 하늘 등을 나타낼 수 있지 않을까하는 생각에 적용해봤더니 의외로 괜찮은 것 같았다.

 

 

구현된 모습

 

 

 

 

 

 

 

 

How-To

위와 같이 배경에 애니메이션을 주는 것의 요지는 아래 두가지이다:

1. 배경을 오버 사이즈로 크게 만든다.

2. 화면에 나오는 배경 부분을 keyframes를 통해 바꿔준다.

 

즉, 우리 눈에 보이는 뷰 사이즈보다 크게 만든 배경의 다른 부분들을 천천히 움직이면서 집중 조명(?)해주는 방식이라고 생각하면 된다.

 

 

CSS

<section> 태그 하나가 화면을 가득 채우게 만든다. 그리고, background 프로퍼티에 linear-gradient() 값을 적용한다. 아래 코드엔, -45도로 기울어진 그래디언트를 4가지 컬러로 만들었다. 나름 어두운 밤 색깔, 밝은 낮 색깔, 이른 아침 색깔 등으로 한건데 그다지 차이가 크게 나진 않는 것 같다. (흑흑)

 

background-size를 400% 400%으로 해주는 것 또한 중요하다. 색깔이 4개라서 400으로 했다. 100%로 지정하면, 4가지 색깔이 모두 들어간 그래디언트를 한 화면에서 볼 수 있다. 100%로 한 채 linear-gradient()의 각도 값을 바꿔가면서 원하는 모양을 찾는 것도 좋다.

 

animation 프로퍼티에 backgroundChange라고 이름지은 애니메이션을 걸어준다.

 

backgroundChange는 진행 순서에 따라 background-position을 바꾸도록 작성되어 있다. background-position이 바로 위에서 말한 집중 조명(?)되는 스팟이다. background-size가 100%보다 훨씬 큰 400%이라서 해당 애니메이션이 의미가 있게 된다. (만약 100%로 하면 아무 움직임이 없다)

 

section {
  width: 100vw;
  height: 100vh;
}

.section1 {
  color: #fff;
  background: linear-gradient(-45deg, #1d2c41, #B7C9D9, #4FA3F0, #22131a) ;
  background-repeat: no-repeat;
  background-size: 400% 400%;
  position: relative;
  animation: backgroundChange 20s ease-in-out infinite;
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
}

@keyframes backgroundChange {
  0% {
    background-position: 0 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0 50%;
  }
}

 

 

 

추가: 나무들 클릭되지 않게 하게

만약 화면에 구현되는 특정 앨리먼트들을 마우스로 클릭할 수 있는 대상에서 아예 빼버리고 싶다면 pointer-events 프로퍼티를 사용한다. pointer-events는 어떤 특정한 경우에 해당 앨리먼트가 포인터 이벤트의 대상이 될 수 있는지를 정해주는 프로퍼티이다.  (MDN)

.forest {
  position: absolute;
  bottom: 0;
  min-width: 100%;
  pointer-events: none;
}