Konuyu Değerlendir
  • 0 Oy - 0 Ortalama
  • 1
  • 2
  • 3
  • 4
  • 5
Sayfana Forumuna bloglarina Laser Text Animation Yap
#1
HTML-1 
Sayfana Forumuna bloglarina Laser Text Animation Yap

VERSION I

HTML KODU

Kod:
<h1><span>E</span><span>S</span><span>A</span><span>N</span><span>E</span><span>&nbsp;</span><span>1</span><span>T</span><span>Ü</span><span>R</span></span>K</span></span>B</span></span>O</span></span>R</span></span>D</span></span>  


</h1>

CSS KODU

Kod:
$chars : 10;
$duration : .25s;
$bounce : cubic-bezier(.4,1.4,.75,.9);
$scale : 5000;

html, body {
  height: 100%;
  overflow: hidden;
  user-select: none;
}

body {
  display: flex;
  align-items: center;
  justify-content: center;
  background: radial-gradient(#1a1a1a, #000);
}

h1 {
  font: 300 50px/1 courier;
  white-space: nowrap;
  color: whitesmoke;
}

span {
  display: inline-block;
  animation: stretch $chars*$duration $bounce infinite;
  transform-origin: center;
  
  @for $i from 1 through $chars {
    &:nth-of-type(#{$i}) {
      animation-delay: $i*$duration;
    }
  }
}
  
@keyframes stretch {
  5% {
    transform: scaleX($scale);
    opacity: .1;
  }
  15% {
    transform: scaleX(1);
    opacity: 1;
  }
}


VERSION II


HTML KODU

Kod:
<div class="title">
  <span class="text write" data-splitting="lines">
    RETRO<br/>
    LASER<br/>
    WRITE
  </span>
  <span aria-hidden="true" class="text laser" data-splitting="lines">
    RETRO<br/>
    LASER<br/>
    WRITE
  </span>
</div>

CSS KODU

Kod:
html, body { background: hsl(220, 80%, 8%); }
html { height: 100%; display: flex; }
body { margin: auto; }

.title {
  position: relative;
  text-align: center;
  transform: translateZ(0);
  transform-style: preserve-3d;
}

.title .text {
  font-family: sans-serif;
  font-weight: 400;
  font-size: calc(20vw / var(--word-total) );
  line-height: 1.0;
}

.title .write .word {
  color: hsl(0, 0%, 80%);
  text-shadow: 0 0 0.1em currentColor;
  transform-style: preserve-3d;
  animation: write linear both;
}

.title .laser {
  position: absolute;
  top: 0;
  left: 0;
  /* To avoid the blur getting masked by the clip-path we had to duplicate the element */
  filter: blur(4px) contrast(10);
  pointer-events: none;
}

.title .laser .word {
  display: inline-block;
}

.title .laser .word {
  color: hsl(0, 100%, 75%);
  text-shadow: 0 0 0.1em currentColor;
  transform: translateZ(5px);
  animation: laser linear both;
}

.title .write .word,
.title .laser .word {
  animation-duration: 4s;
  animation-delay: calc(0.3s + var(--word-index) * 160ms);
  animation-iteration-count: infinite;
}

.title:hover .word {
  animation-play-state: paused;
}

/* .title .text .word,
.title .text .word::before {
  animation-play-state: paused;
  animation-delay: -0.4s;
} */

@keyframes write {
  from, 30% { clip-path: polygon(-20% 0%, -15% 0%, -15% 100%, -20% 100%) }
  70%, to { clip-path: polygon(-15% 0%, 120% 0%, 120% 100%, -15% 100%) }
}

@keyframes laser {
  from, 30% { clip-path: polygon(-20% 0%, -15% 0%, -15% 100%, -20% 100%) }
  70%, to { clip-path: polygon(115% 0%, 120% 0%, 120% 100%, 115% 100%) }
}

JS KODU

Kod:
Splitting();

// Hover over the title to pause the CSS animation





Signing of RasitTunca Original
By Kar©glan

Başağaçlı Raşit Tunca
Alıntı


Foruma Git:


Bu konuyu görüntüleyen kullanıcı(lar): 1 Ziyaretçi