├── .vscode └── settings.json ├── 3D └── 01 │ ├── index.html │ └── styles.css ├── Animation └── 01 │ ├── index.html │ └── styles.css ├── Buttons ├── 01 │ ├── index.html │ └── styles.css └── 02 │ ├── index.html │ └── styles.css ├── Cards ├── 01 │ ├── imgs │ │ ├── 1.jpg │ │ ├── 2.jpg │ │ └── 3.jpg │ ├── index.html │ └── styles.css └── 02 │ ├── index.html │ ├── profile-photo.jpg │ └── styles.css ├── Gallery └── 01 │ ├── imgs │ ├── download (5).jpg │ ├── image01.jpg │ ├── image1.jpg │ ├── image2.jpg │ ├── image3.jpg │ ├── image4.jpg │ └── image5.jpg │ ├── index.html │ └── styles.css ├── Inputs └── 01 │ ├── index.html │ └── styles.css ├── Loaders ├── 01 │ ├── index.html │ └── style.css └── 02 │ ├── index.html │ └── styles.css ├── Media ├── 01 │ ├── images │ │ ├── 1.jpg │ │ ├── 2.jpg │ │ └── 3.jpg │ ├── index.html │ └── styles.css ├── 02 │ ├── index.html │ ├── script.js │ └── styles.css └── 03 │ ├── bg-reveal.jpg │ ├── bg.jpg │ ├── index.html │ └── styles.css ├── Navigation ├── 01 │ ├── index.html │ └── style.css ├── 02 │ ├── index.html │ └── styles.css ├── 03 │ ├── index.html │ └── styles.css ├── 04 │ ├── index.html │ └── styles.css └── 05 │ ├── index.html │ └── styles.css ├── Text ├── 01 │ ├── index.html │ └── styles.css ├── 02 │ ├── index.html │ └── styles.css └── 03 │ ├── index.html │ └── styles.css └── z_Archive ├── Buttons ├── 01 │ ├── index.html │ └── style.css └── 02 │ ├── index.html │ └── style.css └── Cards ├── 01 ├── heart.png ├── index.html └── style.css ├── 02 ├── Jane Doe.jpg ├── index.html └── styles.css ├── 03 ├── image.jpg ├── index.html └── style.css ├── 04 ├── index.html └── style.css └── 05 ├── book.png ├── index.html └── styles.css /.vscode/settings.json: -------------------------------------------------------------------------------- 1 | { 2 | "liveServer.settings.port": 5501 3 | } 4 | -------------------------------------------------------------------------------- /3D/01/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 3D Cube Animation 7 | 8 | 9 | 10 |

11 |

12 |

13 |

14 |

15 |

16 |

