(3D)Dev Deep Dive/Frontend origin

[HTML+CSS] 텍스트 슬라이드 기능(가로/세로)

728x90

일단 저장해두면 굉장히 좋은 곳에 쓸 것 같은 기능이라 가져와 보았습니다

코드를 뜯어보면 동적인 애니메이션 관련 코드들에 대해 알 수 있기에

굉장히 의미있는 코드들이라고 생각합니다

seroSlide.html

<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title></title>
    <link rel="stylesheet" href="seroSlide.css">
  </head>
  <body>
    <div class ="animated-text">
      <div class="line">Welcome to Coda</div>
      <div class="line">Let's play</div>
      <div class="line">programming</div>
      <div class="line">with HTML/CSS</div>
    </div>
  </body>
</html>

seroSlide.css

body{
  margin: 0;
  padding: 0;
  font-family: montserrat, sans-serif;
  background: black;
}

.animated-text{
  color: #fff;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: #2980b9;
  padding: 0 40px;
  height: 60px;
  overflow: hidden;
}

.line{
  text-transform: uppercase;
  text-align: center;
  font-size: 40px;
  line-height: 60px;
}

.line:first-child{
  animation: anim 12s infinite;
}

@keyframes anim {
  0%{
    margin-top : 0;
  }
  16%{
    margin-top : -60px;
  }
  33%{
    margin-top : -120px;
  }
  50%{
    margin-top : -180px;
  }
  66%{
    margin-top : -120px;
  }
  82%{
    margin-top : -60px;
  }
  100%{
    margin-top : 0;
  }
}

garoSlide.html

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <title></title>
  <link rel="stylesheet" href="garoSlide.css">
</head>
<div class="animated-title">
  <div class="track">
    <div class="content">
      &nbsp;지금은 1이지만
      &nbsp;이제는 2지만
      &nbsp;지금은 3이고
      &nbsp;이제는 4지만
      &nbsp;이따가는 5지만
      &nbsp;6이지만 곧 1번
    </div>
  </div>
</div>

</html>

garoSlide.css

.animated-title {
  font-size: 60px;
  font-family: 'Raleway', Sans-serif;
  font-weight: 300;
  position: relative;
  width: 100%;
  max-width: 100%;
  height: auto;
  padding: 100px 0;
  overflow-x: hidden;
  overflow-y: hidden;
}

.animated-title .track {
  position: absolute;
  white-space: nowrap;
  will-change: transform;
  animation: marquee 60s linear infinite;
}

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

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

@media (hover: hover) and (min-width: 700px) {
  .animated-title .content {
    -webkit-transform: translateY(calc(100% - 8rem));
    transform: translateY(calc(100% - 8rem));
  }
}

코드 출처

세로로 흐르는 텍스트 기능 출처

가로로 흐르는 텍스트 기능 출처

[HTML & CSS] 가로로 흐르는 텍스트 만들기

쇼핑몰, 사이트 내 가로로 흐르는 전광판 텍스트 만들기 최근 트렌디한 웹사이트에서 볼 수 있는 가로로 흐르는 전광판의 역할을 하는 텍스트를 CSS 만으로 만들 수 있는 방법을 소개해드립니다.

dbreblog.com

728x90

저작자표시 비영리 변경금지

'(3D)Dev Deep Dive > Frontend origin' 카테고리의 다른 글

[시각화] D3를 이용하여 간단한 노드관계 만들어보기 (0)	2023.07.10
[문득 떠오른 건데] 밥먹고 졸릴때 리팩토링 요소를 탐색하면 잠이 깰까? - 2편 (0)	2023.05.02
[문득 떠오른 건데] 밥먹고 졸릴때 동적 컴포넌트를 만들면 잠이 깰까? - 1편 (2)	2023.04.22
[HTML+CSS] Copang 반응형 헤더 만들기(검색창/로고/부가메뉴) (0)	2022.11.21
[HTML] 회원가입 양식 (0)	2022.11.21

Contents

새소식

인기 검색어

[HTML+CSS] 텍스트 슬라이드 기능(가로/세로)

'(3D)Dev Deep Dive > Frontend origin' 카테고리의 다른 글

당신이 좋아할만한 콘텐츠

티스토리툴바