Skip to content

Ev/preloading animation #13

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

Draft
EnzoVieira wants to merge 4 commits into
base: main
Choose a base branch
from
Draft

Ev/preloading animation #13

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
8c19e02
add(PreLoader): Pre loading page animation
EnzoVieira Mar 4, 2023
7b2c473
add(PreLoader): Cube responsiveness
EnzoVieira Mar 4, 2023
cf1cefa
add(PreLoader): Jordi logo
EnzoVieira Mar 4, 2023
91148dd
add(PreLoader): Reveal animation
EnzoVieira Mar 5, 2023
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
36 changes: 36 additions & 0 deletions src/components/PreLoader/PreLoader.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,36 @@
import Image from 'next/image'

import styles from './PreLoader.module.css'
import Logo from 'public/images/logo.svg'

export function PreLoader() {
return (
<div className={`${styles.container}`}>
<div className={styles.cube}>
<div className={styles.top} />

<div className={styles.cubeFacesWrapper}>
<div className={styles.face} />
<div className={styles.face} />
<div className={styles.face} />
<div className={styles.face} />
</div>

<div className={styles.bottom} />
</div>

{/* JORDI LOGO */}
<div className="absolute top-20 flex justify-center lg:top-10">
<Image
className="aspect-video w-36 animate-horizontal-slide text-slate-900 md:w-80"
src={Logo}
alt="JORDI"
/>
</div>

<h1 className="absolute bottom-20 animate-horizontal-slide-reverse text-xl font-medium text-secondary md:text-4xl md:text-black">
Jornadas de Direito Informático
</h1>
</div>
)
}
114 changes: 114 additions & 0 deletions src/components/PreLoader/PreLoader.module.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,114 @@
.container {
display: flex;
align-items: center;

justify-content: center;
background-color: white;
background-image: url('../../../public/images/background.jpg');

position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: 9999;

animation: page-down 0.4s ease-in-out 2.6s;
animation-fill-mode: forwards;
}

.cube {
position: relative;
height: 40vw;
width: 40vw;

transform-style: preserve-3d;
animation: spin-cube 4s linear infinite;
}

.cube .cubeFacesWrapper {
position: relative;
top: 0;
left: 0;
width: 100%;
height: 100%;
transform-style: preserve-3d;
}

.cube .face {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;

background: linear-gradient(#f3f3f3, #104194);

transform-style: preserve-3d;
transform: rotateY(0deg) translateZ(20vw);
}

.cube .face:nth-child(1) {
transform: rotateY(90deg) translateZ(20vw);
}
.cube .face:nth-child(2) {
transform: rotateY(180deg) translateZ(20vw);
}
.cube .face:nth-child(3) {
transform: rotateY(270deg) translateZ(20vw);
}

.cube > .top {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: #f3f3f3;
transform: rotateX(90deg) translateZ(20vw);
}

.bottom {
position: absolute;
top: 0;
left: 0;
width: 40vw;
height: 40vw;
background: #104194;
transform: rotateX(90deg) translateZ(-40vw);
filter: blur(24px);
box-shadow: 0 0 120px rgba(16, 65, 148, 0.2), 0 0 200px rgba(16, 65, 148, 0.4),
0 0 300px rgba(16, 65, 148, 0.6), 0 0 400px rgba(16, 65, 148, 0.8),
0 0 500px rgba(16, 65, 148, 1);
}

@media screen and (min-width: 720px) {
.cube {
scale: 0.6;
}
}

@media (min-width: 1536px) {
.cube {
scale: 0.4;
}
}

@keyframes spin-cube {
0% {
transform: rotateX(-30deg) rotateY(0deg);
}

100% {
transform: rotateX(-30deg) rotateY(350deg);
}
}

@keyframes page-down {
0% {
transform: translateY(0);
}
100% {
transform: translateY(100vh);
}
}
1 change: 1 addition & 0 deletions src/components/PreLoader/index.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
export { PreLoader } from './PreLoader'
8 changes: 6 additions & 2 deletions src/pages/index.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,20 +8,24 @@ import { Speakers } from '@/components/Speakers'
import { Sponsors } from '@/components/Sponsors'
import { Organization } from '@/components/Organization'
import { Papers } from '@/components/Papers'
import { PreLoader } from '@/components/PreLoader'

export default function Home() {
return (
<>
<Head>
<title>Jordi</title>
<meta name="description"/>
<meta name="description" />
</Head>
<Header />

<PreLoader />

<main>
<Hero />
<Speakers />
<Schedule />
<Papers/>
<Papers />
<Sponsors />
<Organization />
</main>
Expand Down
21 changes: 17 additions & 4 deletions tailwind.config.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -31,10 +31,23 @@ module.exports = {
maxWidth: {
'2xl': '40rem',
},
colors:{
primary: "#1B69EE",
secondary: "#104194",
}
colors: {
primary: '#1B69EE',
secondary: '#104194',
},
},
keyframes: {
slide: {
'0%': { transform: 'translateX(100vw)' },
'10%': { transform: 'translateX(60px)' },
'50%': { transform: 'translateX(0)' },
'90%': { transform: 'translateX(-60px)' },
'100%': { transform: 'translateX(-100vw)' },
},
},
animation: {
'horizontal-slide': 'slide 3s linear',
'horizontal-slide-reverse': 'slide 3s linear reverse',
},
},
plugins: [],
Expand Down