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

One platform to build and deploy the best data apps

Experiment and prototype by building visualizations in live JavaScript notebooks. Collaborate with your team and decide which concepts to build out.
Use Observable Framework to build data apps locally. Use data loaders to build in any language or library, including Python, SQL, and R.
Seamlessly deploy to Observable. Test before you ship, use automatic deploy-on-commit, and ensure your projects are always up-to-date.
Learn more