spencer/start9-landing
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

started scrolling animations at 75%; added lazy loading to images

Browse source
This commit is contained in:
Spencer Flagg 2022-09-19 12:43:19 +02:00
parent ef80fd28d3
commit 906d4a7041
7 changed files with 1927 additions and 39 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

6
.eleventy.js
View file

@ -1,5 +1,6 @@
const eleventySass = require("eleventy-sass"); const eleventySass = require("eleventy-sass");
//const gsap = require('gsap'); //const gsap = require('gsap');
const lazyImagesPlugin = require('eleventy-plugin-lazyimages');
module.exports = function (eleventyConfig) { module.exports = function (eleventyConfig) {
@ -18,6 +19,11 @@ module.exports = function (eleventyConfig) {
//plugins //plugins
eleventyConfig.addPlugin(eleventySass); eleventyConfig.addPlugin(eleventySass);
eleventyConfig.addPlugin(lazyImagesPlugin, {
imgSelector: 'img:not(.unlazy)', // custom image selector
//cacheFile: '', // don't cache results to a file
});
return { return {
dir: { input: "src", output: "_site", data: "_data" }, dir: { input: "src", output: "_site", data: "_data" },
}; };

1
.lazyimages.json Normal file
View file

File diff suppressed because one or more lines are too long

1875
package-lock.json generated
View file

File diff suppressed because it is too large Load diff

3
package.json
View file

@ -12,7 +12,8 @@
"author": "", "author": "",
"license": "ISC", "license": "ISC",
"devDependencies": { "devDependencies": {
"@11ty/eleventy": "^1.0.1" "@11ty/eleventy": "^1.0.1",
"eleventy-plugin-lazyimages": "^2.1.2"
}, },
"dependencies": { "dependencies": {
"@11ty/eleventy-fetch": "^3.0.0", "@11ty/eleventy-fetch": "^3.0.0",

2
src/_includes/components/landing/hero.njk
View file

@ -4,7 +4,7 @@
<img class="img-shadow" src="assets/images/explosion.png" alt=""> <img class="img-shadow" src="assets/images/explosion.png" alt="">
</div> </div>
<div id="logo"> <div id="logo">
<img src="assets/images/start9_logo.png" alt=""> <img class="unlazy" src="assets/images/start9_logo.png" alt="">
<span>sovereign computing</span> <span>sovereign computing</span>
</div> </div>
</section> </section>

72
src/assets/js/main.js
View file

@ -48,8 +48,8 @@ const defaultActions = "play none none none"; //onEnter, onLeave, onEnterBack, a
// sections.forEach((slug) => { // sections.forEach((slug) => {
// ScrollTrigger.create({ // ScrollTrigger.create({
// trigger: "#" + slug, // trigger: "#" + slug,
// start: "top center", // start: "top 75%",
// end: "bottom center", // end: "bottom 75%",
// //markers: { startColor: "white", endColor: "white" }, // //markers: { startColor: "white", endColor: "white" },
// onEnter: () => { // onEnter: () => {
// window.location.href = "#" + slug; // window.location.href = "#" + slug;
@ -153,8 +153,8 @@ gsap.from("#hero-to-pitch path:first-child", {
scrollTrigger: { scrollTrigger: {
trigger: "#hero-to-pitch", trigger: "#hero-to-pitch",
scrub: true, scrub: true,
start: "top center", // "triggerElement page" start: "top 75%", // "triggerElement page"
end: "bottom center", // "triggerElement page" end: "bottom 75%", // "triggerElement page"
toggleActions: defaultActions, toggleActions: defaultActions,
}, },
}); });
@ -170,7 +170,7 @@ gsap.from("#pitch", {
//delay: 0.75, //delay: 0.75,
scrollTrigger: { scrollTrigger: {
trigger: "#pitch", trigger: "#pitch",
start: "top center", // "triggerElement page" start: "top 75%", // "triggerElement page"
toggleActions: defaultActions, toggleActions: defaultActions,
}, },
}); });
@ -185,7 +185,7 @@ gsap.from("#products .subsection:nth-child(1)", {
//filter: "blur(10px)", //filter: "blur(10px)",
scrollTrigger: { scrollTrigger: {
trigger: "#products", trigger: "#products",
start: "top center", // "triggerElement page" start: "top 75%", // "triggerElement page"
toggleActions: defaultActions, toggleActions: defaultActions,
}, },
}); });
@ -198,7 +198,7 @@ gsap.from("#products .subsection:nth-child(2)", {
//filter: "blur(10px)", //filter: "blur(10px)",
scrollTrigger: { scrollTrigger: {
trigger: "#products", trigger: "#products",
start: "top center", // "triggerElement page" start: "top 75%", // "triggerElement page"
toggleActions: defaultActions, toggleActions: defaultActions,
}, },
}); });
@ -230,8 +230,8 @@ gsap.from("#products-to-info path:first-child", {
scrollTrigger: { scrollTrigger: {
trigger: "#products-to-info path:first-child", trigger: "#products-to-info path:first-child",
scrub: true, scrub: true,
start: "top center", // "triggerElement page" start: "top 75%", // "triggerElement page"
end: "bottom center", // "triggerElement page" end: "bottom 75%", // "triggerElement page"
}, },
}); });
@ -241,8 +241,8 @@ gsap.from("#products-to-info path:nth-child(2)", {
scrollTrigger: { scrollTrigger: {
trigger: "#products-to-info path:nth-child(2)", trigger: "#products-to-info path:nth-child(2)",
scrub: true, scrub: true,
start: "top center", // "triggerElement page" start: "top 75%", // "triggerElement page"
end: "bottom center", // "triggerElement page" end: "bottom 75%", // "triggerElement page"
}, },
}); });
@ -252,8 +252,8 @@ gsap.from("#products-to-info path:nth-child(3)", {
scrollTrigger: { scrollTrigger: {
trigger: "#products-to-info path:nth-child(3)", trigger: "#products-to-info path:nth-child(3)",
scrub: true, scrub: true,
start: "top center", // "triggerElement page" start: "top 75%", // "triggerElement page"
end: "bottom center", // "triggerElement page" end: "bottom 75%", // "triggerElement page"
}, },
}); });
@ -271,7 +271,7 @@ gsap.from("#infographics .subsection:nth-child(1)", {
//filter: "blur(10px)", //filter: "blur(10px)",
scrollTrigger: { scrollTrigger: {
trigger: "#infographics .subsection:nth-child(1)", trigger: "#infographics .subsection:nth-child(1)",
start: "top center", // "triggerElement page" start: "top 75%", // "triggerElement page"
toggleActions: defaultActions, toggleActions: defaultActions,
}, },
}); });
@ -287,7 +287,7 @@ gsap.from("#infographics .subsection:nth-child(2)", {
//filter: "blur(10px)", //filter: "blur(10px)",
scrollTrigger: { scrollTrigger: {
trigger: "#infographics .subsection:nth-child(2)", trigger: "#infographics .subsection:nth-child(2)",
start: "top center", // "triggerElement page" start: "top 75%", // "triggerElement page"
toggleActions: defaultActions, toggleActions: defaultActions,
}, },
}); });
@ -384,8 +384,8 @@ gsap.from("#bitcoin-to-be path:first-child", {
scrollTrigger: { scrollTrigger: {
trigger: "#bitcoin-to-be", trigger: "#bitcoin-to-be",
scrub: true, scrub: true,
start: "top center", start: "top 75%",
end: "bottom center", end: "bottom 75%",
}, },
}); });
@ -400,7 +400,7 @@ gsap.from("#be-your-own h1", {
//delay: 0.75, //delay: 0.75,
scrollTrigger: { scrollTrigger: {
trigger: "#be-your-own", trigger: "#be-your-own",
start: "top center", // "triggerElement page" start: "top 75%", // "triggerElement page"
toggleActions: defaultActions, toggleActions: defaultActions,
}, },
}); });
@ -413,7 +413,7 @@ gsap.from("#be-your-own p", {
//delay: 0.75, //delay: 0.75,
scrollTrigger: { scrollTrigger: {
trigger: "#be-your-own h1", trigger: "#be-your-own h1",
start: "top center", // "triggerElement page" start: "top 75%", // "triggerElement page"
toggleActions: defaultActions, toggleActions: defaultActions,
}, },
}); });
@ -425,7 +425,7 @@ gsap.from("#be-your-own #ticker", {
//delay: 0.75, //delay: 0.75,
scrollTrigger: { scrollTrigger: {
trigger: "#be-your-own #ticker", trigger: "#be-your-own #ticker",
start: "top center", // "triggerElement page" start: "top 75%", // "triggerElement page"
toggleActions: defaultActions, toggleActions: defaultActions,
}, },
}); });
@ -587,8 +587,8 @@ gsap.from("#be-to-powered path", {
scrollTrigger: { scrollTrigger: {
trigger: "#be-to-powered path", trigger: "#be-to-powered path",
scrub: true, scrub: true,
start: "top center", start: "top 75%",
end: "bottom center", end: "bottom 75%",
}, },
}); });
@ -603,7 +603,7 @@ gsap.from("#powered-by h1", {
//delay: 0.75, //delay: 0.75,
scrollTrigger: { scrollTrigger: {
trigger: "#powered-by h1", trigger: "#powered-by h1",
start: "top center", // "triggerElement page" start: "top 75%", // "triggerElement page"
toggleActions: defaultActions, toggleActions: defaultActions,
}, },
}); });
@ -616,7 +616,7 @@ gsap.from("#powered-by p", {
//delay: 0.75, //delay: 0.75,
scrollTrigger: { scrollTrigger: {
trigger: "#powered-by h1", trigger: "#powered-by h1",
start: "top center", // "triggerElement page" start: "top 75%", // "triggerElement page"
toggleActions: defaultActions, toggleActions: defaultActions,
}, },
}); });
@ -629,7 +629,7 @@ gsap.from("#powered-by svg", {
//delay: 0.75, //delay: 0.75,
scrollTrigger: { scrollTrigger: {
trigger: "#powered-by svg", trigger: "#powered-by svg",
start: "top center", // "triggerElement page" start: "top 75%", // "triggerElement page"
toggleActions: defaultActions, toggleActions: defaultActions,
}, },
}); });
@ -640,8 +640,8 @@ gsap.from("#powered-to-support path", {
scrollTrigger: { scrollTrigger: {
trigger: "#powered-to-support path", trigger: "#powered-to-support path",
scrub: true, scrub: true,
start: "top center", start: "top 75%",
end: "bottom center", end: "bottom 75%",
}, },
}); });
@ -659,7 +659,7 @@ gsap.from("#support", {
//filter: "blur(10px)", //filter: "blur(10px)",
scrollTrigger: { scrollTrigger: {
trigger: "#support", trigger: "#support",
start: "top center", // "triggerElement page" start: "top 75%", // "triggerElement page"
toggleActions: defaultActions, toggleActions: defaultActions,
}, },
}); });
@ -670,8 +670,8 @@ gsap.from("#support-to-dev path", {
scrollTrigger: { scrollTrigger: {
trigger: "#support-to-dev path", trigger: "#support-to-dev path",
scrub: true, scrub: true,
start: "top center", start: "top 75%",
end: "bottom center", end: "bottom 75%",
}, },
}); });
@ -689,7 +689,7 @@ gsap.from("#dev", {
filter: "blur(10px)", filter: "blur(10px)",
scrollTrigger: { scrollTrigger: {
trigger: "#dev", trigger: "#dev",
start: "top center", // "triggerElement page" start: "top 75%", // "triggerElement page"
toggleActions: defaultActions, toggleActions: defaultActions,
}, },
}); });
@ -705,7 +705,7 @@ gsap.from("#dev .col:nth-child(1)", {
filter: "blur(10px)", filter: "blur(10px)",
scrollTrigger: { scrollTrigger: {
trigger: "#dev", trigger: "#dev",
start: "top center", // "triggerElement page" start: "top 75%", // "triggerElement page"
toggleActions: defaultActions, toggleActions: defaultActions,
}, },
}); });
@ -721,7 +721,7 @@ gsap.from("#dev .col:nth-child(2)", {
filter: "blur(10px)", filter: "blur(10px)",
scrollTrigger: { scrollTrigger: {
trigger: "#dev", trigger: "#dev",
start: "top center", // "triggerElement page" start: "top 75%", // "triggerElement page"
toggleActions: defaultActions, toggleActions: defaultActions,
}, },
}); });
@ -732,8 +732,8 @@ gsap.from("#dev-to-contact path", {
scrollTrigger: { scrollTrigger: {
trigger: "#dev-to-contact path", trigger: "#dev-to-contact path",
scrub: true, scrub: true,
start: "top center", start: "top 75%",
end: "bottom center", end: "bottom 75%",
}, },
}); });
@ -751,7 +751,7 @@ gsap.from("#community", {
filter: "blur(10px)", filter: "blur(10px)",
scrollTrigger: { scrollTrigger: {
trigger: "#community", trigger: "#community",
start: "top center", // "triggerElement page" start: "top 75%", // "triggerElement page"
toggleActions: defaultActions, toggleActions: defaultActions,
}, },
}); });

7
src/assets/styles/main.scss
View file

@ -79,6 +79,13 @@ body{
background: #333333; background: #333333;
} }
img {
display: block;
width: 100%;
max-width: 100%;
height: auto;
}
main{ main{
//transform: translateY(-100vh); //transform: translateY(-100vh);
perspective: 1000px; perspective: 1000px;