├── ep01
├── index.html
└── style.css
├── ep02
├── .vscode
│ └── settings.json
├── css
│ ├── gallery.css
│ ├── horizontal.css
│ ├── list.css
│ ├── mac.css
│ ├── mix.css
│ ├── preload.css
│ ├── stripes.css
│ ├── style.css
│ └── vars.css
├── img
│ ├── gallery-1.jpeg
│ ├── gallery-2.jpg
│ ├── gif.webp
│ ├── mac-0.png
│ ├── mac-1.png
│ ├── mac-2.png
│ ├── mac-3.png
│ ├── sam.jpg
│ ├── stripe-portrait.jpeg
│ ├── video.mp4
│ ├── zac-pro-case.jpg
│ └── zac-pro-inside.png
└── index.html
└── readme.md
/ep01/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 | Document
8 |
12 |
13 |
20 |
21 |
22 | This is a animation
23 |
24 |
25 |
26 |
--------------------------------------------------------------------------------
/ep01/style.css:
--------------------------------------------------------------------------------
1 | body {
2 | background: black;
3 | margin: 0;
4 | display: flex;
5 | justify-content: center;
6 | align-items: center;
7 | height: 100vh;
8 | color: white;
9 | }
10 |
11 | am-preloader {
12 | width: 100%;
13 | height: 100%;
14 | position: fixed;
15 | z-index: 100;
16 | display: flex;
17 | justify-content: center;
18 | align-items: center;
19 | background-color: rgba(0, 0, 0, 0.1);
20 | backdrop-filter: blur(10px) grayscale(100);
21 | }
22 |
23 | main {
24 | width: 100%;
25 | height: 100%;
26 | background: url(https://astrit.co/gallery/images/am/am_70.jpg) no-repeat
27 | center/cover;
28 | }
29 |
30 | am-logo {
31 | width: 88px;
32 | height: 40px;
33 | position: relative;
34 | }
35 |
36 | am-stripe {
37 | width: 8px;
38 | height: 100%;
39 | background: currentColor;
40 | position: absolute;
41 | animation: am 1.8s cubic-bezier(0.4, -0.29, 0.19, 1.23) infinite
42 | alternate-reverse both;
43 | }
44 |
45 | am-stripe:nth-child(1) {
46 | transform: scale(1) rotate(0deg);
47 | }
48 | am-stripe:nth-child(2) {
49 | transform: translate3d(16px, 0, 0);
50 | animation-delay: 0.1s;
51 | }
52 | am-stripe:nth-child(3) {
53 | transform: translate3d(32px, 0, 0);
54 | animation-delay: 0.2s;
55 | }
56 | am-stripe:nth-child(4) {
57 | transform: translate3d(48px, 0, 0);
58 | animation-delay: 0.3s;
59 | }
60 | am-stripe:nth-child(5) {
61 | transform: translate3d(64px, 0, 0);
62 | animation-delay: 0.4s;
63 | }
64 | am-stripe:nth-child(6) {
65 | transform: translate3d(80px, 0, 0);
66 | animation-delay: 0.6s;
67 | }
68 |
69 | @keyframes am {
70 | to {
71 | transform: translate3d(20px, 0, 0) scale(0.8) rotate(4deg);
72 | }
73 | }
74 |
--------------------------------------------------------------------------------
/ep02/.vscode/settings.json:
--------------------------------------------------------------------------------
1 | {
2 | "liveServer.settings.port": 5501
3 | }
--------------------------------------------------------------------------------
/ep02/css/gallery.css:
--------------------------------------------------------------------------------
1 | css-gallery {
2 | display: grid;
3 | position: relative;
4 | background: black;
5 | place-items: center;
6 | color: white;
7 | counter-reset: gallery;
8 | }
9 |
10 | gallery-item {
11 | --scale: 0.6;
12 | --transform: scale(var(--scale)) rotate(var(--rotate, 0));
13 | position: sticky;
14 | display: flex;
15 | transform: var(--transform);
16 | transition: var(--transition);
17 | top: 0;
18 | box-sizing: border-box;
19 | width: 100vmin;
20 | height: 100vmin;
21 | justify-content: center;
22 | --radius: calc(var(--base) / 5);
23 | margin-bottom: 10vh;
24 | }
25 |
26 | gallery-item > * {
27 | outline: none;
28 | aspect-ratio: 1 / 1;
29 | object-fit: cover;
30 | border-radius: var(--radius);
31 | width: 100%;
32 | height: 100%;
33 | box-shadow: 60px 0 180px 5px black, 0 -100px 280px black;
34 | transition: var(--transition);
35 | }
36 |
37 | [wide]:checked ~ gallery-item {
38 | --scale: 1;
39 | --rotate: 0;
40 | --radius: 10px;
41 | aspect-ratio: 16 / 9 !important;
42 | top: 10vh;
43 | z-index: 10;
44 | width: 80vw;
45 | object-fit: cover;
46 | height: 80vmin;
47 | }
48 |
49 | [wide]:checked ~ gallery-item > * {
50 | aspect-ratio: 16 / 9 !important;
51 | }
52 |
53 | [wide]:checked ~ gallery-item:after {
54 | top: calc(var(--nr-top) + 10vmin);
55 | }
56 |
57 | gallery-item:after {
58 | content: "0" counter(gallery) " ";
59 | display: flex;
60 | align-items: center;
61 | height: 2ch;
62 | width: 2ch;
63 | border-radius: 400px;
64 | padding: 1ch;
65 | backdrop-filter: blur(100px);
66 | color: white;
67 | font-size: calc(var(--base) / 4);
68 | position: sticky;
69 | top: var(--nr-top);
70 | margin-top: 5vh;
71 | margin-bottom: 20vh;
72 | counter-increment: gallery;
73 | font-weight: bold;
74 | transform: rotate(calc(var(--rotate) * -1)) scale(2);
75 | z-index: 10;
76 | transition: var(--transition);
77 | }
78 |
79 | [g1] {
80 | --rotate: -4deg;
81 | --nr-top: 10vmin;
82 | }
83 |
84 | [g2] {
85 | --rotate: -8deg;
86 | --nr-top: 20vmin;
87 | }
88 | [g3] {
89 | --rotate: -12deg;
90 | --nr-top: 30vmin;
91 | }
92 | [g4] {
93 | --rotate: -16deg;
94 | --nr-top: 40vmin;
95 | }
96 |
97 | css-gallery::after {
98 | content: "";
99 | width: 100%;
100 | height: 50vh;
101 | position: sticky;
102 | bottom: 0;
103 | z-index: 2;
104 | background: linear-gradient(to top, black, transparent);
105 | display: flex;
106 | pointer-events: none;
107 | }
108 |
109 | [wide] {
110 | display: flex;
111 | position: sticky;
112 | top: calc(100% - 110px);
113 | right: 110px;
114 | z-index: 100;
115 | outline: none;
116 | width: 60px;
117 | height: 60px;
118 | justify-self: right;
119 | appearance: none;
120 | cursor: var(--cursor-dark-hover);
121 | background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='white'%3E%3Cpath d='M3 3H9V5H5V9H3V3Z' /%3E%3Cpath d='M3 21H9V19H5V15H3V21Z' /%3E%3Cpath d='M15 21H21V15H19V19H15V21Z' /%3E%3Cpath d='M21 3H15V5H19V9H21V3Z' /%3E%3C/svg%3E")
122 | no-repeat center/24px;
123 | }
124 |
125 | [wide]:checked {
126 | z-index: 100;
127 | }
128 |
129 | [wide]:checked ~ gallery-item {
130 | margin-bottom: 80vh;
131 | }
132 |
--------------------------------------------------------------------------------
/ep02/css/horizontal.css:
--------------------------------------------------------------------------------
1 | slide-wrapper {
2 | overflow: hidden;
3 | height: 100vh;
4 | display: flex;
5 | position: relative;
6 | background: #f2f2f2;
7 | color: black;
8 | bottom: 0;
9 | }
10 |
11 | horizontal-slide {
12 | width: 100vh;
13 | height: 100vw;
14 | overflow-y: auto;
15 | overflow-x: hidden;
16 | transform-origin: right top;
17 | transform: rotate(-90deg) translate3d(0, -100vh, 0);
18 | overflow: overlay;
19 | }
20 |
21 | slide-item {
22 | width: max-content;
23 | height: 100vh;
24 | transform-origin: left top;
25 | transform: rotate(90deg) translate3d(0, -100vh, 0) scaleX(1);
26 | display: flex;
27 | align-items: center;
28 | position: sticky;
29 | font-size: calc(var(--base) / 2);
30 | font-weight: bold;
31 | letter-spacing: -0.1ch;
32 | }
33 |
34 | slide-item img {
35 | height: 40vmin;
36 | }
37 |
38 | [s0] { top: 50vh }
39 | [s1] { top: 49vh }
40 | [s2] { top: 95vh }
41 | [s3] { top: 128vh }
42 | [s4] { top: 148vh }
43 | [s6] { top: 35vw }
44 |
45 | [s5] {
46 | background: linear-gradient(to right, transparent, #f2f2f2 40%);
47 | margin-top: 10vh;
48 | width: 350vh;
49 | backdrop-filter: blur(10px);
50 | }
51 |
52 | horizontal-slide::-webkit-scrollbar {
53 | appearance: none;
54 | }
55 |
--------------------------------------------------------------------------------
/ep02/css/list.css:
--------------------------------------------------------------------------------
1 | stick-list {
2 | display: flex;
3 | width: 100%;
4 | max-width: 60vw;
5 | margin: 0 auto;
6 | color: white;
7 | flex-direction: column;
8 | line-height: 1.38;
9 | position: relative;
10 | margin-bottom: 40vh;
11 | }
12 |
13 | stick-letter {
14 | font-weight: bold;
15 | font-size: var(--base);
16 | top: var(--base);
17 | position: sticky;
18 | height: min-content;
19 | margin-right: var(--base);
20 | max-width: 2ch;
21 | }
22 |
23 | stick-item {
24 | margin-top: var(--base);
25 | display: flex;
26 | }
27 |
28 | stick-content {
29 | display: flex;
30 | flex-direction: column;
31 | }
32 |
33 | stick-title {
34 | font-weight: bold;
35 | font-size: var(--base);
36 | }
37 |
38 | stick-text {
39 | font-size: 2vw;
40 | }
41 |
42 | stick-title,
43 | stick-text {
44 | background: var(--gradient-alternate);
45 | background-clip: text;
46 | -webkit-background-clip: text;
47 | -webkit-text-fill-color: rgba(0, 0, 0, 0);
48 | background-size: cover;
49 | background-position: center;
50 | background-repeat: repeat;
51 | background-attachment: fixed;
52 | }
53 |
--------------------------------------------------------------------------------
/ep02/css/mac.css:
--------------------------------------------------------------------------------
1 | header {
2 | display: flex;
3 | font-size: 20px;
4 | height: 100px;
5 | position: sticky;
6 | top: 0;
7 | align-items: center;
8 | padding: 0 40px;
9 | }
10 |
11 | css-pro {
12 | display: grid;
13 | width: calc(var(--base) * 3);
14 | padding-bottom: calc(var(--base) * 2);
15 | grid-gap: var(--base);
16 | margin: 40px auto;
17 | }
18 |
19 | css-pro img {
20 | width: 100%;
21 | }
22 |
23 | css-title {
24 | font-size: calc(var(--base) / 2);
25 | font-weight: bold;
26 | display: flex;
27 | justify-content: center;
28 | align-items: center;
29 | height: calc(var(--base) * 2);
30 | position: sticky;
31 | top: var(--base);
32 | }
33 |
34 | css-case {
35 | position: sticky;
36 | top: var(--base);
37 | z-index: 1;
38 | }
39 |
40 | css-inside {
41 | position: sticky;
42 | top: calc(var(--base) - 8vmin);
43 | margin-bottom: -6vmin;
44 | }
45 |
--------------------------------------------------------------------------------
/ep02/css/mix.css:
--------------------------------------------------------------------------------
1 | css-mix {
2 | --mix-height: calc(var(--base) * 30);
3 | background-color: black;
4 | display: grid;
5 | grid-template-areas: "center";
6 | /* height: 400vh; */
7 | height: var(--mix-height);
8 | width: 100%;
9 | justify-content: center;
10 | place-items: flex-start;
11 | font-size: var(--base);
12 | aspect-ratio: 16 / 9;
13 | background: url(../img/sam.jpg) no-repeat fixed center/cover;
14 | position: relative;
15 | mix-blend-mode: hard-light;
16 | }
17 |
18 | css-mix::before {
19 | content: "";
20 | display: flex;
21 | width: 100%;
22 | height: 100%;
23 | position: absolute;
24 | top: 0;
25 | left: 0;
26 | background: linear-gradient(to top, black, transparent, black 30%) no-repeat
27 | center/cover;
28 | object-fit: cover;
29 | }
30 |
31 | mix-text {
32 | grid-area: center;
33 | font-weight: bold;
34 | color: transparent;
35 | background-clip: text;
36 | -webkit-background-clip: text;
37 | -webkit-text-fill-color: transparent;
38 | background-image: var(--gradient-alternate);
39 | background-attachment: fixed;
40 | aspect-ratio: 16 / 9;
41 | position: sticky;
42 | top: var(--base);
43 | display: grid;
44 | place-content: center;
45 | z-index: 0;
46 | margin-bottom: var(--base);
47 | mix-blend-mode: hard-light;
48 | }
49 |
50 | mix-bg {
51 | grid-area: center;
52 | width: var(--base);
53 | height: 100%;
54 | flex: 1;
55 | justify-self: center;
56 | transform: rotate(30deg) translateX(-1ch);
57 | pointer-events: none;
58 | mix-blend-mode: overlay;
59 | top: 0;
60 | filter: blur(20px);
61 | background: linear-gradient(
62 | to right,
63 | transparent,
64 | black,
65 | black,
66 | transparent,
67 | black,
68 | transparent,
69 | white,
70 | white,
71 | transparent,
72 | black,
73 | transparent
74 | );
75 | }
76 |
--------------------------------------------------------------------------------
/ep02/css/preload.css:
--------------------------------------------------------------------------------
1 | @property --milliseconds {
2 | inherits: false;
3 | initial-value: 0;
4 | syntax: "";
5 | }
6 |
7 | css-loader {
8 | position: fixed;
9 | display: flex;
10 | width: 100%;
11 | height: 100%;
12 | background: linear-gradient(to bottom, #ffa63d, #ff3d77, #b933f9) no-repeat center/cover;
13 | top: 0;
14 | left: 0;
15 | z-index: 300;
16 | display: flex;
17 | place-items: center;
18 | justify-content: center;
19 | animation: fade 2s var(--cubic) 2.2s forwards;
20 | pointer-events: none;
21 | }
22 |
23 | css-num {
24 | counter-reset: ms var(--milliseconds);
25 | animation: count 2s steps(100), fade 0.6s var(--cubic) 2.1s forwards;
26 | }
27 |
28 | css-num:after {
29 | content: counter(ms, decimal-leading-zero);
30 | font-size: calc(var(--base));
31 | font-weight: bold;
32 | color: white;
33 | mix-blend-mode: multiply;
34 | font-family: system-ui;
35 | font-variant-numeric: tabular-nums;
36 | }
37 |
38 | @keyframes count {
39 | to {
40 | --milliseconds: 100;
41 | }
42 | }
43 |
44 | @keyframes fade {
45 | to {
46 | opacity: 0;
47 | --bg-opacity: 0;
48 | background-position: -100%;
49 | visibility: hidden;
50 | }
51 | }
52 |
53 | @keyframes fadeIn {
54 | to {
55 | opacity: 1;
56 | transform: translate(0, 0);
57 | }
58 | }
59 |
60 | header,
61 | css-title,
62 | css-case {
63 | animation: fadeIn 0.6s var(--cubic) 2.3s forwards;
64 | opacity: 0;
65 | transform: translate(0, -60px);
66 | }
67 |
68 | css-case {
69 | animation-delay: 2.6s;
70 | }
71 |
--------------------------------------------------------------------------------
/ep02/css/stripes.css:
--------------------------------------------------------------------------------
1 | css-stripes {
2 | --base: 24vmin;
3 | --width: calc(var(--base) * 4);
4 | display: grid;
5 | grid-template-columns: repeat(3, 1fr);
6 | margin: 0 auto;
7 | width: var(--width);
8 | height: 200vh;
9 | padding-top: var(--base);
10 | }
11 |
12 | css-stripe {
13 | background: url(../img/stripe-portrait.jpeg) no-repeat fixed center/var(--width);
14 | transform: scale(0.9) skewX(-10deg);
15 | position: sticky;
16 | height: calc(var(--base) * 5);
17 | transition: var(--transition);
18 | }
19 |
20 | css-stripe:hover {
21 | transform: scale(1) skewX(-10deg);
22 | background-position: center -20px;
23 | }
24 |
25 | css-stripe:hover::before {
26 | transform: skewX(10deg) translate(0.5ch, -0.5ch);
27 | }
28 |
29 | [col1] {
30 | top: 30vh;
31 | margin-top: 15vh;
32 | margin-bottom: 40vh;
33 | }
34 |
35 | [col2] {
36 | top: 40vh;
37 | margin-top: 5vh;
38 | margin-bottom: 30vh;
39 | }
40 |
41 | [col3] {
42 | top: 25vh;
43 | margin-top: 10vh;
44 | margin-bottom: 20vh;
45 | }
46 |
47 | [col1]::before {
48 | top: 35vh;
49 | }
50 |
51 | [col2]::before {
52 | top: 45vh;
53 | }
54 |
55 | [col3]::before {
56 | top: 35vh;
57 | }
58 |
59 | css-stripe::before {
60 | content: attr(data-title);
61 | display: flex;
62 | font-size: calc(var(--base) / 2);
63 | font-weight: bold;
64 | color: white;
65 | background-clip: text;
66 | margin-bottom: -30vh;
67 | position: sticky;
68 | transform: skewX(10deg) translate(0.5ch, -2ch);
69 | transition: var(--transition);
70 | display: flex;
71 | justify-content: center;
72 | pointer-events: none;
73 | background: var(--gradient) no-repeat fixed center/cover;
74 | background-clip: text;
75 | -webkit-background-clip: text;
76 | -webkit-text-fill-color: rgba(0, 0, 0, 0);
77 | mix-blend-mode: color-dodge;
78 | }
79 |
80 | css-stripe::after {
81 | content: "";
82 | width: 100%;
83 | height: 100%;
84 | background: var(--gradient) no-repeat center/200%;
85 | mix-blend-mode: color-dodge;
86 | display: flex;
87 | position: relative;
88 | animation: glitch 4s cubic-bezier(1, -0.58, 0, 1.86) infinite backwards;
89 | top: 20%;
90 | transform: scaleX(10deg);
91 | }
92 |
93 | [col2]::after {
94 | animation-delay: 0.1s;
95 | animation-direction: alternate-reverse;
96 | }
97 |
98 | [col3]::after {
99 | animation-delay: 0.7s;
100 | }
101 |
102 | css-stripe:hover::after {
103 | animation-play-state: paused;
104 | }
105 |
--------------------------------------------------------------------------------
/ep02/css/style.css:
--------------------------------------------------------------------------------
1 | @import "vars.css";
2 | @import "preload.css";
3 | @import "mac.css";
4 | @import "stripes.css";
5 | @import "mix.css";
6 | @import "gallery.css";
7 | @import "list.css";
8 | @import "horizontal.css";
9 |
10 | body {
11 | background-color: black;
12 | margin: 0;
13 | font-family: sans-serif;
14 | letter-spacing: -0.1ch;
15 | line-height: 1;
16 | overflow: overlay;
17 | }
18 |
19 | body::-webkit-scrollbar-track {
20 | pointer-events: none;
21 | background: linear-gradient(to bottom, transparent, var(--scroll-color) 1px) no-repeat center / 1px 90%;
22 | }
23 |
24 | body::-webkit-scrollbar {
25 | width: 100px;
26 | height: 100%;
27 | }
28 |
29 | body::-webkit-scrollbar-thumb {
30 | background: var(--scroll-design);
31 | }
32 |
33 | body::-webkit-scrollbar-thumb:hover {
34 | --color: red;
35 | }
36 |
37 | [hidden] {
38 | display: none;
39 | }
40 |
41 | body {
42 | cursor: var(--cursor-dark);
43 | }
44 |
45 | [cursor]:hover {
46 | cursor: var(--cursor-dark-hover);
47 | }
48 |
49 | bg-white [cursor] {
50 | cursor: var(--cursor);
51 | }
52 |
53 | bg-white [cursor]:hover {
54 | cursor: var(--cursor-hover);
55 | }
56 |
57 | bg-white {
58 | background: white;
59 | display: flex;
60 | cursor: var(--cursor);
61 | flex-direction: column;
62 | width: 100%;
63 | }
64 |
65 | bg-black {
66 | background-color: black;
67 | display: flex;
68 | position: relative;
69 | }
--------------------------------------------------------------------------------
/ep02/css/vars.css:
--------------------------------------------------------------------------------
1 | :root {
2 | --base: 20vmin;
3 | --transition: all 0.2s;
4 | --cubic: cubic-bezier(0.175, 0.885, 0.32, 1.275);
5 | --gradient: linear-gradient(-45deg, #ffa63d, #ff3d77, #b933f9, #5f19dd);
6 | --gradient-alternate: linear-gradient(to bottom, #ffa63d, #ff3d77, #b933f9, #5f19dd, rgb(98 212 33 / 0%) 100%);
7 | --scroll-negative: black;
8 | --scroll-positive: white;
9 | --cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='black'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3C/svg%3E") 20 0, auto;
10 | --cursor-hover: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='44' height='44' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3C/svg%3E") 20 0, auto;
11 | --cursor-dark: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='white'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3C/svg%3E") 20 0, auto;
12 | --cursor-dark-hover: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='44' height='44' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='1'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3C/svg%3E") 20 0, auto;
13 | --pattern-color: rgba(255, 255, 255, 0.1);
14 | --pattern: linear-gradient(to bottom, black 50%, transparent) no-repeat fixed center top/auto calc(var(--base) * 2), radial-gradient(var(--pattern-color) 1px, transparent 0) 0 0 / 40px 40px, radial-gradient(var(--pattern-color) 1px, transparent 0) 20px 20px / 40px 40px;
15 | --scroll-color: rgba(255, 255, 255, 0.1);
16 | --scroll-design: radial-gradient(farthest-side, transparent calc(90% - 6px), var(--scroll-negative), transparent, var(--scroll-positive), transparent) no-repeat center / 20px 20px, linear-gradient(to bottom, transparent, var(--scroll-color) 4px) no-repeat center / 4px 120%, radial-gradient(farthest-side, transparent calc(90% - 2px), var(--scroll-color), transparent) no-repeat center/40px 40px, radial-gradient(farthest-side, white calc(90% - 12px), transparent) no-repeat center/6px 6px;
17 | }
18 |
19 | .youtube {
20 | display: flex;
21 | width: min-content;
22 | height: min-content;
23 | position: sticky;
24 | top: 40px;
25 | bottom: 60px;
26 | margin-top: 40px;
27 | left: 80px;
28 | font-size: 20px;
29 | align-items: center;
30 | flex-direction: column;
31 | z-index: 20;
32 | font-family: "Caveat", sans-serif;
33 | }
34 |
35 | .youtube svg {
36 | width: 40px;
37 | transition: all .4s var(--cubic);
38 | }
39 |
40 | .youtube:hover svg {
41 | transform: scale(1.1);
42 | }
43 |
44 | .youtube:before {
45 | content: "";
46 | background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='31' height='34' fill='none'%3E%3Cpath d='M30 9S12 8 4 25' stroke='gray' stroke-miterlimit='10'/%3E%3Cpath d='M9 24v-1l-5 2-1-5H2l2 6 5-2z' fill='gray'/%3E%3C/svg%3E") no-repeat center/contain;
47 | width: 36px;
48 | height: 39px;
49 | transition: all .4s var(--cubic);
50 | margin-left: 20px;
51 | transform-origin: 36px 39px;
52 | }
53 |
54 | .youtube:hover:before {
55 | transform: rotate(-15deg);
56 | }
57 |
58 | .youtube span {
59 | position: absolute;
60 | color: white;
61 | width: 10ch;
62 | left: 8ch;
63 | top: -2ex;
64 | color: gray;
65 | transition: all .4s var(--cubic);
66 | font-weight: normal;
67 | transform-origin: 10ch 2ex;
68 | }
69 |
70 | .youtube:hover span {
71 | transform: scale(1.1);
72 | }
73 |
74 | @keyframes glitch {
75 | 0% { clip-path: polygon( 0 2% , 100% 2% , 100% 5% , 0 5% ); opacity: 1 }
76 | 2% { clip-path: polygon( 0 15%, 100% 15%, 100% 15%, 0 15% ) }
77 | 4% { clip-path: polygon( 0 10%, 100% 10%, 100% 20%, 0 20% ) }
78 | 6% { clip-path: polygon( 0 1% , 100% 1% , 100% 2% , 0 2% ) }
79 | 8% { clip-path: polygon( 0 33%, 100% 33%, 100% 33%, 0 33% ) }
80 | 10% { clip-path: polygon( 0 44%, 100% 44%, 100% 44%, 0 44% ) }
81 | 12% { clip-path: polygon( 0 50%, 100% 50%, 100% 20%, 0 20% ) }
82 | 14% { clip-path: polygon( 0 70%, 100% 70%, 100% 70%, 0 70% ) }
83 | 16% { clip-path: polygon( 0 80%, 100% 80%, 100% 80%, 0 80% ) }
84 | 18% { clip-path: polygon( 0 50%, 100% 50%, 100% 55%, 0 55% ) }
85 | 20% { clip-path: polygon( 0 70%, 100% 70%, 100% 80%, 0 80% ) }
86 | 21.9% { clip-path: polygon( 0 50%, 100% 50%, 100% 55%, 0 55% ) }
87 | 28% { opacity: 1 }
88 | 82%, 100% { clip-path: polygon( 0 0 , 0 0 , 0 0 , 0 0 ); opacity: 0 }
89 | }
--------------------------------------------------------------------------------
/ep02/img/gallery-1.jpeg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/astrit/youtube/e543ecdbf1221c932025fc06deaa9393cb80d393/ep02/img/gallery-1.jpeg
--------------------------------------------------------------------------------
/ep02/img/gallery-2.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/astrit/youtube/e543ecdbf1221c932025fc06deaa9393cb80d393/ep02/img/gallery-2.jpg
--------------------------------------------------------------------------------
/ep02/img/gif.webp:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/astrit/youtube/e543ecdbf1221c932025fc06deaa9393cb80d393/ep02/img/gif.webp
--------------------------------------------------------------------------------
/ep02/img/mac-0.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/astrit/youtube/e543ecdbf1221c932025fc06deaa9393cb80d393/ep02/img/mac-0.png
--------------------------------------------------------------------------------
/ep02/img/mac-1.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/astrit/youtube/e543ecdbf1221c932025fc06deaa9393cb80d393/ep02/img/mac-1.png
--------------------------------------------------------------------------------
/ep02/img/mac-2.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/astrit/youtube/e543ecdbf1221c932025fc06deaa9393cb80d393/ep02/img/mac-2.png
--------------------------------------------------------------------------------
/ep02/img/mac-3.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/astrit/youtube/e543ecdbf1221c932025fc06deaa9393cb80d393/ep02/img/mac-3.png
--------------------------------------------------------------------------------
/ep02/img/sam.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/astrit/youtube/e543ecdbf1221c932025fc06deaa9393cb80d393/ep02/img/sam.jpg
--------------------------------------------------------------------------------
/ep02/img/stripe-portrait.jpeg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/astrit/youtube/e543ecdbf1221c932025fc06deaa9393cb80d393/ep02/img/stripe-portrait.jpeg
--------------------------------------------------------------------------------
/ep02/img/video.mp4:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/astrit/youtube/e543ecdbf1221c932025fc06deaa9393cb80d393/ep02/img/video.mp4
--------------------------------------------------------------------------------
/ep02/img/zac-pro-case.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/astrit/youtube/e543ecdbf1221c932025fc06deaa9393cb80d393/ep02/img/zac-pro-case.jpg
--------------------------------------------------------------------------------
/ep02/img/zac-pro-inside.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/astrit/youtube/e543ecdbf1221c932025fc06deaa9393cb80d393/ep02/img/zac-pro-inside.png
--------------------------------------------------------------------------------
/ep02/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 | CSS Position Sticky
8 |
15 |
17 |
18 |
19 |
20 | Mac Pro
21 |
22 |
24 |
25 |
27 |
28 |
29 |
30 |
32 | Watch me
34 |
35 |
36 |
37 |
38 |
42 |
43 |
44 | inception
45 |
47 |
48 |
50 |
52 |
53 |
55 |
56 | VIDEO
60 |
61 |
62 |
63 |
65 |
66 |
67 |
68 |
69 | 01
70 |
71 | Did
72 |
73 | Lorem ipsum dolor sit amet consectetur adipisicing elit. Culpa
74 | sunt dolorum eaque est, recusandae fugiat voluptate harum, aliquid
75 | quam velit mollitia fuga ipsa dolorem rerum rem beatae odio.
76 | Consequuntur, veritatis.
82 |
83 |
84 |
85 | 02
86 |
87 | You
88 |
89 | Lorem ipsum dolor sit amet consectetur adipisicing elit. Culpa
90 | sunt dolorum eaque est, recusandae fugiat voluptate harum, aliquid
91 | quam velit mollitia fuga ipsa dolorem rerum rem beatae odio.
92 | Consequuntur, veritatis.
98 |
99 |
100 |
101 | 03
102 |
103 | Sub ?
104 |
105 | Lorem ipsum dolor sit amet consectetur adipisicing elit. Culpa
106 | sunt dolorum eaque est, recusandae fugiat voluptate harum, aliquid
107 | quam velit mollitia fuga ipsa dolorem rerum rem beatae odio.
108 | Consequuntur, veritatis.
114 |
115 |
116 |
117 | 04
118 |
119 | Let's do it!
120 |
121 | Lorem ipsum dolor sit amet consectetur adipisicing elit. Culpa
122 | sunt dolorum eaque est, recusandae fugiat voluptate harum, aliquid
123 | quam velit mollitia fuga ipsa dolorem rerum rem beatae odio.
124 | Consequuntur, veritatis.
130 |
131 |
132 |
133 |
134 |
135 |
136 |
137 | Mac Pro
138 |
139 |
141 |
142 |
144 |
145 |
147 |
148 |
150 |
151 | Power the pro.
152 |
153 |
154 |
155 |
156 |
157 |
164 |
165 |
166 |
--------------------------------------------------------------------------------
/readme.md:
--------------------------------------------------------------------------------
1 | #### Source Code from:
2 |
3 | ### [youtube.com/astrit](https://www.youtube.com/astrit)
4 |
5 | ---
6 |
7 | ### [EP:01 - CSS Animation: translate3d, backdrop-filter and custom tags](https://github.com/astrit/youtube/tree/master/ep01)
8 |
--------------------------------------------------------------------------------
23 | 
26 | 
51 | 
54 | 
140 | 
143 | 
146 | 
149 |