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

Jump to bottom

Improve response time #17

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

Improve response time #17

Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
8810c5a
added lazy loading to images and defer to the script to load the page…
yagyesh-bobde Oct 4, 2022
3698d89
separated the parallax css and the styles.css file to render css faster
yagyesh-bobde Oct 4, 2022
3510f03
defer the script file and link if from app.js and not in the html
yagyesh-bobde Oct 4, 2022
131cec7
removed the script from html and linked it to app.js
yagyesh-bobde Oct 4, 2022
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
190 changes: 8 additions & 182 deletions index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
<meta name="viewport" content= "width=device-width, initial-scale=1.0">

<style id="css">
<link rel="stylesheet" href="./styles.css" defer />
<style id="css" >
*, *:before, *:after {
margin: 0;
padding: 0;
Expand Down Expand Up @@ -71,88 +71,6 @@
html {
background-color: #00171f;
}
.flex-container {
display: flex;
}
.centered-content {
margin: auto;
}
.head-large {
margin-bottom: 5vw;
font-size: 10vw;
line-height: 1.2em;
font-family: 'Inknut Antiqua', serif;
color: wheat;
opacity: 0.9;
}

@media screen and ( max-width: 800px) {

.head-large{
font-size: 5rem;
}

.section-landing:before, .section-end:before{
opacity: 0;
}

}

@media screen and (max-width:440px) {
.head-large{
font-size: 4rem;
}
.img-caption h2{
font-size: 80%;
}
.img-caption p {
font-size: 15px;
}

.type-left .img-caption{
margin-top: 35px;
}

.img-grid:nth-child(2) .img-caption p{
font-size: 13px;
}

.type-left .img-caption h2{
margin-bottom: 10px;
}
}
.head-small {
margin-bottom: 1.5rem;
font-size: 1.2rem;
line-height: 1.2em;
font-family: 'Roboto Condensed', sans-serif;
color: white;
text-transform: uppercase;
letter-spacing: 0.5em;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.head-centered {
text-align: center;
}
.copy {
display: block;
max-width: 500px;
margin-right: auto;
margin-bottom: 1.5rem;
margin-left: auto;
padding-right: 1.5rem;
padding-left: 1.5rem;
font-family: 'Roboto', sans-serif;
font-size: 1rem;
line-height: 1.8em;
text-align: center;
}
.copy-white {
color: white;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.item-parallax-media {
overflow: hidden;
}
Expand Down Expand Up @@ -193,78 +111,13 @@
will-change: transform;
backface-visibility: visible;
}
.img-grid {
flex-direction: column;
justify-content: space-around;
}
.img-gridItem {
position: relative;
width: 100%;
max-width: 800px;
margin-right: auto;
margin-left: auto;
}
.img-gridItem img {
display: block;
width: 45%;
height: 35vh;
object-fit:none;
will-change: transform;
backface-visibility: visible;
}
.img-gridItem.type-left img {
margin-right: auto;
}
.img-gridItem.type-right img {
margin-left: auto;
}
.img-gridItem:nth-child(1) img {
transform: translateX(calc(var(--yBlock-4) * -0.03%));
}
.img-gridItem:nth-child(2) img {
transform: translateX(calc(var(--yBlock-4) * 0.03%));
}
.img-caption {
position: absolute;
top: 50%;
width: 50%;
transform: translateY(-50%);
}
.img-caption * {
text-align: left;
padding-right: 1.5rem;
padding-left: 1.5rem;
}
.type-left .img-caption {
right: 0;
}
.type-right .img-caption {
left: 0;
}
.section-end:before {
content: '';
position: absolute;
bottom: 50%;
left: 24%;
width: 10px;
height: 80%;
background-color: white;
z-index: 3;
transform: translateY(8vw);
}
.custom-properties-ftw {
padding: 2.5rem 1.5rem;
}
.custom-properties-ftw .head-small {
margin-bottom: 0;
}
</style>

<main class="content js-content">

<section class="block section-landing">
<figure class="item-parallax-media">
<img src="https://i.postimg.cc/DwP6Ky8V/Untitled-design-13.png" alt="" />
<img loading="lazy" src="https://i.postimg.cc/DwP6Ky8V/Untitled-design-13.png" alt="" />
</figure>
<div class="item-parallax-content flex-container">
<div class="landing-content centered-content">
Expand All @@ -289,7 +142,7 @@ <h2 class="head-small head-centered">Visibility</h2>

<section class="block section-part">
<figure class="item-parallax-media">
<img src="https://i.postimg.cc/Pxq7PvBn/Untitled-design-12.png" alt="" />
<img loading="lazy" src="https://i.postimg.cc/Pxq7PvBn/Untitled-design-12.png" alt="" />
</figure>
<div class="item-parallax-content flex-container">
<div class="centered-content">
Expand All @@ -304,7 +157,7 @@ <h1 class="head-large head-centered">Garden <br/>of Purity</h1>
<section class="block">
<div class="item-parallax-content flex-container img-grid">
<figure class="img-gridItem type-right">
<img src="https://i.postimg.cc/J4Bbc3J4/Untitled-design-11.png" alt="" />
<img loading="lazy" src="https://i.postimg.cc/J4Bbc3J4/Untitled-design-11.png" alt="" />
<figcaption class="img-caption">
<h2 class="head-small">Natural</h2>
<p class="copy copy-white">
Expand All @@ -313,7 +166,7 @@ <h2 class="head-small">Natural</h2>
</figcaption>
</figure>
<figure class="img-gridItem type-left">
<img src="https://i.postimg.cc/nV0bkpHL/Untitled-design-10.png" alt="" />
<img loading="lazy" src="https://i.postimg.cc/nV0bkpHL/Untitled-design-10.png" alt="" />
<figcaption class="img-caption">
<h2 class="head-small">Sustainable</h2>
<p class="copy copy-white">
Expand All @@ -326,7 +179,7 @@ <h2 class="head-small">Sustainable</h2>

<section class="block section-end">
<figure class="item-parallax-media">
<img src="https://i.postimg.cc/yNGXc9xt/Orange-Autumn-Leaf-Quote-Fall-Desktop-Wallpaper.png" alt="" />
<img loading="lazy" src="https://i.postimg.cc/yNGXc9xt/Orange-Autumn-Leaf-Quote-Fall-Desktop-Wallpaper.png" alt="" />
</figure>
<div class="item-parallax-content flex-container">
<div class="landing-content centered-content">
Expand All @@ -339,35 +192,8 @@ <h1 class="head-large">Back to Basic</h1>
<h3 class="head-small head-centered">Custom Properties</h3>
</section>
</main>
<script id="jsbin-javascript">



const body = document.body;
const content = document.querySelector('.js-content');
const blocks = document.querySelectorAll('.block');

const updateOffset = () => {
requestAnimationFrame(updateOffset);
body.style.setProperty('--y', content.scrollTop);
updateProps();
};

const updateProps = () => {
let i = -1;

for (let block of blocks) {
i += 1;
let top = blocks[i].getBoundingClientRect().top;

if (top < window.innerHeight * 1.3 && top > window.innerHeight * -1.3) {
body.style.setProperty(`--yBlock-${i + 1}`, top);
} else {
body.style.setProperty(`--yBlock-${i + 1}`, 0);
}
}
};
<script id="jsbin-javascript" defer src="./app.js" >

updateProps();
updateOffset();
</script>