JSFiddle - React, Tailwind, and code Playground

by 규연 황

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/animejs/2.2.0/anime.min.js"></script>


<div class="letter">
  <span class="text">Dinner Recipes</span>
</div>

<div class="letter2">
  <span class="text">James Bonds</span>
</div>

<svg id="tableware" viewBox="0 0 512 512">
<g id="tableware_group02">
  <path id="plate-large" stroke-width="0" stroke="#A325BA" d="M253.486,124.13c-74.931,0-135.892,60.961-135.892,135.892c0,74.932,60.961,135.893,135.892,135.893   c74.932,0,135.893-60.961,135.893-135.893C389.379,185.091,328.418,124.13,253.486,124.13z M253.486,388.715   c-70.961,0-128.691-57.732-128.691-128.693s57.73-128.691,128.691-128.691c70.962,0,128.693,57.73,128.693,128.691   S324.448,388.715,253.486,388.715z"/>
  <path id="plate-small" stroke-width="0" stroke="#A325BA" d="M253.487,149.539c-60.921,0-110.484,49.563-110.484,110.482c0,60.921,49.563,110.483,110.484,110.483   c60.92,0,110.482-49.563,110.482-110.483C363.97,199.102,314.407,149.539,253.487,149.539z M253.487,363.305   c-56.95,0-103.284-46.332-103.284-103.283c0-56.95,46.334-103.282,103.284-103.282S356.77,203.071,356.77,260.021   C356.77,316.973,310.438,363.305,253.487,363.305z"/>
  <path id="spoon" stroke-width="2" stroke="#A325BA" d="M481.648,140.936c0-29.894-18.253-54.213-40.689-54.213c-22.436,0-40.688,24.319-40.688,54.213   c0,28.276,16.333,51.552,37.088,53.989v39.019h-8.559v186.479h24.316V233.943h-8.558v-39.019   C465.314,192.487,481.648,169.212,481.648,140.936z M445.918,241.144v172.077h-9.917V241.144H445.918z M440.959,187.949   c-18.465,0-33.487-21.091-33.487-47.014s15.022-47.014,33.487-47.014c18.466,0,33.489,21.091,33.489,47.014   S459.425,187.949,440.959,187.949z"/>
  <path id="fork" stroke-width="2" stroke="#A325BA" d="M97.256,162.954c0,15.241-11.485,27.843-26.253,29.627V98.366h-7.2v94.215c-14.768-1.784-26.251-14.386-26.251-29.627   V98.366h-7.2v64.588c0,19.216,14.704,35.058,33.451,36.874V238.8h-8.558v186.478h24.317V238.8h-8.56v-38.972  ...

CSS

@import url('https://fonts.googleapis.com/css?family=Oswald');

body {
  overflow: hidden;
  background-color: #2c6535;
}
* {
  box-sizing: border-box;
}
.letter {
  overflow: hidden;
  position: absolute;
  top: 20px;
  right: 0;
  z-index: 20;
  width: 0%;
  height: 19px;
  animation-name: ani-line;
  animation-duration: 1s;
  animation-delay: 1.5s;
  animation-timing-function: cubic-bezier(0.075, 0.82, 0.165, 1);
  animation-iteration-count: 1;
  animation-direction: alternate;
  animation-fill-mode: both;
  transform-origin: 100% 100%;
}
.letter .text {
  position: absolute;
  top: 0;
  left: 0;
  font-size: 18px;
  line-height: 1.1;
  font-family: Oswald, Arial, sans-serif;
  text-shadow: 1px 1px 1px rgba(0,0,0,.3);
  color: #fff;
  opacity: 0;
  animation-name: ani-text;
  animation-duration: 1s;
  animation-delay: 2.1s;
  animation-timing-function: cubic-bezier(0.075, 0.82, 0.165, 1);
  animation-iteration-count: 1;
  animation-direction: alternate;
  animation-fill-mode: both;
  transform-origin: 100% 100%;
}
.letter::before {
  content: '';
  position: absolute;
  top: 7px;
  right: 0;
  left: 120px;
  z-index: 5;
  height: 4px;
  border-top: 1px solid #fff;
  border-bottom: 1px solid #fff;
}
@keyframes ani-text {
  0% {
    transform: translateX(10px);
  }
  100% {
    transform: translateX(0px);
    opacity: 1;
  }
}
@keyframes ani-line {
  100% {
    width: 60%;
  }
}


.letter2 {
  overflow: hidden;
  position: absolute;
  bottom: 20px;
  left: 0;
  z-index: 30;
  width: 0%;
  height: 24px;
  animation-name: ani-line;
  animation-duration: 1s;
  animation-delay: 1.5s;
  animation-timing-function: cubic-bezier(0.075, 0.82, 0.165, 1);
  animation-iteration-count: 1;
  animation-direction: alternate;
  animation-fill-mode: both;
  transform-origin: 0% 0%;
}
.letter2 .text {
  position: absolute;
  top: 0;
  right: 0;
  font-size: 22px;
  line-height: 1.1;
  font-family: 'Oswald', Arial, sans-serif;
  text-shadow: 2px 2px 0 rgba(0,0,0,.3);
  color:...

JavaScript

var video = document.getElementById("video-bg");
video.autoplay = true;
video.load(); 

anime({
  targets: '#tableware_group01 path',
  strokeDashoffset: [anime.setDashoffset, 0],
  easing: 'easeInOutSine',
  duration: 1500,
  delay: function(el, i) { return i * 200 }
});

/* anime({
  targets: '#tableware_group02 path',
  strokeDashoffset: [anime.setDashoffset, 0],
  easing: 'easeInOutSine',
  duration: 1500,
  delay: function(el, i) { return i * 250 }
}); */