├── animated-hamburger-icon
├── app.js
├── index.html
└── style.css
├── modern-sliding-push-menu
├── app.js
├── index.html
└── styles.css
├── expanding-search-bar
├── index.html
└── style.css
├── ripple-button
├── index.html
├── app.js
└── styles.css
├── like-dislike-button
├── app.js
├── index.html
└── styles.css
├── custom-cursor
├── app.js
├── index.html
└── style.css
├── plane-send-button
├── index.html
├── app.js
└── styles.css
├── radio-input-animation
├── index.html
└── style.css
└── README.md
/animated-hamburger-icon/app.js:
--------------------------------------------------------------------------------
1 | // On Click Toggles Class
2 | document.querySelector('.wrapper').addEventListener('click', (e) => {
3 | e.currentTarget.classList.toggle('is-active');
4 | });
--------------------------------------------------------------------------------
/modern-sliding-push-menu/app.js:
--------------------------------------------------------------------------------
1 | const button = document.getElementById("button");
2 | const sidebar = document.querySelector(".sidebar");
3 | const main = document.querySelector(".main");
4 | const menu = document.querySelector(".menu");
5 |
6 | menu.addEventListener("click", (e) => {
7 | sidebar.classList.toggle("sidebar--active");
8 | main.classList.toggle("main--sidebar-active");
9 | e.currentTarget.classList.toggle("menu--active");
10 | });
11 |
--------------------------------------------------------------------------------
/animated-hamburger-icon/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
8 | Animated Hamburger Icon
9 |
10 |
11 |
12 |
13 |
14 |
15 |
16 |
17 |
18 |
19 |
20 |
21 |
22 |
23 |
24 |
25 |
--------------------------------------------------------------------------------
/expanding-search-bar/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 | Expanding Search Bar
8 |
9 |
10 |
11 |
12 |
13 |
14 |
15 |
22 |
23 |
--------------------------------------------------------------------------------
/ripple-button/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 | Ripple button
8 |
9 |
10 |
11 |
12 |
13 |
14 |
15 |
16 |
17 |
18 |
19 |
20 |
21 |
22 |
23 |
--------------------------------------------------------------------------------
/like-dislike-button/app.js:
--------------------------------------------------------------------------------
1 | const buttonLike = document.querySelector(".button--like");
2 | const buttonLikeText = document.querySelector(".button__text-like");
3 |
4 | const buttonDislike = document.querySelector(".button--dislike");
5 | const buttonDislikeText = document.querySelector(".button__text-dislike");
6 |
7 | buttonLike.addEventListener("click", () => setActive(buttonLike, "liked", buttonLikeText, "Like"));
8 | buttonDislike.addEventListener("click", () => setActive(buttonDislike, "disliked", buttonDislikeText, "Dislike"));
9 |
10 | function setActive(button, activeClass, buttonText, text) {
11 | button.classList.toggle(activeClass);
12 | checkText(buttonText, text);
13 | }
14 |
15 | function checkText(buttonText, text) {
16 | if (buttonText.innerHTML === text) {
17 | buttonText.innerHTML = text + "d";
18 | } else {
19 | buttonText.innerHTML = text;
20 | }
21 | }
22 |
--------------------------------------------------------------------------------
/ripple-button/app.js:
--------------------------------------------------------------------------------
1 | const button = document.getElementById("button");
2 | button.addEventListener("click", playAnimation);
3 |
4 | function playAnimation(event) {
5 | const rect = event.target.getBoundingClientRect();
6 | const clientX = event.clientX;
7 | const clientY = event.clientY;
8 |
9 | const clientXInButton = clientX - rect.x;
10 | const clientYInButton = clientY - rect.y;
11 |
12 | const rippleDomElement = document.createElement("span");
13 | rippleDomElement.className = "ripple";
14 |
15 | rippleDomElement.style.top = clientYInButton + "px";
16 | rippleDomElement.style.left = clientXInButton + "px";
17 |
18 | const removeFunction = () => {
19 | button.removeChild(rippleDomElement);
20 | };
21 |
22 | rippleDomElement.addEventListener("webkitAnimationEnd", removeFunction);
23 | rippleDomElement.addEventListener("animationend", removeFunction);
24 |
25 | button.appendChild(rippleDomElement);
26 | }
27 |
--------------------------------------------------------------------------------
/custom-cursor/app.js:
--------------------------------------------------------------------------------
1 | const link = document.querySelectorAll('nav > .hover-this');
2 | const cursor = document.querySelector('.cursor');
3 |
4 | const animateit = function (e) {
5 | const span = this.querySelector('span');
6 | const { offsetX: x, offsetY: y } = e,
7 | { offsetWidth: width, offsetHeight: height } = this,
8 |
9 | move = 25,
10 | xMove = x / width * (move * 2) - move,
11 | yMove = y / height * (move * 2) - move;
12 |
13 | span.style.transform = `translate(${xMove}px, ${yMove}px)`;
14 |
15 | if (e.type === 'mouseleave') span.style.transform = '';
16 | };
17 |
18 | const editCursor = e => {
19 | const { clientX: x, clientY: y } = e;
20 | cursor.style.left = x + 'px';
21 | cursor.style.top = y + 'px';
22 | };
23 |
24 | link.forEach(b => b.addEventListener('mousemove', animateit));
25 | link.forEach(b => b.addEventListener('mouseleave', animateit));
26 | window.addEventListener('mousemove', editCursor);
--------------------------------------------------------------------------------
/custom-cursor/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
8 | Mouse Cursor Animation
9 |
10 |
11 |
12 |
13 |
14 |
15 |
16 |
25 |
26 |
27 |
28 |
29 |
30 |
--------------------------------------------------------------------------------
/plane-send-button/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 | Plane send button
8 |
9 |
10 |
11 |
12 |
13 |
14 |
15 |
16 |
17 |
18 |
22 |
23 |
24 |
25 |
26 |
27 |
--------------------------------------------------------------------------------
/custom-cursor/style.css:
--------------------------------------------------------------------------------
1 | html, body {
2 | margin: 0;
3 | padding: 0;
4 | cursor: none;
5 | }
6 |
7 | .nav-wrapper {
8 | width: 100%;
9 | height: 100vh;
10 | background: #161616;
11 | }
12 |
13 | nav {
14 | width: 100%;
15 | margin: 0 auto;
16 | display: flex;
17 | justify-content: space-around;
18 | text-align: center;
19 | position: absolute;
20 | top: 50%;
21 | }
22 |
23 | .hover-this {
24 | transition: all 0.3s ease;
25 | }
26 |
27 | span {
28 | display: inline-block;
29 | font-family: 'Russo One', sans-serif;
30 | font-weight: 400;
31 | color: #fff;
32 | font-size: 36px;
33 | text-transform: uppercase;
34 | pointer-events: none;
35 | transition: transform 0.1s linear;
36 | }
37 |
38 | .cursor {
39 | pointer-events: none;
40 | position: fixed;
41 | padding: 0.3rem;
42 | background-color: #fff;
43 | border-radius: 50%;
44 | mix-blend-mode: difference;
45 | transition: transform 0.3s ease;
46 | }
47 |
48 | .hover-this:hover ~ .cursor {
49 | transform:translate(-50%, -50%) scale(8);
50 | }
--------------------------------------------------------------------------------
/like-dislike-button/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 | Like button microinteraction
8 |
9 |
10 |
11 |
12 |
13 |
14 |
15 |
19 |
20 |
24 |
25 |
26 |
27 |
28 |
29 |
--------------------------------------------------------------------------------
/radio-input-animation/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
8 | Animated Radio Button
9 |
10 |
11 |
12 |
13 |
14 |
15 |
16 |
17 |
36 |
37 |
38 |
39 |
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | # Microinteractions (HTML)
2 | A micro-interactions repo open for anyone to use in their projects. Built with pure HTML, CSS, and JS.
3 |
4 | ## Preview of MI's in this repo
5 | ### Plane send button
6 | https://user-images.githubusercontent.com/32551220/157372645-fa1f8a06-a3b7-46be-83af-6b509b0284cb.mov
7 |
8 | ### Animated Hamburger icon
9 | https://user-images.githubusercontent.com/32551220/158219644-8bc3c6c0-7445-4300-bcac-805fdbf664ac.mov
10 |
11 | ### Ripple button
12 | https://user-images.githubusercontent.com/32551220/158879127-45e17c9d-6166-45dc-a996-ab511487d988.mov
13 |
14 | ### Radio input
15 | https://user-images.githubusercontent.com/32551220/159953726-7d42f612-961f-4112-9644-fda85e17c8a9.mov
16 |
17 | ### Like dislike button
18 | https://user-images.githubusercontent.com/32551220/160289777-a51ffbf1-5039-4bdc-a508-d7fc853aca67.mov
19 |
20 | ### Custom cursor
21 | https://user-images.githubusercontent.com/32551220/161388700-b3e0d2a7-6f11-479b-a29b-f24214ce7fef.mov
22 |
23 | ### Modern sliding push menu
24 | https://user-images.githubusercontent.com/32551220/162974291-0d3887a8-54bf-4b7c-b398-ec19221f31c8.mov
25 |
26 | ## Contributors
27 | [@mujs.dev](https://www.instagram.com/mujs.dev/)
28 |
29 | [@frontendcharm](https://www.instagram.com/frontendcharm/)
30 |
--------------------------------------------------------------------------------
/expanding-search-bar/style.css:
--------------------------------------------------------------------------------
1 | * {
2 | margin: 0;
3 | box-sizing: border-box;
4 | }
5 |
6 | body {
7 | background: #101010;
8 | }
9 |
10 | .search-box {
11 | position: absolute;
12 | top: 50%;
13 | left: 50%;
14 | transform: translate(-50%, -50%);
15 | height: 60px;
16 | background: #353535;
17 | line-height: 40px;
18 | padding: 10px;
19 | border-radius: 60px;
20 | cursor: pointer;
21 | }
22 |
23 | .search-input {
24 | background: #353535;
25 | color: #fff;
26 | outline: none;
27 | border: none;
28 | line-height: 40px;
29 | width: 0px;
30 | float: left;
31 | font-size: 1em;
32 | transition: 0.7s ease;
33 | }
34 |
35 | .search-btn {
36 | display: flex;
37 | justify-content: center;
38 | align-items: center;
39 | text-decoration: none;
40 | background: #353535;
41 | padding: 12px;
42 | border-radius: 50%;
43 | float: right;
44 | color: #22ffc0;
45 | transition: 0.4s ease;
46 | }
47 |
48 | .search-box:hover > .search-input,
49 | .search-input:focus {
50 | width: 240px;
51 | margin: 0px 8px;
52 | }
53 |
54 | .search-box:hover > .search-btn,
55 | .search-input:focus + .search-btn {
56 | background: #22ffc0;
57 | color: #101010;
58 | }
59 |
--------------------------------------------------------------------------------
/animated-hamburger-icon/style.css:
--------------------------------------------------------------------------------
1 | * {
2 | box-sizing: border-box;
3 | }
4 |
5 | html,
6 | body {
7 | margin: 0;
8 | padding: 0;
9 | height: 100%;
10 | }
11 |
12 | body {
13 | background-color: #000;
14 | display: flex;
15 | justify-content: center;
16 | align-items: center;
17 | }
18 |
19 | .wrapper {
20 | width: 50px;
21 | height: 50px;
22 | display: flex;
23 | flex-direction: column;
24 | justify-content: space-between;
25 | cursor: pointer;
26 | transition: transform 330ms ease-out;
27 | }
28 |
29 | .line-menu {
30 | background-color: #fff;
31 | border-radius: 5px;
32 | width: 100%;
33 | height: 6px;
34 | }
35 |
36 | .line-menu.half {
37 | width: 50%;
38 | }
39 |
40 | .line-menu.start {
41 | transition: transform 330ms cubic-bezier(0.54, -0.81, 0.57, 0.57);
42 | transform-origin: right;
43 | }
44 |
45 | .line-menu.end {
46 | align-self: flex-end;
47 | transition: transform 330ms cubic-bezier(0.54, -0.81, 0.57, 0.57);
48 | transform-origin: left;
49 | }
50 |
51 |
52 | /* Click Animation */
53 | .wrapper.is-active {
54 | transform: rotate(-45deg);
55 | }
56 |
57 | .is-active .line-menu.start {
58 | transform: rotate(-90deg) translateX(3px);
59 | }
60 |
61 | .is-active .line-menu.end {
62 | transform: rotate(-90deg) translateX(-3px);
63 | }
--------------------------------------------------------------------------------
/plane-send-button/app.js:
--------------------------------------------------------------------------------
1 | const button = document.getElementById("button");
2 | const buttonText = document.getElementById("button-text");
3 | const buttonIcon = document.getElementById("button-icon");
4 |
5 | button.addEventListener("click", playAnimation);
6 |
7 | function playAnimation() {
8 | buttonText.style.animation = "buttonSendTextAnimation ease-in-out 3s";
9 | buttonIcon.style.animation = "buttonIconAnimation ease-in 3s";
10 | button.disabled = true;
11 |
12 | setTimeout(() => {
13 | buttonText.innerHTML = "Sending...";
14 | }, 250);
15 |
16 | setTimeout(() => {
17 | buttonText.innerHTML = null;
18 | buttonIcon.innerHTML = "check";
19 | buttonIcon.style.fontWeight = "bold";
20 | }, 1500);
21 |
22 | setTimeout(() => {
23 | button.style.backgroundColor = "#7240DE";
24 | button.style.color = "#f8f8f8";
25 | button.style.boxShadow = "0 1rem 2.5rem -1rem rgba(114, 64, 222, .5)";
26 | }, 1800);
27 |
28 | setTimeout(() => {
29 | buttonText.style.animation = "none";
30 | buttonIcon.style.animation = "none";
31 | button.disabled = false;
32 | buttonText.innerHTML = "Send message";
33 | buttonIcon.innerHTML = "send";
34 | button.style.backgroundColor = "#27272b";
35 | button.style.color = "#f8f8f8";
36 | button.style.boxShadow = "0 1rem 2.5rem -1rem rgba(0, 0, 0, 0.25)";
37 | }, 5 * 1000);
38 | }
39 |
--------------------------------------------------------------------------------
/modern-sliding-push-menu/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 | Modern Sliding Push Menu
8 |
9 |
10 |
11 |
12 |
13 |
14 |
30 |
31 |
32 |
33 |
34 |
35 |
I am the main content
36 |
I'm kinda squished
37 |
39 |