Skip to content

Commit

Permalink
-q
Browse files Browse the repository at this point in the history
  • Loading branch information
@gustavoquinalha
gustavoquinalha committed Jan 3, 2024
1 parent c17e829 commit add3cca
Show file tree
Hide file tree
Showing 9 changed files with 251 additions and 117 deletions.
1 change: 0 additions & 1 deletion astro.config.mjs
View file
Original file line number Diff line number Diff line change
@@ -1,7 +1,6 @@
import { defineConfig } from 'astro/config';
import tailwind from "@astrojs/tailwind";

// https://astro.build/config
export default defineConfig({
integrations: [tailwind()]
});
33 changes: 33 additions & 0 deletions package-lock.json
View file

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

4 changes: 4 additions & 0 deletions package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -15,7 +15,11 @@
"astro": "^4.0.9",
"gsap": "^3.12.4",
"imagesloaded": "^5.0.0",
"split-type": "^0.3.4",
"tailwindcss": "^3.4.0",
"typescript": "^5.3.3"
},
"devDependencies": {
"@types/imagesloaded": "^4.1.6"
}
}
56 changes: 17 additions & 39 deletions src/components/Hero.astro
View file
Original file line number Diff line number Diff line change
@@ -1,38 +1,13 @@
---
import { Image } from "astro:assets";
import heroImage from "../../public/hero.jpg"; // 1600x900
import heroImage from "../../public/hero.jpg";
import logoImage from "../../public/logo.svg";
import instagramImage from "../../public/instagram.svg";
import twitterImage from "../../public/twitter.svg";
import arrowDownImage from "../../public/arrow-down.svg";
---

<script>
import { gsap } from "gsap";

gsap.from(".animate-top", {
scrollTrigger: ".animate-top", // start the animation when ".box" enters the viewport (once)
y: 300,
});

gsap.from(".animate-bottom", {
scrollTrigger: ".animate-bottom", // start the animation when ".box" enters the viewport (once)
y: -300,
});

gsap.from(".animate-left", {
scrollTrigger: ".animate-left", // start the animation when ".box" enters the viewport (once)
x: -300,
});

gsap.from(".animate-right", {
scrollTrigger: ".animate-left", // start the animation when ".box" enters the viewport (once)
x: 300,
});

</script>

<div class="hero w-full">
<div class="hero w-full overflow-hidden">
<div
class="w-full max-w-7xl mx-auto px-4 md:px-8 lg:px-12 min-h-auto md:min-h-screen h-full flex flex-col justify-between items-stretch gap-10 py-10"
>
Expand Down Expand Up @@ -93,13 +68,16 @@ import arrowDownImage from "../../public/arrow-down.svg";
<div
class="w-full flex flex-col lg:flex-row items-center justify-center gap-8 lg:gap-0"
>
<div class="animate-left mr-auto lg:-mr-40 z-50 flex flex-col gap-8 w-full">
<span
class="text-2xl md:text-4xl lg:text-6xl font-black text-white text-center lg:text-left"
>A DevParaná Conf é organizada<br />
<span class="text-green-600">por pessoas da comunidade</span><br />
para comunidade.</span
<div class="mr-auto lg:-mr-40 z-50 flex flex-col gap-8 w-full">
<div
class="flex flex-col text-hero text-2xl md:text-4xl lg:text-6xl font-black text-white text-center lg:text-left"
>
<span class="whitespace-nowrap">A DevParaná Conf é organizada</span>
<span class="text-green-600 whitespace-nowrap"
>por pessoas da comunidade</span
>
<span class="whitespace-nowrap">para comunidade.</span>
</div>
<div class="flex justify-center lg:justify-start">
<a
href="#"
Expand All @@ -111,7 +89,7 @@ import arrowDownImage from "../../public/arrow-down.svg";
</div>

<div
class="animate-right hero-img border-2 border-green-600 rounded-xl bg-neutral-950 mb-10"
class="animate-top hero-img border-2 border-green-600 rounded-xl bg-neutral-950 mb-10"
>
<Image
src={heroImage}
Expand All @@ -121,9 +99,9 @@ import arrowDownImage from "../../public/arrow-down.svg";
</div>
</div>

<div class="animate-top w-full grid grid-cols-1 md:grid-cols-3">
<div class="animate-bottom w-full grid grid-cols-1 md:grid-cols-3">
<div class="text-center md:text-left w-full">
<div class="text-base md:text-xl font-black text-white">
<div class="text-base md:text-xl font-medium text-white">
<span>07 de Junho</span>
<span class="text-green-600">16:20</span>
</div>
Expand All @@ -139,7 +117,7 @@ import arrowDownImage from "../../public/arrow-down.svg";
</div>

<div class="text-center md:text-right w-full">
<span class="text-base md:text-xl font-black text-white"
<span class="text-base md:text-xl font-medium text-white"
>Maringá <span class="text-green-600">PR</span></span
>
</div>
Expand All @@ -148,9 +126,9 @@ import arrowDownImage from "../../public/arrow-down.svg";
</div>

