Jonlantirilgan harflar (CSS mo'jizlari)

3339

Yangi formatda davom etish uchun: https://uzfor.net/47872-jonlantirilgan-harflar-css-mojizlari.html

Jonlantirilgan harflar (CSS mo'jizlari)

Xabarlar

Сирожиддин [2882] [off]
#1 10:25:48, 28 Jan 2019

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: Сирожиддин Эрназаров

+ (6): gi8ri7, XuSha, Temur8818, Tilsim_Shaxzoda, CHEfan, Hanov_Dayko,

Akbarali [2384] [off]
#5 21:03:36, 28 Jan 2019

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): MrShahzodbek, CHEfan,

developer [323] [off]
#10 01:05:24, 29 Jan 2019

<!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>

+ (2): Akbarali, Сирожиддин,

Сирожиддин [2882] [off]
#12 10:26:26, 29 Jan 2019

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:

Biriktirilgan fayllar [1]:
— basket.jpg (12.14 KB) (159 ↴)

Сирожиддин [2882] [off]
#14 10:33:09, 29 Jan 2019

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): NetLizard,

Biriktirilgan fayllar [1]:
— basket.zip (0.72 KB) (152 ↴)

Сирожиддин [2882] [off]
#16 10:37:48, 29 Jan 2019

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.

NetLizard [1846] [ban]
#17 10:41:12, 29 Jan 2019

Сирожиддин, 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.