forked from LikeLion-at-DGU/2024_fall_festival_front
-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
Showing
20 changed files
with
482 additions
and
209 deletions.
There are no files selected for viewing
File renamed without changes
File renamed without changes
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,3 @@ | ||
import * as S from "./BottomNavBar.styled"; | ||
|
||
export const BottomNavBar = () => {}; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,7 @@ | ||
import styled from "styled-components"; | ||
|
||
export const BottomNavBarWrapper = styled.section` | ||
display: flex; | ||
align-items: center; | ||
width: 100%; | ||
`; |
File renamed without changes.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,60 @@ | ||
import React, { useState, useEffect } from "react"; | ||
import * as S from "./styled"; | ||
import Mainicon from "../../assets/images/Mainicon.png"; | ||
import Leaf1 from "../../assets/images/leaf/leaf1.png"; | ||
import Leaf2 from "../../assets/images/leaf/leaf2.png"; | ||
import Leaf3 from "../../assets/images/leaf/leaf3.png"; | ||
|
||
export const TopBar = () => { | ||
const [leaves, setLeaves] = useState([]); | ||
|
||
// 랜덤한 Leaf 이미지를 생성하는 함수 | ||
const generateRandomLeaves = () => { | ||
const leafTypes = [Leaf1, Leaf2, Leaf3]; | ||
const randomLeaves = []; | ||
|
||
leafTypes.forEach((leaf, index) => { | ||
const leafCount = Math.floor(Math.random() * 5) + 1; | ||
for (let i = 0; i < leafCount; i++) { | ||
const size = Math.floor(Math.random() * 11) + 15; | ||
const left = Math.floor(Math.random() * 100); | ||
const duration = Math.random() * 3 + 5; | ||
const delay = Math.random() * 2; | ||
|
||
randomLeaves.push({ | ||
src: leaf, | ||
size: size, | ||
left: `${left}%`, | ||
duration: `${duration}s`, | ||
delay: `${delay}s`, | ||
key: `${index}-${i}`, | ||
}); | ||
} | ||
}); | ||
|
||
return randomLeaves; | ||
}; | ||
|
||
useEffect(() => { | ||
setLeaves(generateRandomLeaves()); | ||
}, []); | ||
|
||
return ( | ||
<S.Background> | ||
<S.MainText>동국대학교 가을축제 부스사이트</S.MainText> | ||
<S.MainLogo src={Mainicon} /> | ||
|
||
{/* 랜덤으로 생성된 Leaves 출력 */} | ||
{leaves.map((leaf) => ( | ||
<S.Leaves | ||
key={leaf.key} | ||
src={leaf.src} | ||
size={leaf.size} | ||
left={leaf.left} | ||
duration={leaf.duration} | ||
delay={leaf.delay} | ||
/> | ||
))} | ||
</S.Background> | ||
); | ||
}; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,77 @@ | ||
import styled, { keyframes } from "styled-components"; | ||
|
||
// 낙엽이 좌우로 크게 흔들리며 자연스럽게 아래로 떨어지는 애니메이션 정의 | ||
const fallAnimation = keyframes` | ||
0% { | ||
transform: translateX(0px) translateY(0px) rotate(0deg); | ||
} | ||
10% { | ||
transform: translateX(5px) translateY(20px) rotate(10deg); | ||
} | ||
20% { | ||
transform: translateX(-10px) translateY(50px) rotate(-20deg); | ||
} | ||
30% { | ||
transform: translateX(7px) translateY(80px) rotate(30deg); | ||
} | ||
40% { | ||
transform: translateX(-5px) translateY(110px) rotate(-40deg); | ||
} | ||
50% { | ||
transform: translateX(10px) translateY(130px) rotate(50deg); | ||
} | ||
60% { | ||
transform: translateX(-7px) translateY(150px) rotate(-60deg); | ||
} | ||
70% { | ||
transform: translateX(5px) translateY(170px) rotate(40deg); | ||
} | ||
80% { | ||
transform: translateX(-3px) translateY(185px) rotate(-20deg); | ||
} | ||
90% { | ||
transform: translateX(2px) translateY(195px) rotate(10deg); | ||
} | ||
100% { | ||
transform: translateX(0px) translateY(200px) rotate(0deg); | ||
opacity: 0; | ||
} | ||
`; | ||
|
||
export const MainLogo = styled.img` | ||
width: 75px; | ||
cursor: pointer; | ||
`; | ||
|
||
export const Background = styled.div` | ||
display: flex; | ||
flex-direction: column; | ||
width: 100%; | ||
min-height: 120px; | ||
height: 100%; | ||
gap: 10px; | ||
justify-content: center; | ||
align-items: center; | ||
position: relative; | ||
overflow: hidden; | ||
background: linear-gradient(180deg, #FFEFE3 0%, #FFF 100%); | ||
`; | ||
|
||
export const MainText = styled.div` | ||
color: #FFBA85; | ||
font-size: 12px; | ||
font-style: normal; | ||
font-weight: 700; | ||
line-height: normal; | ||
`; | ||
|
||
export const Leaves = styled.img` | ||
position: absolute; | ||
top: -50px; | ||
left: ${(props) => props.left}; | ||
width: ${(props) => props.size}px; | ||
height: auto; | ||
opacity: 1; | ||
animation: ${fallAnimation} ${(props) => props.duration} ease-in-out ${(props) => props.delay} infinite; | ||
`; |
Oops, something went wrong.