 Welly 💻 📖 🚧 |
613 |
31 |
190 | );
191 | };
192 |
193 | export default Animations;
194 |
--------------------------------------------------------------------------------
/app/src/Animations/styles.module.scss:
--------------------------------------------------------------------------------
1 | @import "../mixins/mq.scss";
2 | @import "../mixins/common.scss";
3 |
4 | .container {
5 | @include container;
6 |
7 | margin-bottom: 7rem;
8 |
9 | .title {
10 | @include title;
11 | }
12 |
13 | .subtitle {
14 | @include subtitle;
15 | }
16 |
17 | .link {
18 | color: #fff;
19 |
20 | &:hover {
21 | text-decoration: none;
22 | }
23 | }
24 |
25 | .target {
26 | display: flex;
27 | justify-content: center;
28 | align-items: center;
29 | margin-bottom: 2.5rem;
30 | width: 140px;
31 | height: 140px;
32 | font-size: 6rem;
33 | background: #333;
34 | cursor: pointer;
35 | user-select: none;
36 |
37 | &:focus {
38 | outline: none;
39 | }
40 |
41 | @include sm {
42 | width: 200px;
43 | height: 200px;
44 | font-size: 7rem;
45 | }
46 | }
47 |
48 | .select {
49 | appearance: none;
50 | appearance: none;
51 | appearance: none;
52 | padding: 0.5rem 1rem;
53 | border: 1px dashed #fff;
54 | border-radius: 0;
55 | font-weight: bold;
56 | color: #fff;
57 | background-color: #000 !important;
58 | background-image: url("data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22292.4%22%20height%3D%22292.4%22%3E%3Cpath%20fill%3D%22%23FFFFF2%22%20d%3D%22M287%2069.4a17.6%2017.6%200%200%200-13-5.4H18.4c-5%200-9.3%201.8-12.9%205.4A17.6%2017.6%200%200%200%200%2082.2c0%205%201.8%209.3%205.4%2012.9l128%20127.9c3.6%203.6%207.8%205.4%2012.8%205.4s9.2-1.8%2012.8-5.4L287%2095c3.5-3.5%205.4-7.8%205.4-12.8%200-5-1.9-9.2-5.5-12.8z%22%2F%3E%3C%2Fsvg%3E");
59 | background-repeat: no-repeat;
60 | background-position: right 1rem top 50%;
61 | background-size: 0.7rem auto;
62 |
63 | &:hover {
64 | background-color: rgb(255 255 255 / 20%);
65 | }
66 |
67 | &:focus {
68 | outline: none;
69 | }
70 |
71 | &::-ms-expand {
72 | display: none;
73 | }
74 | }
75 | }
76 |
--------------------------------------------------------------------------------
/app/src/App/index.tsx:
--------------------------------------------------------------------------------
1 | import type { FC } from "react";
2 |
3 | import GitHubCorner from "../GitHubCorner";
4 | import Main from "../Main";
5 | import Animate from "../Animations";
6 | import "./styles.scss";
7 |
8 | const App: FC = () => (
9 | <>
10 | 32 | ANIMATIONS 33 |
34 |35 | A collection of animations for Web Animations API, based on{" "} 36 | 42 | Animate.className 43 | 44 | . 45 |
46 |
54 |
55 | 🍿
56 |
57 |
58 |
189 |
74 |
131 | );
132 | };
133 |
134 | export default Main;
135 |
--------------------------------------------------------------------------------
/app/src/Main/styles.module.scss:
--------------------------------------------------------------------------------
1 | @import "../mixins/mq.scss";
2 | @import "../mixins/common.scss";
3 |
4 | .container {
5 | @include container;
6 |
7 | .title {
8 | @include title;
9 | }
10 |
11 | .subtitle {
12 | @include subtitle;
13 | }
14 |
15 | .mask {
16 | position: relative;
17 | margin-bottom: 2.5rem;
18 | width: 87vw;
19 | text-align: left;
20 | overflow: hidden;
21 | user-select: none;
22 |
23 | @include md {
24 | width: 29rem;
25 | }
26 | }
27 |
28 | .block {
29 | position: absolute;
30 | height: 100%;
31 | background: #fff;
32 | }
33 |
34 | .txt {
35 | font-family: "Bowlby One SC", cursive;
36 | font-size: 12vw;
37 | opacity: 0;
38 |
39 | @include md {
40 | font-size: 4rem;
41 | }
42 | }
43 |
44 | .heart {
45 | position: absolute;
46 | top: 100%;
47 | margin-left: 1rem;
48 | font-size: 9vw;
49 | color: #f00;
50 |
51 | @include md {
52 | font-size: 3rem;
53 | }
54 | }
55 |
56 | .btn {
57 | padding: 0.5rem;
58 | border: 1px dashed #fff;
59 | font-weight: bold;
60 | color: #fff;
61 | background: none;
62 | cursor: pointer;
63 |
64 | &:not(:first-of-type) {
65 | margin-left: -1px;
66 | }
67 |
68 | &:hover {
69 | background: rgb(255 255 255 / 20%);
70 | }
71 |
72 | &:focus {
73 | outline: none;
74 | }
75 |
76 | @include sm {
77 | padding: 0.5rem 1rem;
78 | }
79 | }
80 |
81 | .slider {
82 | position: relative;
83 | margin-top: 1.5rem;
84 | width: 100%;
85 | background: none;
86 | appearance: none;
87 |
88 | &:focus {
89 | border: none;
90 | outline: none;
91 | }
92 |
93 | &::-moz-range-track {
94 | background: #fff;
95 | }
96 |
97 | &::-webkit-slider-thumb {
98 | appearance: none;
99 | width: 21px;
100 | height: 21px;
101 | background: #fff;
102 | cursor: pointer;
103 | }
104 |
105 | &::-moz-range-thumb {
106 | width: 21px;
107 | height: 21px;
108 | border: none;
109 | background: #fff;
110 | cursor: pointer;
111 | }
112 |
113 | &::after {
114 | content: "";
115 | position: absolute;
116 | top: 10px;
117 | width: 100%;
118 | height: 1px;
119 | background: #fff;
120 | cursor: pointer;
121 | }
122 | }
123 | }
124 |
--------------------------------------------------------------------------------
/app/src/index.tsx:
--------------------------------------------------------------------------------
1 | import { StrictMode } from "react";
2 | import { createRoot } from "react-dom/client";
3 | import "normalize.css";
4 |
5 | import App from "./App";
6 |
7 | const root = createRoot(document.getElementById("root") as HTMLElement);
8 | root.render(
9 | USE-WEB-ANIMATIONS
75 |76 | React hook for highly-performant and manipulable animations using Web 77 | Animations API. 78 |
79 |
80 |
81 |
82 | BLACK LIVES MATTER
83 |
84 |
85 | ❤
86 |
87 |
88 |
89 |
130 |
90 |
98 |
106 |
114 |
122 |
123 |
129 |