Make 3D text effect with animation using SCSS
3D text help to make you normal text to 3D animated text with fancy effect which you can use to highlight text with some awesome effect.
HTML
<div class="text"> <div>2 <div>2</div> <div>2</div> <div>2</div> <div>2</div> <div>2</div> <div>2</div> <div>2</div> <div>2</div> <div>2</div> <div>2</div> <div>2</div> <div>2</div> </div> <div>0 <div>0</div> <div>0</div> <div>0</div> <div>0</div> <div>0</div> <div>0</div> <div>0</div> <div>0</div> <div>0</div> <div>0</div> <div>0</div> <div>0</div> </div> <div>0 <div>0</div> <div>0</div> <div>0</div> <div>0</div> <div>0</div> <div>0</div> <div>0</div> <div>0</div> <div>0</div> <div>0</div> <div>0</div> <div>0</div> </div> <div>0 <div>0</div> <div>0</div> <div>0</div> <div>0</div> <div>0</div> <div>0</div> <div>0</div> <div>0</div> <div>0</div> <div>0</div> <div>0</div> <div>0</div> </div> </div> |
SCSS
$density:12; $size: 35vmin; body { display: grid; place-items: center; height: 100vh; background: #323133; font-family: "Quicksand", sans-serif; font-weight:700; perspective: 60rem; perspective-origin: 50% 50%; overflow: hidden; #user-button { --user-button-background: #434A54; --user-button-text:white; } .text { user-select: none; > div { display: inline-block; position: relative; font-size: $size; color:transparent; transform-origin: center center; transform-style: preserve-3d; animation: float 4s infinite; @for $i from 1 through 4 { &:nth-child(#{$i}) { animation-delay: (-$i + 4)*-0.5s; } } > div { position: absolute; top:0; left:0; color: white; text-shadow:0 0 1px white; $thickness:3; &:not(:nth-child(n+#{$thickness})), &:not(:nth-last-child(n+#{$thickness})) { color: #ed5565; text-shadow:0 0 1px #ed5565; } @for $i from 1 through $density { &:nth-child(#{$i}) { transform: translateZ(($i - ($density/2)) * ($size / ($density * 5))); } } } } } } $pi: 3.14159265359; $_precision: 10; @function pow($base, $exp) { $value: $base; @if $exp > 1 { @for $i from 2 through $exp { $value: $value * $base; } } @if $exp < 1{ @for $i from 0 through -$exp { $value: $value / $base; } } @return $value; } @function fact($num) { $fact: 1; @if $num > 0{ @for $i from 1 through $num { $fact: $fact * $i; } } @return $fact; } @function sin($a){ $sin: $a; @for $n from 1 through $_precision { $sin: $sin + (pow(-1, $n) / fact(2 * $n + 1) ) * pow($a, (2 * $n + 1)); } @return $sin; } @function cos($a){ $cos: 1; @for $n from 1 through $_precision { $cos: $cos + ( pow(-1,$n) / fact(2*$n) ) * pow($a,2*$n); } @return $cos; } @keyframes float { @for $i from 0 through 100 { #{$i*1%} { transform: rotate3d(sin($i*$pi/50), cos($i*$pi/50), 0, 30deg); } } } |
See live demo and download source code.
DEMO | DOWNLOAD
This awesome script developed by z-. Visit their official repository for more information and follow for future updates.