스크롤 화살표, 회전 배너효과

전체적으로 메인페이지를 만들 때는 내비게이션 바를 만들 때보다 더 쉬웠던 것 같다. 적용하기에 어려운 부분은 애니메이션처럼 움직이는 부분이었고 나머지는 할만했다. ✌🏻

Background Image 🖼

배경 이미지에 적용하고 싶었던 효과는 크게 두 가지였다.

☝🏻, 스크롤을 해도 고정되어 있을 것.
✌🏻, 화면에 표시되는 폰트보다 뒤에 있는 느낌으로 조금 어두울 것.

배경 이미지 고정 📌

이 부분은 구글링으로 아주 쉽게 찾을 수 있었다.

CSS

.main_1 {
  background-image: url(images/main.jpg);
  height: 100vh;
  background-size: cover;
  background-attachment: fixed;
}

• background-attachment: fixed;이 부분이 배경 화면을 고정시켜주는 부분이다.
• background-size: cover; 이것을 추가해 주어 화면의 크기에 반응하여 이미지의 사이즈가 바뀌게 했다.

배경 어둡게 만들기🕶

이미지 위에 반투명한 층을 덮어서 어두워 보이게 해보았다.

Html

<div class="img-cover"></div>

메인 쪽에 한 줄 추가 후

CSS

.img-cover {
  position: absolute;
  top: 58px;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.4);
  z-index: 1;
}

z-index로 배경 이미지보다 높은 우선순위를 지정해주고, 내비게이션 바에서 rgba를 사용한 것과 마찬가지로 반투명 효과를 주었다.

회전하는 배너 효과 🌀

Html

<div class="describeMyself">
  <ul class="descriptionList">
    <li>n Ambitious</li>
    <li>Promising</li>
    <li>Creative</li>
    <li>n Ambitious</li>
  </ul>
</div>

• 먼저 넣고자 하는 문구를 리스트로 만들어주었다.
• 첫 번째와 마지막 리스트가 같은 이유는 애니메이션의 연속성을 위해 넣어야 한다.

CSS

.describeMyself {
  margin: 14px 3px;
  display: inline-block;
  vertical-align: top;
  height: 1.5em;
  overflow: hidden;
  color:white;
  z-index: 2;
}

• height로 리스트 중 한 가지만 보이도록 범위를 지정
• overflow: hidden;를 이용해 범위를 벗어난 부분은 안 보이도록 해준다.
• z-index 배경 이미지를 덮어주는 부분과 구분해주기 위해서 추가했다.

@keyframes rolling {
  0% {
    margin-top: : 0;
  }
  33%{
      margin-top: -1.5em;
  }
  66%{
      margin-top:-3em;
  }
  100%{
      margin-top:-4.5em;
  }
}

• 구글링한 결과 keyframs를 사용하여 애니메이션 효과를 줄 수 있었다.
• 리스트 아이템이 4개이므로 4단계로 나누어서 %를 지정해주고, 해당 %마다 margin-top으로 움직일 방향과 움직일 범위를 지정해주었다.

.descriptionList {
  padding-left: 0;
  margin:0;
  animation-name: rolling;
  animation-duration: 6s;
  animation-iteration-count: infinite;
}
.descriptionList li {
  list-style: none;
  line-height: 1.5em;
  display: flex;
  justify-content: center;
  flex-wrap: nowrap;
}

• animation-name으로 rolling을 불러주고,
• animation-duration으로 한 싸이클에 6초가 걸리도록 설정했다.
• animation-iteratin-count: infinite; 무한히 반복하도록 설정한 부분.

이 부분에서 아쉬웠던 점은 리스트 아이템의 텍스트 길이에 따라 유동적으로 앞과 뒤의 텍스트와 거리 조절을 해주고 싶었는데 그건 나중에 기회가 있으면 하기로 하고 넘겼다..😅

움직이는 화살표 ⏬

이걸 만들면서 신기했던 부분은 아이콘을 따로 불러올 필요 없이 CSS만으로 간단한 도형 정도는 만들 수 있다는 점이었다.

애니메이션은 회전하는 배너 효과와 마찬가지로 keyframes를 사용하였다.

Html

<div class="arrow-down">
  <a href="#about">
    <span></span>
    <span></span>
    <span></span>
  </a>
</div>

• 넣을 화살표의 수 만큼 span을 추가해준다.
• 이 화살표를 클릭하면 바로 밑의 페이지로 이동시킬 것이므로 a태그 속에 span을 넣어준다.

CSS

.arrow-down span{
  display: block;
  width: 1.5em;
  height: 1.5em;
  border-bottom: 1px solid #fff;
  border-right: 1px solid #fff;
  transform: rotate(45deg);
  margin: -10px;
  animation: animate-arrows 2s infinite;
}

• 투명한 정사각형 상자를 만들어서 테두리를 아래와 오른쪽에만 만들어준다.
• transfomr: rotate(45deg); 시계방향으로 45도 틀어주면 아래를 향하는 화살표 모양이 된다!

@keyframes animate-arrows{
  0%{
    opacity: 0;
    transform: rotate(45deg) translate(-1.5em, -1.5em);
  }
  50%{
    opacity: 1;
  }
  100%{
    opacity: 0;
    transform: rotate(45deg) translate(1.5em, 1.5em);
  }
}

• LED의 숨쉬기모드(?) 처럼 화살표가 번쩍번쩍하는 느낌을 주기 위해 투명도를 0과 1 사이에서 왔다 갔다 하게 설정
• translate를 이용하여 화살표가 움직일 거리를 정해준다.

.arrow-down span:nth-child(1){
  animation-delay: -0.2s;
}
.arrow-down span:nth-child(2){
  animation-delay: -0.4s;
}
.arrow-down span:nth-child(3){
  animation-delay: -0.6s;
}

• 화살표가 한 번에 움직이지 않고 따로 움직이도록 딜레이를 따로 설정해주었다.

간단한 코드 몇 줄로 이런 효과를 줄 수 있어서 노력 대비 결과가 너무나도 만족스러웠다.

아무것도 참고하지 않고 혼자 만들 수는 없었을 것 같은데 다시 또 한 번 인터넷의 위대함을 느낀다..ㅋㅋ

갓글,,갓튜브 고맙습니다,,🙇🏻‍♂️

다음은 About Page를 리뷰해봐야겠다. 👋🏻