The avatar for @gnestor
Grant Nestor
Owner of Hammies, former Jupyter core developer and co-lead of Jupyter Notebook and JupyterLab teams
Public
Edited
Jul 10, 2024
Fork of Hammies Homepage Hero (2023)
Insert cell
Insert cell
hero = {
yield html`<div class="hero"></div>${style}`;
const slides = [
gigiAndMcKenna,
grantAndRandall,
ryanAndGabi,
ryanAndMcKenna,
// grantSydAndSierra,
sydSierraAndTehani,
kids,
grantAndRandall2,
twoToneSmock
].map((config) =>
slide(config, (element) => {
element.onmouseenter = () => {
pause = true;
};
element.onmouseleave = () => {
pause = false;
};
element.ontouchstart = () => {
pause = true;
};
element.ontouchend = () => {
pause = false;
};
})
);
const scroller = html`<div class="hero-scroll">
${slides}
</div>`;
let pause = false;
const step = () => {
if (!pause) {
if (
scroller.scrollWidth - scroller.scrollLeft - window.innerWidth >=
window.innerWidth
) {
scroller.scrollBy(5, 0);
} else {
scroller.scrollBy(0, 0);
}
}
requestAnimationFrame(step);
};
requestAnimationFrame(step);
yield html`<div class="hero">
${scroller}
</div>
${style}`;
}
Insert cell
style = html`<style>
.hero {
width: 100vw;
height: 100vh;
max-height: 100vw;
background-color: #DF931D;
}
.hero-scroll {
perspective: 1000px;
display: flex;
flex-direction: row;
transform-style: preserve-3d;
overflow-x: scroll;
overflow-y: hidden;
/* scroll-snap-type: x proximity;
-webkit-overflow-scrolling: touch;
scroll-behavior: smooth; */
animation: zoomout 0.6s ease-in;
}
.hero-slide-container {
min-width: 100vw;
height: 100vh;
transform-style: preserve-3d;
scroll-snap-align: center;
/* display: flex; */
justify-content: center;
align-items: center;
}
.hero-slide-container a {
transform-style: preserve-3d;
}
.hero-slide {
height: 75vh;
aspect-ratio: 1;
transform-style: preserve-3d;
}
.hero-slide img, .hero-product-tags {
position: absolute;
top: 0;
left: 0;
width: 100%;
aspect-ratio: 1;
}
.hero-product tags {
display: block;
transform-style: preserve-3d;
}
.hero-product-tag {
position: absolute;
padding: 8px;
border-radius: 4px;
font-family: 'Recoleta', 'Neue Kabel', 'Futura', 'Helvetica', sans-serif;
font-weight: 700;
font-size: 13px;
line-height: 13px;
background-color: rgba(255, 255, 255, 0.5);
color: #D6091C;
/* animation: none; */
box-shadow: 0 1px 2px 1px rgba(0, 0, 0, 0.2);
transform: scale3d(1, 1, 1);
transition: all 0.3s;
}
.hero-product-tag:hover {
background-color: rgba(255, 255, 255, 1);
/* animation: pulse 1.2s ease-in-out infinite both; */
transform: scale3d(1.1, 1.1, 1.1);
}
.hero-layer-0 {
transform: translateZ(0px);
}
.hero-layer-1 {
transform: translateZ(50px);
}
.hero-layer-2 {
transform: translateZ(100px);
}
.hero-layer-3 {
transform: translateZ(150px);
}
.hero-layer-4 {
transform: translateZ(200px);
}
.hero-layer-5 {
transform: translateZ(250px);
}
@keyframes wiggle {
0%, 50%, 100% {
transform: rotate(0);
}
25% {
transform: rotate(3deg);
}
75% {
transform: rotate(-3deg);
}
}
@keyframes pulse {
0%, 50%, 100% {
transform: scale3d(1, 1, 1);
box-shadow: 0 1px 2px 1px rgba(0, 0, 0, 0.2);
}
15%, 65% {
transform: scale3d(1.1, 1.1, 1.1);
box-shadow: 0 1px 2px 0px rgba(0, 0, 0, 0.2);
}
}
@keyframes zoomout {
from { perspective: 0; }
to { perspective: 1000; }
}
@keyframes flash {
0%, 25%, 100% {
transform: opacity: 0;
}
50% {
opacity: 1;
}
75% {
opacity: 0.5
}
}
@media (max-width: 730px) {
.hero-scroll {
/* gap: 50vw; */
perspective: 1500px;
}
.hero-slide-container {
padding-bottom: 10%;
}
.hero-slide {
height: 65vh;
}
.hero-product-tags {
display: none;
}
.hero-product-tag {
transform: scale3d(0.75, 0.75, 0.75);
}
}
</style>`
Insert cell
Insert cell
ryanAndMcKenna = ({
images: [
"https://cdn.shopify.com/s/files/1/1748/5525/files/Ryan_and_McKenna_01.png?v=1696261790",
// "https://cdn.shopify.com/s/files/1/1748/5525/files/Ryan_and_McKenna_02.png?v=1696261782",
// "https://cdn.shopify.com/s/files/1/1748/5525/files/Ryan_and_McKenna_02_11085900-fd9f-4f75-996a-8050d8c23439.png?v=1700471267",
"https://cdn.shopify.com/s/files/1/1748/5525/files/Ryan_and_McKenna_03.png?v=1696261786",
"https://cdn.shopify.com/s/files/1/1748/5525/files/Ryan_and_McKenna_04.png?v=1696261788"
],
tags: [
{
name: "Varsity Jacket",
url: "/products/varsity-jacket",
top: "57%",
left: "65%"
},
{
name: "Men's Bell Bottoms",
url: "/products/mens-bell-bottom-fall?variant=40820390428839",
top: "75%",
left: "65%"
}
],
color: "#2F405C",
url: "/collections/new/men"
})
Insert cell
grantAndRandall = ({
images: [
"https://cdn.shopify.com/s/files/1/1748/5525/files/Grant_and_Randall_01.png?v=1696261788",
"https://cdn.shopify.com/s/files/1/1748/5525/files/Grant_and_Randall_02.png?v=1696261788",
// "https://cdn.shopify.com/s/files/1/1748/5525/files/Grant_and_Randall_03.png?v=1696261782",
// "https://cdn.shopify.com/s/files/1/1748/5525/files/Grant_and_Randall_03_3f5ecb29-6899-4f0e-932d-eee50460f46b.png?v=1700472990",
"https://cdn.shopify.com/s/files/1/1748/5525/files/Grant_and_Randall_04.png?v=1696261786"
],
tags: [
{
name: "Varsity Hat",
url: "/products/varsity-hat",
top: "25%",
left: "70%"
},
{
name: "Terry Polo",
url: "/products/mens-terry-polo",
top: "38%",
left: "71%"
},
{
name: "Cabana Trunk",
url: "/products/cabana-trunk",
top: "50%",
left: "66%"
},
{
name: "Varsity Raglan",
url: "/products/varsity-raglan",
top: "35%",
left: "12%"
},
{
name: "Men's Shorts",
url: "/products/mens-short",
top: "48%",
left: "17%"
}
],
color: "#D6091C",
url: "/collections/new/men"
})
Insert cell
ryanAndGabi = ({
images: [
"https://cdn.shopify.com/s/files/1/1748/5525/files/Ryan_and_Gabi_01.png?v=1696261790",
// "https://cdn.shopify.com/s/files/1/1748/5525/files/Ryan_and_Gabi_02.png?v=1696261782",
// "https://cdn.shopify.com/s/files/1/1748/5525/files/Ryan_and_Gabi_02_442fc472-a00a-4ccb-bcc1-85af8a7f7a49.png?v=1700471266",
"https://cdn.shopify.com/s/files/1/1748/5525/files/Ryan_and_Gabi_03.png?v=1696261788",
"https://cdn.shopify.com/s/files/1/1748/5525/files/Ryan_and_Gabi_04.png?v=1696261789"
],
tags: [
{
name: "Varsity Tee",
url: "/products/varsity-tee",
top: "30%",
left: "80%"
},
{
name: "Men's Bell Bottoms",
url: "/products/mens-bell-bottom-fall?variant=44251719794928",
top: "60%",
left: "72%"
},
{
name: "Women's Bell Bottoms",
url: "/products/womens-bell-bottom-fall?variant=44251749941488",
top: "60%",
left: "12%"
}
],
color: "#000",
url: "/collections/bell-bottoms?filter.v.option.color=Black"
})
Insert cell
grantSydAndSierra = ({
images: [
"https://cdn.shopify.com/s/files/1/1748/5525/files/Grant_Syd_and_Sierra_01.png?v=1696317295",
// "https://cdn.shopify.com/s/files/1/1748/5525/files/Grant_Syd_and_Sierra_02.png?v=1696317294",
// "https://cdn.shopify.com/s/files/1/1748/5525/files/Grant_Syd_and_Sierra_02_db4ab0a1-86dd-4543-8684-56f43a7978ce.png?v=1700471266",
"https://cdn.shopify.com/s/files/1/1748/5525/files/Grant_Syd_and_Sierra_03.png?v=1696317295",
"https://cdn.shopify.com/s/files/1/1748/5525/files/Grant_Syd_and_Sierra_04_9c5cca84-e55e-48b6-a76a-518a8ef252b2.png?v=1696317457"
],
tags: [
{
name: "Varsity Hat",
url: "/products/varsity-hat",
top: "24%",
left: "29%"
},
{
name: "Terry Polo",
url: "/products/mens-terry-polo",
top: "32%",
left: "28%"
},
{
name: "Cabana Trunk",
url: "/products/cabana-trunk",
top: "42%",
left: "55%"
},
{
name: "Women's Shorts",
url: "/products/womens-short",
top: "70%",
left: "76%"
}
],
color: "#D6091C",
url: "/collections/new"
})
Insert cell
sydSierraAndTehani = ({
images: [
"https://cdn.shopify.com/s/files/1/1748/5525/files/Grant_Syd_and_Sierra_01.png?v=1696317295",
// "https://cdn.shopify.com/s/files/1/1748/5525/files/Syd_Sierra_and_Tehani_02.png?v=1696319088",
// "https://cdn.shopify.com/s/files/1/1748/5525/files/Syd_Sierra_and_Tehani_02_0b4fe700-9751-413d-812b-3944b733c22a.png?v=1700471266",
"https://cdn.shopify.com/s/files/1/1748/5525/files/Syd_Sierra_and_Tehani_03.png?v=1696319088",
"https://cdn.shopify.com/s/files/1/1748/5525/files/Syd_Sierra_and_Tehani_04.png?v=1696319087"
],
tags: [
{
name: "Women's Short",
url: "/products/womens-short?variant=28732374286429",
top: "40%",
left: "10%"
}
],
color: "#D6091C",
url: "/products/womens-short"
})
Insert cell
gigiAndMcKenna = ({
images: [
"https://cdn.shopify.com/s/files/1/1748/5525/files/Gigi_and_McKenna_01.png?v=1699407317",
// "https://cdn.shopify.com/s/files/1/1748/5525/files/Gigi_and_McKenna_02.png?v=1699407314",
// "https://cdn.shopify.com/s/files/1/1748/5525/files/Gigi_and_McKenna_02_d11cde49-7956-4d36-b590-f0ddebb65619.png?v=1700471266",
"https://cdn.shopify.com/s/files/1/1748/5525/files/Gigi_and_McKenna_03.png?v=1699407318"
],
tags: [
{
name: "Women's Bell Bottoms",
url: "/products/womens-bell-bottom-fall?variant=43640601608432",
top: "69%",
left: "68%"
},
{
name: "Women's Bell Bottoms",
url: "/products/womens-bell-bottom-fall?variant=44251749908720",
top: "57%",
left: "10%"
}
],
color: "#2F405C",
url: "products/womens-bell-bottom-fall"
})
Insert cell
kids = ({
images: [
"https://cdn.shopify.com/s/files/1/1748/5525/files/Kids_01.png?v=1699421539",
// "https://cdn.shopify.com/s/files/1/1748/5525/files/Kids_02.png?v=1699421538",
// "https://cdn.shopify.com/s/files/1/1748/5525/files/Kids_02_b69c4ff8-2af4-4165-bcfa-1a28cb1200aa.png?v=1700472576",
"https://cdn.shopify.com/s/files/1/1748/5525/files/Kids_03.png?v=1699421539"
],
tags: [
{
name: "Varsity Hat",
url: "/products/varsity-hat?variant=44093353197808",
top: "23%",
left: "66%"
},
{
name: "Kid's Terry Tee",
url: "/products/kids-terry-tee?&variant=40863086903463",
top: "37%",
left: "71%"
},
{
name: "Kid's Shorts",
url: "/products/kids-short?variant=44084528316656",
top: "57%",
left: "22%"
},
{
name: "Kid's Overalls",
url: "/products/kids-overall?variant=43639569940720",
top: "72%",
left: "30%"
}
],
color: "#87502E",
url: "/collections/all/kid"
})
Insert cell
grantAndRandall2 = ({
images: [
"https://cdn.shopify.com/s/files/1/1748/5525/files/Grant_and_Randall_2_01.png?v=1699407317",
"https://cdn.shopify.com/s/files/1/1748/5525/files/Grant_and_Randall_2_02.png?v=1699407316",
// "https://cdn.shopify.com/s/files/1/1748/5525/files/Grant_and_Randall_2_03_774fe2f8-2053-4ebf-9d10-b5ce3b3b9343.png?v=1699423274",
// "https://cdn.shopify.com/s/files/1/1748/5525/files/Grant_and_Randall_2_03_5c729121-d53a-4afc-9c1e-545c8516c403.png?v=1700471266",
"https://cdn.shopify.com/s/files/1/1748/5525/files/Grant_and_Randall_2_04.png?v=1699407316"
],
tags: [
{
name: "Varsity Jacket",
url: "/products/varsity-jacket",
top: "40%",
left: "80%"
},
{
name: "Men's Bell Bottoms",
url: "/products/mens-bell-bottom-fall?variant=44251719500016",
top: "64%",
left: "77%"
},
{
name: "Men's Bell Bottoms",
url: "/products/mens-bell-bottom-fall?variant=40820390428839",
top: "57%",
left: "11%"
}
],
color: "#2F405C",
url: "/collections/new/men"
})
Insert cell
twoToneSmock = ({
images: [
"https://cdn.shopify.com/s/files/1/1748/5525/files/Two-tone_Smock_01.png?v=1700471501",
// "https://cdn.shopify.com/s/files/1/1748/5525/files/Two-tone_Smock_02.png?v=1700472576",
"https://cdn.shopify.com/s/files/1/1748/5525/files/Two-tone_Smock_03.png?v=1700471502"
],
tags: [
{
name: "Two-Tone Smock",
url: "/products/smock-two-tone",
top: "40%",
left: "80%"
}
],
color: "#D6091C",
url: "/products/smock-two-tone"
})
Insert cell
Insert cell
slide = (
{ images, tags = [], color = "#2F405C", url = "/collections/whats-new" },
callback
) => {
const createImageURL = (src, width) => `${src}&width=${width} ${width}w`;
const createProductTag = ({
name,
url,
top,
left,
color
}) => `<a href="${url}">
<div class="hero-product-tag" style="top: ${top}; left: ${left}; color: ${color}">${name}</div>
</a>`;
const layers = [
"https://cdn.shopify.com/s/files/1/1748/5525/files/Background.png?v=1696261608",
...images
].map(
(url, index) => html`<img
src="${url}&width=${width}"
srcset="
${createImageURL(url, 180)},
${createImageURL(url, 360)},
${createImageURL(url, 540)},
${createImageURL(url, 720)},
${createImageURL(url, 900)},
${createImageURL(url, 1080)},
${createImageURL(url, 1260)},
${createImageURL(url, 1140)},
${createImageURL(url, 1620)},
${createImageURL(url, 1800)},
${createImageURL(url, 1980)},
${createImageURL(url, 2160)},
${createImageURL(url, 1620)},
${createImageURL(url, 2340)},
${createImageURL(url, 2520)},
${createImageURL(url, 2700)},
${createImageURL(url, 2880)},
${createImageURL(url, 3060)},
"
class="hero-layer-${index}"
loading="${index === 0 ? "eager" : "lazy"}"
/>`
);
const producTagsLayer = html`<div class="hero-product-tags hero-layer-${
layers.length
}">
${tags.map((tag) => createProductTag({ ...tag, color })).join("\n")}
</div>`;
const slide = html`<a href="${url}"><div class="hero-slide">
${layers}
${producTagsLayer}
</div></a>`;
callback(slide);
const container = html`<div class="hero-slide-container">
${slide}
</div>`;
return container;
}
Insert cell
tiltify = (element, options = {}) => {
vaillaTilt.init(element, {
max: 5,
perspective: 1500,
scale: 1,
speed: 1000,
gyroscope: true,
reset: true,
...options
});
return element;
}
Insert cell
vaillaTilt = {
const { default: vaillaTilt } = await import("//esm.sh/vanilla-tilt");
return vaillaTilt;
}
Insert cell

Purpose-built for displays of data

Observable is your go-to platform for exploring data and creating expressive data visualizations. Use reactive JavaScript notebooks for prototyping and a collaborative canvas for visual data exploration and dashboard creation.
Learn more