물흐르듯 왼쪽에서 오른쪽으로 움직이는 디자인

이번에 소개해드릴 디자인은 물 흐르듯 왼쪽에서 오른쪽으로 움직이는 디자인을 소개, 공유해드리려고 합니다.

움직이는 디자인을 만들려면 애니메이션을 사용해야 합니다. 밑에는 weddinglery 홈페이지에서 사용했던 디자인을 보여드립니다.

 

왼쪽에서 오른쪽으로 흐르는 css입니다. 제 생각에는 글자로 하나로만 지정하고 움직이게 시키는 게 제일 무난한 디자인이지 않을까 싶습니다.

See the Pen Untitled by 박상훈 (@yvksigii-the-typescripter) on CodePen.

// weddinglery: 애니메이션의 이름입니다. 이는 이전에 정의한 애니메이션 이름을 참조하는 부분으로,
// 60s : 60초동안
// linear: linear는 애니메이션의 속도가 일정하게 유지된다는 것을 의미합니다. 
// infinite: 애니메이션의 반복 횟수입니다. infinite는 애니메이션이 무한히 반복된다는 것을 뜻합니다.

animation: weddinglery 60s linear infinite;


// from: 시작 위치는 화면 위쪽 밖으로 설정 (translateY(-100%)).
// to: 끝 위치는 원래 위치로 이동 (translateY(0))


@keyframes weddinglery {
  from {
    transform: translateX(0);
  }

  to {
    transform: translateX(-50%);
  }
}

오른쪽에서 왼쪽

@keyframes rightToLeft {
  from {
    transform: translateX(100%);
  }
  to {
    transform: translateX(0);
  }
}

 

위에서 아래

@keyframes topToBottom {
  from {
    transform: translateY(-100%);
  }
  to {
    transform: translateY(0);
  }
}

 

아래에서 위

@keyframes leftToRight {
  from {
    transform: translateX(-100%);
  }
  to {
    transform: translateX(0);
  }
}

 

이상 물 흐르듯 움직이는 디자인 소개를 마치겠습니다 좋은 정보가 되시길 바랍니다