UZFOR
  1. Lenta
  2. Сирожиддин
Jonlantirilgan harflar (CSS mo'jizlari) (19)
Mavzu fayllari
Shikoyat qilish
Сирожиддин
#1
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 rasmlarini yaxshiroq ajratish uchun bir nechta class'lar qo'shamiz.

CSS
JS

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: Сирожиддин Эрназаров
6
Kod · HTML63 qator
<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>
Kod · CSS85 qator
/* 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; }
Kod · JavaScript63 qator
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 // задержка

}

};
tahrirlandi ·
Temur8818
#2
Ajoyib ko'rinarkan
0
10
Megatron
#3
mendagi aql bu narsalarga yetmasa kerak :-D

albatta bu yo'nalish bo'yicha
0
gi8ri7
#4
SVG dan foydalanish haqida to'liq darslik yozish kerak
1 daqiqa 8 soniyadan keyin yozdi:
Bo'shab qolsam kechroq yozaman yoki ungacha o'zingiz yozib yuborasizmi Sirojiddin (aka)
0
tahrirlandi ·
Akbarali
#5
3 kundan beri mehmon bo'lib kirayotgan edim. Shu mavzuni ko'rib aloxida vaqt ajratdim.
.
svg bu html tilida yaratilgan rasm. svgga umuman kenglik balandlik va hajm berilmagani sababli uni hohlagancha kattalashtrish va kichiklashtrish mumkun. Svg ni qancha kattalashtrmang yoki kichiklashtrmang uning tiniqligi va sifatiga zarracha ta'sir ko'rsatmaydi. Saytingiz iconca va rasmlarini svgda tuzsangiz saytingiz anchagina tez yuklanadi. Svgning yomon taraflarini ertaga aniqroq yozaman.
.
Huddi shunga o'xshagan htmldagi teg bu cavans. Cavansning eng yaxshi tomoni cavansda yaratilgan rasmlarni .jpg va .png shakilda saqlashingiz mumkun.
.
Lekin svg va cavans lar yaratilishi boshqacharoq. Bu gaplarimni o'qib bular bir biriga o'xshagan va bir xil yaratilar ekan deb o'ylamaylar.
2
NetLizard
#6
Yana d3 js ham bor vizualizatsiyalar uchun https://d3js.org/
0
1135
End
#7
Cаванс емас Cанвас бўлса керак. Агар шуни айтаётган бўлсангиз
0
Akbarali
#8
Arey, # Arey (28.01.2019 / 22:09)
Cаванс емас Cанвас бўлса керак. Агар шуни айтаётган бўлсангизIsh bor joyda kamchlik bo'ladi. Javadaligm pand berdi. ertaga to'g'irlavoraman.
0
1135
End
#9
Akbarali, # Akbarali (28.01.2019 / 22:20)
Arey, Ish bor joyda kamchlik bo'ladi. Javadaligm pand berdi. ertaga to'g'irlavoraman.Bu shunchaki tez yozishdagi imloviy xato bo'lsa 2-3 marta bir xil yozilmasdi.
0
tahrirlandi ·
developer
#10
2
Kod · HTML223 qator
<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<title>TO'P</title>

<style type="text/css">

.phdr{

border: 1px solid red;

width: 90%;

height: 600px;

background-color: #a2f688;

margin: 5px auto;

position: relative;

}

/*.top{

border: 0px solid red;

background-color: black;

width: 40px;

height: 40px;

border-radius: 100%;

position: absolute;

left: 10px;

bottom: 5px;

}*/

.ustun{

border: 0px solid black;

width: 30px;

height: 400px;

background-color: black;

position: absolute;

right: 0px;

bottom: 0px;

}

.qosqon{

border: 0px solid black;

width: 100px;

height: 100px;

background-color: black;

position: absolute;

right: 30px;

bottom: 300px;

}

.shit{

border: 2px solid red;

width: 100px;

height: 50px;

border-radius: 100%;

position: absolute;

right: 130px;

bottom: 330px; 





}

.top{

border: 0px solid red;

background-color: black;

width: 40px;

height: 40px;

border-radius: 100%;

position: absolute;

left: 10px;

bottom: 150px;

animation-name: top;

animation-duration: 4s;

animation-delay: 3s;

animation-fill-mode: forwards;

animation-iteration-count: infinite;



}



@keyframes top{

0%{left: 10px; bottom: 150px;}

10%{left: 10px; bottom: 3px;}

15%{left: 10px; bottom: 150px;}

20%{left: 10px; bottom: 3px;}

50%{left: 970px; bottom: 550px;}

70%{left: 980px; bottom: 3px;}

80%{left: 980px; bottom: 150px;}

90%{left: 980px; bottom: 3px;}

100%{left: 10px; bottom: 3px;}

}

.tag{

border: 3px dotted black;

width: 40px;

height: 15px;

border-radius: 10px;

position: absolute;

left: 10px;

bottom: 135px;

animation: tag 3s ease-in-out 1 0s;

animation-fill-mode: forwards;





}

@keyframes tag{

from{left: 10px; bottom: 135px;}

to{left: 50px; bottom: 135px;}

}



</style>

</head>

<body>

<div class="phdr">

<div class="top"></div>

<div class="tag"></div>

<div class="ustun"></div>

<div class="qosqon"></div>

<div class="shit"></div>

</div>



</body>

</html>

#11
Серёжа, men yozgan kodni ham ishlataolasmi ko'rinishini basketbol to'pini savatga tushishini yozgandim
0
Сирожиддин
#12
developer, # developer (29.01.2019 / 01:05)
Серёжа, men yozgan kodni ham ishlataolasmi ko'rinishini basketbol to'pini savatga tushishini yozgandimxa kodlaringizga ozgina ranglar ham qo'shdim:

0
tahrirlandi ·
NetLizard
#13
Сирожиддин, rostan ham koptok savatga tushadimi?
0
Сирожиддин
#14
MasterOS, # MasterOS (29.01.2019 / 10:29)
Сирожиддин, rostan ham koptok savatga tushadimi?developer yozgan kodda savatchaga yetmay yerga tushadigan qilib yzilgan ekan, men to'pni savatga olib borishdan ko'ra savatni to'p tagiga olib kelishni ma'qul bildim. Bu kodlarda rasmdagiday manzara ko'rinadi va to'p harakatlanib savatga tushadi.
1
Biriktirilgan fayllar 1
zipbasket.zip0.72 KB · 249 yuklab olingan
NetLizard
#15
Сирожиддин, Bu sizni modingiz togrimi, undan oyin yaratishda foydalansam boladimi?
0
Сирожиддин
#16
MasterOS, # MasterOS (29.01.2019 / 10:36)
Сирожиддин, Bu sizni modingiz togrimi, undan oyin yaratishda foydalansam boladimi?urinib ko'ring. 2 qator ko'dni nimasidan o'yin yaratisiz, butun boshli kod yozish ishlarlari oldingizda bo'lsa.
23 soniyadan keyin yozdi:
bu developerni kodlari, men faqat rang berdim.
0
NetLizard
#17
Сирожиддин, Haligi SoloLearnda korgandim.Hech qanday javascriptsiz Css ozidan oyin yaratishgan.
Buni bunday qilamiz 10 ta imkoniyat beriladi, har bir tushgan koptokka achko beriladi, agar 6 tadan kop tushirsa ekranda popup va Kubog rasmi chiqadi.
Va oyinchi 2,3,4 bosqichlarga otish imkoniga ega boladi.
Qisqasi 20-40 qator kod qoshib, modlab, shuni hosil qilib koraman.
0

#18
Gangnam Style CSS3
0
Biriktirilgan fayllar 1
zipcss3_gangnam.zip189.47 KB · 252 yuklab olingan
Сирожиддин
#19
Mavzu lentaga chiqishi uchun post qoldirildi!
Foydalaning, o'rganing, ulashing.
0