Big bang/webgune berria (#18)
* chore: netlify deployments plugina kentzen du * chore: Strapi berria instalatzen du * feat: astro instalatzen du * chore: cypress instalatzen du * feat: back eta front konektatzen ditu * feat: server side rendering egiten du * chore: Strapin enterprise edition flagak kentzen ditu * feat: euskara sartzen du * chore: Strapi bertsioa igotzen du * feat: preview modua sortzen du ingurune bariableen bidez * aurreko commitarekin doa * fix: cypress konpontzen du * chore: Strapi bertsioa igotzen du * feat: ekintza back-ean sortzen du * feat: zikloa eta erakundea sortzen ditu * feat: erakundeen kudeaketa hobetzen du * chore: pnpm erabiltzen du * feat: Strapi bertsioa igotzen du * ekintza sortzen du eta zerbitzuak eguneratzen ditu * chore: graphql erabiltzen du populazioa ekiditeko * chore: collection erabiltzen du ekintzetarako * chore: bertsioak igotzen ditu * chore: Astro bertsioa igotzen du * chore: Strapi bertsioa igotzen du * feat: home-a hasten du * feat: zig zag separadorea sortzen du * feat: zig zaga doitzen du * feat: heroa doitzen du * feat: agenda sortzen du * feat: agenda eta izan labazkide atalak konektatzen ditu * feat: home-aren edukia sortzen du * chore: app.js sartzen du WTF * feat: header-a sortzen du * feat: card-a hobetzen du * feat: footer-a sortzen du * feat: ekintzen zerrenda erakusten du * feat: zikloaren bista sortzen du * fix: header-aren estekak konpontzen ditu * chore: remove unused code * chore: components directorioa kentzen du * chore: typescript konfigurazioa hobetzen du * chore: views path-a sortzen du * feat: zikloaren deskribapena erakusten du * feat: ekintzaren bista sortzen du * feat: zig zag marra erakusten du * ignore: comment * feat: hitzordua erakusten du * feat: zikloa erakusten du * feat: Waveko erroreak errepasatzen ditu * feat: Wave birpasatzen du * feat: zerrendan irudia erakusten du * feat: karga optimizatzen du * feat: irudien formatuak kontuan hartzen ditu * feat: zikloan ekintza irudiak erakusten ditu * feat: ekintza zerrenda atontzen du * feat: header-eko estekak markatzen ditu * feat: irudi estela erakusten du * feat: responsive-a hobetzen du * feat: orri basikoa sortzen du * feat: hasiera responsive egiten du * feat: overflow konpontzen du * feat: bug-a uzten du LOL * feat: irudi estela mugikorrean aktibatzen du * feat: orri basikoa eta ekintza mugikorrean jartzen ditu * feat: mugikor menua sortzen du * feat: mugikor menua amaitzen du * feat: build estatikoa sortzen du * feat: sitemap-a sortzen du * feat: rss feed-a sortzen du * chore: ingurune aldagaiak sortzen ditu * chore: public-proxy komandoa sortzen du * feat: irudiak webp formatuan jartzen ditu * fix: irudiak erakusten ditu ekintzen zerrendan * feat: ekintza zerrendaren irudia animatzen du * refactor: extract functions * fix: animazioa konpontzen du * feat: irudi estela hobetzen du * chore: prerender aldagaiak kentzen ditu * chore: SASS warning-ak kentzen ditu * feat: ziklo eta ekintzetan H1 ezartzen du * feat: slideshow-a sortzen du * feat: ekintzak hitzorduan oinarrituta filtratzen ditu * feat: hitzorduen arabera filtratzen du eta moment kentzen du * feat: titulua aldatzen du * feat: menua eguneratzen du * feat: parte hartun deskribapena sortzen du * feat: Cloudinary konfiguratzen du * fix: cloudinary konfigurazioa konpontzen du * feat: erositako fonteak jartzen ditu
This commit is contained in:
Aitor Urrutia
GitHub
149
front/src/views/_components/IrudiEstela.astro
Normal file
149
front/src/views/_components/IrudiEstela.astro
Normal file
@@ -0,0 +1,149 @@
|
||||
---
|
||||
import { getImageData, type ImageMedia } from "models/ImageMedia";
|
||||
|
||||
interface Props {
|
||||
mosaikoa: ImageMedia[];
|
||||
}
|
||||
|
||||
const { mosaikoa } = Astro.props;
|
||||
|
||||
const mosaikoaImageDatas = shuffle(mosaikoa).map(getImageData);
|
||||
const imagesToShow = Array.from({ length: 60 }).map(
|
||||
(_, i) => mosaikoaImageDatas[i % mosaikoaImageDatas.length]
|
||||
);
|
||||
|
||||
function shuffle<T>(array: T[]) {
|
||||
const copia = [...array];
|
||||
for (let i = copia.length - 1; i > 0; i--) {
|
||||
const j = Math.floor(Math.random() * (i + 1));
|
||||
[copia[i], copia[j]] = [copia[j], copia[i]];
|
||||
}
|
||||
return copia;
|
||||
}
|
||||
---
|
||||
|
||||
<div class="wrapper">
|
||||
<div class="grid">
|
||||
{
|
||||
imagesToShow.map((imageData) => (
|
||||
<div class="cell">
|
||||
<img
|
||||
src={imageData.src}
|
||||
alt={imageData.alt}
|
||||
width={imageData.width}
|
||||
height={imageData.height}
|
||||
/>
|
||||
</div>
|
||||
))
|
||||
}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
import gsap from "gsap";
|
||||
|
||||
const cells = document.querySelectorAll(".cell img");
|
||||
|
||||
cells.forEach((img) => {
|
||||
img?.parentElement?.addEventListener("mouseenter", () => {
|
||||
gsap.to(img, {
|
||||
scale: 2,
|
||||
opacity: 1,
|
||||
duration: 0.3,
|
||||
ease: "power2.out",
|
||||
});
|
||||
});
|
||||
|
||||
img?.parentElement?.addEventListener("mouseleave", () => {
|
||||
gsap.to(img, {
|
||||
scale: 0,
|
||||
opacity: 0.4,
|
||||
duration: 1.6,
|
||||
ease: "power2.inOut",
|
||||
});
|
||||
});
|
||||
|
||||
img?.parentElement?.addEventListener("touchstart", () => {
|
||||
gsap.to(img, {
|
||||
scale: 2,
|
||||
opacity: 1,
|
||||
duration: 0.3,
|
||||
ease: "power2.out",
|
||||
});
|
||||
});
|
||||
|
||||
img?.parentElement?.addEventListener("touchend", () => {
|
||||
gsap.to(img, {
|
||||
scale: 0,
|
||||
opacity: 0.4,
|
||||
duration: 1.6,
|
||||
ease: "power2.inOut",
|
||||
});
|
||||
});
|
||||
});
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
@use "../../style/tools/mediaQueries.scss";
|
||||
|
||||
.wrapper {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 130%;
|
||||
|
||||
overflow: hidden;
|
||||
background: transparent;
|
||||
|
||||
padding: var(--space-07-mobile);
|
||||
|
||||
z-index: 10;
|
||||
}
|
||||
|
||||
.grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(5, 1fr);
|
||||
grid-template-rows: repeat(6, 1fr);
|
||||
background: var(--marroia);
|
||||
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 97dvh;
|
||||
|
||||
@include mediaQueries.aboveTablet {
|
||||
grid-template-columns: repeat(10, 1fr);
|
||||
grid-template-rows: repeat(6, 1fr);
|
||||
}
|
||||
}
|
||||
|
||||
.cell {
|
||||
position: relative;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
overflow: visible;
|
||||
|
||||
&:nth-child(n + 31) {
|
||||
display: none;
|
||||
}
|
||||
|
||||
@include mediaQueries.aboveTablet {
|
||||
&:nth-child(n + 31) {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.cell img {
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: auto;
|
||||
transform: scale(0);
|
||||
opacity: 0;
|
||||
will-change: transform, opacity;
|
||||
object-fit: contain;
|
||||
z-index: 10;
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user