<style>
.hero-img {
/* .hero-img {
box-shadow: 20px 20px 0px #15a04b;
}
} */

.hero-img img {
mask-image: linear-gradient(
Expand Down
143 changes: 68 additions & 75 deletions src/components/Slider.astro
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,114 +8,107 @@ import Image5 from "../../public/5.jpg";
import Image6 from "../../public/6.jpg";
---

<script>
import { gsap } from "gsap";
import { ScrollTrigger } from "gsap/dist/ScrollTrigger";

gsap.registerPlugin(ScrollTrigger);

const images = gsap.utils.toArray("img");

console.log("images", images);

const loader = document.querySelector(".loader--text")!;
const updateProgress = (instance: any) =>
(loader.textContent = `${Math.round(
(instance.progressedCount * 100) / images.length,
)}%`);

const showDemo = () => {
document.body.style.overflow = "auto";
document?.scrollingElement?.scrollTo(0, 0);
gsap.to(document.querySelector(".loader"), { autoAlpha: 0 });

gsap.utils.toArray("section").forEach((section: any, index: number) => {
const w = section.querySelector(".wrapper");
const [x, xEnd] =
index % 2
? ["100%", (w.scrollWidth - section.offsetWidth) * -1]
: [w.scrollWidth * -1, 0];
gsap.fromTo(
w,
{ x },
{
x: xEnd,
scrollTrigger: {
trigger: section,
scrub: 0.5,
},
},
);
});
};

showDemo();

// imagesLoaded(images).on("progress", updateProgress).on("always", showDemo);
</script>

<div class="loader flex items-center justify-center">
<div>
<h1>Loading</h1>
<h2 class="loader--text">0%</h2>
<div class="demo">
<div id="textblock">
<div id="scramble"></div>
<span id="charsCustom"></span>
<span id="charsNumbers"></span><br />
<span id="charsUppercase"></span>
<span id="charsLowercase"></span>
<div id="newClass"></div>
</div>
</div>

<section class="demo-gallery overflow-hidden">
<ul class="wrapper flex gap-4">
<li>
<Image src={Image1} class="imgs max-w-96 rounded-xl border-2 border-green-600 image1" alt="" />
<Image
src={Image1}
class="imgs max-w-80 rounded-xl border-2 border-green-600 image1"
alt=""
/>
</li>
<li>
<Image src={Image2} class="imgs max-w-96 rounded-xl border-2 border-green-600 image2" alt="" />
<Image
src={Image2}
class="imgs max-w-80 rounded-xl border-2 border-green-600 image2"
alt=""
/>
</li>
<li>
<Image src={Image3} class="imgs max-w-96 rounded-xl border-2 border-green-600 image3" alt="" />
<Image
src={Image3}
class="imgs max-w-80 rounded-xl border-2 border-green-600 image3"
alt=""
/>
</li>
<li>
<Image src={Image4} class="imgs max-w-96 rounded-xl border-2 border-green-600 image4" alt="" />
<Image
src={Image4}
class="imgs max-w-80 rounded-xl border-2 border-green-600 image4"
alt=""
/>
</li>
<li>
<Image src={Image5} class="imgs max-w-96 rounded-xl border-2 border-green-600 image5" alt="" />
<Image
src={Image5}
class="imgs max-w-80 rounded-xl border-2 border-green-600 image5"
alt=""
/>
</li>
<li>
<Image src={Image6} class="imgs max-w-96 rounded-xl border-2 border-green-600 image6" alt="" />
<Image
src={Image6}
class="imgs max-w-80 rounded-xl border-2 border-green-600 image6"
alt=""
/>
</li>
</ul>
</section>

<section class="demo-gallery overflow-hidden mt-4">
<ul class="wrapper flex gap-4">
<li>
<Image src={Image1} class="imgs max-w-96 rounded-xl border-2 border-green-600 image1" alt="" />
<Image
src={Image1}
class="imgs max-w-80 rounded-xl border-2 border-green-600 image1"
alt=""
/>
</li>
<li>
<Image src={Image2} class="imgs max-w-96 rounded-xl border-2 border-green-600 image2" alt="" />
<Image
src={Image2}
class="imgs max-w-80 rounded-xl border-2 border-green-600 image2"
alt=""
/>
</li>
<li>
<Image src={Image3} class="imgs max-w-96 rounded-xl border-2 border-green-600 image3" alt="" />
<Image
src={Image3}
class="imgs max-w-80 rounded-xl border-2 border-green-600 image3"
alt=""
/>
</li>
<li>
<Image src={Image4} class="imgs max-w-96 rounded-xl border-2 border-green-600 image4" alt="" />
<Image
src={Image4}
class="imgs max-w-80 rounded-xl border-2 border-green-600 image4"
alt=""
/>
</li>
<li>
<Image src={Image5} class="imgs max-w-96 rounded-xl border-2 border-green-600 image5" alt="" />
<Image
src={Image5}
class="imgs max-w-80 rounded-xl border-2 border-green-600 image5"
alt=""
/>
</li>
<li>
<Image src={Image6} class="imgs max-w-96 rounded-xl border-2 border-green-600 image6" alt="" />
<Image
src={Image6}
class="imgs max-w-80 rounded-xl border-2 border-green-600 image6"
alt=""
/>
</li>
</ul>
</section>

<style>
.loader {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
color: white;
z-index: 10000;
}

</style>
Loading

0 comments on commit add3cca

Please sign in to comment.