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

Scrolling effect #2

Merged
merged 9 commits into from
Feb 4, 2025
Merged

Scrolling effect #2

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
9 commits
Select commit Hold shift + click to select a range
bc4f1a0
created a new branch and component file
ycho1908 Jan 30, 2025
dd5a3ce
Implemented tester vertical slide scrolling effect
jenniferylee Jan 31, 2025
b261d6e
scrolling functioning with correct background and slides
ycho1908 Feb 2, 2025
5d42330
scrolling effect pages without padding
ycho1908 Feb 2, 2025
1eec6c1
initial version of completed scrolling effect
ycho1908 Feb 3, 2025
bcf595c
fixed the display for mobile
ycho1908 Feb 3, 2025
23a9b04
fixed the document/papers to be continuous
ycho1908 Feb 3, 2025
0ef1d58
tested with the coffee and paper background
ycho1908 Feb 4, 2025
133db73
fixed the coffee cup to appear only one first paper
ycho1908 Feb 4, 2025
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
5 changes: 5 additions & 0 deletions public/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,11 @@
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Google font import -->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Courier+Prime:ital,wght@0,400;0,700;1,400;1,700&display=swap" rel="stylesheet">

<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta charset="utf-8" />
<link rel="icon" href="%PUBLIC_URL%/db-logo.png" />
Expand Down
210 changes: 210 additions & 0 deletions src/App.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -22,6 +22,7 @@
justify-content: center;
font-size: calc(10px + 2vmin);
color: white;
position: fixed;
}

.App-link {
Expand All @@ -36,3 +37,212 @@
transform: rotate(360deg);
}
}

footer {
width: 100%;
background: black;
color: white;
text-align: center;
padding: 20px 0;
position: relative;
margin-top: auto;
display: block;
z-index: 1;
}

/* Wooden background */
body {
margin: 0;
padding: 0;
background: url("././images/Wood Pattern.png") no-repeat center center fixed;
background-size: cover;
font-family: Arial, sans-serif;
overflow-x: hidden;
/* min-height: 100vh; */
height: 100%;
display: flex;
justify-content: center;
align-items: flex-start;
flex-direction: column;
justify-content: flex-start;
}

/* Sidebar for navigation through the articles */
.sidebar {
position: fixed;
top: 50%;
right: 20px;
transform: translateY(-50%);
display: flex;
flex-direction: column;
align-items: center;
z-index: 2; /* sidebar should be above all paper and background */
}

.sidebar-circle {
/* values from figma */
width: 16px;
height: 15px;
flex-shrink: 0;
stroke-width: 4px;
stroke: rgba(255, 255, 255, 0.70);
border-radius: 50%;
color: white;
display: flex;
justify-content: center;
align-items: center;
margin: 10px 0;
cursor: pointer;
transition: background-color 0.3s ease;
}

.sidebar-circle:hover {
background-color: #ffffffb3;
fill: #ffffffb3;
}

/* Scroll container */
.scroll-container {
display: flex;
flex-direction: column;
padding: 20px;
flex-grow: 1;
height: 100%; /* necessary for correct header and footer display */
margin-left: auto;
margin-right: auto;
width: 100%;
overflow-y: scroll;
scroll-snap-type: y mandatory;
scroll-behavior: smooth;
}

/* Paper for articles */
.paper {
position: relative;
background: url("././images/Paper.png") no-repeat center center fixed;
background-size: cover;
width: 59vw; /* width set to be flexible */
max-width: 856px; /* value from figma */
height: auto; /* height dependant on the paper text */
margin: 0 0;
flex-shrink: 0;
scroll-snap-align: start;
box-sizing: border-box;
margin-left: 291px;
margin-right: 291px;
padding: 40px;
}

.paper .text-content {
color: #000;
font-family: "Courier Prime", monospace;
font-size: 18px;
padding: 78px 112px 62px 112px;
text-align: justify;
word-wrap: break-word;
z-index: 2;
}

/* text for the papers */
.courier-prime-regular {
font-family: "Courier Prime", serif;
font-weight: 400;
font-style: normal;
}

.courier-prime-bold {
font-family: "Courier Prime", serif;
font-weight: 700;
font-style: normal;
}

.courier-prime-regular-italic {
font-family: "Courier Prime", serif;
font-weight: 400;
font-style: italic;
}

.courier-prime-bold-italic {
font-family: "Courier Prime", serif;
font-weight: 700;
font-style: italic;
}

.folder-background {
position: absolute;
top: 30%;
left: 50%;
width: 90vw;
max-width: 1183.117px;
height: auto;
transform: translate(-50%, -50%);
z-index: -1;
}

.coffee-background {
position: absolute;
top: 0%;
left: -15%;
/* width: 316px;
height: 316px; */
width: 25vw;
height: 25vw;
transform: rotate(150.242deg);
flex-shrink: 0;
z-index: 1;
}

@media (max-width: 1024px) {
.paper {
width: 60vw;
margin-left: 15vw;
margin-right: 0;
}

.paper .text-content {
font-size: 17px;
padding: 20px 20px;
}

.sidebar {
right: 10%;
}

footer {
padding: 18px 0;
}

.paper .text-content {
font-size: 14px;
padding: 10px;
}

.folder-background {
width: 80vw;
max-width: 1000px;
}

.coffee-background {
/* width: 20vw;
height: 20vw; */
display: none;
}
}

@media (max-width: 768px) {
.paper {
width: 90vw;
margin-left: 5vw;
}

.paper .text-content {
font-size: 14px;
padding: 10px;
}

.coffee-background {
/* width: 15vw;
height: 15vw; */
display: none;
}
}
52 changes: 40 additions & 12 deletions src/App.js
View file
Open in desktop

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

Loading