Бүх сургалт ХУГАЦААГҮЙ буюу НАСАН ТУРШИЙН!

Програмчлалын гүнзгий мэдлэггүйгээр 2D, 3D animation-ыг вэбийн орчинд хийж сурахыг хүсч байна уу? Тэгвэл та яг зөв газартаа байна.



Бид орчин үед интернэтээр зугаалж явахдаа маш гайхалтай эффект, хөдөлгөөн бүхий олон гоё дүрслэлүүдийг олж хардаг. Зөвхөн html, css ашиглан зарим хүний санаанд ч оромгүй гайхалтай зүйлсийг хийх боломжтой байдаг. CSS animation бол хэрэглэгчдийн сонирхлыг татаж, харцыг булаах, тэдний вэб сайттай ажиллах үйл ажиллагааг илүү хялбар, зугаатай болгоход маш чухал нөлөөтэй зүйл юм. Товчхондоо CSS animation нь таны вэб сайтыг амь оруулдаг гол хүчин зүйлсийн нэг гэсэн үг. Жирийн нэг товчлуурыг гоёмсог эффекттэй болгохоос эхлээд, ном мэт нээгддэг вэб хуудас, төрөл бүрээр хөдөлж буй хүн, амьтан зэрэг үнэхээр гайхалтай зүйлсийг ямар ч програмчлалын хэл ашиглалгүйгээр хийх боломжтой.

Эхлээд бид css-ийн хамгийн түгээмэл хийгддэг animation-уудтай танилцах бөгөөд тэдгээрийг ашиглан html элементүүдийг амь оруулах юм. Дараа нь transform property-г ашиглан дурын html элементийг вэб хуудсан дээрээ хүссэнээрээ хөдөлгөж, хэмжээг нь өөрчилж, эргүүлж тойруулж, өөрсөддөө ямар гайхалтай супер хүч байгааг олж мэдэх болно.

Мэдээж дараа нь сурсан зүйлсийнхээ тусламжтайгаар олон олон сонирхолтой жишээнүүдийг хийж гүйцэтгэнэ.

Сургалтын төгсгөлд та CSS animation-ийг бүрэн ойлгож авах бөгөөд өөрийн төсөөллөө бодит болгох хангалттай чадвартай болох юм. Таны төсөөлөл хэр гайхамшигтай байна, таны бүтээх зүйл яг л тийм байх болно.

Сургалт хэнд зориулагдсан бэ?

Энэхүү сургалт нь CSS-ийн мэдлэгээ улам сайжруулж, шинэ түвшинд гаргах, гоёмсог, харц булаам вэб сайт хийхийг хүссэн вэб хөгжүүлэгчид, вэб дизайнерууд, сонирхогчдод зориулагдсан. Мэдээж хэрэг вэб дээр суурилсан тоглоом хийхийг хүсдэг хүмүүс ч үзвэл зохилтой сургалт юм.

Шаардагдах зүйлс

Уг сургалтыг үзэхийн тулд танд HTML, CSS-ийн үндсэн ойлголт, ямар нэг компьютер, шинэ зүйл сурч, бүтээх чин хүсэл эрмэлзлэл байхад л болно

За ингээд CSS-ийн гайхамшигт ертөнцөөр хамтдаа аялахыг урьж байна. Сургалтаараа эргэн уулзъя.