17 | 18 | -------------------------------------------------------------------------------- /3D/01/styles.css: -------------------------------------------------------------------------------- 1 | *, 2 | *::before, 3 | *::after { 4 | margin: 0; 5 | padding: 0; 6 | box-sizing: border-box; 7 | } 8 | 9 | body { 10 | height: 100vh; 11 | background-color: #090909; 12 | display: flex; 13 | justify-content: center; 14 | align-items: center; 15 | } 16 | 17 | .cube-wrapper { 18 | width: 100px; 19 | height: 100px; 20 | transform-style: preserve-3d; 21 | position: relative; 22 | rotate: x -30deg; 23 | animation: animate 4s linear infinite; 24 | } 25 | 26 | @keyframes animate { 27 | 0% { 28 | transform: rotateY(0); 29 | } 30 | 31 | 100% { 32 | transform: rotateY(360deg); 33 | } 34 | } 35 | 36 | .side { 37 | position: absolute; 38 | width: 100%; 39 | height: 100%; 40 | background-image: linear-gradient( 41 | to bottom, 42 | hsl(200, 80%, 50%) 0%, 43 | hsl(200, 80%, 60%) 100% 44 | ); 45 | rotate: 0 1 0 calc(var(--i) * 90deg); 46 | transform: translateZ(50px); 47 | box-shadow: inset 2px 2px 20px rgba(0, 0, 0, 0.3); 48 | } 49 | .side.top { 50 | rotate: 1 0 0 90deg; 51 | transform-style: preserve-3d; 52 | } 53 | 54 | .top::after { 55 | content: ""; 56 | position: absolute; 57 | width: 100%; 58 | height: 100%; 59 | background: hsl(200 80% 60% / 0.7); 60 | transform: translateZ(-120px); 61 | filter: blur(20px); 62 | } 63 | -------------------------------------------------------------------------------- /Animation/01/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Cube Animation 7 | 8 | 9 | 10 |

11 |

12 |

13 |

14 |

15 |

16 |

17 |

18 | 19 | -------------------------------------------------------------------------------- /Animation/01/styles.css: -------------------------------------------------------------------------------- 1 | * { 2 | margin: 0; 3 | padding: 0; 4 | box-sizing: border-box; 5 | } 6 | 7 | body { 8 | height: 100vh; 9 | background-color: #212121; 10 | display: flex; 11 | justify-content: center; 12 | align-items: center; 13 | } 14 | 15 | .cube { 16 | width: 100px; 17 | height: 100px; 18 | position: relative; 19 | transform-style: preserve-3d; 20 | animation: spinner 2s infinite ease; 21 | animation-delay: 2s; 22 | transform: rotate(45deg) rotateX(-25deg) rotateY(25deg); 23 | } 24 | 25 | .cube > div { 26 | width: 100%; 27 | height: 100%; 28 | background-color: rgb(247, 197, 159, 0.1); 29 | border: 3px solid rgb(247, 197, 159); 30 | position: absolute; 31 | } 32 | 33 | .cube > div:nth-child(1) { 34 | transform: translateZ(50px); 35 | } 36 | .cube > div:nth-child(2) { 37 | transform: translateX(50%) rotateY(90deg); 38 | } 39 | .cube > div:nth-child(3) { 40 | transform: translateZ(-50px) rotateY(180deg); 41 | } 42 | .cube > div:nth-child(4) { 43 | transform: translateX(-50%) rotateY(270deg); 44 | } 45 | .cube > div:nth-child(5) { 46 | transform: translateY(-50%) rotateX(90deg); 47 | } 48 | .cube > div:nth-child(6) { 49 | transform: translateY(50%) rotateX(90deg); 50 | } 51 | 52 | @keyframes spinner { 53 | 0% { 54 | transform: rotate(45deg) rotateX(-25deg) rotateY(25deg); 55 | } 56 | 50% { 57 | transform: rotate(45deg) rotateX(-385deg) rotateY(25deg); 58 | } 59 | 60 | 100% { 61 | transform: rotate(45deg) rotateX(-385deg) rotateY(385deg); 62 | } 63 | } 64 | -------------------------------------------------------------------------------- /Buttons/01/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Buttons Part 01 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | Learn More 16 | 17 | 18 | -------------------------------------------------------------------------------- /Buttons/01/styles.css: -------------------------------------------------------------------------------- 1 | @import url("https://fonts.googleapis.com/css2?family=Mukta:wght@400;500;600&display=swap"); 2 | 3 | *, 4 | *::before, 5 | *::after { 6 | margin: 0; 7 | padding: 0; 8 | box-sizing: border-box; 9 | } 10 | 11 | body { 12 | font-family: Mukta; 13 | height: 100vh; 14 | background-color: #0a051b; 15 | color: #ded8f4; 16 | display: flex; 17 | justify-content: center; 18 | align-items: center; 19 | } 20 | 21 | .btn { 22 | all: unset; 23 | padding: 0.5rem 2rem; 24 | text-transform: uppercase; 25 | position: relative; 26 | display: flex; 27 | justify-content: center; 28 | align-items: center; 29 | cursor: pointer; 30 | } 31 | 32 | .btn > .circle { 33 | --size: 2.5rem; 34 | position: absolute; 35 | left: 0; 36 | display: block; 37 | width: var(--size); 38 | height: var(--size); 39 | background-color: #ded8f4; 40 | border-radius: 1.5rem; 41 | z-index: -1; 42 | transition: all 0.45s cubic-bezier(0.65, 0, 0.076, 1); 43 | } 44 | .btn > .text { 45 | margin-left: 1.25rem; 46 | font-weight: 700; 47 | letter-spacing: 1px; 48 | transition: all 0.45s; 49 | } 50 | .circle > i { 51 | font-size: 1rem; 52 | position: absolute; 53 | left: calc(var(--size) / 2); 54 | top: calc(var(--size) / 2); 55 | transform: translate(-50%, -50%); 56 | color: black; 57 | transition: all 0.45s cubic-bezier(0.65, 0, 0.076, 1); 58 | } 59 | 60 | .btn:hover > .circle { 61 | width: 100%; 62 | } 63 | .btn:hover > .circle > i { 64 | translate: 1rem 0; 65 | } 66 | .btn:hover > .text { 67 | color: black; 68 | } 69 | -------------------------------------------------------------------------------- /Buttons/02/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Buttons 02 7 | 8 | 9 | 10 | 13 | 14 | -------------------------------------------------------------------------------- /Buttons/02/styles.css: -------------------------------------------------------------------------------- 1 | @import url("https://fonts.googleapis.com/css2?family=Mukta:wght@400;500;600&display=swap"); 2 | 3 | *, 4 | *::before, 5 | *::after { 6 | margin: 0; 7 | padding: 0; 8 | box-sizing: border-box; 9 | } 10 | 11 | body { 12 | font-family: Mukta; 13 | height: 100vh; 14 | background-color: #f9fafb; 15 | color: #111827; 16 | display: flex; 17 | justify-content: center; 18 | align-items: center; 19 | } 20 | 21 | button { 22 | all: unset; 23 | } 24 | 25 | .btn { 26 | font-size: 1.25rem; 27 | font-weight: 600; 28 | letter-spacing: 1px; 29 | padding: 10px 26px; 30 | background-color: #f9fafb; 31 | border: 2px solid #111827; 32 | border-radius: 0.5rem; 33 | cursor: pointer; 34 | position: relative; 35 | transition: all 0.3s; 36 | } 37 | 38 | .btn::after { 39 | content: ""; 40 | position: absolute; 41 | inset: 0; 42 | background-color: #111827; 43 | border-radius: inherit; 44 | translate: 6px 6px; 45 | transition: 0.25s; 46 | z-index: -1; 47 | } 48 | 49 | .btn:hover::after { 50 | translate: 0; 51 | } 52 | .btn:hover { 53 | background-color: #111827; 54 | color: #f9fafb; 55 | } 56 | -------------------------------------------------------------------------------- /Cards/01/imgs/1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/parthwebdev/UI-Animation/bdb637b1c71eaf8268fe7e4cf90b5fe8b9f3942e/Cards/01/imgs/1.jpg -------------------------------------------------------------------------------- /Cards/01/imgs/2.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/parthwebdev/UI-Animation/bdb637b1c71eaf8268fe7e4cf90b5fe8b9f3942e/Cards/01/imgs/2.jpg -------------------------------------------------------------------------------- /Cards/01/imgs/3.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/parthwebdev/UI-Animation/bdb637b1c71eaf8268fe7e4cf90b5fe8b9f3942e/Cards/01/imgs/3.jpg -------------------------------------------------------------------------------- /Cards/01/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Cards 01 7 | 8 | 9 | 10 |

11 |

12 |

13 |

14 |

15 |

16 |

James

17 |

Backend Developer

18 |

19 |

20 |

Skills

21 |

JavaScript

22 |

Node.js

23 |

Express

24 |

MongoDB

25 |

26 |

27 | 28 |

29 |

30 |

31 |

32 |

33 |

Anastasia

34 |

Fullstack Dev.

35 |

36 |

37 |

Skills

38 |

React

39 |

MongoDB

40 |

Express

41 |

Node.js

42 |

43 |

44 | 45 |

46 |

47 |

48 |

49 |

50 |

Sophia

51 |

Frontend Developer

52 |

53 |

54 |

Skills

55 |

Next.js

56 |

React

57 |

TypeScript

58 |

Framer Motion

59 |

60 |

61 |

62 | 63 | -------------------------------------------------------------------------------- /Cards/01/styles.css: -------------------------------------------------------------------------------- 1 | @import url("https://fonts.googleapis.com/css2?family=Space+Mono:wght@400;700&display=swap"); 2 | 3 | * { 4 | margin: 0; 5 | padding: 0; 6 | box-sizing: border-box; 7 | } 8 | 9 | body { 10 | font-family: "Space Mono", monospace; 11 | height: 100vh; 12 | background-color: #030b0d; 13 | color: white; 14 | display: flex; 15 | justify-content: center; 16 | align-items: center; 17 | } 18 | 19 | img { 20 | width: 100%; 21 | height: 100%; 22 | display: block; 23 | } 24 | 25 | .grid { 26 | width: min-content; 27 | display: grid; 28 | grid-template-columns: repeat(3, 300px); 29 | grid-auto-rows: 300px; 30 | gap: 1rem; 31 | } 32 | 33 | .card { 34 | aspect-ratio: 1; 35 | background-size: cover; 36 | display: grid; 37 | grid-template-columns: repeat(2, 1fr); 38 | grid-template-rows: repeat(2, 1fr); 39 | gap: 0.5rem; 40 | padding: 0.5rem; 41 | position: relative; 42 | cursor: pointer; 43 | overflow: hidden; 44 | } 45 | 46 | .card-img { 47 | position: absolute; 48 | z-index: -1; 49 | object-fit: cover; 50 | transition: all 0.6s cubic-bezier(0.165, 0.84, 0.44, 1); 51 | } 52 | 53 | .card:hover .card-img { 54 | scale: 0.85; 55 | filter: brightness(0.65); 56 | } 57 | 58 | .card-box { 59 | padding: 0.8rem; 60 | background-color: rgba(255, 255, 255, 0.15); 61 | backdrop-filter: blur(5px); 62 | transition: 0.5s cubic-bezier(0.19, 1, 0.22, 1); 63 | position: relative; 64 | z-index: 2; 65 | opacity: 0; 66 | display: flex; 67 | flex-direction: column; 68 | } 69 | 70 | /* Positioning the Boxes inside the card */ 71 | .box-1 { 72 | grid-column: 1 / 2; 73 | grid-row: 1 / 2; 74 | justify-content: flex-end; 75 | } 76 | .box-2 { 77 | grid-column: 2 / 2; 78 | grid-row: 1 / 2; 79 | align-items: flex-end; 80 | } 81 | .box-3 { 82 | grid-column: 1 / 2; 83 | grid-row: 2 / 2; 84 | justify-content: flex-end; 85 | } 86 | .box-4 { 87 | grid-column: 2 / 3; 88 | grid-row: 2 / 3; 89 | justify-content: flex-end; 90 | align-items: flex-end; 91 | } 92 | 93 | /* Offsetting the Boxes */ 94 | .top-left { 95 | transform: translate(-105%, -105%); 96 | } 97 | .top-right { 98 | transform: translate(105%, -105%); 99 | } 100 | .bottom-right { 101 | transform: translate(105%, 105%); 102 | } 103 | .bottom-left { 104 | transform: translate(-105%, 105%); 105 | } 106 | 107 | .card:hover .card-box { 108 | opacity: 1; 109 | transform: translate(0, 0); 110 | } 111 | 112 | /* Styling the Content inside box */ 113 | .card-box > p { 114 | font-size: 10px; 115 | text-transform: uppercase; 116 | font-weight: bold; 117 | opacity: 0.85; 118 | } 119 | -------------------------------------------------------------------------------- /Cards/02/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Profile Card 7 | 8 | 9 | 10 | 11 |

12 |

13 |

14 |

15 |

16 |

Jane Doe

17 |

Frontend Developer

18 |

Lorem ipsum dolor sit amet consectetur adipisicing elit. Ea nemo consequatur ratione distinctio et nihil impedit consectetur vitae quo odio?

19 |

20 | 31 |

32 | 33 | -------------------------------------------------------------------------------- /Cards/02/profile-photo.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/parthwebdev/UI-Animation/bdb637b1c71eaf8268fe7e4cf90b5fe8b9f3942e/Cards/02/profile-photo.jpg -------------------------------------------------------------------------------- /Cards/02/styles.css: -------------------------------------------------------------------------------- 1 | @import url("https://fonts.googleapis.com/css2?family=Lato:wght@400;700;900&display=swap"); 2 | 3 | * { 4 | margin: 0; 5 | padding: 0; 6 | box-sizing: border-box; 7 | } 8 | 9 | body { 10 | font-family: Lato, sans-serif; 11 | background-color: #131315; 12 | height: 100vh; 13 | display: flex; 14 | justify-content: center; 15 | align-items: center; 16 | } 17 | 18 | .card { 19 | width: 300px; 20 | background-color: white; 21 | display: flex; 22 | flex-direction: column; 23 | border-radius: 10px; 24 | text-align: center; 25 | overflow: hidden; 26 | } 27 | 28 | .image-container { 29 | width: 100%; 30 | height: 250px; 31 | border-top-left-radius: inherit; 32 | border-top-right-radius: inherit; 33 | overflow: hidden; 34 | } 35 | .image-container img { 36 | width: 100%; 37 | height: 100%; 38 | object-fit: cover; 39 | } 40 | .content { 41 | padding: 20px 16px; 42 | } 43 | 44 | .profile-name { 45 | font-size: 26px; 46 | font-weight: 900; 47 | margin-bottom: 4px; 48 | } 49 | .job-title { 50 | font-size: 12px; 51 | font-weight: 700; 52 | letter-spacing: 1px; 53 | color: #ceac23; 54 | text-transform: uppercase; 55 | margin-bottom: 16px; 56 | } 57 | .description { 58 | font-size: 14px; 59 | letter-spacing: 1px; 60 | color: #9e9e9e; 61 | } 62 | 63 | .social-links { 64 | width: 100%; 65 | display: flex; 66 | height: 0; 67 | border-top: 1px solid #cfcfcf; 68 | transition: height 0.3s ease; 69 | } 70 | .card:hover .social-links { 71 | height: 65px; 72 | } 73 | 74 | .social-links > a { 75 | flex: 1; 76 | font-size: 20px; 77 | padding-block: 20px; 78 | color: var(--color); 79 | text-decoration: none; 80 | } 81 | 82 | .social-links .instagram { 83 | --color: #ee5487; 84 | } 85 | .social-links .linkedin { 86 | --color: #0077b5; 87 | } 88 | .social-links .twitter { 89 | --color: #1da1f2; 90 | } 91 | 92 | .social-links > a:nth-child(2) { 93 | outline: 1px solid #cfcfcf; 94 | } 95 | .social-links > a:hover { 96 | background-color: var(--color); 97 | } 98 | .social-links > a:hover > i { 99 | color: white; 100 | } 101 | -------------------------------------------------------------------------------- /Gallery/01/imgs/download (5).jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/parthwebdev/UI-Animation/bdb637b1c71eaf8268fe7e4cf90b5fe8b9f3942e/Gallery/01/imgs/download (5).jpg -------------------------------------------------------------------------------- /Gallery/01/imgs/image01.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/parthwebdev/UI-Animation/bdb637b1c71eaf8268fe7e4cf90b5fe8b9f3942e/Gallery/01/imgs/image01.jpg -------------------------------------------------------------------------------- /Gallery/01/imgs/image1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/parthwebdev/UI-Animation/bdb637b1c71eaf8268fe7e4cf90b5fe8b9f3942e/Gallery/01/imgs/image1.jpg -------------------------------------------------------------------------------- /Gallery/01/imgs/image2.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/parthwebdev/UI-Animation/bdb637b1c71eaf8268fe7e4cf90b5fe8b9f3942e/Gallery/01/imgs/image2.jpg -------------------------------------------------------------------------------- /Gallery/01/imgs/image3.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/parthwebdev/UI-Animation/bdb637b1c71eaf8268fe7e4cf90b5fe8b9f3942e/Gallery/01/imgs/image3.jpg -------------------------------------------------------------------------------- /Gallery/01/imgs/image4.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/parthwebdev/UI-Animation/bdb637b1c71eaf8268fe7e4cf90b5fe8b9f3942e/Gallery/01/imgs/image4.jpg -------------------------------------------------------------------------------- /Gallery/01/imgs/image5.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/parthwebdev/UI-Animation/bdb637b1c71eaf8268fe7e4cf90b5fe8b9f3942e/Gallery/01/imgs/image5.jpg -------------------------------------------------------------------------------- /Gallery/01/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Gallery 01 7 | 8 | 9 | 10 |

11 |

12 |

13 |

14 |

15 |

16 |

17 |

18 |

19 |

20 |

21 |

22 |

23 |

24 |

25 |

26 |

27 | 28 | -------------------------------------------------------------------------------- /Gallery/01/styles.css: -------------------------------------------------------------------------------- 1 | *, 2 | *::before, 3 | *::after { 4 | margin: 0; 5 | padding: 0; 6 | box-sizing: border-box; 7 | } 8 | 9 | body { 10 | height: 100vh; 11 | display: flex; 12 | justify-content: center; 13 | align-items: center; 14 | background-color: #051215; 15 | } 16 | 17 | .container { 18 | width: 100%; 19 | max-width: 800px; 20 | height: 500px; 21 | display: flex; 22 | justify-content: center; 23 | align-items: stretch; 24 | gap: 1.25rem; 25 | transition: all 400ms; 26 | } 27 | 28 | .card { 29 | flex: 1; 30 | height: 100%; 31 | transition: all 400ms; 32 | cursor: pointer; 33 | } 34 | .card > img { 35 | display: block; 36 | max-width: 100%; 37 | height: 100%; 38 | object-fit: cover; 39 | } 40 | 41 | .card:nth-child(odd) { 42 | translate: 0 -20px; 43 | } 44 | .card:nth-child(even) { 45 | translate: 0 20px; 46 | } 47 | 48 | .container:hover .card:not(:hover) { 49 | filter: grayscale(100%); 50 | } 51 | .card:hover { 52 | flex: 3; 53 | } 54 | -------------------------------------------------------------------------------- /Inputs/01/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Input Label Animation 7 | 8 | 9 | 10 |

11 | 12 | Username 13 |

14 | 15 | -------------------------------------------------------------------------------- /Inputs/01/styles.css: -------------------------------------------------------------------------------- 1 | @import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500&display=swap"); 2 | 3 | *, 4 | *::before, 5 | *::after { 6 | margin: 0; 7 | padding: 0; 8 | box-sizing: border-box; 9 | } 10 | 11 | body { 12 | font-family: Inter, sans-serif; 13 | height: 100vh; 14 | background-color: #1a1a1a; 15 | display: flex; 16 | justify-content: center; 17 | align-items: center; 18 | } 19 | 20 | .input-group { 21 | font-size: 1.25rem; 22 | position: relative; 23 | --primary: #2196f3; 24 | } 25 | 26 | .input { 27 | all: unset; 28 | color: #fefefe; 29 | padding: 1rem; 30 | border: 1px solid #9e9e9e; 31 | border-radius: 10px; 32 | transition: 150ms cubic-bezier(0.4, 0, 0.2, 1); 33 | } 34 | 35 | .label { 36 | position: absolute; 37 | top: 1rem; 38 | left: 1rem; 39 | color: #d4d4d4; 40 | pointer-events: none; 41 | transition: 150ms cubic-bezier(0.4, 0, 0.2, 1); 42 | } 43 | 44 | .input:focus { 45 | border: 1px solid var(--primary); 46 | } 47 | 48 | .input:is(:focus, :valid) ~ label { 49 | transform: translateY(-120%) scale(0.7); 50 | background-color: #1a1a1a; 51 | padding-inline: 0.3rem; 52 | color: var(--primary); 53 | } 54 | -------------------------------------------------------------------------------- /Loaders/01/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Document 8 | 9 | 10 | 11 |

12 |

13 |

14 |

15 |

16 | 17 | -------------------------------------------------------------------------------- /Loaders/01/style.css: -------------------------------------------------------------------------------- 1 | * { 2 | margin: 0; 3 | padding: 0; 4 | box-sizing: border-box; 5 | } 6 | 7 | body { 8 | height: 100vh; 9 | background-color: #090909; 10 | display: grid; 11 | place-items: center; 12 | } 13 | 14 | .loader { 15 | position: absolute; 16 | display: flex; 17 | align-items: center; 18 | gap: 8px; 19 | } 20 | 21 | .bar { 22 | width: 15px; 23 | height: 35px; 24 | background-color: #3bcbdb; 25 | animation: loading 0.8s infinite ease-in-out; 26 | } 27 | 28 | .bar-1 { 29 | animation-delay: 0.15s; 30 | } 31 | .bar-2 { 32 | animation-delay: 0.3s; 33 | } 34 | .bar-3 { 35 | animation-delay: 0.45s; 36 | } 37 | 38 | @keyframes loading { 39 | 0%, 40 | 80%, 41 | 100% { 42 | height: 32px; 43 | } 44 | 40% { 45 | height: 52px; 46 | } 47 | } 48 | -------------------------------------------------------------------------------- /Loaders/02/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Heart Loader 7 | 8 | 9 | 10 |

11 | 12 | -------------------------------------------------------------------------------- /Loaders/02/styles.css: -------------------------------------------------------------------------------- 1 | * { 2 | margin: 0; 3 | padding: 0; 4 | box-sizing: border-box; 5 | } 6 | 7 | body { 8 | height: 100vh; 9 | background-color: #090909; 10 | display: flex; 11 | justify-content: center; 12 | align-items: center; 13 | } 14 | 15 | .loader { 16 | width: 80px; 17 | height: 80px; 18 | position: relative; 19 | animation: beat 1s infinite; 20 | } 21 | 22 | .loader::before, 23 | .loader::after { 24 | content: ""; 25 | position: absolute; 26 | top: 0; 27 | width: 50px; 28 | height: 80px; 29 | border-radius: 80px 80px 0 0; 30 | animation: color 1s infinite; 31 | } 32 | 33 | .loader::before { 34 | left: 50px; 35 | transform: rotate(-45deg); 36 | transform-origin: 0 100%; 37 | } 38 | 39 | .loader::after { 40 | left: 0; 41 | transform: rotate(45deg); 42 | transform-origin: 100% 100%; 43 | } 44 | 45 | @keyframes beat { 46 | 0%, 47 | 100% { 48 | transform: scale(1); 49 | } 50 | 51 | 50% { 52 | transform: scale(1.2); 53 | } 54 | } 55 | 56 | @keyframes color { 57 | 0%, 58 | 100% { 59 | background-color: #ffffff; 60 | } 61 | 62 | 50% { 63 | background-color: #f15b5b; 64 | } 65 | } 66 | -------------------------------------------------------------------------------- /Media/01/images/1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/parthwebdev/UI-Animation/bdb637b1c71eaf8268fe7e4cf90b5fe8b9f3942e/Media/01/images/1.jpg -------------------------------------------------------------------------------- /Media/01/images/2.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/parthwebdev/UI-Animation/bdb637b1c71eaf8268fe7e4cf90b5fe8b9f3942e/Media/01/images/2.jpg -------------------------------------------------------------------------------- /Media/01/images/3.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/parthwebdev/UI-Animation/bdb637b1c71eaf8268fe7e4cf90b5fe8b9f3942e/Media/01/images/3.jpg -------------------------------------------------------------------------------- /Media/01/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | CSS Grid Animation 7 | 8 | 9 | 10 |

11 |

12 |

13 |

14 |

15 |

16 |

17 |

18 |

19 |

20 |

21 | 22 | -------------------------------------------------------------------------------- /Media/01/styles.css: -------------------------------------------------------------------------------- 1 | *, 2 | *::before, 3 | *::after { 4 | margin: 0; 5 | padding: 0; 6 | box-sizing: border-box; 7 | } 8 | 9 | body { 10 | height: 100vh; 11 | display: flex; 12 | justify-content: center; 13 | align-items: center; 14 | background-color: #051215; 15 | } 16 | 17 | .grid { 18 | max-width: 1000px; 19 | width: 100%; 20 | height: 85%; 21 | display: grid; 22 | grid-template-columns: 1fr 1fr 1fr; 23 | gap: 8px; 24 | transition: grid-template-columns 0.5s ease; 25 | } 26 | 27 | .grid:has(.left:hover) { 28 | grid-template-columns: 2fr 0.5fr 0.5fr; 29 | } 30 | .grid:has(.center:hover) { 31 | grid-template-columns: 0.5fr 2fr 0.5fr; 32 | } 33 | .grid:has(.right:hover) { 34 | grid-template-columns: 0.5fr 0.5fr 2fr; 35 | } 36 | 37 | img { 38 | width: 100%; 39 | height: 100%; 40 | display: block; 41 | object-fit: cover; 42 | } 43 | 44 | .grid > div { 45 | cursor: pointer; 46 | } 47 | -------------------------------------------------------------------------------- /Media/02/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Typewriter Animation 7 | 8 | 9 | 10 | 11 | 12 |

Never Gonna |

13 | 14 | 15 | -------------------------------------------------------------------------------- /Media/02/script.js: -------------------------------------------------------------------------------- 1 | const words = ["give you up", "let you down", "run around", "make you cry"]; 2 | const el = document.querySelector("#typewriter"); 3 | 4 | const sleepTime = 100; 5 | let currWordIndex = 0; 6 | 7 | const sleep = (time) => { 8 | return new Promise((resolve) => setTimeout(resolve, time)); 9 | }; 10 | 11 | const effect = async () => { 12 | while (true) { 13 | currWord = words[currWordIndex]; 14 | 15 | for (let i = 0; i < currWord.length; i++) { 16 | el.innerText = currWord.substring(0, i + 1); 17 | await sleep(sleepTime); 18 | } 19 | 20 | await sleep(500); 21 | 22 | if (currWordIndex >= words.length - 1) { 23 | currWordIndex = 0; 24 | await sleep(1000); 25 | } else currWordIndex++; 26 | } 27 | }; 28 | 29 | effect(); 30 | -------------------------------------------------------------------------------- /Media/02/styles.css: -------------------------------------------------------------------------------- 1 | * { 2 | margin: 0; 3 | padding: 0; 4 | box-sizing: border-box; 5 | } 6 | 7 | body { 8 | height: 100vh; 9 | background-color: hsl(251, 41%, 4%); 10 | color: hsl(251, 41%, 90%); 11 | font-family: system-ui; 12 | display: flex; 13 | justify-content: center; 14 | align-items: center; 15 | } 16 | 17 | h1 { 18 | font-size: 72px; 19 | } 20 | 21 | #typewriter { 22 | color: hsl(251, 41%, 55%); 23 | } 24 | 25 | #cursor { 26 | color: hsl(277, 49%, 53%); 27 | font-weight: bold; 28 | animation: blink 1s linear infinite; 29 | } 30 | 31 | @keyframes blink { 32 | 100% { 33 | opacity: 1; 34 | } 35 | 50% { 36 | opacity: 0; 37 | } 38 | } 39 | -------------------------------------------------------------------------------- /Media/03/bg-reveal.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/parthwebdev/UI-Animation/bdb637b1c71eaf8268fe7e4cf90b5fe8b9f3942e/Media/03/bg-reveal.jpg -------------------------------------------------------------------------------- /Media/03/bg.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/parthwebdev/UI-Animation/bdb637b1c71eaf8268fe7e4cf90b5fe8b9f3942e/Media/03/bg.jpg -------------------------------------------------------------------------------- /Media/03/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Image Reveal on Hover 7 | 8 | 9 | 10 |

11 |

12 |

Creative Image
Reveal on Hover

13 |

14 |

15 |

16 |

17 |

18 |

19 |

20 |

21 |

22 |

23 |

24 |

25 |

26 |

27 |

28 |

29 |

30 | 31 | -------------------------------------------------------------------------------- /Media/03/styles.css: -------------------------------------------------------------------------------- 1 | *, 2 | *::before, 3 | *::after { 4 | margin: 0; 5 | padding: 0; 6 | box-sizing: border-box; 7 | } 8 | 9 | body { 10 | font-family: "Clash Grotesk"; 11 | height: 100vh; 12 | background-color: #000; 13 | } 14 | 15 | .container { 16 | width: 100%; 17 | height: 100%; 18 | position: relative; 19 | } 20 | 21 | .bg, 22 | .bg-reveal { 23 | position: absolute; 24 | width: 100%; 25 | height: 100%; 26 | } 27 | 28 | .bg { 29 | background: linear-gradient(rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0.8)), 30 | url(./bg.jpg); 31 | background-size: cover; 32 | display: flex; 33 | justify-content: center; 34 | align-items: center; 35 | z-index: 5; 36 | } 37 | .bg > h1 { 38 | font-size: 60px; 39 | font-weight: 600; 40 | letter-spacing: 1px; 41 | color: white; 42 | background: linear-gradient(to right, #f61513, #112fdf); 43 | -webkit-text-fill-color: transparent; 44 | background-clip: text; 45 | -webkit-background-clip: text; 46 | text-align: center; 47 | } 48 | 49 | .bg-reveal { 50 | display: grid; 51 | grid-auto-flow: column; 52 | z-index: 10; 53 | } 54 | 55 | .bg-reveal > div { 56 | height: 100%; 57 | background: url("./bg-reveal.jpg") repeat fixed; 58 | background-size: cover; 59 | background-position: 50% 100%; 60 | opacity: 0; 61 | cursor: pointer; 62 | transition: all 1.6s ease-in-out; 63 | } 64 | 65 | .bg-reveal > div:hover { 66 | transition: 0s; 67 | opacity: 1; 68 | } 69 | -------------------------------------------------------------------------------- /Navigation/01/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Menu Effect 01 7 | 8 | 9 | 10 | 19 | 20 | -------------------------------------------------------------------------------- /Navigation/01/style.css: -------------------------------------------------------------------------------- 1 | *, 2 | *::before, 3 | *::after { 4 | padding: 0; 5 | margin: 0; 6 | box-sizing: border-box; 7 | } 8 | 9 | body { 10 | font-family: "Satoshi"; 11 | height: 100vh; 12 | display: flex; 13 | justify-content: center; 14 | align-items: center; 15 | background: hsl(0, 0%, 8%); 16 | } 17 | 18 | ul { 19 | display: flex; 20 | gap: 1rem; 21 | list-style: none; 22 | } 23 | 24 | .link { 25 | text-decoration: none; 26 | color: #fff; 27 | font-size: 22px; 28 | padding: 1rem 2rem; 29 | position: relative; 30 | } 31 | 32 | .link::before, 33 | .link::after { 34 | content: ""; 35 | position: absolute; 36 | width: 100%; 37 | height: 2px; 38 | background: #fff; 39 | transform: scaleX(0); 40 | transition: all 0.6s ease; 41 | } 42 | 43 | .link::before { 44 | top: 0; 45 | left: 0; 46 | transform-origin: left; 47 | } 48 | .link::after { 49 | bottom: 0; 50 | left: 0; 51 | transform-origin: right; 52 | } 53 | 54 | .link:hover::before, 55 | .link:hover::after { 56 | transform: scaleX(1); 57 | } 58 | -------------------------------------------------------------------------------- /Navigation/02/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Menu Effect 02 7 | 8 | 9 | 10 | 26 | 27 | -------------------------------------------------------------------------------- /Navigation/02/styles.css: -------------------------------------------------------------------------------- 1 | *, 2 | *::before, 3 | *::after { 4 | padding: 0; 5 | margin: 0; 6 | box-sizing: border-box; 7 | } 8 | 9 | body { 10 | font-family: "SF Pro Text"; 11 | height: 100vh; 12 | display: flex; 13 | justify-content: center; 14 | align-items: center; 15 | background: hsl(0, 0%, 8%); 16 | } 17 | 18 | ul { 19 | display: flex; 20 | gap: 1.2rem; 21 | list-style: none; 22 | } 23 | 24 | .link { 25 | text-decoration: none; 26 | color: #fff; 27 | font-size: 18px; 28 | padding: 0.5rem; 29 | position: relative; 30 | } 31 | 32 | .link::before { 33 | content: ""; 34 | position: absolute; 35 | width: 100%; 36 | height: 2px; 37 | background: #fff; 38 | border-radius: 5px; 39 | transform: scaleX(0); 40 | transition: all 0.6s ease; 41 | } 42 | 43 | .link::before { 44 | bottom: 0; 45 | left: 0; 46 | } 47 | 48 | .link:hover::before { 49 | transform: scaleX(1); 50 | } 51 | 52 | .logo { 53 | transition: 0.35s ease; 54 | } 55 | .logo:hover { 56 | opacity: 0.5; 57 | } 58 | -------------------------------------------------------------------------------- /Navigation/03/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Menu Effect 02 7 | 8 | 9 | 10 | 29 | 30 | -------------------------------------------------------------------------------- /Navigation/03/styles.css: -------------------------------------------------------------------------------- 1 | *, 2 | *::before, 3 | *::after { 4 | padding: 0; 5 | margin: 0; 6 | box-sizing: border-box; 7 | } 8 | 9 | body { 10 | font-family: "SF Pro Text"; 11 | font-size: 20px; 12 | height: 100vh; 13 | display: flex; 14 | justify-content: center; 15 | align-items: center; 16 | background: hsl(0, 0%, 8%); 17 | background: hsl(249, 20%, 11%); 18 | } 19 | 20 | button { 21 | all: unset; 22 | } 23 | 24 | nav { 25 | width: 100%; 26 | max-width: 1200px; 27 | display: flex; 28 | justify-content: space-between; 29 | align-items: center; 30 | padding: 24px 40px; 31 | } 32 | 33 | ul { 34 | display: flex; 35 | gap: 1.2rem; 36 | list-style: none; 37 | } 38 | 39 | .link { 40 | text-decoration: none; 41 | color: #fff; 42 | font-size: 18px; 43 | padding: 0.5rem; 44 | position: relative; 45 | } 46 | 47 | .logo { 48 | width: 24px; 49 | height: 24px; 50 | } 51 | 52 | .menu-icon { 53 | display: none; 54 | width: 24px; 55 | height: 24px; 56 | } 57 | 58 | /* Media Query for Responsive behavior of the Navbar */ 59 | @media only screen and (max-width: 600px) { 60 | .menu-icon { 61 | display: block; 62 | } 63 | 64 | nav ul { 65 | display: none; 66 | } 67 | } 68 | 69 | /* Link and Logo Hover Effects */ 70 | .link::before { 71 | content: ""; 72 | position: absolute; 73 | width: 100%; 74 | height: 2px; 75 | background: #fff; 76 | border-radius: 5px; 77 | transform: scaleX(0); 78 | transition: all 0.6s ease; 79 | } 80 | 81 | .link::before { 82 | bottom: 0; 83 | left: 0; 84 | } 85 | 86 | .link:hover::before { 87 | transform: scaleX(1); 88 | } 89 | 90 | .logo { 91 | transition: 0.35s ease; 92 | } 93 | .logo:hover { 94 | opacity: 0.5; 95 | } 96 | -------------------------------------------------------------------------------- /Navigation/04/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Menus 04 7 | 8 | 9 | 10 | 19 | 20 | -------------------------------------------------------------------------------- /Navigation/04/styles.css: -------------------------------------------------------------------------------- 1 | *, 2 | *::before, 3 | *::after { 4 | padding: 0; 5 | margin: 0; 6 | box-sizing: border-box; 7 | } 8 | 9 | body { 10 | font-family: "SF Pro Text"; 11 | font-size: 20px; 12 | height: 100vh; 13 | display: flex; 14 | justify-content: center; 15 | align-items: center; 16 | background: hsl(249, 20%, 11%); 17 | } 18 | 19 | nav { 20 | width: 100%; 21 | max-width: 700px; 22 | display: flex; 23 | justify-content: center; 24 | align-items: center; 25 | padding: 24px 40px; 26 | } 27 | 28 | nav ul { 29 | display: flex; 30 | gap: 1.75rem; 31 | list-style: none; 32 | } 33 | 34 | .link { 35 | text-decoration: none; 36 | color: #fff; 37 | font-size: 18px; 38 | padding: 0.5rem 0.75rem; 39 | position: relative; 40 | } 41 | 42 | /* Link Hover Effect */ 43 | .link::before { 44 | content: ""; 45 | position: absolute; 46 | bottom: 0; 47 | left: 0; 48 | width: 0%; 49 | height: 2px; 50 | background: #fff; 51 | z-index: -1; 52 | } 53 | 54 | .link:hover::before { 55 | animation: fill 1s forwards; 56 | } 57 | 58 | @keyframes fill { 59 | 0% { 60 | width: 0%; 61 | } 62 | 50% { 63 | width: 100%; 64 | height: 2px; 65 | } 66 | 100% { 67 | width: 100%; 68 | height: 100%; 69 | background: hsl(249, 54%, 50%); 70 | } 71 | } 72 | -------------------------------------------------------------------------------- /Navigation/05/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Menus 04 7 | 8 | 9 | 10 | 19 | 20 | -------------------------------------------------------------------------------- /Navigation/05/styles.css: -------------------------------------------------------------------------------- 1 | *, 2 | *::before, 3 | *::after { 4 | padding: 0; 5 | margin: 0; 6 | box-sizing: border-box; 7 | } 8 | 9 | body { 10 | font-family: "SF Pro Text"; 11 | font-size: 20px; 12 | height: 100vh; 13 | display: flex; 14 | justify-content: center; 15 | align-items: center; 16 | background: hsl(249, 20%, 11%); 17 | } 18 | 19 | nav { 20 | width: 100%; 21 | max-width: fit-content; 22 | display: flex; 23 | justify-content: center; 24 | align-items: center; 25 | padding: 24px 40px; 26 | } 27 | 28 | nav ul { 29 | display: flex; 30 | gap: 1.25rem; 31 | list-style: none; 32 | } 33 | 34 | .link { 35 | text-decoration: none; 36 | padding: 0.5rem 0.75rem; 37 | font-size: 18px; 38 | font-weight: 600; 39 | color: #fefefe; 40 | position: relative; 41 | transition: color 0.25s; 42 | } 43 | .link:hover { 44 | color: black; 45 | } 46 | 47 | .link::after { 48 | position: absolute; 49 | content: ""; 50 | inset: 0; 51 | background-color: #fefefe; 52 | scale: 1 0; 53 | z-index: -1; 54 | transition: 0.45s; 55 | } 56 | .link:hover::after { 57 | scale: 1 1; 58 | } 59 | -------------------------------------------------------------------------------- /Text/01/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Document 8 | 9 | 10 | 11 |

12 | webdev 13 | webdev 14 |

15 | 16 | -------------------------------------------------------------------------------- /Text/01/styles.css: -------------------------------------------------------------------------------- 1 | @import url("https://fonts.googleapis.com/css2?family=Kanit:wght@500&display=swap"); 2 | 3 | * { 4 | margin: 0; 5 | padding: 0; 6 | box-sizing: border-box; 7 | } 8 | 9 | body { 10 | height: 100vh; 11 | background-color: #090909; 12 | display: grid; 13 | place-items: center; 14 | font-family: "Kanit", sans-serif; 15 | } 16 | 17 | div { 18 | position: relative; 19 | font-size: 5rem; 20 | text-transform: uppercase; 21 | letter-spacing: 3px; 22 | line-height: 80px; 23 | } 24 | 25 | .text { 26 | color: transparent; 27 | -webkit-text-stroke: 1px rgba(255, 255, 255, 0.6); 28 | } 29 | 30 | .hover-text { 31 | position: absolute; 32 | inset: 0; 33 | width: 0%; 34 | color: #1af7ff; 35 | overflow: hidden; 36 | border-right: 6px solid #1af7ff; 37 | transition: 0.5s ease-in-out; 38 | } 39 | 40 | div:hover .hover-text { 41 | width: 100%; 42 | filter: drop-shadow(0 0 40px #1af7ff); 43 | } 44 | -------------------------------------------------------------------------------- /Text/02/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Text 02 7 | 8 | 9 | 10 |

Frontend

11 | 12 | -------------------------------------------------------------------------------- /Text/02/styles.css: -------------------------------------------------------------------------------- 1 | @import url("https://fonts.googleapis.com/css2?family=Poppins:wght@600;700;800&display=swap"); 2 | 3 | *, 4 | *::before, 5 | *::after { 6 | margin: 0; 7 | padding: 0; 8 | box-sizing: border-box; 9 | } 10 | 11 | body { 12 | font-family: "Poppins", sans-serif; 13 | background-color: #090909; 14 | height: 100vh; 15 | display: flex; 16 | justify-content: center; 17 | align-items: center; 18 | } 19 | 20 | h1 { 21 | font-size: 88px; 22 | font-weight: 800; 23 | letter-spacing: 8px; 24 | text-transform: uppercase; 25 | text-decoration: none; 26 | color: transparent; 27 | -webkit-text-stroke-width: 1px; 28 | -webkit-text-stroke-color: white; 29 | text-align: center; 30 | position: relative; 31 | } 32 | 33 | h1::before, 34 | h1::after { 35 | content: attr(data-text); 36 | position: absolute; 37 | top: 0; 38 | left: 0; 39 | transition: 0.3s ease-out; 40 | } 41 | h1:hover::before { 42 | color: #bb0000; 43 | transform: translate(12px, -12px); 44 | -webkit-text-stroke-width: 1px; 45 | -webkit-text-stroke-color: black; 46 | } 47 | h1:hover::after { 48 | color: #77efff; 49 | transform: translate(24px, -24px); 50 | -webkit-text-stroke-width: 1px; 51 | -webkit-text-stroke-color: black; 52 | } 53 | -------------------------------------------------------------------------------- /Text/03/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Text Reveal Animation 7 | 8 | 9 | 10 |

11 | This is a Text 12 | Reveal Animation 13 |

14 | 15 | -------------------------------------------------------------------------------- /Text/03/styles.css: -------------------------------------------------------------------------------- 1 | @import url("https://fonts.googleapis.com/css2?family=Epilogue:wght@500&display=swap"); 2 | 3 | *, 4 | *::before, 5 | *::after { 6 | margin: 0; 7 | padding: 0; 8 | box-sizing: border-box; 9 | } 10 | 11 | body { 12 | font-family: Epilogue, sans-serif; 13 | background-color: #090909; 14 | color: white; 15 | height: 100vh; 16 | display: grid; 17 | place-items: center; 18 | } 19 | 20 | .title { 21 | font-size: 4rem; 22 | font-weight: bold; 23 | } 24 | 25 | .title span { 26 | --duration: 2s; 27 | display: block; 28 | position: relative; 29 | overflow: hidden; 30 | margin-block: 4px; 31 | color: transparent; 32 | animation: reveal 1s calc(var(--delay) + var(--duration)) forwards; 33 | } 34 | 35 | .title span::before { 36 | content: ""; 37 | position: absolute; 38 | top: 0; 39 | left: 0; 40 | width: 100%; 41 | height: 100%; 42 | background-color: #1d59ac; 43 | transform: scaleX(0); 44 | transform-origin: left; 45 | animation: slideIn var(--duration) var(--delay) forwards, 46 | slideOut 1s calc(var(--delay) + var(--duration)) forwards; 47 | } 48 | 49 | @keyframes reveal { 50 | to { 51 | color: white; 52 | } 53 | } 54 | 55 | @keyframes slideIn { 56 | from { 57 | transform: scaleX(0); 58 | } 59 | to { 60 | transform: scaleX(1); 61 | } 62 | } 63 | 64 | @keyframes slideOut { 65 | from { 66 | transform: translateX(0); 67 | } 68 | to { 69 | transform: translateX(105%); 70 | } 71 | } 72 | -------------------------------------------------------------------------------- /z_Archive/Buttons/01/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Document 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | -------------------------------------------------------------------------------- /z_Archive/Buttons/01/style.css: -------------------------------------------------------------------------------- 1 | * { 2 | margin: 0; 3 | padding: 0; 4 | box-sizing: border-box; 5 | } 6 | 7 | body { 8 | height: 100vh; 9 | background-color: #090909; 10 | display: grid; 11 | place-items: center; 12 | } 13 | 14 | button { 15 | font-family: Poppins, "Bruno Ace"; 16 | border: 0; 17 | font-size: 20px; 18 | } 19 | 20 | button { 21 | background-color: transparent; 22 | color: #8800b5; 23 | padding: 13px 36px; 24 | border: 2px solid #8800b5; 25 | border-radius: 8px; 26 | position: relative; 27 | z-index: 1; 28 | overflow: hidden; 29 | transition: color 0.5s; 30 | } 31 | 32 | button:hover { 33 | color: white; 34 | } 35 | 36 | button:before { 37 | content: ""; 38 | position: absolute; 39 | top: 100%; 40 | left: 100%; 41 | width: 120%; 42 | height: 220%; 43 | background-color: #8800b5; 44 | border-radius: 50%; 45 | z-index: -1; 46 | transition: all 0.6s ease; 47 | } 48 | 49 | button:hover:before { 50 | top: -50%; 51 | left: -10%; 52 | } 53 | -------------------------------------------------------------------------------- /z_Archive/Buttons/02/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Document 8 | 9 | 10 | 11 |

12 | 13 | 14 | 15 | 16 |

17 | 18 | -------------------------------------------------------------------------------- /z_Archive/Buttons/02/style.css: -------------------------------------------------------------------------------- 1 | * { 2 | margin: 0; 3 | padding: 0; 4 | box-sizing: border-box; 5 | } 6 | 7 | body { 8 | height: 100vh; 9 | background-color: #222221; 10 | display: grid; 11 | place-items: center; 12 | } 13 | 14 | .container { 15 | width: 80px; 16 | height: 45px; 17 | position: relative; 18 | } 19 | 20 | .checkbox { 21 | opacity: 0; 22 | width: 0; 23 | height: 0; 24 | position: absolute; 25 | } 26 | 27 | .switch { 28 | display: block; 29 | width: 100%; 30 | height: 100%; 31 | border-radius: 1000px; 32 | background-color: #e9e9eb; 33 | transition: all 0.2s ease-out; 34 | cursor: pointer; 35 | } 36 | 37 | .slider { 38 | position: absolute; 39 | inset: 2.5px; 40 | width: 40px; 41 | height: 40px; 42 | background-color: #ffffff; 43 | border-radius: 50%; 44 | box-shadow: 0px 3px 8px rgba(0, 0, 0, 0.15), 0px 3px 1px rgba(0, 0, 0, 0.06); 45 | transition: all 0.2s ease-out; 46 | } 47 | 48 | .checkbox:checked + .switch { 49 | background-color: #34c759; 50 | } 51 | 52 | .checkbox:checked + .switch .slider { 53 | left: calc(50% - 2.5px); 54 | } 55 | -------------------------------------------------------------------------------- /z_Archive/Cards/01/heart.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/parthwebdev/UI-Animation/bdb637b1c71eaf8268fe7e4cf90b5fe8b9f3942e/z_Archive/Cards/01/heart.png -------------------------------------------------------------------------------- /z_Archive/Cards/01/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Card Hover Effect! 8 | 9 | 10 | 11 | 12 |

13 |

14 |

15 |

16 |

17 |

HOVER ME

18 |

19 | 20 | -------------------------------------------------------------------------------- /z_Archive/Cards/01/style.css: -------------------------------------------------------------------------------- 1 | * { 2 | margin: 0; 3 | padding: 0; 4 | box-sizing: border-box; 5 | } 6 | 7 | body { 8 | height: 100vh; 9 | background-color: #090909; 10 | display: grid; 11 | place-items: center; 12 | font-family: Poppins; 13 | } 14 | 15 | .card { 16 | width: 220px; 17 | height: 320px; 18 | background-color: white; 19 | border-radius: 10px; 20 | display: flex; 21 | align-items: center; 22 | justify-content: center; 23 | flex-direction: column; 24 | gap: 30px; 25 | position: relative; 26 | overflow: hidden; 27 | transition: all 0.4s ease-out; 28 | } 29 | 30 | .overlay { 31 | position: absolute; 32 | width: 100px; 33 | height: 100px; 34 | border-radius: 50%; 35 | top: 50%; 36 | left: 50%; 37 | background-color: #ecc6d9; 38 | z-index: 0; 39 | transform: translate(-50%, -70%) scale(0); 40 | transition: all 0.4s ease-out; 41 | } 42 | 43 | .circle { 44 | width: 120px; 45 | height: 120px; 46 | background-color: #ecc6d9; 47 | border-radius: 50%; 48 | display: flex; 49 | justify-content: center; 50 | align-items: center; 51 | z-index: 1; 52 | transition: all 0.4s ease-out; 53 | } 54 | 55 | .card:hover { 56 | transform: translateY(-10px); 57 | } 58 | .card:hover .overlay { 59 | transform: translate(-50%, -70%) scale(5); 60 | } 61 | .card:hover .circle { 62 | background-color: #f9ecf2; 63 | } 64 | 65 | .card p { 66 | text-transform: uppercase; 67 | letter-spacing: 1px; 68 | z-index: 2; 69 | } 70 | -------------------------------------------------------------------------------- /z_Archive/Cards/02/Jane Doe.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/parthwebdev/UI-Animation/bdb637b1c71eaf8268fe7e4cf90b5fe8b9f3942e/z_Archive/Cards/02/Jane Doe.jpg -------------------------------------------------------------------------------- /z_Archive/Cards/02/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | Card Hover Effect! 10 | 11 | 12 |

13 |

14 |

15 |

16 |

17 |

Jane Doe

18 |

@janedoe

19 |

20 |

21 | 22 | -------------------------------------------------------------------------------- /z_Archive/Cards/02/styles.css: -------------------------------------------------------------------------------- 1 | * { 2 | margin: 0; 3 | padding: 0; 4 | box-sizing: border-box; 5 | } 6 | 7 | body { 8 | height: 100vh; 9 | background-color: #131315; 10 | display: flex; 11 | justify-content: center; 12 | align-items: center; 13 | font-family: Poppins; 14 | } 15 | 16 | .card { 17 | width: 300px; 18 | aspect-ratio: 1/1.3; 19 | position: relative; 20 | } 21 | 22 | .card .image-box { 23 | width: 100%; 24 | height: 100%; 25 | overflow: hidden; 26 | } 27 | 28 | .card .image-box img { 29 | display: block; 30 | width: 100%; 31 | height: 100%; 32 | object-fit: cover; 33 | filter: grayscale(0) brightness(1); 34 | scale: 1.2; 35 | transition: scale 2s ease-in-out, filter 1s ease-in-out; 36 | } 37 | .card:hover .image-box img { 38 | filter: grayscale(1) brightness(0.7); 39 | scale: 1; 40 | } 41 | 42 | .card .text-box { 43 | position: absolute; 44 | top: 50%; 45 | left: 50%; 46 | transform: translate(-50%, -50%); 47 | text-align: center; 48 | color: white; 49 | } 50 | 51 | .text-box :is(.name, .username) { 52 | height: 34px; 53 | line-height: 34px; 54 | overflow: hidden; 55 | } 56 | .text-box .name { 57 | font-size: 26px; 58 | font-weight: 600; 59 | text-transform: uppercase; 60 | position: relative; 61 | } 62 | .text-box .username { 63 | font-size: 14px; 64 | font-weight: 300; 65 | } 66 | .name span, 67 | .username span { 68 | display: block; 69 | transition: transform 0.5s ease; 70 | } 71 | .name span { 72 | transition-delay: 0.2s; 73 | transform: translateY(100%); 74 | } 75 | .username span { 76 | transform: translateY(-100%); 77 | transition-delay: 0.5s; 78 | } 79 | 80 | .card:hover .text-box span { 81 | transform: translateY(0%); 82 | } 83 | 84 | .text-box::after { 85 | position: absolute; 86 | content: ""; 87 | top: 52%; 88 | left: 50%; 89 | width: 102%; 90 | height: 3px; 91 | transform: translate(-50%, -50%) scaleX(0); 92 | transform-origin: left; 93 | transition: 0.5s ease; 94 | background-color: cyan; 95 | } 96 | .card:hover .text-box::after { 97 | transform: translate(-50%, -50%) scaleX(1); 98 | } 99 | -------------------------------------------------------------------------------- /z_Archive/Cards/03/image.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/parthwebdev/UI-Animation/bdb637b1c71eaf8268fe7e4cf90b5fe8b9f3942e/z_Archive/Cards/03/image.jpg -------------------------------------------------------------------------------- /z_Archive/Cards/03/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Card Effect 8 | 9 | 10 | 11 |

12 |

13 |

14 |

15 |

16 |

Ford Mustang 1969

17 |

Lorem ipsum, dolor sit amet consectetur adipisicing elit. Corrupti porro quis.

18 |

19 |

20 | 21 | -------------------------------------------------------------------------------- /z_Archive/Cards/03/style.css: -------------------------------------------------------------------------------- 1 | @import url("https://fonts.googleapis.com/css2?family=Inter:wght@300;400;600&display=swap"); 2 | 3 | * { 4 | margin: 0; 5 | padding: 0; 6 | box-sizing: border-box; 7 | } 8 | 9 | body { 10 | height: 100vh; 11 | background-color: #030b0d; 12 | display: grid; 13 | place-items: center; 14 | font-family: "Inter", sans-serif; 15 | color: white; 16 | } 17 | 18 | .card { 19 | width: 400px; 20 | aspect-ratio: 1 / 0.7; 21 | border-radius: 8px; 22 | position: relative; 23 | cursor: pointer; 24 | } 25 | .card .image-box { 26 | width: 100%; 27 | height: 100%; 28 | border-radius: inherit; 29 | } 30 | .card .image-box img { 31 | width: 100%; 32 | height: 100%; 33 | object-fit: cover; 34 | object-position: 50% 90%; 35 | border-radius: inherit; 36 | transition: 0.5s ease-in-out; 37 | } 38 | 39 | .card::after { 40 | content: ""; 41 | position: absolute; 42 | inset: 0; 43 | border: 2px solid white; 44 | border-radius: inherit; 45 | opacity: 0; 46 | transition: 0.4s ease-in-out; 47 | } 48 | 49 | .card:hover img { 50 | filter: grayscale(1) brightness(0.4); 51 | } 52 | .card:hover::after { 53 | opacity: 1; 54 | inset: 20px; 55 | } 56 | 57 | .content { 58 | width: 80%; 59 | position: absolute; 60 | top: 50%; 61 | left: 50%; 62 | transform: translate(-50%, -50%); 63 | text-align: center; 64 | } 65 | 66 | .content h2, 67 | .content p { 68 | opacity: 0; 69 | transition: 0.4s 0.2s ease; 70 | } 71 | .content h2 { 72 | margin-bottom: 12px; 73 | scale: 0.7; 74 | } 75 | .content p { 76 | font-size: 14px; 77 | line-height: 1.5; 78 | color: #d1d1d1; 79 | transform: translateY(50%); 80 | } 81 | .card:hover .content h2 { 82 | scale: 1; 83 | opacity: 1; 84 | } 85 | .card:hover .content P { 86 | opacity: 1; 87 | transform: translateY(0); 88 | } 89 | -------------------------------------------------------------------------------- /z_Archive/Cards/04/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 3D Flips Card Effect 8 | 9 | 10 | 11 | 12 | 13 | 14 |

15 |

16 |

17 |

DC Universe

18 |

The Flash

19 |

2023

20 |

21 |

22 |

The Flash

23 |

24 | Synopsis: The Flash travels through time to prevent the murder of his mother, but unwittingly causes changes that result in the creation of a multiverse. 25 |

26 |

27 | Genre: Action, Adventure, Sci-Fi 28 |

29 |

30 | Release Date: 16 June, 2023 31 |

32 | Watch Trailer 33 |

34 |

35 |

36 | 37 | -------------------------------------------------------------------------------- /z_Archive/Cards/04/style.css: -------------------------------------------------------------------------------- 1 | *, 2 | *::before, 3 | *::after { 4 | margin: 0; 5 | padding: 0; 6 | box-sizing: border-box; 7 | } 8 | 9 | body { 10 | font-family: "Poppins", sans-serif; 11 | background-color: #090909; 12 | height: 100vh; 13 | display: flex; 14 | align-items: center; 15 | justify-content: center; 16 | } 17 | 18 | .card { 19 | width: 400px; 20 | } 21 | 22 | .card-content { 23 | position: relative; 24 | padding: 15rem 5rem; 25 | transform-style: preserve-3d; 26 | transition: transform 3s; 27 | } 28 | .card:hover .card-content { 29 | transform: rotateY(180deg); 30 | } 31 | 32 | .card-front, 33 | .card-back { 34 | position: absolute; 35 | top: 0; 36 | right: 0; 37 | bottom: 0; 38 | left: 0; 39 | padding: 2rem; 40 | display: flex; 41 | flex-direction: column; 42 | justify-content: center; 43 | backface-visibility: hidden; 44 | transform-style: preserve-3d; 45 | } 46 | 47 | .card-front, 48 | .card-back { 49 | background-size: cover; 50 | background-repeat: no-repeat; 51 | background-blend-mode: overlay; 52 | color: white; 53 | } 54 | .card-front { 55 | background-image: url(https://i.pinimg.com/564x/15/dc/30/15dc30af29194fa3b91e9de015eb646b.jpg); 56 | background-color: rgba(255, 163, 42, 0.2); 57 | align-items: center; 58 | } 59 | .card-front::before { 60 | content: ""; 61 | position: absolute; 62 | inset: 1rem; 63 | border: 3px solid yellow; 64 | transform: translateZ(2rem); 65 | } 66 | .title { 67 | font-family: "Teko", sans-serif; 68 | font-size: 4.5rem; 69 | text-transform: uppercase; 70 | line-height: 120%; 71 | transform: translateZ(4.4rem); 72 | } 73 | .sub-title { 74 | font-size: 0.75rem; 75 | font-weight: 500; 76 | text-transform: uppercase; 77 | letter-spacing: 3px; 78 | transform: translateZ(3rem); 79 | } 80 | 81 | .card-back { 82 | background-image: url(https://media.discordapp.net/attachments/1008571088919343124/1075699957471924316/CG_Kakashi_The_Flash_Portrait_red_and_yellow_lightning_costume__b186f92b-8566-47d3-9eef-6f82b437b15d.png?width=598&height=598); 83 | transform: rotateY(180deg); 84 | gap: 0.5rem; 85 | } 86 | .back-title { 87 | font-family: "Teko", sans-serif; 88 | font-size: 2.4rem; 89 | font-weight: 600; 90 | color: yellow; 91 | text-transform: uppercase; 92 | align-self: center; 93 | transform: translateZ(2rem); 94 | } 95 | 96 | .card-back span { 97 | font-weight: 600; 98 | color: yellow; 99 | } 100 | .btn { 101 | text-decoration: none; 102 | font-weight: 500; 103 | padding: 0.5rem 2.2rem; 104 | color: yellow; 105 | border: 2px solid white; 106 | border-radius: 100px; 107 | text-align: center; 108 | align-self: center; 109 | margin-top: 1rem; 110 | transform: translateZ(2rem); 111 | transition: 0.3s ease; 112 | } 113 | .btn:hover { 114 | background-color: rgb(185, 164, 0); 115 | color: white; 116 | border: 2px solid rgb(185, 164, 0); 117 | } 118 | -------------------------------------------------------------------------------- /z_Archive/Cards/05/book.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/parthwebdev/UI-Animation/bdb637b1c71eaf8268fe7e4cf90b5fe8b9f3942e/z_Archive/Cards/05/book.png -------------------------------------------------------------------------------- /z_Archive/Cards/05/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | CSS Cards Part 07 7 | 8 | 9 | 10 |

11 |

12 |

13 |

14 | 15 |

16 |

Type of Work

17 |

18 |

Project Name

19 | 24 |

25 |

26 |

27 | 28 | -------------------------------------------------------------------------------- /z_Archive/Cards/05/styles.css: -------------------------------------------------------------------------------- 1 | @import url("https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700&display=swap"); 2 | 3 | *, 4 | *::before, 5 | *::after { 6 | margin: 0; 7 | padding: 0; 8 | box-sizing: border-box; 9 | } 10 | 11 | body { 12 | font-family: Poppins, sans-serif; 13 | height: 100vh; 14 | color: #dedede; 15 | background-color: hsl(210, 10%, 8%); 16 | display: flex; 17 | justify-content: center; 18 | align-items: center; 19 | } 20 | 21 | .card { 22 | width: 280px; 23 | aspect-ratio: 1 / 1.3; 24 | padding: 24px; 25 | background-color: hsl(210, 20%, 15%); 26 | border-radius: 24px; 27 | box-shadow: 0px 0px 20px -1.5px hsl(0 0% 0% / 0.5); 28 | position: relative; 29 | display: flex; 30 | flex-direction: column; 31 | cursor: pointer; 32 | } 33 | 34 | .card > .card-image { 35 | width: 100%; 36 | height: 70%; 37 | transition: 0.5s ease; 38 | } 39 | 40 | .card-content { 41 | margin-top: auto; 42 | } 43 | 44 | .card-image > img { 45 | width: 100%; 46 | height: 100%; 47 | display: block; 48 | object-fit: cover; 49 | border-radius: 16px; 50 | } 51 | .card:hover > .card-image { 52 | translate: 0 -14px; 53 | } 54 | 55 | .card-content .sub-title { 56 | color: #ccc; 57 | font-size: 16px; 58 | margin-bottom: 4px; 59 | } 60 | 61 | .card-content .main-content { 62 | display: flex; 63 | justify-content: space-between; 64 | align-items: center; 65 | } 66 | 67 | .main-content > .icon { 68 | width: 32px; 69 | height: 32px; 70 | rotate: -45deg; 71 | transition: 0.35s ease; 72 | } 73 | .card:hover .icon { 74 | rotate: 0deg; 75 | color: #7988d2; 76 | } 77 | 78 | .main-content > .title { 79 | font-size: 24px; 80 | font-weight: 700; 81 | } 82 | 83 | .card::before { 84 | content: ""; 85 | position: absolute; 86 | inset: 1px; 87 | background-color: hsl(210, 14%, 80%); 88 | z-index: -1; 89 | border-radius: inherit; 90 | transition: all 0.35s ease; 91 | } 92 | .card:hover::before { 93 | transform: rotate(10deg); 94 | box-shadow: 0px 0px 20px -5px #000; 95 | } 96 | --------------------------------------------------------------------------------

James

Skills

Anastasia

Skills

Sophia

Skills

Jane Doe

Never Gonna |

Creative Image Reveal on Hover

Frontend

Ford Mustang 1969

The Flash

Project Name

Creative Image
Reveal on Hover