├── .gitignore
├── flashlight-hover
├── main.js
├── index.html
├── styles.css
└── logo.svg
├── horizontal-scroll
├── main.js
├── logo.svg
├── styles.css
├── index.html
├── 6.svg
├── 3.svg
├── 4.svg
├── 2.svg
├── 5.svg
└── 1.svg
├── flashlight-grid
├── main.js
├── styles.css
└── index.html
├── scroll-top-button
├── main.js
├── styles.css
├── logo.svg
└── index.html
└── tooltip-slider
├── main.js
├── index.html
└── styles.css
/.gitignore:
--------------------------------------------------------------------------------
1 | .DS_STORE
--------------------------------------------------------------------------------
/flashlight-hover/main.js:
--------------------------------------------------------------------------------
1 | //this is a sample flashlight effect
2 |
3 | const light = document.querySelector("#light");
4 |
5 | const handleMove = (e) => {
6 | light.style.translate = `${e.pageX - 250}px ${e.pageY - 250}px`;
7 | };
8 |
9 | document.addEventListener("mousemove", handleMove);
10 |
--------------------------------------------------------------------------------
/flashlight-hover/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 | Flashlight Hover
7 |
11 | Secret Text
12 |
13 |
14 |
15 |
--------------------------------------------------------------------------------
/horizontal-scroll/main.js:
--------------------------------------------------------------------------------
1 | gsap.registerPlugin(ScrollTrigger);
2 |
3 | const sections = gsap.utils.toArray(".panel"),
4 | container = document.querySelector(".container");
5 |
6 | gsap.to(sections, {
7 | xPercent: -100 * (sections.length - 1),
8 | ease: "none",
9 | scrollTrigger: {
10 | trigger: ".container",
11 | pin: true,
12 | scrub: 1,
13 | snap: 1 / (sections.length - 1),
14 | end: () => "+=" + container.offsetWidth,
15 | },
16 | });
17 |
--------------------------------------------------------------------------------
/flashlight-grid/main.js:
--------------------------------------------------------------------------------
1 | const cards = document.querySelectorAll(".card");
2 | const wrapper = document.querySelector(".cards");
3 |
4 | wrapper.addEventListener("mousemove", (event) => {
5 | cards.forEach((card) => {
6 | const rect = card.getBoundingClientRect();
7 | const x = event.clientX - rect.left;
8 | const y = event.clientY - rect.top;
9 | card.style.setProperty("--xPos", `${x}px`);
10 | card.style.setProperty("--yPos", `${y}px`);
11 | });
12 | });
13 |
--------------------------------------------------------------------------------
/scroll-top-button/main.js:
--------------------------------------------------------------------------------
1 | const scrollTopButton = document.querySelector("#scroll-top-button");
2 | const nav = document.querySelector("#nav");
3 |
4 | const onScroll = (event) => {
5 | const scrollPosition = event.target.scrollingElement.scrollTop;
6 |
7 | scrollTopButton.classList.toggle("visible", scrollPosition > 0);
8 | nav.classList.toggle("scrolled", scrollPosition > 0);
9 | };
10 |
11 | const scrollToTop = () => {
12 | window.scrollTo({ top: 0, behavior: "smooth" });
13 | };
14 |
15 | document.addEventListener("scroll", onScroll);
16 |
--------------------------------------------------------------------------------
/tooltip-slider/main.js:
--------------------------------------------------------------------------------
1 | const output = document.querySelector("#output"),
2 | bar = document.querySelector("#bar"),
3 | svg = document.querySelector("#svg"),
4 | size = document.querySelector("#size"),
5 | thumbSize = 16;
6 |
7 | const min = Number(size.getAttribute("min")),
8 | max = Number(size.getAttribute("max")),
9 | tooltipSize = Number(output.clientWidth);
10 |
11 | const handleChange = (event) => {
12 | const { value } = event.target;
13 | const valueNumber = Number(value);
14 | const valueString = `${value}px`;
15 | const pos = (valueNumber - min) / (max - min);
16 | const thumbCorrect = thumbSize * (pos - 0.5) * -1;
17 |
18 | const outputLeft = `${Math.round(
19 | pos * 200 - tooltipSize / 4 + thumbCorrect
20 | )}px`;
21 |
22 | output.style.left = outputLeft;
23 | output.innerHTML = valueString;
24 | bar.style.width = valueString;
25 | svg.style.width = valueString;
26 | };
27 |
--------------------------------------------------------------------------------
/tooltip-slider/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 | Slider 1
8 |
2 |
7 |
--------------------------------------------------------------------------------
/scroll-top-button/styles.css:
--------------------------------------------------------------------------------
1 | body {
2 | margin: 0;
3 | padding-top: 72px;
4 | font-family: Poppins;
5 | }
6 |
7 | * {
8 | box-sizing: border-box;
9 | }
10 |
11 | nav {
12 | position: fixed;
13 | top: 0;
14 | left: 0;
15 | display: flex;
16 | align-items: center;
17 | justify-content: space-between;
18 | height: 72px;
19 | width: 100%;
20 | background: #ffffff;
21 | transition: 0.3s;
22 | }
23 |
24 | nav.scrolled {
25 | box-shadow: 0 10px 20px rgb(0 0 0 / 8%);
26 | }
27 |
28 | nav img {
29 | width: 30px;
30 | height: 30px;
31 | }
32 |
33 | nav div {
34 | display: flex;
35 | gap: 12px;
36 | opacity: 0.7;
37 | }
38 |
39 | .container {
40 | padding-left: 5%;
41 | padding-right: 5%;
42 | }
43 |
44 | .scroll-top-button {
45 | position: fixed;
46 | right: 20px;
47 | bottom: 36px;
48 | display: grid;
49 | place-items: center;
50 | width: 64px;
51 | height: 64px;
52 | border: 0;
53 | border-radius: 50%;
54 | background: #4285f4;
55 | color: #f9f9f9;
56 | cursor: pointer;
57 | opacity: 0;
58 | visibility: hidden;
59 | transition: 0.3s;
60 | }
61 |
62 | .scroll-top-button.visible {
63 | opacity: 1;
64 | visibility: visible;
65 | }
66 |
--------------------------------------------------------------------------------
/flashlight-hover/styles.css:
--------------------------------------------------------------------------------
1 | * {
2 | box-sizing: border-box;
3 | }
4 |
5 | body {
6 | margin: 0;
7 | height: 100vh;
8 | background: #000;
9 | color: #000;
10 | display: grid;
11 | place-items: center;
12 | font-family: "Euclid Circular A", "Poppins";
13 | }
14 |
15 | h1 {
16 | position: relative;
17 | z-index: 2;
18 | width: 100%;
19 | height: 300px;
20 | font-size: 40px;
21 | display: grid;
22 | place-items: center;
23 | padding: 30px 0;
24 | }
25 |
26 | #light {
27 | position: absolute;
28 | top: 0;
29 | left: 0;
30 | width: 500px;
31 | height: 500px;
32 | box-shadow: inset 0 0 200px 200px #000;
33 | background: #fff;
34 | z-index: 1;
35 | transition: opacity 0.3s;
36 | }
37 |
38 | footer {
39 | display: flex;
40 | flex-direction: column;
41 | padding: 80px 60px;
42 | position: relative;
43 | z-index: 0;
44 | }
45 |
46 | footer .top {
47 | border-bottom: 2px solid rgb(255 255 255 / 16%);
48 | padding-bottom: 20px;
49 | }
50 |
51 | footer .top > img {
52 | display: block;
53 | width: 100px;
54 | }
55 |
56 | footer .bottom {
57 | display: flex;
58 | color: rgb(0 0 0 / 50%);
59 | }
60 |
61 | ul {
62 | list-style: none;
63 | padding: 0;
64 | columns: 3 120px;
65 | }
66 |
67 | ul li {
68 | padding: 6px 0;
69 | }
70 |
--------------------------------------------------------------------------------
/horizontal-scroll/styles.css:
--------------------------------------------------------------------------------
1 | html {
2 | overflow-y: scroll;
3 | height: 100%;
4 | -webkit-overflow-scrolling: touch;
5 | overflow-scrolling: touch;
6 | }
7 |
8 | * {
9 | box-sizing: border-box;
10 | }
11 |
12 | body {
13 | overflow-y: visible;
14 | position: relative;
15 | height: unset;
16 | font-family: "Euclid Circular A", "Poppins";
17 | color: #222222;
18 | text-align: center;
19 | }
20 | html,
21 | body {
22 | overflow-x: hidden;
23 | margin: 0;
24 | }
25 |
26 | .container {
27 | width: 200%;
28 | height: 100vh;
29 | display: flex;
30 | flex-wrap: nowrap;
31 | background: #f7f7f7;
32 | }
33 |
34 | img {
35 | width: 200px;
36 | height: 200px;
37 | object-fit: contain;
38 | }
39 |
40 | .banner h2,
41 | .footer h2 {
42 | margin: 20px 0;
43 | }
44 |
45 | nav {
46 | position: fixed;
47 | z-index: 1;
48 | top: 0;
49 | left: 0;
50 | width: 100%;
51 | height: 60px;
52 | display: flex;
53 | align-items: center;
54 | justify-content: space-between;
55 | padding: 0 24px 0 16px;
56 | background: #fff;
57 | box-shadow: 0 0 20px rgb(0 0 0 / 8%);
58 | }
59 |
60 | nav a {
61 | text-decoration: none;
62 | color: inherit;
63 | margin-left: 20px;
64 | font-size: 14px;
65 | }
66 |
67 | nav img {
68 | width: 32px;
69 | height: 32px;
70 | }
71 |
72 | section {
73 | display: flex;
74 | flex-direction: column;
75 | justify-content: center;
76 | align-items: center;
77 | height: 100vh;
78 | padding: 0 80px;
79 | }
80 |
81 | h2 {
82 | margin: 50px 0 20px;
83 | }
84 |
85 | p {
86 | opacity: 0.66;
87 | font-size: 16px;
88 | }
89 |
90 | .banner {
91 | flex-direction: row;
92 | text-align: left;
93 | gap: 30px;
94 | background: #ccb7ff;
95 | }
96 |
97 | .footer {
98 | background: #ffffff;
99 | }
100 |
101 | .panel {
102 | width: 100%;
103 | height: 100%;
104 | }
105 |
106 | .container .panel:nth-child(odd) {
107 | background: #fff;
108 | }
109 |
--------------------------------------------------------------------------------
/flashlight-grid/styles.css:
--------------------------------------------------------------------------------
1 | body {
2 | margin: 0;
3 | height: 100vh;
4 | display: grid;
5 | place-items: center;
6 | background: #0c1016;
7 | color: #ffffff;
8 | font-family: "Euclid Circular A";
9 | overflow-x: hidden;
10 | }
11 |
12 | * {
13 | box-sizing: border-box;
14 | user-select: none;
15 | }
16 |
17 | .cards {
18 | display: grid;
19 | grid-template-columns: repeat(4, 150px);
20 | grid-template-rows: repeat(4, 150px);
21 | gap: 8px;
22 | padding: 32px;
23 | }
24 |
25 | .cards:hover .card {
26 | background: radial-gradient(
27 | 800px circle at var(--xPos) var(--yPos),
28 | rgba(0, 255, 241, 0.4),
29 | transparent 15%
30 | );
31 | }
32 |
33 | .card {
34 | position: relative;
35 | display: flex;
36 | justify-content: center;
37 | align-items: center;
38 | background: radial-gradient(
39 | 400px circle at 0 0,
40 | rgba(0, 255, 241, 0),
41 | transparent 0%
42 | );
43 | border-radius: 8px;
44 | transition: 0.15s;
45 | }
46 |
47 | .cards .card:hover::before {
48 | opacity: 1;
49 | }
50 |
51 | .card::before {
52 | content: "";
53 | position: absolute;
54 | top: 0;
55 | left: 0;
56 | right: 0;
57 | bottom: 0;
58 | border-radius: inherit;
59 | background: radial-gradient(
60 | 500px circle at var(--xPos) var(--yPos),
61 | rgba(0, 255, 241, 0.1),
62 | transparent 35%
63 | );
64 | opacity: 0;
65 | transition: all 0.15s ease-in-out;
66 | }
67 |
68 | .card-content {
69 | display: flex;
70 | flex-direction: column;
71 | justify-content: center;
72 | align-items: center;
73 | gap: 16px;
74 | background: #13161c;
75 | border-radius: inherit;
76 | transition: all 0.25s;
77 | height: calc(100% - 2px);
78 | width: calc(100% - 2px);
79 | }
80 |
81 | .card :is(i, h2) {
82 | opacity: 0.45;
83 | transition: 0.3s;
84 | }
85 |
86 | .card:hover :is(i, h2) {
87 | opacity: 1;
88 | }
89 |
90 | .card i {
91 | font-size: 38px;
92 | }
93 |
94 | .card h2 {
95 | margin: 0;
96 | font-weight: 400;
97 | font-size: 19px;
98 | }
99 |
--------------------------------------------------------------------------------
/scroll-top-button/logo.svg:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 | Google-color
6 | Created with Sketch.
7 |
8 |
9 |
10 |
11 |
12 |
13 |
14 |
15 |
16 |
17 |
18 |
19 |
20 |
21 |
22 |
23 |
24 |
25 |
26 |
27 |
28 |
--------------------------------------------------------------------------------
/tooltip-slider/styles.css:
--------------------------------------------------------------------------------
1 | html,
2 | body {
3 | height: 100%;
4 | }
5 |
6 | body {
7 | margin: 0;
8 | display: grid;
9 | place-items: center;
10 | font-family: "Euclid Circular A", "Poppins";
11 | color: #222222;
12 | background: #f6efff;
13 | }
14 |
15 | output {
16 | position: absolute;
17 | top: -24px;
18 | left: -20px;
19 | display: grid;
20 | place-items: center;
21 | width: 40px;
22 | height: 20px;
23 | margin-left: -10px;
24 | background: #393342;
25 | text-align: center;
26 | color: #f9f9f9;
27 | font-size: 10px;
28 | border-radius: 3px;
29 | opacity: 0;
30 | visibility: hidden;
31 | transition-property: opacity, visibility;
32 | transition-duration: 0.3s;
33 | }
34 |
35 | output::after {
36 | content: "";
37 | position: absolute;
38 | z-index: -1;
39 | top: 14px;
40 | left: 50%;
41 | translate: -50% 0;
42 | rotate: 45deg;
43 | width: 10px;
44 | height: 10px;
45 | border-radius: 1px;
46 | background: inherit;
47 | }
48 |
49 | .slider {
50 | position: relative;
51 | grid-column: span 2;
52 | height: 16px;
53 | }
54 |
55 | label {
56 | color: #8e8699;
57 | }
58 |
59 | input[type="range"],
60 | input[type="range"]::-webkit-slider-thumb {
61 | appearance: none;
62 | -webkit-appearance: none;
63 | }
64 |
65 | input[type="range"] {
66 | width: 200px;
67 | height: 6px;
68 | padding: 0;
69 | border: 0;
70 | border-radius: 3px;
71 | margin: auto;
72 | background: #dfd6ec;
73 | cursor: pointer;
74 | }
75 |
76 | input[type="range"]::-webkit-slider-thumb {
77 | position: relative;
78 | z-index: 2;
79 | background: #8f44fd;
80 | width: 16px;
81 | height: 16px;
82 | border-radius: 50px;
83 | border: 2px solid #f6efff;
84 | cursor: pointer;
85 | transition: 0.3s;
86 | }
87 |
88 | input[type="range"]::-webkit-slider-thumb:hover {
89 | scale: 1.125;
90 | }
91 |
92 | input[type="range"]:focus ~ output {
93 | opacity: 1;
94 | visibility: visible;
95 | }
96 |
97 | .bar {
98 | position: absolute;
99 | z-index: 1;
100 | left: 0;
101 | bottom: 0;
102 | height: 6px;
103 | border-radius: 3px;
104 | background: #8f44fd;
105 | pointer-events: none;
106 | }
107 |
--------------------------------------------------------------------------------
/horizontal-scroll/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 | Horizontal Scroll
8 |
18 |
26 |
27 |
28 |
Welcome
29 |
Lorem ipsum dolor sit, amet consectetur adipisicing elit.
30 |
33 |
34 |
35 | About Us
37 |
38 | Lorem ipsum dolor sit, amet consectetur adipisicing elit. Animi labore
39 | eius cum perferendis consectetur culpa laboriosam quam, sed ea nihil,
40 | suscipit, quidem est expedita. Nihil enim obcaecati deleniti eaque
41 | sed.
42 |
43 |
44 |
45 | Services
47 |
48 | Lorem ipsum dolor sit, amet consectetur adipisicing elit. Animi labore
49 | eius cum perferendis consectetur culpa laboriosam quam, sed ea nihil,
50 | suscipit, quidem est expedita. Nihil enim obcaecati deleniti eaque
51 | sed.
52 |
53 |
54 |
Flashlight Grid
7 |
15 |
16 |
17 |
Ace
19 |
20 |
21 |
22 |
23 |
Act
25 |
26 |
27 |
28 |
29 |
Algo
31 |
32 |
33 |
34 |
35 |
36 |
Astro
38 |
39 |
40 |
41 |
42 |
Atl
44 |
45 |
46 |
47 |
48 |
Auc
50 |
51 |
52 |
53 |
54 |
55 |
Banca
57 |
58 |
59 |
60 |
61 |
Bbr
63 |
64 |
65 |
66 |
67 |
Bay
69 |
70 |
71 |
72 |
73 |
Bcn
75 |
76 |
77 |
78 |
79 |
Bcpt
81 |
82 |
83 |
84 |
85 |
Bdg
87 |
88 |
89 |
90 |
91 |
Bdl
93 |
94 |
95 |
96 |
97 |
Bela
99 |
100 |
101 |
102 |
103 |
Blitz
105 |
106 |
107 |
108 |
109 |
Block
111 |
112 |
113 |
2 |
9 |
--------------------------------------------------------------------------------
/horizontal-scroll/6.svg:
--------------------------------------------------------------------------------
1 | Scroll To Top Button
8 |
22 |
24 | home
25 | lock
26 | settings
27 |
28 |
29 |
35 | arrow_upward
36 |
37 | Lorem ipsum dolor
38 |
39 | Lorem ipsum, dolor sit amet consectetur adipisicing elit. Distinctio
40 | voluptatum soluta sapiente cupiditate excepturi earum labore hic
41 | dignissimos. Odio rerum nulla qui unde aliquam dolorum quae debitis
42 | accusantium est soluta.
43 |
44 |
45 | Lorem ipsum, dolor sit amet consectetur adipisicing elit. Distinctio
46 | voluptatum soluta sapiente cupiditate excepturi earum labore hic
47 | dignissimos. Odio rerum nulla qui unde aliquam dolorum quae debitis
48 | accusantium est soluta.
49 |
50 |
51 | Lorem ipsum, dolor sit amet consectetur adipisicing elit. Distinctio
52 | voluptatum soluta sapiente cupiditate excepturi earum labore hic
53 | dignissimos. Odio rerum nulla qui unde aliquam dolorum quae debitis
54 | accusantium est soluta.
55 |
56 | Lorem ipsum dolor
57 |
58 | Lorem ipsum, dolor sit amet consectetur adipisicing elit. Distinctio
59 | voluptatum soluta sapiente cupiditate excepturi earum labore hic
60 | dignissimos. Odio rerum nulla qui unde aliquam dolorum quae debitis
61 | accusantium est soluta.
62 |
63 |
64 | Lorem ipsum, dolor sit amet consectetur adipisicing elit. Distinctio
65 | voluptatum soluta sapiente cupiditate excepturi earum labore hic
66 | dignissimos. Odio rerum nulla qui unde aliquam dolorum quae debitis
67 | accusantium est soluta.
68 |
69 |
70 | Lorem ipsum, dolor sit amet consectetur adipisicing elit. Distinctio
71 | voluptatum soluta sapiente cupiditate excepturi earum labore hic
72 | dignissimos. Odio rerum nulla qui unde aliquam dolorum quae debitis
73 | accusantium est soluta.
74 |
75 | Lorem ipsum dolor
76 |
77 | Lorem ipsum, dolor sit amet consectetur adipisicing elit. Distinctio
78 | voluptatum soluta sapiente cupiditate excepturi earum labore hic
79 | dignissimos. Odio rerum nulla qui unde aliquam dolorum quae debitis
80 | accusantium est soluta.
81 |
82 |
83 | Lorem ipsum, dolor sit amet consectetur adipisicing elit. Distinctio
84 | voluptatum soluta sapiente cupiditate excepturi earum labore hic
85 | dignissimos. Odio rerum nulla qui unde aliquam dolorum quae debitis
86 | accusantium est soluta.
87 |
88 |
89 | Lorem ipsum, dolor sit amet consectetur adipisicing elit. Distinctio
90 | voluptatum soluta sapiente cupiditate excepturi earum labore hic
91 | dignissimos. Odio rerum nulla qui unde aliquam dolorum quae debitis
92 | accusantium est soluta.
93 |
94 | Lorem ipsum dolor
95 |
96 | Lorem ipsum, dolor sit amet consectetur adipisicing elit. Distinctio
97 | voluptatum soluta sapiente cupiditate excepturi earum labore hic
98 | dignissimos. Odio rerum nulla qui unde aliquam dolorum quae debitis
99 | accusantium est soluta.
100 |
101 |
102 | Lorem ipsum, dolor sit amet consectetur adipisicing elit. Distinctio
103 | voluptatum soluta sapiente cupiditate excepturi earum labore hic
104 | dignissimos. Odio rerum nulla qui unde aliquam dolorum quae debitis
105 | accusantium est soluta.
106 |
107 |
108 | Lorem ipsum, dolor sit amet consectetur adipisicing elit. Distinctio
109 | voluptatum soluta sapiente cupiditate excepturi earum labore hic
110 | dignissimos. Odio rerum nulla qui unde aliquam dolorum quae debitis
111 | accusantium est soluta.
112 |
113 | Lorem ipsum dolor
114 |
115 | Lorem ipsum, dolor sit amet consectetur adipisicing elit. Distinctio
116 | voluptatum soluta sapiente cupiditate excepturi earum labore hic
117 | dignissimos. Odio rerum nulla qui unde aliquam dolorum quae debitis
118 | accusantium est soluta.
119 |
120 |
121 | Lorem ipsum, dolor sit amet consectetur adipisicing elit. Distinctio
122 | voluptatum soluta sapiente cupiditate excepturi earum labore hic
123 | dignissimos. Odio rerum nulla qui unde aliquam dolorum quae debitis
124 | accusantium est soluta.
125 |
126 |
127 | Lorem ipsum, dolor sit amet consectetur adipisicing elit. Distinctio
128 | voluptatum soluta sapiente cupiditate excepturi earum labore hic
129 | dignissimos. Odio rerum nulla qui unde aliquam dolorum quae debitis
130 | accusantium est soluta.
131 |
132 | Lorem ipsum dolor
133 |
134 | Lorem ipsum, dolor sit amet consectetur adipisicing elit. Distinctio
135 | voluptatum soluta sapiente cupiditate excepturi earum labore hic
136 | dignissimos. Odio rerum nulla qui unde aliquam dolorum quae debitis
137 | accusantium est soluta.
138 |
139 |
140 | Lorem ipsum, dolor sit amet consectetur adipisicing elit. Distinctio
141 | voluptatum soluta sapiente cupiditate excepturi earum labore hic
142 | dignissimos. Odio rerum nulla qui unde aliquam dolorum quae debitis
143 | accusantium est soluta.
144 |
145 |
146 | Lorem ipsum, dolor sit amet consectetur adipisicing elit. Distinctio
147 | voluptatum soluta sapiente cupiditate excepturi earum labore hic
148 | dignissimos. Odio rerum nulla qui unde aliquam dolorum quae debitis
149 | accusantium est soluta.
150 |
151 |
152 |
153 |
154 |
--------------------------------------------------------------------------------
/horizontal-scroll/3.svg:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
12 |
13 |
25 |
31 |
35 |
38 |
39 |
40 |
--------------------------------------------------------------------------------
/horizontal-scroll/4.svg:
--------------------------------------------------------------------------------
1 | 
32 | 
36 | 
46 | 
57 |