Доорхи видеог тоглуулж эхний видео хичээлийг үзнэ үү

   Хичээлүүд :   

  1. 21:31
    Эхлэл. Сургалтын талаар товчхон. Дэлгэцийн дагуу алхаж буй хүнийг хэрхэн CSS ашиглан хийх вэ?
  2. 10:59
    Бүлэг 1. CSS-ийн үндсэн анимациуд. Элементийг Translate функцээр хөдөлгөх
  3. 11:23
    Scale функцээр элементийн хэмжээг өөрчлөх animation хийх
  4. 7:18
    Элементийг тодорхойлж өгсөн цэг дээрээс Rotate функцээр эргүүлэх
  5. 7:01
    Элементийг 3D байдлаар эргүүлэх
  6. 5:44
    Skew функцээр аливаа элементийг налуу болгож animation хийх
  7. 7:08
    Орж ирэх болон Гарч явах animation гэж юу вэ?
  8. 8:42
    Текстийн хэмжээ, мөр болон үсэг хоорондын зайг өөрчлөх animation хийх
  9. 7:15
    Өнгийг аажмаар уусгах animation хийх
  10. 11:10
    Transform style property. Preserve3D юунд ашиглагддаг вэ?
  11. 19:18
    Perspective property-той танилцацгаая
  12. 32:36
    Цэвэр CSS ашиглан 3D куб зурах, эргүүлэх
  13. 17:13
    Хананаас бөмбөг ойх animation хийх
  14. 22:20
    Видео тоглоомын алдартай дүр болох Pac-man-ийн animation-ыг хийх
  15. 12:28
    Дотроо хөдөлгөөнтэй бөмбөг агуулсан, эргэлдэж буй loader-ын animation хийх
  16. 12:22
    Чухал хичээл. Perspective property-г дахин нэг жишээгээр тайлбарлая. Элементийг өөрсдийн нүд хүртэл татвал юу болох вэ?
  17. 12:12
    Гаригаа тойрон эргэх дагуулыг 2 хэмжээст орчинд хийх
  18. 33:53
    Нарны аймгийн гаригуудын animation-ийг хийж үзэцгээе
  19. 21:51
    Дэлхийг тойрон эргэх сарыг 3 хэмжээст орчинд хийх
  20. 8:57
    Before болон After pseudo element-үүд хэрхэн ажилладаг вэ?
  21. 10:29
    Гоё эффекттэй товчлуурууд хийх бүлэг. Товчлуур 1 - Background-ыг зүүнээс баруун тийш шударч буй эффект хийх
  22. 9:11
    Товчлуур 2 - Хоёр өөр background-ыг X, Y тэнхлэг дээр эргүүлж буй эффект хийх
  23. 4:42
    Товчлуур 3 - Текст агуулсан Background-ыг доороос дээш шударч буй эффект хийх
  24. 10:38
    Товчлуур 4. Hover хийх үед хүрээ нь хос хосоороо зурагдах товчлуурын animation
  25. 14:26
    Товчлуур 5. Хүрээ нь ээлж дарааллан зурагдах товчлуур
  26. 8:32
    Товчлуур 6. Дутуу хүрээтэй товчлуурын animation
  27. 14:32
    Товчлуур 7. Давалгааны эффекттэй background бүхий товчлуурыг хийх
  28. 20:25
    Товчлуур 8. Шингэнтэй мэт товчлуурын animation хийх
  29. 12:26
    Товчлуур 9. Анивчиж буй неон гэрэл шиг товчлуурын animation хийх
  30. 12:32
    Товчлуур 10. Гялтганаж буй эффекттэй товчлуур хийх
  31. 13:23
    Товчлуур 11. Неоморфик товчлуур хийх
  32. 25:02
    Ойж буй 3D бөмбөгний animation. CSS animation-ыг хийхэд физикийн хууль хэр чухал вэ?
  33. 20:08
    Sass preprocessor-ыг суулгах, тестлэх
  34. 20:53
    Аналог цагны animation хийх. Sass-ын mixin гэж юу вэ?
  35. 34:01
    Дижитал цагны animation хийх
  36. 6:21
    CSS-ийн ямар ямар property дээр animation хийх боломжтой вэ?
  37. 11:45
    CSS transition-ийн зориулалт. Animation property-гоос ялгаатай тал нь юу вэ?
  38. 14:07
    Timing function-ийн утгуудын талаар илүү сайн ойлгож авцгаая
  39. 14:20
    Cubic bezier-ийн мөн чанарыг ойлгох нь
  40. 14:03
    Animation property ямар үүрэгтэй вэ? Түүний давуу талууд
  41. 6:41
    Animation fill mode болон animation delay property-гийн тухай
  42. 5:06
    Animation iteration count property
  43. 5:09
    Animation direction property
  44. 14:52
    Цулгуй болон уусалттай өнгө бүхий background дээр өнгө солигдох animation хийх
  45. 10:46
    Филтер ашиглан текст дээр gradient background animation хийх
  46. 20:12
    Үргэлжилсэн хөдөлгөөн бүхий background-ыг хэрхэн хийх вэ? Жишээ - Wavy background animation
  47. 19:18
    Вэб хуудсанд parallax scroll эффектийг хэрхэн хийх вэ?
  48. 24:47
    Олон зураг дээрх Parallax effect - Кристиано Роналдо
  49. 15:39
    Hover хийх үед гэрэлтдэг цэгүүд бүхий background-ийн animation
  50. 11:12
    Clip-path property ямар үүрэгтэй вэ? Clip-path generator ашиглах
  51. 10:46
    Clip-path property ашиглан элементийг олон хэсэгт хувааж, хэсэг тус бүр дээр өөр өөр animation хийх арга
  52. 18:09
    Ах дүүс элементүүд гэж юу вэ? Тэднийг хэрхэн select-лэх вэ? Clip-path ашиглан хийх нэгэн өвөрмөц animation
  53. 14:56
    Clip-path property ашиглан accordion эффект хийх
  54. 12:48
    Popup reveal эффектийг clip-path ашиглан хийцгээе
  55. 26:14
    Clip-path property ашиглан дурын зүйлийг зурах. Жишээ - Доберман нохойны сүүдэр зураг
  56. 14:18
    Цэсний animation хийх бүлэг. Before болон After элементүүдийг ашиглан hover хийх үед цэсний дээд, доод хүрээг зурах
  57. 17:14
    3D-ээр эргэлдэгч item-ууд бүхий цэс хийх
  58. 11:32
    Hover хийх үед цэсний background-ын өнгийг өөрчилж, дээд доод буланд хүрээ зурах
  59. 10:34
    Цэсний background-ыг хэсэгчлэн хувааж эффект хийх
  60. 17:03
    Хажуугаас урсаж гарч ирэх цэсний animation
  61. 24:46
    Off-canvas цэсийг хэрхэн хийх вэ? Checkbox input-ийг ашиглан цэсийг нээх, хаах
  62. 35:04
    Дугуй хэлбэртэй цэсний animation-ийн жишээ
  63. 18:35
    Card элемент дээр animation хийх бүлэг. Before элементийг ашиглан card-ын дэвсгэр өнгийг өөрчлөх
  64. 14:37
    Card дээр hover хийх үед сунаж томордог эффект хийх
  65. 15:39
    Iron man card
  66. 20:50
    Profile card дээр хийх hover effect-ийн жишээ. Unsplash сайтаас зураг оруулах хялбар арга
  67. 20:55
    Flip card эффектийг хэрхэн хийх вэ? Элементийн ар талыг харагдахгүй болгох арга
  68. 12:09
    Ялгаатай контенттой 2 тал бүхий card-ыг 3D байдлаар эргүүлэх
  69. 26:44
    Before болон After pseudo element-үүдийг ашиглан 3D card хийх
  70. 16:43
    CSS Glassmorphism гэж юу вэ?
  71. 22:07
    Glassmorphism ашиглан сошиал товчлуурууд хийж үзье
  72. 23:06
    Vanilla-tilt.js файлыг ашиглан glassmorphic card дээр өвөрмөц эффект хийх
  73. 7:37
    VS Code програмд Live Sass compiler-ыг суулгаж тохируулах
  74. 13:23
    Vector болон Raster графикийн тухай товч ойлголт. SVG зураг гэж юу вэ?
  75. 21:36
    svg элементийг ашиглан геометрийн энгийн дүрсүүдээс зурж үзье
  76. 17:51
    svg path tag-ийн тухай ойлгож авцгаая
  77. 20:31
    Зураас зурж буй эффектийг хэрхэн хийх вэ? Хөгжмийн Соль түлхүүр зурж буй animation-ыг svg ашиглан хийж үзье
  78. 26:53
    Text-ийн хүрээнд animation хийх. svg элемент дээр blur эффект хэрхэн хийх вэ?
  79. 15:08
    Youtube-ийн loader шиг энгийн loader-ын анимацийг svg ашиглан хийх
  80. 12:56
    Figma-гийн desktop хувилбарыг суулгах, svg зураг доторх элементүүдийг групплэх
  81. 26:52
    Олон үе, холбоос бүхий svg элемент дээр хэрхэн animation хийх вэ? Жишээ: Эксковаторын шанагыг хөдөлгөх
  82. 18:44
    Далайн мандал дээр хөвж буй мэт текстийн animation хийх
  83. 21:05
    Star Wars киноны эхлэлийн урсдаг текстийн animation хийх
  84. 15:50
    Үүлс нүүж буй animation-ийг хэрхэн хийх вэ?
  85. 9:05
    Энгийн checkbox-ыг илүү гоёмсог toggle товчлуур болгох animation
  86. 17:58
    Видео дүрсийг HTML элементтэй хольж animation хийх. Particle revealing effect.
  87. 14:46
    Галт цагираг мэт animation хэрхэн хийх вэ. feTurbulence филтер ашиглах
  88. 16:53
    feTurbulence филтер ашиглан усны хөдөлгөөнгүй зургийг хөдөлгөөнтэй мэт болгох
  89. 12:16
    Текстуудийн хооронд morph эффект хийх
  90. 22:57
    HTML элементүүд ашиглан ямар нэг зүйлийг хэрхэн зурах вэ? Тавган дээр байгаа кофетой аяга зурах
  91. 13:15
    Кофеныхоо уурыг зурах, уурийг хөдөлгөөнд оруулах
  92. 15:53
    Аnimation-ыг 3D харагдуулахад анхаарах зүйлс. Жишээ - Хайрцаг дээр ойж буй бөмбөг. Үндсэн байгуулалтыг хийх
  93. 14:43
    Хайрцагаа гүйцээж байгуулах. Өрөө, хайрцаг, бөмбөг дээр сүүдэр нэмж 3D харагдуулах
  94. 14:42
    Өрөө, хайрцаг, бөмбөг дээр 4 төрлийн animation хийх
  95. 7:23
    Тасралтгүй үргэлжлэх хөдөлгөөн бүхий background-ын animation хийх
  96. 11:25
    Text shadow property ашиглан текстийг 3D мэт харагдуулах арга
  97. 13:12
    Элементийг хувилах замаар 3D мэт харагдуулах өөр нэгэн арга
  98. 14:38
    Pseudo элементийг ашиглан бодит мэт сүүдэр хийх
  99. 15:22
    Элемент дээр утаа шиг эффект хийх
  100. 6:41
    Төгсөв

Сагсанд хийх

== Сурагчдын сэтгэгдлүүд ==

uuln dajgv hichel bna, duuschij bgmu 100+ hicheeltei gj bsnda ...
2021-08-18 19:09:55
Маш их мэдлэгтэй болж байгаадаа баяртай байна.
2021-07-30 01:47:21
Сонирхолтой байна
2021-07-22 21:26:07
Сайн сургалт болсон байна. Баярлалаа.
2021-06-29 15:48:33
Sn surgalt blson bna
2021-06-19 22:38:05
Ёстой сонирхолтой сургалт байнаа, үзэж байхдаа ерөөсөө уйдсангүй
2021-06-11 11:09:30