Skip to content

Commit

Permalink
Merge pull request #413 from dump-hr/ToniGrbic/382-popravit-ponasanje…
Browse files Browse the repository at this point in the history 
…-sponzorskih-logotipova

postion sticky quote, animation setup, fixed positions desktop
  • Loading branch information
@lovretomic
lovretomic authored Nov 6, 2024
2 parents 26edc7a + 79dca36 commit 50c6d8e
Show file tree
Hide file tree
Showing 2 changed files with 159 additions and 98 deletions.
106 changes: 62 additions & 44 deletions apps/web/src/components/SponsorSection/SponsorSection.module.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,8 +2,57 @@
@import 'styles/calc';
@import 'styles/variables';

figure {
margin: 0px;
.stickySection {
padding-bottom: 29px;

@media (max-width: 768px) {
padding-bottom: 54px;
}

figure {
margin: 0px;
}

.quote {
position: sticky;
top: 0;
padding-top: 120px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
z-index: 10;

.idea {
color: $light-primary;
font-size: vw-calc(14);
line-height: vw-calc(16);
font-weight: 500;
letter-spacing: vw-calc(1);
margin-bottom: vw-calc(24);
text-transform: uppercase;

@media (max-width: 768px) {
font-size: vw-mobile-calc(12);
line-height: vw-mobile-calc(16);
margin-bottom: vw-mobile-calc(16);
}
}

.title {
text-align: center;
max-width: vw-calc(750);
color: $tertiary;
font-size: vw-calc(48);
letter-spacing: vw-calc(-2);

@media (max-width: 768px) {
font-size: vw-mobile-calc(24);
letter-spacing: vw-mobile-calc(-1);
max-width: vw-mobile-calc(340);
}
}
}
}

.logosWrapper {
Expand Down Expand Up @@ -47,37 +96,7 @@ figure {
height: vw-calc(705);

@media (max-width: 768px) {
height: vw-mobile-calc(475);
}

.idea {
color: $light-primary;
font-size: vw-calc(14);
line-height: vw-calc(16);
font-weight: 500;
letter-spacing: vw-calc(1);
margin-bottom: vw-calc(24);
text-transform: uppercase;

@media (max-width: 768px) {
font-size: vw-mobile-calc(12);
line-height: vw-mobile-calc(16);
margin-bottom: vw-mobile-calc(16);
}
}

.title {
text-align: center;
max-width: vw-calc(750);
color: $tertiary;
font-size: vw-calc(48);
letter-spacing: vw-calc(-2);

@media (max-width: 768px) {
font-size: vw-mobile-calc(24);
letter-spacing: vw-mobile-calc(-1);
max-width: vw-mobile-calc(340);
}
height: vw-mobile-calc(275);
}

.image {
Expand All @@ -92,61 +111,60 @@ figure {
@media (max-width: 768px) {
max-width: vw-mobile-calc(40);
max-height: vw-mobile-calc(40);
margin-top: vw-mobile-calc(100);
}

--logo-opacity-downscale: 0.3;

&.first {
top: vw-calc(480);
top: vw-calc(138);
left: vw-calc(53);
opacity: calc(0.6 - var(--logo-opacity-downscale));
}

&.second {
top: vw-calc(292);
top: vw-calc(0);
left: vw-calc(200);
opacity: calc(0.5 - var(--logo-opacity-downscale));
}

&.third {
top: vw-calc(750);
top: vw-calc(458);
left: vw-calc(200);
opacity: calc(0.45 - var(--logo-opacity-downscale));
}

&.fourth {
top: vw-calc(600);
top: vw-calc(308);
left: vw-calc(475);
opacity: calc(0.8 - var(--logo-opacity-downscale));
}

&.fifth {
top: vw-calc(420);
top: vw-calc(127);
left: vw-calc(650);
opacity: calc(0.7 - var(--logo-opacity-downscale));
}

&.sixth {
top: vw-calc(540);
top: vw-calc(247);
left: vw-calc(900);
opacity: calc(0.6 - var(--logo-opacity-downscale));
}

&.seventh {
top: vw-calc(370);
top: vw-calc(78);
left: vw-calc(1115);
opacity: calc(0.4 - var(--logo-opacity-downscale));
}

&.eighth {
top: vw-calc(244);
top: vw-calc(-48);
left: vw-calc(1245);
opacity: calc(0.5 - var(--logo-opacity-downscale));
}

&.ninth {
top: vw-calc(650);
top: vw-calc(358);
left: vw-calc(1220);
opacity: calc(0.5 - var(--logo-opacity-downscale));
}
Expand Down Expand Up @@ -190,7 +208,7 @@ figure {
.goldenRow {
display: flex;
flex-direction: row;
margin-top: vw-calc(32);
margin-top: vw-calc(64);
column-gap: vw-calc(32);

@media (max-width: 768px) {
Expand Down
151 changes: 97 additions & 54 deletions apps/web/src/components/SponsorSection/SponsorSection.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,14 +4,19 @@ import goldSponsor from 'assets/images/golden-sponsor.webp';
import kodak from 'assets/images/kodak.webp';
import silverSponsor from 'assets/images/silver-sponsor.webp';
import clsx from 'clsx';
import React, { useMemo, useState } from 'react';
import React, { useEffect, useMemo, useState } from 'react';

import { useGetAllSponsors } from '../../api/sponsor/useGetAllSponsors';
import { useScreenSize } from '../../hooks/useScreenSize';
import { SponsorJobCount } from './SponsorJobCount';
import SponsorModal from './SponsorModal';
import c from './SponsorSection.module.scss';

import { gsap } from 'gsap';
import { ScrollTrigger } from 'gsap/ScrollTrigger';

gsap.registerPlugin(ScrollTrigger);

export const SponsorSection: React.FC = () => {
const [sponsorForModal, setSponsorForModal] =
useState<CompanyPublicDto | null>(null);
Expand Down Expand Up @@ -42,65 +47,103 @@ export const SponsorSection: React.FC = () => {
const { isMobile } = useScreenSize(768);
const maxSponsors = useMemo(() => (isMobile ? 2 : 4), [isMobile]);

useEffect(() => {
const images = document.querySelectorAll(`.${c.topSection} img`);

const tl = gsap.timeline({
scrollTrigger: {
trigger: `.${c.topSection}`,
start: 'top 80%',
end: 'bottom 20%',
toggleActions: 'play none none reverse',
},
repeat: -1, // Infinite repeat
repeatDelay: 0.5, // Delay between repeats
});

tl.fromTo(
images,
{ opacity: 0 },
{
opacity: 1,
duration: 3.5,
stagger: {
each: 0.5,
from: 'random',
repeat: -1,
yoyo: true,
ease: 'power1.inOut',
},
},
);
return () => {
ScrollTrigger.getAll().forEach((trigger) => trigger.kill());
};
}, []);

return (
<section className={c.container} id='sponzori'>
{sponsorForModal !== null && (
<SponsorModal sponsor={sponsorForModal} close={handleCloseModal} />
)}
<div className={c.stickySection}>
<div className={c.quote}>
<span className={c.idea}>Vjerujemo u jaka prijateljstva.</span>
<span className={c.title}>
Motivirani uspjesima na IT sceni, zajedno oblikujemo budućnost
digitalne generacije.
</span>
</div>

<figure className={c.topSection}>
<span className={c.idea}>Vjerujemo u jaka prijateljstva.</span>
<span className={c.title}>
Motivirani uspjesima na IT sceni, zajedno oblikujemo budućnost
digitalne generacije.
</span>
<img
className={clsx(c.image, c.first)}
src='https://ddays-app-uploads.dump.hr/company-logo/thp3VVg89Sj4tHNc_xtMl.svg'
alt=''
/>
<img
className={clsx(c.image, c.second)}
src='https://ddays-app-uploads.dump.hr/company-logo/0hfC4eKEqSKbXn_F22518.svg'
alt=''
/>
<img
className={clsx(c.image, c.third)}
src='https://ddays-app-uploads.dump.hr/company-logo/hc9GqEEhRtOJkk1igIkXw.svg'
alt=''
/>
<img
className={clsx(c.image, c.fourth)}
src='https://ddays-app-uploads.dump.hr/company-logo/_BPp8z1akpLYDKfGLshIK.svg'
alt=''
/>
<img
className={clsx(c.image, c.fifth)}
src='https://ddays-app-uploads.dump.hr/company-logo/o6A-Blvc31bctYHkLEg1A.svg'
alt=''
/>
<img
className={clsx(c.image, c.sixth)}
src='https://ddays-app-uploads.dump.hr/company-logo/68UleSMKyBSFOemgIS8Bx.svg'
alt=''
/>
<img
className={clsx(c.image, c.seventh)}
src='https://ddays-app-uploads.dump.hr/company-logo/q85WaNbdchDQyVolERFpg.svg'
alt=''
/>
<img
className={clsx(c.image, c.eighth)}
src='https://ddays-app-uploads.dump.hr/company-logo/YGzRtV8wGG4_0wCK-JHhG.svg'
alt=''
/>
<img
className={clsx(c.image, c.ninth)}
src='https://ddays-app-uploads.dump.hr/company-logo/rtbpH9-uMTVDYSjeMgEzJ.svg'
alt=''
/>
<div className={c.sectionBreaker}></div>
</figure>
<figure className={c.topSection}>
<img
className={clsx(c.image, c.first)}
src='https://ddays-app-uploads.dump.hr/company-logo/thp3VVg89Sj4tHNc_xtMl.svg'
alt=''
/>
<img
className={clsx(c.image, c.second)}
src='https://ddays-app-uploads.dump.hr/company-logo/0hfC4eKEqSKbXn_F22518.svg'
alt=''
/>
<img
className={clsx(c.image, c.third)}
src='https://ddays-app-uploads.dump.hr/company-logo/hc9GqEEhRtOJkk1igIkXw.svg'
alt=''
/>
<img
className={clsx(c.image, c.fourth)}
src='https://ddays-app-uploads.dump.hr/company-logo/_BPp8z1akpLYDKfGLshIK.svg'
alt=''
/>
<img
className={clsx(c.image, c.fifth)}
src='https://ddays-app-uploads.dump.hr/company-logo/o6A-Blvc31bctYHkLEg1A.svg'
alt=''
/>
<img
className={clsx(c.image, c.sixth)}
src='https://ddays-app-uploads.dump.hr/company-logo/68UleSMKyBSFOemgIS8Bx.svg'
alt=''
/>
<img
className={clsx(c.image, c.seventh)}
src='https://ddays-app-uploads.dump.hr/company-logo/q85WaNbdchDQyVolERFpg.svg'
alt=''
/>
<img
className={clsx(c.image, c.eighth)}
src='https://ddays-app-uploads.dump.hr/company-logo/YGzRtV8wGG4_0wCK-JHhG.svg'
alt=''
/>
<img
className={clsx(c.image, c.ninth)}
src='https://ddays-app-uploads.dump.hr/company-logo/rtbpH9-uMTVDYSjeMgEzJ.svg'
alt=''
/>
<div className={c.sectionBreaker}></div>
</figure>
</div>
<article className={c.sponsorSection}>
<img src={goldSponsor} alt='zlatni sponzori' />
<span className={c.sponsorTier}>Zlatni sponzori</span>
Expand Down

0 comments on commit 50c6d8e

Please sign in to comment.