✨ Effets et animationsGratuit · 0 NahnahPar NAHNAH
Cartes qui s’empilent au défilement
Des grandes cartes (photo, numéro, titre, texte) restent collées en haut l’une après l’autre et s’empilent en rapetissant à mesure qu’on fait défiler : idéal pour raconter « comment ça marche » ou ta fabrication en étapes.
Aperçu en direct
Données de démonstration (produits, menus, textes d’exemple) : dans ta boutique, ce sont les tiennes.
Photos : Unsplash / Pexels (exemples de l’aperçu, jamais inclus dans le code).
Code à copier
Fichier complet sections/nahnah-effet-cartes-empilees-scroll.liquid (Liquid, CSS et JS inclus).
{%- comment -%} NAHNAH AI · Cartes qui s’empilent au défilement (bibliothèque Sections & effets) {%- endcomment -%}
<div class="nn-effet-cartes-empilees-scroll" style="--nn-mh: {{ section.settings.marge_haut }}px; --nn-mb: {{ section.settings.marge_bas }}px; --nn-fond: {{ section.settings.couleur_fond }}; --nn-texte: {{ section.settings.couleur_texte }}; --nn-accent: {{ section.settings.couleur_accent }};" data-nn-invitation="{{ section.settings.invitation }}">
<h2 class="nn-effet-cartes-empilees-scroll__titre">{{ section.settings.titre | escape }}</h2>
<ol class="nn-effet-cartes-empilees-scroll__pile" style="--nn-n: {{ section.blocks.size }};">
{%- for block in section.blocks -%}
<li class="nn-effet-cartes-empilees-scroll__carte" style="--nn-i: {{ forloop.index0 }}; --nn-c: {{ block.settings.couleur }};" data-nn-carte {{ block.shopify_attributes }}>
<div class="nn-effet-cartes-empilees-scroll__texte"><span class="nn-effet-cartes-empilees-scroll__num">{{ forloop.index | prepend: '0' | slice: -2, 2 }}</span><h3>{{ block.settings.titre | escape }}</h3>{%- if block.settings.texte != blank -%}<p>{{ block.settings.texte | escape }}</p>{%- endif -%}</div>
<div class="nn-effet-cartes-empilees-scroll__photo">{%- if block.settings.image != blank -%}{{ block.settings.image | image_url: width: 900 | image_tag: loading: 'lazy', alt: block.settings.titre }}{%- endif -%}</div>
</li>
{%- endfor -%}
</ol>
</div>
{% schema %}
{
"name": "Cartes empilées",
"tag": "section",
"class": "nn-section-effet-cartes-empilees-scroll",
"max_blocks": 6,
"settings": [
{
"type": "text",
"id": "titre",
"label": "Titre",
"default": "Comment c’est fabriqué"
},
{
"type": "checkbox",
"id": "invitation",
"label": "Faire défiler l’aperçu tout seul",
"default": false,
"info": "Coupé si le visiteur a demandé à réduire les animations."
},
{
"type": "header",
"content": "Couleurs"
},
{
"type": "color",
"id": "couleur_fond",
"label": "Fond",
"default": "#FFFFFF"
},
{
"type": "color",
"id": "couleur_texte",
"label": "Texte",
"default": "#1B1B1B"
},
{
"type": "color",
"id": "couleur_accent",
"label": "Accent",
"default": "#1B1B1B"
},
{
"type": "header",
"content": "Espacement"
},
{
"type": "range",
"id": "marge_haut",
"label": "Marge haute",
"min": 0,
"max": 120,
"step": 4,
"unit": "px",
"default": 40
},
{
"type": "range",
"id": "marge_bas",
"label": "Marge basse",
"min": 0,
"max": 120,
"step": 4,
"unit": "px",
"default": 40
}
],
"blocks": [
{
"type": "carte",
"name": "Carte",
"settings": [
{
"type": "image_picker",
"id": "image",
"label": "Photo"
},
{
"type": "text",
"id": "titre",
"label": "Titre",
"default": "Le choix des matières"
},
{
"type": "text",
"id": "texte",
"label": "Texte",
"default": "Nous sélectionnons chaque matière chez des fournisseurs européens."
},
{
"type": "color",
"id": "couleur",
"label": "Couleur de la carte",
"default": "#FFE8D6"
}
]
}
],
"presets": [
{
"name": "Cartes empilées",
"blocks": [
{
"type": "carte",
"settings": {
"titre": "Le choix des matières",
"texte": "Sélectionnées chez des fournisseurs européens.",
"couleur": "#FFE8D6"
}
},
{
"type": "carte",
"settings": {
"titre": "La découpe",
"texte": "Chaque pièce est coupée à la main, au plus juste.",
"couleur": "#DDEBF7"
}
},
{
"type": "carte",
"settings": {
"titre": "L’assemblage",
"texte": "Coutures renforcées, finitions contrôlées une à une.",
"couleur": "#E2F0D9"
}
},
{
"type": "carte",
"settings": {
"titre": "L’envoi",
"texte": "Emballé sans plastique et expédié sous 48 h.",
"couleur": "#FCE4EC"
}
}
]
}
]
}
{% endschema %}
{% stylesheet %}
.nn-effet-cartes-empilees-scroll { padding: var(--nn-mh) 16px var(--nn-mb); background: var(--nn-fond); color: var(--nn-texte); }
.nn-effet-cartes-empilees-scroll__titre { max-width: 1000px; margin: 0 auto 20px; font-size: clamp(24px, 3.6vw, 40px); }
.nn-effet-cartes-empilees-scroll__pile { max-width: 1000px; margin: 0 auto; padding: 0; list-style: none; }
.nn-effet-cartes-empilees-scroll__carte { position: sticky; top: calc(16px + var(--nn-i) * 14px); display: grid; grid-template-columns: 1fr 1fr; gap: 20px; min-height: 340px; margin-bottom: 24px; padding: 22px; border-radius: 28px; background: var(--nn-c); box-shadow: 0 -10px 30px -18px rgba(0, 0, 0, 0.35); transform-origin: top center; transform: scale(var(--nn-e, 1)); transition: transform 0.2s linear; }
.nn-effet-cartes-empilees-scroll__texte { display: flex; flex-direction: column; justify-content: center; }
.nn-effet-cartes-empilees-scroll__num { font-size: 64px; font-weight: 900; line-height: 1; opacity: 0.18; }
.nn-effet-cartes-empilees-scroll__texte h3 { margin: 6px 0 8px; font-size: clamp(22px, 3vw, 32px); }
.nn-effet-cartes-empilees-scroll__texte p { margin: 0; font-size: 16px; opacity: 0.8; }
.nn-effet-cartes-empilees-scroll__photo { overflow: hidden; border-radius: 20px; background: rgba(0, 0, 0, 0.06); min-height: 220px; }
.nn-effet-cartes-empilees-scroll__photo img { display: block; width: 100%; height: 100%; object-fit: cover; }
@media (max-width: 700px) { .nn-effet-cartes-empilees-scroll__carte { grid-template-columns: 1fr; min-height: 0; } .nn-effet-cartes-empilees-scroll__photo { min-height: 160px; order: -1; } }
@media (prefers-reduced-motion: reduce) {
.nn-effet-cartes-empilees-scroll *, .nn-effet-cartes-empilees-scroll *::before, .nn-effet-cartes-empilees-scroll *::after { animation: none !important; transition: none !important; }
.nn-effet-cartes-empilees-scroll__carte { position: relative; top: 0; transform: none !important; }
}
{% endstylesheet %}
{% javascript %}
(function () {
var reduit = window.matchMedia && window.matchMedia("(prefers-reduced-motion: reduce)").matches;
function brancher(racine) {
if (racine.dataset.nnPret) return;
racine.dataset.nnPret = "1";
var cartes = [].slice.call(racine.querySelectorAll("[data-nn-carte]"));
if (!cartes.length || reduit) return;
// Chaque carte rapetisse quand la suivante vient la recouvrir
function maj() {
cartes.forEach(function (k, i) {
var s = cartes[i + 1];
if (!s) { k.style.setProperty("--nn-e", "1"); return; }
var a = k.getBoundingClientRect(), b = s.getBoundingClientRect(), recouvre = Math.max(0, Math.min(1, (a.bottom - b.top) / a.height));
k.style.setProperty("--nn-e", (1 - recouvre * 0.08).toFixed(3));
});
}
var raf = 0;
window.addEventListener("scroll", function () { cancelAnimationFrame(raf); raf = requestAnimationFrame(maj); }, { passive: true });
window.addEventListener("resize", maj);
maj();
// Invitation (aperçu) : la page défile doucement vers le bas puis remonte
if (racine.getAttribute("data-nn-invitation") === "true") {
var sens = 1;
setInterval(function () { var max = document.documentElement.scrollHeight - window.innerHeight; if (max <= 0) return; var y = window.scrollY + sens * 6; if (y >= max || y <= 0) sens = -sens; window.scrollTo(0, Math.max(0, Math.min(max, y))); }, 30);
}
}
function tout() { document.querySelectorAll(".nn-effet-cartes-empilees-scroll").forEach(brancher); }
tout();
document.addEventListener("shopify:section:load", tout);
})();
{% endjavascript %}
Licence NAHNAH AI : utilisation libre dans tes boutiques (y compris commerciales), modification permise, revente de l’élément seul interdite.
Prompt à copier
À coller dans Claude ou ChatGPT avec le fichier téléchargé (ou le code copié) : l’assistant t’aide à l’installer et à l’adapter à ta marque.
Tu es un expert des thèmes Shopify Online Store 2.0. Aide-moi à installer puis à adapter à ma marque cet élément gratuit de la bibliothèque NAHNAH AI.
Élément : « Cartes qui s’empilent au défilement » (Effets et animations)
Description : Des grandes cartes (photo, numéro, titre, texte) restent collées en haut l’une après l’autre et s’empilent en rapetissant à mesure qu’on fait défiler : idéal pour raconter « comment ça marche » ou ta fabrication en étapes.
Page de l’élément (aperçu en direct) : https://ai.nahnah.shop/bibliotheque-shopify/effet-cartes-empilees-scroll
Fichier : nahnah-effet-cartes-empilees-scroll.liquid (bouton « Télécharger » de la page) ou le code copié avec le bouton « Copier » : je te le joins ou je le colle après ce message.
Emplacement dans le thème : sections/nahnah-effet-cartes-empilees-scroll.liquid (Liquid, puis {% stylesheet %} et {% javascript %}, dans ce seul fichier).
Étapes d’installation :
1. Dans Shopify : Boutique en ligne → Thèmes → bouton « … » du thème → Modifier le code.
2. Dossier « sections » → « Ajouter une section » (ou « Nouveau fichier ») → nomme-la « nahnah-effet-cartes-empilees-scroll ».
3. Efface le contenu proposé, colle le code de l’onglet Liquid (fichier complet), puis Enregistrer.
4. Ouvre Personnaliser → Ajouter une section → choisis-la, règle les textes et les couleurs, puis Enregistrer.
Ce que j’attends de toi :
- Guide-moi pas à pas dans Shopify : Boutique en ligne → Thèmes → « … » → Modifier le code → dossier sections → Ajouter une section, puis Personnaliser → Ajouter une section.
- Propose-moi d’adapter les couleurs, les textes et les liens à ma marque : demande d’abord mes couleurs (codes hexadécimaux), mon ton et mes liens.
- Garde le bloc {% schema %} et tous ses réglages (identifiants, types, presets) : je dois pouvoir tout régler ensuite dans l’éditeur de thème.
- Rends-moi le fichier complet modifié, prêt à coller, sans faux avis, fausse urgence ni chiffre inventé.
Si tu as le connecteur NAHNAH AI (MCP), récupère directement le code exact avec l’outil obtenir_code_element (id : effet-cartes-empilees-scroll).Installer dans ma boutique
En un clic, la section est ajoutée à un thème de ta boutique Shopify connectée (un thème non publié par défaut).
Chargement de tes boutiques…
Installer dans Shopify
- Dans Shopify : Boutique en ligne → Thèmes → bouton « … » du thème → Modifier le code.
- Dossier « sections » → « Ajouter une section » (ou « Nouveau fichier ») → nomme-la « nahnah-effet-cartes-empilees-scroll ».
- Efface le contenu proposé, colle le code de l’onglet Liquid (fichier complet), puis Enregistrer.
- Ouvre Personnaliser → Ajouter une section → choisis-la, règle les textes et les couleurs, puis Enregistrer.
Installer via le MCP
Depuis Claude, Claude Code ou ChatGPT connecté à NAHNAH AI, demande : « Donne-moi le code de l’élément effet-cartes-empilees-scroll de la bibliothèque NAHNAH AI et les étapes pour l’installer ». L’assistant récupère le code et les étapes (outil obtenir_code_element), gratuitement.
Boutique connectée à NAHNAH AI : l’assistant peut aussi l’installer directement (outil installer_element).
Connecter le MCP