Это пробный урок. Оформите подписку, чтобы получить доступ ко всем материалам курса. Премиум

  1. Урок 1. 00:02:01
    Welcome to Seamstress
  2. Урок 2. 00:03:47
    The SuperHi Editor
  3. Урок 3. 00:14:56
    Basic structure and styling
  4. Урок 4. 00:06:08
    Laying out the page
  5. Урок 5. 00:06:05
    Adding typography using web fonts
  6. Урок 6. 00:07:43
    Adding multiple images to our site
  7. Урок 7. 00:06:08
    Adding Javascript to the site
  8. Урок 8. 00:07:51
    Setting up a slideshow
  9. Урок 9. 00:08:19
    Adding multiple slideshows
  10. Урок 10. 00:10:30
    Fade in our headers with GSAP
  11. Урок 11. 00:09:06
    Creating a carousel effect
  12. Урок 12. 00:09:49
    Tidying up our carousel
  13. Урок 13. 00:14:28
    Adding our intro slides effect
  14. Урок 14. 00:10:26
    Creating a timeline for next slides
  15. Урок 15. 00:07:45
    Mobile friendly design
  16. Урок 16. 00:09:24
    Adding hover effects to our Read More buttons
  17. Урок 17. 00:04:49
    Waiting for images to load with imagesLoaded
  18. Урок 18. 00:04:11
    Variations on GSAP
  19. Урок 19. 00:01:22
    Welcome to the project!
  20. Урок 20. 00:09:52
    Let's set up our page
  21. Урок 21. 00:10:51
    Adding a layout
  22. Урок 22. 00:11:38
    What are CSS keyframes and CSS animations?
  23. Урок 23. 00:07:22
    Adding looping and repeating animations
  24. Урок 24. 00:04:41
    How to apply easing to CSS animation
  25. Урок 25. 00:09:05
    Making an SVG image from scratch
  26. Урок 26. 00:03:49
    Applying CSS to SVG tags
  27. Урок 27. 00:06:45
    SVG viewbox and preserveAspectRatio
  28. Урок 28. 00:04:58
    Hover states with SVG
  29. Урок 29. 00:06:29
    Making our lives easier with exporting SVGs from Figma
  30. Урок 30. 00:03:03
    Fill screen and blend modes
  31. Урок 31. 00:04:55
    Using CSS animations with SVG tags
  32. Урок 32. 00:03:03
    Adding a CSS filter
  33. Урок 33. 00:10:26
    Using Javascript for fade out the header on scroll
  34. Урок 34. 00:03:52
    Adding Javascript easing
  35. Урок 35. 00:06:46
    Tying scroll events to our blobs
  36. Урок 36. 00:05:30
    Changing the blob scale per section
  37. Урок 37. 00:02:56
    Adding multiple blobs per section
  38. Урок 38. 00:03:13
    Custom CSS scrollbar
  39. Урок 39. 00:02:02
    Homework: Fade out the arrow on scroll
  40. Урок 40. 00:01:50
    Homework solution
  41. Урок 41. 00:02:15
    Welcome to 4th Kind!
  42. Урок 42. 00:06:45
    Let's set up our page
  43. Урок 43. 00:04:17
    Adding our typography and links
  44. Урок 44. 00:02:52
    Adding dark mode with a media query
  45. Урок 45. 00:04:26
    CSS Variables for themeing
  46. Урок 46. 00:07:34
    Updating our dark mode
  47. Урок 47. 00:06:43
    User-triggered dark mode
  48. Урок 48. 00:06:55
    Adding our navigation
  49. Урок 49. 00:05:54
    Toggling our navigation
  50. Урок 50. 00:06:47
    Adding raw SVGs to our site
  51. Урок 51. 00:06:40
    Adding a menu icon animation
  52. Урок 52. 00:06:58
    Dark mode toggle animation
  53. Урок 53. 00:05:59
    Adding a triple-nav animation
  54. Урок 54. 00:08:21
    Dark mode wiper effect
  55. Урок 55. 00:14:21
    Adding our central animation
  56. Урок 56. 00:03:51
    Shifting our site on menu open
  57. Урок 57. 00:02:04
    The MorphSVG plugin
  58. Урок 58. 00:02:33
    Welcome home to Home Planet
  59. Урок 59. 00:05:49
    Setting up our header
  60. Урок 60. 00:05:25
    What are SVG ids
  61. Урок 61. 00:06:21
    Eyeball movements
  62. Урок 62. 00:04:24
    Adding a hat timeline
  63. Урок 63. 00:03:50
    Moving the left and right arms
  64. Урок 64. 00:03:12
    Setting up our house animation
  65. Урок 65. 00:05:12
    Adding the raw SVG to the house
  66. Урок 66. 00:04:33
    Making the TV flicker with a timeline
  67. Урок 67. 00:06:00
    Adding links to our SVG
  68. Урок 68. 00:10:09
    Adding a label to our links
  69. Урок 69. 00:07:19
    Updating the text on hover
  70. Урок 70. 00:01:52
    Fading the other links on hover
  71. Урок 71. 00:06:20
    Setting up a story timeline
  72. Урок 72. 00:08:22
    Adding our scene
  73. Урок 73. 00:05:56
    Adding parallax to our scroll
  74. Урок 74. 00:07:01
    Combing our timelines
  75. Урок 75. 00:08:59
    Making the timeline be based on scroll
  76. Урок 76. 00:02:30
    Making the site have responsive design
  77. Урок 77. 00:01:25
    Welcome to Seal Street Photo Studio!
  78. Урок 78. 00:11:28
    Setting up our page content and style
  79. Урок 79. 00:02:51
    Sticky positioning
  80. Урок 80. 00:14:47
    What is an Intersection Observer
  81. Урок 81. 00:07:18
    Applying styling to our observer
  82. Урок 82. 00:03:32
    prefers-reduced-motion Media Query
  83. Урок 83. 00:10:00
    Scroll-jacking with CSS Scroll Snap
  84. Урок 84. 00:09:21
    Adding our captions
  85. Урок 85. 00:05:35
    CSS clip path
  86. Урок 86. 00:02:46
    Variation: Adding clip-path to CSS animation
  87. Урок 87. 00:04:26
    Adding typography and layers
  88. Урок 88. 00:06:43
    Adding a rotation layer
  89. Урок 89. 00:09:54
    Changing rotation on mousemove
  90. Урок 90. 00:02:19
    Adding a media query for reduced motiono
  91. Урок 91. 00:09:11
    Setting up our intro sequence
  92. Урок 92. 00:05:35
    Animating our inbox box
  93. Урок 93. 00:04:18
    Adding fixes and optimizations
  94. Урок 94. 00:01:44
    Welcome to Wakefast
  95. Урок 95. 00:16:55
    Setting up our page
  96. Урок 96. 00:06:29
    Starting a smooth scroll
  97. Урок 97. 00:07:22
    Moving CSS into Javascript
  98. Урок 98. 00:05:53
    Replicating a normal page scroll
  99. Урок 99. 00:04:56
    Adding a tween factor
  100. Урок 100. 00:03:03
    Adding media queries to our Javascript
  101. Урок 101. 00:15:09
    Fade in fruits
  102. Урок 102. 00:10:32
    Aspect ratios and layering images
  103. Урок 103. 00:11:51
    Adding a parallax scroll effect to our fruits
  104. Урок 104. 00:10:53
    Faking a cursor
  105. Урок 105. 00:05:54
    Tweening the cursor position
  106. Урок 106. 00:05:12
    Adding a slower trail cursor
  107. Урок 107. 00:03:43
    Adding rotation to our cursor
  108. Урок 108. 00:06:07
    Animating underlines on links
  109. Урок 109. 00:07:23
    Adding image underlines with clip-path
  110. Урок 110. 00:04:36
    Adding a media query addListener
  111. Урок 111. 00:00:27
    Thank you for taking our course!