animation 으로 놀기 - Tilt.js 자기 소개-

14049 단어 CSSanimation
CSS animation day 57이 되었습니다.
지난번 다음으로 오늘도 Tilt.js를 터치합니다.

hover 그러면 문자가 떠오르는 자기 소개 Card를 만들어 봅시다.

1. 완성판



See the Pen Hello! My name is ... by hiroya iizuka ( @ 히로야 요시즈카 )
on CodePen .


2. 참고문헌



3D Tilt Hover Effects

3D Box | Tilt Effect using hover3d.js | CSS - JavaScript Tutorial

Tilt.js 공식 DOC



3. 분해해 본다



❶.

마크업하자.




index.html

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="UTF-8" />
    <link rel="stylesheet" href="css/styles.css" />
  </head>
  <body>
    <div class="container">
      <div
        class="background"
        data-tilt
        data-tilt-scale="1.1"
        data-tilt-max="30"
        data-tilt-speed="400"
        data-tilt-perspective="500"
        data-tilt-glare
        data-tilt-max-glare="0.3"
      >
        <div class="card"></div>
      </div>
    </div>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/vanilla-tilt/1.6.1/vanilla-tilt.js"></script>
  </body>
</html>




styles.scss

body {
  margin: 0;
  padding: 0;
  background: #fff;
}

.container {
  position: relative;
  width: 100%;
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
}

.background {
  width: 300px;
  height: 350px;
  background: url("../img/duka.png");
  background-size: 100% 100%;
  transform-style: preserve-3d;
  transform: perspective(500px);
}





이미지를 Hover하면 음, 움직이게 되었습니다.

덧붙여 이쪽은, 스피카 아야카씨( @spicagraph )에 작성해 주셨습니다. 귀엽네요.



프로필을 올립니다.




index.html

    <div class="card">
          <div class="content">
            <p>My name is</p>
            <h2>Hiroya Iizuka.</h2>
            <p>Doctor/Engineer</p>

          <div class="work">
            <a href="https://spaantibioticsoon.firebaseapp.com/">My Works</a>
          </div>
          </div>
    </div>




styles.scss


.card {
  position: absolute;
  margin-top: -30px;
  margin-left: 250px;
  width: 200px;
  height: 200px;
  position: relative;
  transform: translateZ(80px);
}

.content {
  padding-top: 50px;
  text-align: center;
  width: 300px;
  height: 300px;
}


h2 {
  font-size: 36px;
}




See the Pen Hello My name is... (experimental) by hiroya iizuka ( @ 히로야 요시즈카 )
on CodePen .



<script async=""src="https://static.codepen.io/assets/embed/ei.js"/>

좋은 느낌입니다.

문자가 떠오르는 디자인은 사람을 매료시키는군요.




❸.

지난번 등장한, 우네우네 테크닉을 사용해 My Works 에 어레인지를 추가합시다.




styles.scss


a {
  text-decoration: none;
  color: #fff;
  text-align: center;
  line-height: 100px;
}

.work {
  width: 150px;
  height: 150px;
  background: url("https://dl.dropbox.com/s/bl199wqxqpzmeop/star.png?dl=0");
  background-size: cover;
  background-position: bottom;
  clip-path: circle(50% at 50% 50%);
  border-radius: 48% 69% 56% 53% / 47% 73% 43% 49%;
  transform: translateX(250px);
  animation: move 8s linear infinite;
}

@keyframes move {
  50% {
    border-radius: 80% 20% 59% 41% / 72% 21% 79% 28%;
  }

  75% {
    border-radius: 100% 69% 100% 83% / 68% 99% 53% 93%;
  }
}




See the Pen Hello! My name is ... by hiroya iizuka ( @ 히로야 요시즈카 )
on CodePen .



<script async=""src="https://static.codepen.io/assets/embed/ei.js"/>

아름다운 별이 빛나는 하늘을 떠올릴 수 있었습니다.



내 디자인력은 이런 것 같지만, Tilt.js 를 보다 효과적으로 사용하면 매우 창의성 넘치는 작품이 생기는군요.



그럼 다시 내일~


animation 으로 놀기 - Conic Gradient Loader -
Unity 캐릭터의 Prefab을 TPose로 설정

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
best100-homepage