From 4ae90daf2ce57e72e5f294f0a63b77a6c32c3bfa Mon Sep 17 00:00:00 2001 From: Juthatip McDevitt Date: Tue, 23 Apr 2024 10:34:28 -0500 Subject: [PATCH] initial commit --- awwwards/assets/logo.png | Bin 0 -> 13140 bytes awwwards/index.html | 195 +++++++++++++++++++++++++++++++ awwwards/main.js | 76 ++++++++++++ awwwards/style.css | 247 +++++++++++++++++++++++++++++++++++++++ 4 files changed, 518 insertions(+) create mode 100644 awwwards/assets/logo.png create mode 100644 awwwards/index.html create mode 100644 awwwards/main.js create mode 100644 awwwards/style.css diff --git a/awwwards/assets/logo.png b/awwwards/assets/logo.png new file mode 100644 index 0000000000000000000000000000000000000000..f19c3f629b43daf6a2df752d8fcec3221994bea7 GIT binary patch literal 13140 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 c?+LU4` + + + + + + + Awwwards Series Rebuild + + +
+
+
+ +
+

Grid

+
+
+
+

Index

+
+
+
+
+
+
+

All projects

+
+
+
+
+ +
+

Ochi Design Rebuild

+
+
+

(01)

+
    +
  • Vite + React
    • +
  • Tailwind
    • +
  • GSAP
    • +
  • Framer Motion
    • +
+
+ Demo + Source code +
+
+
+ +
+ +
+

Sundown Studio Rebuild

+
+
+

(02)

+
    +
  • HTML
    • +
  • CSS
    • +
  • JavaScript
    • +
+
+ Demo + Source code +
+
+
+ +
+ +
+

REJOUICE Rebuild

+
+
+

(03)

+
    +
  • Vite + React
    • +
  • Tailwind
    • +
  • GSAP
    • +
  • Framer Motion
    • +
+
+ Demo + Source code +
+
+
+ +
+ +
+

Kit: Rebuild

+
+
+

(04)

+
    +
  • Vite + React
    • +
  • Tailwind
    • +
  • Framer Motion
    • +
+
+ Demo + Source code +
+
+
+
+ +
+
+
+
+

Ochi Rebuild

+
+

1

+
+
+

→

+ + + + +
+
+ +
+
+
+

Sundown Studio Rebuild

+
+

2

+
+
+

→

+ + + + +
+
+ +
+
+
+

REJOUICE Rebuild

+
+

3

+
+
+

→

+ + + + +
+
+ +
+
+
+

Kit: Rebuild

+
+

4

+
+
+

→

+ + + + +
+
+
+
+
+
+
+ + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/awwwards/main.js b/awwwards/main.js new file mode 100644 index 0000000..f55c477 --- /dev/null +++ b/awwwards/main.js @@ -0,0 +1,76 @@ +const toggle = { + element: document.querySelector('.nav-select-toggle'), + circle: document.querySelector('.nav-toggle'), +}; +const view = { + grid: document.querySelector('.work-grid'), + index: document.querySelector('.work-index'), + indexItem: document.querySelectorAll('.work-index-item'), + indexMediaImage: document.querySelectorAll('.work-index-item-img'), + indexMediaArrow: document.querySelectorAll('.work-index-item-media-arrow'), +}; + +const animateIndexItem = (item) =>{ + const itemImages = item.querySelectorAll('.work-index-item-img'); + const itemArrows = item.querySelectorAll('.work-index-item-media-arrow'); + const itemTitle = item.querySelectorAll('.work-index-item-title'); + + const tlIndexrow = gsap.timeline({ + paused: true, + defaults: { + duration: 0.6, + ease: 'expo.inOut' + }, + }) + .to(itemArrows, {autoAlpha: 1, xPercent: 0}) + .to(itemImages, {autoAlpha: 1, yPercent: 0, stagger: 0.03}, 0) + .to(itemTitle, {autoAlpha: 0}, 0); + + item.addEventListener('mouseenter', () => tlIndexrow.play()) + item.addEventListener('mouseleave', () => tlIndexrow.reverse()) +}; + +let isActive = false; +const addEventListener = () => { + const tlToggle = gsap.timeline({paused:true}).to(toggle.circle, { + xPercent: 140, + duration: 0.2, + ease: 'expo.inOut', + }); + gsap.set(view.index, { + autoAlpha:0, + display: 'none' + }); + + const tlView = gsap.timeline({paused: true}).to(view.grid, { + duration: 0.6, + autoAlpha: 0, + display: 'none', + ease: 'expo.inOut', + onComplete: () => { + tlView.to(view.index, { + autoAlpha: 1, + display: 'block' + }); + }, + }); + toggle.element.addEventListener('click', () => { + !isActive ? tlToggle.play() : tlToggle.reverse(); + !isActive ? tlView.play() : tlView.reverse(); + + isActive = !isActive; + }); + view.indexItem.forEach((item) => { + gsap.set(view.indexMediaImage, { + autoAlpha: 0, + yPercent: 100 + }); + gsap.set(view.indexMediaArrow, { + autoAlpha: 0, + xPercent: -100 + }); + animateIndexItem(item); + }); + +}; +addEventListener(); \ No newline at end of file diff --git a/awwwards/style.css b/awwwards/style.css new file mode 100644 index 0000000..ff92563 --- /dev/null +++ b/awwwards/style.css @@ -0,0 +1,247 @@ +*{ + margin: 0; + padding:0; + box-sizing: border-box; +} +:root{ + --primary: #f7f7f7; + --secondary: #181818; +} +html{ + font-size: calc(100vw / 1920 * 10); +} +body{ + background: var(--primary); + color: var(--secondary); +} +h1{ + font-size: 13rem; + text-transform: uppercase; + +} +h2{ + font-size: 9rem; + text-transform: uppercase; +} +h3{ + font-size: 4.8rem; + text-transform: uppercase; + +} +h4{ + font-size: 3.2rem; + text-transform: uppercase; +} +p, li{ + font-size: 2.4rem; + text-decoration: none; + list-style: none; +} +a{ + text-decoration: none; +} +span{ + font-size: 1.6rem; +} +/*=== navbar ===*/ +.nav{ + position: absolute; + width: 100%; + left: 0; + top: 0; + padding: 3.2rem 6.4rem; + overflow: hidden; +} +.nav-container{ + display: flex; + justify-content: space-between; + width: 100%; +} +.nav-select{ + display: flex; + align-items: center; + gap: 1.5rem; +} +.nav-select-toggle{ + width: 6rem; + padding: 0.4rem; + border: 1px solid var(--secondary); + border-radius: 200rem; + cursor: pointer; +} +.nav-toggle{ + background-color: var(--secondary); + width: 2rem; + height: 2rem; + border-radius: 200rem; +} +/*=== projects ===*/ +.work{ + position: relative; + width: 100%; + margin-top: 15rem; + overflow: hidden; +} +.wrok-container{ + padding: 6.4rem; +} +.work-title{ + display: inline-flex; + width: 100%; + gap: 3.2rem; + padding-bottom: 4.8rem; + border-bottom: 1px solid var(--secondary); +} +.work-title h1{ + font-size: 12rem; +} +.work-selector{ + position: relative; + padding-top: 12rem; +} +/*=== grid ===*/ +.work-grid-item{ + display: grid; + grid-template-columns: 1fr 1fr; + grid-column-gap: 1.5rem; + grid-row-gap: 1.5rem; + grid-template-areas: 'grid-img grid-info' 'grid-title .'; + margin-bottom: 12.8rem; +} +.--item-left{ + grid-template-areas: 'grid-info grid-img ' '. grid-title'; +} +.work-grid-item-img{ + grid-area: grid-img; + width: 96rem; + height: 64rem; + object-fit: cover; +} +.work-grid-item-info{ + grid-area: grid-info; +} +.work-grid-item-title{ + grid-area: grid-title; +} +.grid-btn{ + margin-top: 2.5rem; + font-size: 2rem; +} +.grid-btn-1{ + margin-right: 10px; + padding: 10px; + background-color: #181818; + color: white; + border: 1px solid black; + transition: all 0.3s ease-in; +} +.grid-btn-1:hover{ + background-color: gray; + color: black; + border: 1px solid gray; +} +.grid-btn-2{ + padding: 10px; + color: black; + border: 1px solid black; + transition: all 0.3s ease-in; +} +.grid-btn-2:hover{ + background-color: gray; + color: white; + border: 1px solid gray; +} +/*=== index ===*/ +.work-index-item{ + position: relative; + height: 100%; + margin-bottom: 3.2rem; + overflow: hidden; + cursor: pointer; +} +.work-index-item:last-child{ + margin-bottom: 0; +} +.work-index-item-title{ + display: flex; + justify-content: space-between; + width: 100%; +} +.work-index-item-flex{ + display: inline-flex; + align-items: center; + gap: 3.2rem; +} +.work-index-item-media{ + display: flex; + position: absolute; + left: 0; + top: 0; + gap: 1.5rem; +} +.work-index-item-img{ + width: 32rem; + height: 13rem; + object-fit: cover; +} + +/*=== grid responsive ===*/ +@media screen and (min-width: 768px){ + .--item-left .work-grid-item-info{ + justify-self: right; + } + .work-grid-item:nth-child(2) .work-grid-item-img{ + width: 90rem; + height: 96rem; + } + .work-grid-item:nth-child(3) .work-grid-item-img{ + width: 120rem; + height: 90rem; + } + .work-grid-item:nth-child(4) .work-grid-item-img{ + width: 140rem; + height: 90rem; + } + +} +/*=== index responsive ===*/ +@media screen and (max-width: 768px){ + html{ + font-size: calc(100vw / 768 * 10); + } + h1{ + font-size: 7rem; + } + h2{ + font-size: 4.8rem; + } + h3{ + font-size: 3.2rem; + } + h4{ + font-size: 2.4rem; + } + p,li{ + font-size: 2.4rem; + } + span{ + font-size: 1.6rem; + } + .work-grid-item, .work-grid-item.--item-left{ + grid-template-columns: 1fr; + grid-template-areas: 'grid-img' 'grid-title' 'grid-info'; + } + .work-grid-item-img{ + width: 100%; + height: 64rem; + object-fit: cover; + } + .work-title h1{ + font-size: 7rem; + } + .work-index-item-flex{ + flex-direction: column; + align-items: flex-start; + gap: 0; + } +} \ No newline at end of file