Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[feat] animate image gallery #39

Merged
merged 1 commit into from
Jan 22, 2024
Merged

[feat] animate image gallery #39

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
95 changes: 65 additions & 30 deletions src/components/About.astro
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,14 +1,43 @@
---
import { Image } from 'astro:assets';
import working from '../graphics/about/working.webp';
import shapes from '../graphics/clouds_star_twirl_1.svg';
import crowdLarge from '../graphics/about/crowd_large.webp';
import fourppl from '../graphics/about/fourppl.webp';
import bear from '../graphics/about/bear.webp';
import tools from '../graphics/about/tools.webp';
import crowd from '../graphics/about/crowd.webp';
import gallery1 from '../graphics/about/working.webp';
import gallery2 from '../graphics/about/crowd_large.webp';
import gallery3 from '../graphics/about/fourppl.webp';
import gallery4 from '../graphics/about/bear.webp';
import gallery5 from '../graphics/about/tools.webp';
import gallery6 from '../graphics/about/crowd.webp';
import gallery7 from '../graphics/about/bigtable.webp';
import gallery8 from '../graphics/about/caffeinated.webp';
import gallery9 from '../graphics/about/calhacks_director.webp';
import gallery10 from '../graphics/about/focused.webp';
import gallery11 from '../graphics/about/hacker_group.webp';
import gallery12 from '../graphics/about/hackers_indoors.webp';
import gallery13 from '../graphics/about/hackers_outdoors.webp';
import gallery14 from '../graphics/about/levitating.webp';
import gallery15 from '../graphics/about/thinking.webp';
import gallery16 from '../graphics/about/thumbsup.webp';
import educate from '../graphics/about/bigtable.webp';
import empower from '../graphics/about/hackers_outdoors.webp';

const galleryImages = [
{ src: gallery1, alt: 'Group of 5 people coding' },
{ src: gallery2, alt: 'Large convention filled with people' },
{ src: gallery3, alt: 'CalHacks members' },
{ src: gallery4, alt: 'Hackers with a big bear' },
{ src: gallery5, alt: 'Girl with tools' },
{ src: gallery6, alt: 'Large group of people at a hackathon' },
{ src: gallery7, alt: 'Someone at a sponsor table' },
{ src: gallery8, alt: 'Hackers smiling at the camera' },
{ src: gallery9, alt: 'Four CalHacks directors' },
{ src: gallery10, alt: 'Girls focused on coding' },
{ src: gallery11, alt: 'Group photo of hackers' },
{ src: gallery12, alt: 'Four hackers indoors' },
{ src: gallery13, alt: 'Four hackers outdoors' },
{ src: gallery14, alt: 'Hackers in the middle of a jump' },
{ src: gallery15, alt: 'A hacker faced with a hard problem' },
{ src: gallery16, alt: 'Hackers posing at the camera' },
];
---

<section>
Expand All @@ -23,24 +52,10 @@ import empower from '../graphics/about/hackers_outdoors.webp';
</div>

<div class="imageRow">
<Image class="img" src={working} alt="Group of 5 people coding" />
<Image
class="img"
src={crowdLarge}
alt="Large group of people coding at hackathon"
/>
<Image class="img" src={fourppl} alt="Picture of CalHacks members" />
<Image
class="img"
src={bear}
alt="Hackathon attendees posing with stuffed bear"
/>
<Image class="img" src={tools} alt="Girl with tools" />
<Image
class="img"
src={crowd}
alt="Large group of people coding at hackathon"
/>
<div class="gallery">
{galleryImages.map(img => <Image class="img" {...img} loading="eager" />)}
{galleryImages.map(img => <Image class="img" {...img} loading="eager" />)}
</div>
</div>

<Image class="shape" src={shapes} alt="" />
Expand Down Expand Up @@ -143,9 +158,9 @@ import empower from '../graphics/about/hackers_outdoors.webp';

img {
background-color: colors.$secondary;
min-width: 10.5rem;
max-width: 10.5rem;
height: 7.0625rem;
min-width: 168px;
max-width: 168px;
height: 113px;
margin: auto;
border-radius: 8px;
object-fit: cover;
Expand Down Expand Up @@ -177,10 +192,30 @@ import empower from '../graphics/about/hackers_outdoors.webp';
}

div.imageRow {
display: flex;
align-items: flex-start;
gap: 24px;
position: relative;
margin-top: 74px;
height: 171px;
width: 100%;
overflow-x: hidden;

.gallery {
$gap: 24px;

position: absolute;
left: 0;
top: 0;
display: flex;
gap: $gap;
padding-left: $gap;
animation: slideshow 30s linear infinite;
transform: translateX(0, 0, 0);

@keyframes slideshow {
to {
transform: translateX(-50%);
}
}
}
}

.img {
Expand Down