Commit 9c666cbf authored by Hussain Khalil's avatar Hussain Khalil

Initial commit

parents
{
"esversion": 6
}
<!DOCTYPE html>
<html>
<head>
<title>Words of Gratitude: For Our Favorite Mother</title>
<!-- Included stylesheets -->
<link href="poem-style.css" rel="stylesheet" type="text/css">
<link href="https://fonts.googleapis.com/css?family=Lora:400,400italic,700,700italic" rel="stylesheet" type="text/css">
</head>
<body>
<div class="section header-section section-1">
<div class="content-container" id="header-section-content-container">
<div class="header">
Words of Gratitude
</div>
<div class="secondary">
a project by Hussain and Zainab <br>
for their favorite mother.
</div>
</div>
</div>
<div class="section section-2">
<div class="content-container" id="section-2-content-container">
<p class="poem-line top">
Mama is...
</p>
<p class="poem-line">
<b>Magnificent</b>, for making everyday magnificent.
</p>
<p class="poem-line">
<b>Awesome</b>, for giving me awesome opportunities.
</p>
<p class="poem-line">
<b>Modest</b>, for always being selfless and modest.
</p>
<p class="poem-line">
<b>Affectionate</b>, for loving and being affectionate.
</p>
<p class="poem-line author">
by Zainab Khalil
</p>
</div>
</div>
<div class="section section-3">
<div class="content-container" id="section-3-content-container">
<p class="poem-line">
I was going to write something here, but ran out of time yesterday.
</p>
<p class="poem-line italic">
Good going, Baba.
</p>
<p class="poem-line author">
by Hussain Khalil
</p>
</div>
</div>
<div class="section section-4">
<div class="content-container" id="section-4-content-container">
<p class="header">
Special thanks to...
</p>
<p class="poem-line">
<b>Mama</b>, for being the best mother in the world!
</p>
<p class="poem-line">
<b>Hussain</b>, for his awesome coding skills!
</p>
<p class="poem-line">
<b>Maryam</b>, for being the best little sister in the world!
</p>
</div>
</div>
<div class="section section-5">
<div class="content-container" id="section-5-content-container">
<p class="header">
Special <b>not</b> thanks to...
</p>
<p class="poem-line">
<b>Baba</b>, for being a bully!
</p>
<p class="poem-line">
<b>Hasan</b>, for being a lazy bum and not submitting a poem!
</p>
</div>
</div>
<div class="section section-6">
<div class="poem-line" id="section-6-content-container">
Thanks!
</div>
</div>
<div class="backgrounds">
<img src="backgrounds/section-1.png" class="background-image" id="background-section-1">
<img src="backgrounds/section-2.png" class="background-image" id="background-section-2">
<img src="backgrounds/section-3.png" class="background-image" id="background-section-3">
<img src="backgrounds/section-4.png" class="background-image" id="background-section-4">
<img src="backgrounds/section-5.png" class="background-image" id="background-section-5">
<div class="background-image blue-background" id="background-section-6"></div>
</div>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script>
<script type="text/javascript" src="script.js"></script>
</body>
</html>
body, html {
margin: 0;
padding: 0;
width: 100%;
height: 100%;
}
.section {
height: 100%;
font-family: 'Lora', serif;
}
.header-section {
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
font-style: italic;
}
.header-section .content-container {
opacity: 0;
margin-bottom: 25%;
transition: opacity 2.5s, margin-bottom 0.5s;
}
.header-section .header {
font-weight: 700;
font-size: 60pt;
color: #333333;
}
.header-section .secondary {
font-weight: 400;
font-size: 20pt;
color: #4d4d4d;
line-height: 150%;
}
.section-2 {
width: 50%;
margin: auto;
display: flex;
justify-content: center;
flex-direction: column;
font-size: 30pt;
color: #333333;
}
.section-2 .content-container {
opacity: 0;
margin-top: 10%;
transition: opacity 1s, margin-top 0.5s;
}
.section-2 .top {
font-style: italic;
color: #4d4d4d;
}
.section-2 p {
margin-top: 5px;
margin-bottom: 5px;
}
.section-2 b {
font-style: italic;
}
.section-2 .author {
font-style: italic;
font-size: 20pt;
color: #4d4d4d;
}
.section-3 {
display: flex;
justify-content: center;
flex-direction: column;
width: 50%;
margin: auto;
font-size: 30pt;
color: #ededed;
}
.section-3 .content-container {
opacity: 0;
margin-top: 10%;
transition: opacity 1s, margin-top 0.5s;
}
.section-3 .italic {
font-style: italic;
}
.section-3 .author {
text-align: right;
font-size: 20pt;
color: #cccccc;
}
.section-4 {
text-align: center;
display: flex;
justify-content: center;
flex-direction: column;
width: 50%;
margin: auto;
}
.section-4 .content-container {
opacity: 0;
transition: opacity 1s, margin-bottom 0.5s;
}
.section-4 .header {
color: #4d4d4d;
font-size: 30pt;
font-style: italic;
}
.section-4 .poem-line {
color: #333333;
font-size: 30pt;
}
.section-5 {
padding: 50px;
flex-direction: column;
width: 25%;
}
.section-5 .content-container {
padding-top: 50px;
opacity: 0;
margin-top: 10%;
transition: opacity 1s, margin-top 0.5s;
}
.section-5 .header {
color: #4d4d4d;
font-size: 30pt;
font-style: italic;
}
.section-5 .poem-line {
color: #333333;
font-size: 30pt;
}
.section-6 {
display: flex;
align-items: center;
justify-content: center;
}
.section-6 .poem-line {
font-size: 80pt;
color: #ffffff;
font-weight: 700;
font-style: italic;
opacity: 0;
margin-top: 10%;
transition: opacity 1s, margin-top 0.5s;
}
.backgrounds {
z-index: -9999;
position: absolute;
top: 0;
width: 100%;
}
.background-image {
position: fixed;
top: -13%;
width: 100%;
opacity: 0;
transition: opacity 0.7s;
}
.blue-background {
top: 0;
background-color: #3f9ed1;
height: 100%;
width: 100%;
}
// Variables
// Number of backgrounds
var numOfBackgrounds = 6;
var entranceAnimations = {
1: {
"played": false,
"animation": () => {
$("#header-section-content-container").css({"opacity": 1, "margin-bottom": "7%"});
entranceAnimations[1].played = true;
}
},
2: {
"played": false,
"animation": () => {
$("#section-2-content-container").css({"opacity": 1, "margin-top": 0});
entranceAnimations[2].played = true;
}
},
3: {
"played": false,
"animation": () => {
$("#section-3-content-container").css({"opacity": 1, "margin-top": 0});
entranceAnimations[3].played = true;
}
},
4: {
"played": false,
"animation": () => {
$("#section-4-content-container").css({"opacity": 1, "margin-bottom": "10%"});
entranceAnimations[4].played = true;
}
},
5: {
"played": false,
"animation": () => {
$("#section-5-content-container").css({"opacity": 1, "margin-top": 0});
entranceAnimations[5].played = true;
}
},
6: {
"played": false,
"animation": () => {
$("#section-6-content-container").css({"opacity": 1, "margin-top": 0});
entranceAnimations[6].played = true;
}
}
};
// Make first background visible
setTimeout(() => {
$("#background-section-1").css("opacity", 1);
entranceAnimations[1].animation();
}, 0);
// Detect scroll
$(document).scroll(() => {
// Loop that determines which backgrounds should be opaque
for(var i = 1; i <= numOfBackgrounds; i++) {
if(($("body").scrollTop() / $(window).height()) + 1.5 >= i) {
$("#background-section-"+i).css("opacity", 1);
} else {
$("#background-section-"+i).css("opacity", 0);
}
}
});
// Detect scroll
$(document).scroll(() => {
// Loop for entrance animations
for(var i = 1; i <= numOfBackgrounds; i++) {
if(($("body").scrollTop() / $(window).height()) + 1.3 >= i && !entranceAnimations[i].played) {
entranceAnimations[i].animation();
}
}
});
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment