Tajriba: anime.js kutubxonasiga asoslangan jonlantirilgan SVG harflari. [img]https://ruse...

3339

Yangi formatda davom etish uchun: https://uzfor.net/view.php?act=post&id=47873

Postga havola

Сирожиддин [2882] [off]

Tajriba: anime.js kutubxonasiga asoslangan jonlantirilgan SVG harflari.

HTML
Agar siz ushbu misolni ko'rib chiqsangiz, ayrim harflar turli tomonlardan ko'rsatilganligini ko'rishingiz mumkin. Har bir animatsiya uchun alohida sahifa elementini yaratishingiz kerak bo'ladi. Misol uchun, "L" harfi ikkita konteynerdan iborat: vertikal va gorizontal chiziq:

<svg width="100%" height="100%" viewBox="0 0 320 180" class="letters letters--effect-1">
   <!--W-->
   <g class="letter letter--1">
       <g class="letter__part">
           <path class="letter__layer color-6" d="M25,39.7l22.4,51l7.9-32.2L76.2,84l1.3-61.2" />
           <path class="letter__layer color-1" d="M25,39.7l22.4,51l7.9-32.2L76.2,84l1.3-61.2" />
           <path class="letter__layer color-2" d="M25,39.7l22.4,51l7.9-32.2L76.2,84l1.3-61.2" />
       </g>
   </g>
   <!--I-->
   <g class="letter letter--2">
       <g class="letter__part">
           <path class="letter__layer color-6" d="M100,20.3l8.4,58.4" />
           <path class="letter__layer color-2" d="M100,20.3l8.4,58.4" />
           <path class="letter__layer color-3" d="M100,20.3l8.4,58.4" />
       </g>
   </g>
   <!--L-->
   <g class="letter letter--3">
       <g class="letter__part">
           <path class="letter__layer color-6" d="M126.4,70.8l27.6,0.5" />
           <path class="letter__layer color-3" d="M126.4,70.8l27.6,0.5" />
           <path class="letter__layer color-4" d="M126.4,70.8l27.6,0.5" />
       </g>
       <g class="letter__part">
           <path class="letter__layer color-6" d="M128.9,15.6l-2.3,60.2" />
           <path class="letter__layer color-3" d="M128.9,15.6l-2.3,60.2" />
           <path class="letter__layer color-4" d="M128.9,15.6l-2.3,60.2" />
       </g>
   </g>
   <!-- ...and so on -->
</svg>

SVG rasmlarini yaxshiroq ajratish uchun bir nechta class'lar qo'shamiz.

CSS

/* Main SVG */
 
.letters {
position: relative;
display: block;
min-height: 400px;
max-height: 70vh;
margin: 0 auto;
}
 
 
/* Letter path */
 
.letter__layer {
fill: none;
stroke-miterlimit: 3;
stroke-linecap: butt;
stroke-linejoin: bevel;
}
 
/* Styles for effect 1 */
 
.letters--effect-1 .letter__layer:first-child {
stroke-width: 9px;
}
 
.letters--effect-1 .letter__layer:nth-child(2) {
stroke-width: 9.5px;
}
 
.letters--effect-1 .letter__layer:nth-child(3) {
stroke-width: 10px;
}
 
 
/* Effect 1 colors */
 
.color-1 { stroke: #dea521; }
.color-2 { stroke: #f84242; }
.color-3 { stroke: #3758a7; }
.color-4 { stroke: #f79c8c; }
.color-5 { stroke: #84b5bd; }
.color-6 { stroke: #feefde; }

Phrase.prototype.options = {
pathOpacityAnim: false,
outAnimation: {
translateY: [0, 15],
opacity: [1, 0],
duration: 250,
easing: 'easeInOutQuad'
},
 
inAnimation: {
properties: {
translateY: {
value: [-30, 0],
duration: 900,
elasticity: 600,
easing: 'easeOutElastic'
},
opacity: {
value: [0, 1],
duration: 500,
easing: 'linear'
},
},
delay: 40 // задержка для букв.
},
// Настройки анимации обводки
pathAnimation: {
duration: 800,
easing: 'easeOutQuint',
delay: 200 // задержка
}
};

Umid qilamizki, ushbu misol siz uchun foydali bo'ldi!

Ushbu dars ruseller.com sayti jamoasi tomonidan siz uchun tayyorlangan.
Kurs manbai: https://tympanus.net/codrops/2016/09/13/fancy-svg-letter-animation/
Rus-tiliga tarjima: Станислав Протасевич
O'zbek tiliga tarjima: Сирожиддин Эрназаров

« Mavzuga qaytish

Onlayn: 818 (1/817)