Start9/start9.com
2
0
Fork 0
mirror of https://github.com/Start9Labs/start9.com.git synced 2026-03-26 02:11:55 +00:00
Code Issues Packages Projects Releases Wiki Activity

products: added hover animation

Browse Source
This commit is contained in:
Spencer Flagg
2022-09-19 12:11:15 +02:00
parent 7a20dfe5f4
commit ef80fd28d3
7 changed files with 90 additions and 44 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
.cache/eleventy-fetch-ff7bff157a8a33917f958b9cab3878
View File

@@ -1 +1 @@
[{"ff7bff157a8a33917f958b9cab3878":"1"},{"cachedAt":1663441105837,"type":"2"},"json"]
[{"ff7bff157a8a33917f958b9cab3878":"1"},{"cachedAt":1663537544811,"type":"2"},"json"]

2
src/_data/pseudoservices.json
View File

@@ -44,7 +44,7 @@
"url": "https://start9.com/marketplace/165"
},
{
"name": "KeepPass",
"name": "KeePass",
"url": "https://start9.com/marketplace/165"
},
{

6
src/_includes/components/landing/products.njk
View File

@@ -1,22 +1,24 @@
<section id="products">
<div class="subsection">
<a class="product" href="">
<a class="product product--buy" href="">
<img src="../assets/images/buy.png" alt="">
<img class="img-shadow" src="../assets/images/buy.png" alt="">
<div class="heading">
<h1 class="product__header">buy</h1>
<span class="product__subheader">your embassy</span>
</div>
{% include "components/svg/buy-lines.svg" %}
</a>
</div>
<div class="subsection">
<a class="product" href="">
<a class="product product--diy" href="">
<img src="../assets/images/diy.png" alt="">
<img class="img-shadow" src="../assets/images/diy.png" alt="">
<div class="heading">
<h1 class="product__header">diy</h1>
<span class="product__subheader">your embassy</span>
</div>
{% include "components/svg/diy-lines.svg" %}
</a>
</div>
</section>

3
src/_includes/components/svg/buy-lines.svg Normal file
View File

@@ -0,0 +1,3 @@
<svg id="buy-lines" class="line-primary" viewBox="0 0 482 260" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M1 65.5L141 1L481 19.5M1 65.5L388 91M1 65.5L4.5 227.5L388 258.5M481 19.5L388 91M481 19.5V166.5L388 258.5M388 91V258.5" vector-effect="non-scaling-stroke"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 283 B

3
src/_includes/components/svg/diy-lines.svg Normal file
View File

@@ -0,0 +1,3 @@
<svg id="diy-lines" class="line-primary" viewBox="0 0 477 253" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M1 19.4641L340.5 1L355.628 10L249.672 15L266.25 24.5L150 30L196.5 56M1 19.4641L83.5 78.6354L186.5 71.4033L181 66L210.5 64.5M1 19.4641L5 167.392L92 252L476 217V186L220 207V172L190.5 175V166.392L212 164.5V132L339.5 123M210.5 64.5L196.5 56M210.5 64.5L212 130.5L211.75 119.5L211.557 111L210.818 78.5L243 77.3204L227 66L256 64.5L266.25 69.4309V82H256L266.25 88.4972L296.5 86L286.5 80.5L285.5 64.5M339.5 123L341.5 148.5M339.5 123L308.056 105V93.7569V74M436.5 134L462.5 146L341.5 156V148.5M436.5 134L391 137V144.5L341.5 148.5M436.5 134L437.5 72L408 73L386.5 63.5L403 62V56L359.5 39H332.5L340.5 44.5L315 45.5L322 50L352 48.5L370.765 59L285.5 64.5M308.056 74L328.5 83.895L391 80.5L367 69.4309L308.056 74ZM285.5 64.5L266.25 54.5L196.5 56" vector-effect="non-scaling-stroke"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 893 B

83
src/assets/js/main.js
View File

@@ -100,10 +100,10 @@ gsap.from("#hero-image", {
filter: "blur(10px)",
delay: 0.5,
});
gsap.from("#logo", {
duration: 0.5,
y: "-5rem",
opacity: 0,
gsap.from("#logo", {
duration: 0.5,
y: "-5rem",
opacity: 0,
delay: 1.25,
//ease: "in-out"
});
@@ -120,7 +120,6 @@ gsap.from("#logo", {
// backdrop-filter: blur(10px);
//background-color: rgba(0,0,0,0.1);
//////////////////////////////////////////
// HEADER
@@ -156,7 +155,7 @@ gsap.from("#hero-to-pitch path:first-child", {
scrub: true,
start: "top center", // "triggerElement page"
end: "bottom center", // "triggerElement page"
toggleActions: defaultActions
toggleActions: defaultActions,
},
});
@@ -172,7 +171,7 @@ gsap.from("#pitch", {
scrollTrigger: {
trigger: "#pitch",
start: "top center", // "triggerElement page"
toggleActions: defaultActions
toggleActions: defaultActions,
},
});
@@ -187,7 +186,7 @@ gsap.from("#products .subsection:nth-child(1)", {
scrollTrigger: {
trigger: "#products",
start: "top center", // "triggerElement page"
toggleActions: defaultActions
toggleActions: defaultActions,
},
});
@@ -200,10 +199,31 @@ gsap.from("#products .subsection:nth-child(2)", {
scrollTrigger: {
trigger: "#products",
start: "top center", // "triggerElement page"
toggleActions: defaultActions
toggleActions: defaultActions,
},
});
const buyAnchor = document.querySelector('.product--buy')
const buyTL = gsap
.timeline({paused:true})
.from('#buy-lines path:first-child', {drawSVG:0, ease:'none', duration: 0.75}, 0)
.to('.product--buy img:first-child', {opacity:0, ease:'none', duration: 0.25}, 0);
buyAnchor.onmouseenter = () => buyTL.play()
buyAnchor.onmouseleave = () => buyTL.reverse()
const diyAnchor = document.querySelector('.product--diy')
const diyTL = gsap
.timeline({paused:true})
.from('#diy-lines path:first-child', {drawSVG:0, ease:'none', duration: 0.75}, 0)
.to('.product--diy img:first-child', {opacity:0, ease:'none', duration: 0.25}, 0);
diyAnchor.onmouseenter = () => diyTL.play()
diyAnchor.onmouseleave = () => diyTL.reverse()
gsap.from("#products-to-info path:first-child", {
drawSVG: 0,
ease: "none",
@@ -252,7 +272,7 @@ gsap.from("#infographics .subsection:nth-child(1)", {
scrollTrigger: {
trigger: "#infographics .subsection:nth-child(1)",
start: "top center", // "triggerElement page"
toggleActions: defaultActions
toggleActions: defaultActions,
},
});
@@ -268,7 +288,7 @@ gsap.from("#infographics .subsection:nth-child(2)", {
scrollTrigger: {
trigger: "#infographics .subsection:nth-child(2)",
start: "top center", // "triggerElement page"
toggleActions: defaultActions
toggleActions: defaultActions,
},
});
@@ -284,7 +304,7 @@ gsap.from("#bitcoin .subsection:nth-of-type(1)", {
scrollTrigger: {
trigger: "#bitcoin .subsection:nth-of-type(1)",
start: "top bottom", // "triggerElement page"
toggleActions: defaultActions
toggleActions: defaultActions,
},
});
@@ -297,7 +317,7 @@ gsap.from("#bitcoin .subsection:nth-of-type(2)", {
scrollTrigger: {
trigger: "#bitcoin .subsection:nth-of-type(2)",
start: "top bottom", // "triggerElement page"
toggleActions: defaultActions
toggleActions: defaultActions,
},
});
@@ -381,13 +401,12 @@ gsap.from("#be-your-own h1", {
scrollTrigger: {
trigger: "#be-your-own",
start: "top center", // "triggerElement page"
toggleActions: defaultActions
toggleActions: defaultActions,
},
});
gsap.from("#be-your-own p", {
duration: .5,
duration: 0.5,
y: "5rem",
filter: "blur(10px)",
opacity: 0,
@@ -395,7 +414,7 @@ gsap.from("#be-your-own p", {
scrollTrigger: {
trigger: "#be-your-own h1",
start: "top center", // "triggerElement page"
toggleActions: defaultActions
toggleActions: defaultActions,
},
});
@@ -407,7 +426,7 @@ gsap.from("#be-your-own #ticker", {
scrollTrigger: {
trigger: "#be-your-own #ticker",
start: "top center", // "triggerElement page"
toggleActions: defaultActions
toggleActions: defaultActions,
},
});
@@ -467,12 +486,11 @@ gsap.delayedCall(next, crossfade);
document.querySelector(".services").addEventListener("mouseenter", pauseThunk);
// TODO: pause not working - Id not found
function pauseThunk () {
console.log('asfd')
gsap.getById("thunk").kill();
function pauseThunk() {
console.log("asfd");
gsap.getById("thunk").kill();
}
// CAROUSEL
var slideDelay = 1.5;
@@ -586,13 +604,12 @@ gsap.from("#powered-by h1", {
scrollTrigger: {
trigger: "#powered-by h1",
start: "top center", // "triggerElement page"
toggleActions: defaultActions
toggleActions: defaultActions,
},
});
gsap.from("#powered-by p", {
duration: .5,
duration: 0.5,
//y: "-10rem",
filter: "blur(10px)",
opacity: 0,
@@ -600,7 +617,7 @@ gsap.from("#powered-by p", {
scrollTrigger: {
trigger: "#powered-by h1",
start: "top center", // "triggerElement page"
toggleActions: defaultActions
toggleActions: defaultActions,
},
});
@@ -613,7 +630,7 @@ gsap.from("#powered-by svg", {
scrollTrigger: {
trigger: "#powered-by svg",
start: "top center", // "triggerElement page"
toggleActions: defaultActions
toggleActions: defaultActions,
},
});
@@ -643,7 +660,7 @@ gsap.from("#support", {
scrollTrigger: {
trigger: "#support",
start: "top center", // "triggerElement page"
toggleActions: defaultActions
toggleActions: defaultActions,
},
});
@@ -673,7 +690,7 @@ gsap.from("#dev", {
scrollTrigger: {
trigger: "#dev",
start: "top center", // "triggerElement page"
toggleActions: defaultActions
toggleActions: defaultActions,
},
});
@@ -689,7 +706,7 @@ gsap.from("#dev .col:nth-child(1)", {
scrollTrigger: {
trigger: "#dev",
start: "top center", // "triggerElement page"
toggleActions: defaultActions
toggleActions: defaultActions,
},
});
@@ -699,13 +716,13 @@ gsap.from("#dev .col:nth-child(2)", {
scale: 0.5,
//rotateX: 15,
opacity: 0,
delay: .75,
delay: 0.75,
//outline: "1px solid rgba(255,255,255,1)",
filter: "blur(10px)",
scrollTrigger: {
trigger: "#dev",
start: "top center", // "triggerElement page"
toggleActions: defaultActions
toggleActions: defaultActions,
},
});
@@ -735,7 +752,7 @@ gsap.from("#community", {
scrollTrigger: {
trigger: "#community",
start: "top center", // "triggerElement page"
toggleActions: defaultActions
toggleActions: defaultActions,
},
});

35
src/assets/styles/products.scss
View File

@@ -8,13 +8,23 @@ section#products {
.subsection {
transform-style: preserve-3d;
position: relative;
.heading{
transition: var(--t-simple);
}
.product__header {
transition: var(--t-simple);
}
.product__subheader{
font-weight: 500;
color: var(--c-text-primary);
text-transform: uppercase;
transition: var(--t-simple);
}
img {
transition: var(--t-simple);
//transition: var(--t-simple);
width: 42vw;
}
a {
@@ -22,18 +32,21 @@ section#products {
flex-direction: column;
position: relative;
padding: 2rem;
transition: var(--t-simple);
//transition: var(--t-simple);
.heading h1 {
line-height: .8;
}
&:hover{
.heading h1, .heading span {
color: var(--c-text-accent);
}
img{
.heading {
transform: scale(1.1);
opacity: .2;
> *{
color: var(--c-text-accent);
}
}
// img{
// transform: scale(1.1);
// opacity: .2;
// }
}
}
&:first-of-type a {
@@ -51,6 +64,10 @@ section#products {
}
background: linear-gradient(45deg, rgba(255, 255, 255, 0.0), rgba(255, 255, 255, 0.05));
svg{
width: 27rem;
position: absolute;
}
}
&:last-of-type a {
align-items: flex-start;
@@ -70,6 +87,10 @@ section#products {
}
background: linear-gradient(45deg, rgba(0, 0, 0, 0.0), rgba(0, 0, 0, 0.25));
svg{
width: 27rem;
position: absolute;
}
}
}
&::after{