Skip to content

Commit

Permalink
fade in transitions
Browse files Browse the repository at this point in the history
  • Loading branch information
@gkamer8
gkamer8 committed Nov 14, 2023
1 parent e291d3c commit 1735d9e
Show file tree
Hide file tree
Showing 2 changed files with 74 additions and 14 deletions.
44 changes: 37 additions & 7 deletions index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -27,6 +27,21 @@
margin: 0px;
}

.fade-in {
opacity: 0;
transition: opacity 1.5s;
}

@keyframes fadeIn {
0% {opacity:0;}
100% {opacity:1;}
}

.fade-in-top {
opacity: 0;
animation: fadeIn ease 1.5s forwards; /* adjust duration as needed */
}

.email-input {
outline: 0;
padding: 5px;
Expand All @@ -51,6 +66,7 @@
box-sizing: border-box;
gap: 10px;
color: black;
transition: background-color .05s ease-in-out;
}

.send-mail-container:hover {
Expand Down Expand Up @@ -172,7 +188,7 @@
<body onload="doOnLoad()">
<div style="display:flex;flex-direction:column">
<div id="premier-page" style="display:flex;flex-direction: column;">
<div style="width:80%;margin-left:auto;margin-right:auto;flex:1;display:flex;flex-direction: column;" class="first-section">
<div style="width:80%;margin-left:auto;margin-right:auto;flex:1;display:flex;flex-direction: column;" class="first-section fade-in-top">
<div style="padding-top: 2rem;display:flex;align-items:center;">
<div style="flex:1;display:flex;align-items: center;">
<img src="US-AI-White.png" style="height:60px" />
Expand Down Expand Up @@ -250,7 +266,7 @@
<input type="text" class="email-input" placeholder="Email" id="email" />
<div class="send-mail-container" onclick="collectEmail()">
<div style="display:flex;justify-content: center;padding:10px;" id="button-text-container">
Questions? Get in touch.
Sign up to hear more
</div>
<img src="send-mail.png" style="height:40px;" />
</div>
Expand All @@ -265,7 +281,7 @@
</div>
</div>
</div>
<div style="padding-top:5rem;">
<div style="padding-top:5rem;" class="fade-in-top">
<div style="width: 80%;margin:auto;">
<div style="display:flex;justify-content: center;flex-direction: column;gap:3rem">
<div style="margin:auto;display:flex;gap:8px;align-items: center;">
Expand Down Expand Up @@ -316,7 +332,7 @@
</div>
</div>

<div style="padding-top:5rem;">
<div style="padding-top:5rem;" class="fade-in">
<div style="padding-top:3rem;padding-bottom:3rem;color:white;display:flex;flex-direction:column;align-items:center;">
<style>
.dormHeader {
Expand Down Expand Up @@ -416,7 +432,7 @@
To the board room...
</div>
</div>-->
<div style="display:flex;gap:10%;align-items: center;justify-content: center;" class="businessContainer">
<div style="display:flex;gap:10%;align-items: center;justify-content: center;" class="businessContainer fade-in">
<div style="display:flex;flex-direction: column;gap: 2rem;line-height:1.5rem;font-size: 1.25rem;" class="businessList">
<div style="display:flex;align-items: center;gap:1rem;">
<img src="CircleCheckIcon.png" style="height:20px;filter:invert(100%)" />
Expand Down Expand Up @@ -457,7 +473,7 @@
</div>
</div>

<div style="padding-top:5rem;">
<div style="padding-top:5rem;" class="fade-in">
<div style="padding-top:3rem;padding-bottom:3rem;background-color:rgb(254, 255, 244);color:white;background-color:rgb(37, 37, 37);display:flex;flex-direction: column;">
<style>
.mag-image-container {
Expand Down Expand Up @@ -525,7 +541,7 @@
</div>
</div>

<div style="padding-top:5rem;padding-bottom:7rem;display:flex;justify-content:center;">
<div style="padding-top:5rem;padding-bottom:7rem;display:flex;justify-content:center;" class="fade-in">
<div class="aboutUsContainer" style="color:white;display:flex;flex-direction:column;gap:2rem;text-align:center;align-items:center;">
<style>
.aboutUsHeader {
Expand Down Expand Up @@ -672,5 +688,19 @@
</div>
</div>
</div>

<script type="text/javascript">
window.addEventListener('scroll', function() {
let fade = document.querySelectorAll('.fade-in');
for (let i = 0; i < fade.length; i++) {
let rect = fade[i].getBoundingClientRect();
if (rect.top < window.innerHeight) {
fade[i].style.opacity = "1";
}
}
});


</script>
</body>
</html>
44 changes: 37 additions & 7 deletions staging.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -27,6 +27,21 @@
margin: 0px;
}

.fade-in {
opacity: 0;
transition: opacity 1.5s;
}

@keyframes fadeIn {
0% {opacity:0;}
100% {opacity:1;}
}

.fade-in-top {
opacity: 0;
animation: fadeIn ease 1.5s forwards; /* adjust duration as needed */
}

.email-input {
outline: 0;
padding: 5px;
Expand All @@ -51,6 +66,7 @@
box-sizing: border-box;
gap: 10px;
color: black;
transition: background-color .05s ease-in-out;
}

.send-mail-container:hover {
Expand Down Expand Up @@ -172,7 +188,7 @@
<body onload="doOnLoad()">
<div style="display:flex;flex-direction:column">
<div id="premier-page" style="display:flex;flex-direction: column;">
<div style="width:80%;margin-left:auto;margin-right:auto;flex:1;display:flex;flex-direction: column;" class="first-section">
<div style="width:80%;margin-left:auto;margin-right:auto;flex:1;display:flex;flex-direction: column;" class="first-section fade-in-top">
<div style="padding-top: 2rem;display:flex;align-items:center;">
<div style="flex:1;display:flex;align-items: center;">
<img src="US-AI-White.png" style="height:60px" />
Expand Down Expand Up @@ -250,7 +266,7 @@
<input type="text" class="email-input" placeholder="Email" id="email" />
<div class="send-mail-container" onclick="collectEmail()">
<div style="display:flex;justify-content: center;padding:10px;" id="button-text-container">
Questions? Get in touch.
Sign up to hear more
</div>
<img src="send-mail.png" style="height:40px;" />
</div>
Expand All @@ -265,7 +281,7 @@
</div>
</div>
</div>
<div style="padding-top:5rem;">
<div style="padding-top:5rem;" class="fade-in-top">
<div style="width: 80%;margin:auto;">
<div style="display:flex;justify-content: center;flex-direction: column;gap:3rem">
<div style="margin:auto;display:flex;gap:8px;align-items: center;">
Expand Down Expand Up @@ -316,7 +332,7 @@
</div>
</div>

<div style="padding-top:5rem;">
<div style="padding-top:5rem;" class="fade-in">
<div style="padding-top:3rem;padding-bottom:3rem;color:white;display:flex;flex-direction:column;align-items:center;">
<style>
.dormHeader {
Expand Down Expand Up @@ -416,7 +432,7 @@
To the board room...
</div>
</div>-->
<div style="display:flex;gap:10%;align-items: center;justify-content: center;" class="businessContainer">
<div style="display:flex;gap:10%;align-items: center;justify-content: center;" class="businessContainer fade-in">
<div style="display:flex;flex-direction: column;gap: 2rem;line-height:1.5rem;font-size: 1.25rem;" class="businessList">
<div style="display:flex;align-items: center;gap:1rem;">
<img src="CircleCheckIcon.png" style="height:20px;filter:invert(100%)" />
Expand Down Expand Up @@ -457,7 +473,7 @@
</div>
</div>

<div style="padding-top:5rem;">
<div style="padding-top:5rem;" class="fade-in">
<div style="padding-top:3rem;padding-bottom:3rem;background-color:rgb(254, 255, 244);color:white;background-color:rgb(37, 37, 37);display:flex;flex-direction: column;">
<style>
.mag-image-container {
Expand Down Expand Up @@ -525,7 +541,7 @@
</div>
</div>

<div style="padding-top:5rem;padding-bottom:7rem;display:flex;justify-content:center;">
<div style="padding-top:5rem;padding-bottom:7rem;display:flex;justify-content:center;" class="fade-in">
<div class="aboutUsContainer" style="color:white;display:flex;flex-direction:column;gap:2rem;text-align:center;align-items:center;">
<style>
.aboutUsHeader {
Expand Down Expand Up @@ -672,5 +688,19 @@
</div>
</div>
</div>

<script type="text/javascript">
window.addEventListener('scroll', function() {
let fade = document.querySelectorAll('.fade-in');
for (let i = 0; i < fade.length; i++) {
let rect = fade[i].getBoundingClientRect();
if (rect.top < window.innerHeight) {
fade[i].style.opacity = "1";
}
}
});


</script>
</body>
</html>

0 comments on commit 1735d9e

Please sign in to comment.