ref: remplace l'animation de l'Accueil par une vidéo et la déplace dans A propos
This commit is contained in:
parent
8bd25821c0
commit
ff90b05977
22 changed files with 636 additions and 1078 deletions
|
|
@ -3,182 +3,172 @@
|
|||
{% import 'macros/images.twig' as images %}
|
||||
|
||||
{% block contenu %}
|
||||
<main id="page-a-propos">
|
||||
<main id="page-a-propos" aria-label="Scroll down to navigate through the pictures">
|
||||
<div class="storytelling">
|
||||
<div class="storytelling__conteneur">
|
||||
{{ images.genere_source_img_multi_formats("#{ site.theme.link }/assets/img/about/haikuabout", 'A montage of many different pictures/drawings of jewelry and of someone working.', image_dimensions[0], image_dimensions[1], 'storytelling-montage') }}
|
||||
<div
|
||||
aria-hidden="true" class="storytelling__conteneur"
|
||||
inert
|
||||
>
|
||||
{# Animation #}
|
||||
<div class="storytelling__animation no-js">
|
||||
<svg
|
||||
alt="" class="animation-conteneur"
|
||||
height="90px" preserveAspectRatio="xMidYMin"
|
||||
viewBox="0 0 1200 90" width="100%"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<svg
|
||||
alt="Scroll down" class="animation-texte"
|
||||
height="100%" width="100%"
|
||||
y="50%"
|
||||
>
|
||||
<path
|
||||
d="m0 0c600-90 600 90 1200 0" fill="transparent"
|
||||
id="curve-1" transform="translate3d(0,0,0)"
|
||||
/>
|
||||
|
||||
{# Épingles #}
|
||||
<button
|
||||
aria-label="First pin" class="epingle"
|
||||
data-id-ensemble-epingle-boite="1" type="button"
|
||||
>
|
||||
<img
|
||||
alt="" height="56"
|
||||
role="presentation" src="{{ site.theme.link }}/assets/img/icons/aboutlclick-black.svg"
|
||||
width="82"
|
||||
/>
|
||||
</button>
|
||||
{# TODO: Créer une fonction pour générer les images #}
|
||||
<text dominant-baseline="middle" transform="translate3d(0,0,0)">
|
||||
<textPath id="text-path-1" xlink:href="#curve-1">
|
||||
Scroll down
|
||||
</textPath>
|
||||
<animate
|
||||
attributeName="startOffset" dur="5s"
|
||||
fill="remove" from="-50%"
|
||||
to="0%" repeatCount="indefinite"
|
||||
xlink:href="#text-path-1"
|
||||
/>
|
||||
</text>
|
||||
|
||||
<button
|
||||
aria-label="Second pin" class="epingle"
|
||||
data-id-ensemble-epingle-boite="2" type="button"
|
||||
>
|
||||
<img
|
||||
alt="" height="56"
|
||||
role="presentation" src="{{ site.theme.link }}/assets/img/icons/aboutlclick-black.svg"
|
||||
width="82"
|
||||
/>
|
||||
</button>
|
||||
<text dominant-baseline="middle" transform="translate3d(0,0,0)">
|
||||
<textPath id="text-path-2" xlink:href="#curve-1">
|
||||
Scroll down
|
||||
</textPath>
|
||||
<animate
|
||||
attributeName="startOffset" dur="5s"
|
||||
fill="remove" from="0%"
|
||||
to="50%" repeatCount="indefinite"
|
||||
xlink:href="#text-path-2"
|
||||
/>
|
||||
</text>
|
||||
|
||||
<button
|
||||
aria-label="Third pin" class="epingle"
|
||||
data-id-ensemble-epingle-boite="3" type="button"
|
||||
>
|
||||
<img
|
||||
alt="" height="56"
|
||||
role="presentation" src="{{ site.theme.link }}/assets/img/icons/aboutlclick-black.svg"
|
||||
width="82"
|
||||
/>
|
||||
</button>
|
||||
<text dominant-baseline="middle" transform="translate3d(0,0,0)">
|
||||
<textPath id="text-path-3" xlink:href="#curve-1">
|
||||
Scroll down
|
||||
</textPath>
|
||||
<animate
|
||||
attributeName="startOffset" dur="5s"
|
||||
fill="remove" from="50%"
|
||||
to="100%" repeatCount="indefinite"
|
||||
xlink:href="#text-path-3"
|
||||
/>
|
||||
</text>
|
||||
|
||||
<button
|
||||
aria-label="Fourth pin" class="epingle"
|
||||
data-id-ensemble-epingle-boite="4" type="button"
|
||||
>
|
||||
<img
|
||||
alt="" height="56"
|
||||
role="presentation" src="{{ site.theme.link }}/assets/img/icons/aboutlclick-black.svg"
|
||||
width="82"
|
||||
/>
|
||||
</button>
|
||||
|
||||
<button
|
||||
aria-label="Fifth pin" class="epingle"
|
||||
data-id-ensemble-epingle-boite="5" type="button"
|
||||
>
|
||||
<img
|
||||
alt="" height="56"
|
||||
role="presentation" src="{{ site.theme.link }}/assets/img/icons/aboutlclick-black.svg"
|
||||
width="82"
|
||||
/>
|
||||
</button>
|
||||
|
||||
<button
|
||||
aria-label="Sixth pin" class="epingle"
|
||||
data-id-ensemble-epingle-boite="6" type="button"
|
||||
>
|
||||
<img
|
||||
alt="" height="56"
|
||||
role="presentation" src="{{ site.theme.link }}/assets/img/icons/aboutlclick-black.svg"
|
||||
width="82"
|
||||
/>
|
||||
</button>
|
||||
|
||||
{# Boîtes de texte #}
|
||||
<div class="boite-texte" data-id-ensemble-epingle-boite="1">
|
||||
<button class="boite-texte__bouton-fermeture" type="button">
|
||||
<img
|
||||
alt="An icon in form of a cross" height="20"
|
||||
role="presentation" src="{{ site.theme.link }}/assets/img/icons/cross.svg"
|
||||
width="20"
|
||||
/>
|
||||
</button>
|
||||
|
||||
<p>
|
||||
Haïkus are short japanese poems written in three lines to capture the beauty of small details in the everyday life.
|
||||
</p>
|
||||
|
||||
<p>More than poetry, it’s a philosophy.</p>
|
||||
<text dominant-baseline="middle" transform="translate3d(0,0,0)">
|
||||
<textPath id="text-path-4" xlink:href="#curve-1">
|
||||
Scroll down
|
||||
</textPath>
|
||||
<animate
|
||||
attributeName="startOffset" dur="5s"
|
||||
fill="remove" from="100%"
|
||||
to="150%" repeatCount="indefinite"
|
||||
xlink:href="#text-path-4"
|
||||
/>
|
||||
</text>
|
||||
</svg>
|
||||
</svg>
|
||||
</div>
|
||||
|
||||
<div class="boite-texte" data-id-ensemble-epingle-boite="2">
|
||||
<button class="boite-texte__bouton-fermeture" type="button">
|
||||
<img
|
||||
alt="An icon in form of a cross" height="20"
|
||||
role="presentation" src="{{ site.theme.link }}/assets/img/icons/cross.svg"
|
||||
width="20"
|
||||
/>
|
||||
</button>
|
||||
|
||||
<p>
|
||||
Haiku Atelier creates minimalist and subtil jewelry with an edgy twist, trying to distillate some poetry through those small objects.
|
||||
</p>
|
||||
|
||||
<p>
|
||||
Handcrafted with care in sustainable materials, each pieces has its uniqueness and is made to last.
|
||||
</p>
|
||||
{# Images #}
|
||||
<div
|
||||
class="storytelling__image" data-index="1"
|
||||
tabindex="-1"
|
||||
>
|
||||
{{ images.genere_source_img_multi_formats("#{ site.theme.link }/assets/img/storytelling/scroll1", '', 903, 1080, 'image-scroll1') }}
|
||||
</div>
|
||||
|
||||
<div class="boite-texte" data-id-ensemble-epingle-boite="3">
|
||||
<button class="boite-texte__bouton-fermeture" type="button">
|
||||
<img
|
||||
alt="An icon in form of a cross" height="20"
|
||||
role="presentation" src="{{ site.theme.link }}/assets/img/icons/cross.svg"
|
||||
width="20"
|
||||
/>
|
||||
</button>
|
||||
|
||||
<p>
|
||||
After learning the art of jewelry making for two years in Paris, Manon Designere launched the brand Haiku, gleaning into the Japanese minimalist aesthetic.
|
||||
</p>
|
||||
|
||||
<p>
|
||||
Now based in Brussels, she still makes everything by hand, pouring her soul into her work to share her vision of the world.
|
||||
</p>
|
||||
<div
|
||||
class="storytelling__image" data-caché
|
||||
data-index="2" tabindex="-1"
|
||||
>
|
||||
{{ images.genere_source_img_multi_formats("#{ site.theme.link }/assets/img/storytelling/scroll2", '', 903, 1080, 'image-scroll2') }}
|
||||
</div>
|
||||
|
||||
<div class="boite-texte" data-id-ensemble-epingle-boite="4">
|
||||
<button class="boite-texte__bouton-fermeture" type="button">
|
||||
<img
|
||||
alt="An icon in form of a cross" height="20"
|
||||
role="presentation" src="{{ site.theme.link }}/assets/img/icons/cross.svg"
|
||||
width="20"
|
||||
/>
|
||||
</button>
|
||||
|
||||
<p>Here you can see some of the tools used at the studio.</p>
|
||||
<p>
|
||||
From sketches to models, from soldering to polishing, the numerous steps behind each piece are what makes it so unique.
|
||||
</p>
|
||||
<p>
|
||||
A touch of animism to value handcrafted objects, restrain mass production and lead toward slow life.
|
||||
</p>
|
||||
<div
|
||||
class="storytelling__image" data-caché
|
||||
data-index="3" tabindex="-1"
|
||||
>
|
||||
{{ images.genere_source_img_multi_formats("#{ site.theme.link }/assets/img/storytelling/scroll3", '', 903, 1080, 'image-scroll3') }}
|
||||
</div>
|
||||
|
||||
<div class="boite-texte" data-id-ensemble-epingle-boite="5">
|
||||
<button class="boite-texte__bouton-fermeture" type="button">
|
||||
<img
|
||||
alt="An icon in form of a cross" height="20"
|
||||
role="presentation" src="{{ site.theme.link }}/assets/img/icons/cross.svg"
|
||||
width="20"
|
||||
/>
|
||||
</button>
|
||||
|
||||
<p>
|
||||
We pay a lot of attention choosing the materials we work on: all of the pieces are made in 80% recycled sterling silver.
|
||||
</p>
|
||||
<p>
|
||||
We also choose to propose many designs in a mix of sterling silver and silver gilded parts to avoid relying too much on the gold plating process, which can be pollutant.
|
||||
</p>
|
||||
<p>
|
||||
The packagings are also carefully selected, produced nearby, made in eco-friendly coton or paper. Our gift bags are even handmade in dead-stock fabrics.
|
||||
</p>
|
||||
<div
|
||||
class="storytelling__image" data-caché
|
||||
data-index="4" tabindex="-1"
|
||||
>
|
||||
{{ images.genere_source_img_multi_formats("#{ site.theme.link }/assets/img/storytelling/scroll4", '', 903, 1080, 'image-scroll4') }}
|
||||
</div>
|
||||
|
||||
<div class="boite-texte" data-id-ensemble-epingle-boite="6">
|
||||
<button class="boite-texte__bouton-fermeture" type="button">
|
||||
<img
|
||||
alt="An icon in form of a cross" height="20"
|
||||
role="presentation" src="{{ site.theme.link }}/assets/img/icons/cross.svg"
|
||||
width="20"
|
||||
/>
|
||||
</button>
|
||||
<div
|
||||
class="storytelling__image" data-caché
|
||||
data-index="5" tabindex="-1"
|
||||
>
|
||||
{{ images.genere_source_img_multi_formats("#{ site.theme.link }/assets/img/storytelling/scroll5", '', 903, 1080, 'image-scroll5') }}
|
||||
</div>
|
||||
|
||||
<p>
|
||||
We hope that those small objects will move you, as we are moved by the beauty hidden behind a ray of sunshine, a leaf falling from a branch, the smell of an old book, the song of birds before dawn...
|
||||
</p>
|
||||
<p>Haiku jewelry are like a bit of poetry to wear everywhere.</p>
|
||||
<div
|
||||
class="storytelling__image" data-caché
|
||||
data-index="6" tabindex="-1"
|
||||
>
|
||||
{{ images.genere_source_img_multi_formats("#{ site.theme.link }/assets/img/storytelling/scroll6", '', 903, 1080, 'image-scroll6') }}
|
||||
</div>
|
||||
|
||||
<div
|
||||
class="storytelling__image" data-caché
|
||||
data-index="7" tabindex="-1"
|
||||
>
|
||||
{{ images.genere_source_img_multi_formats("#{ site.theme.link }/assets/img/storytelling/scroll7", '', 903, 1080, 'image-scroll7') }}
|
||||
</div>
|
||||
|
||||
<div
|
||||
class="storytelling__image" data-caché
|
||||
data-index="8" tabindex="-1"
|
||||
>
|
||||
{{ images.genere_source_img_multi_formats("#{ site.theme.link }/assets/img/storytelling/scroll8", '', 903, 1080, 'image-scroll8') }}
|
||||
</div>
|
||||
|
||||
<div
|
||||
class="storytelling__image" data-caché
|
||||
data-index="9" tabindex="-1"
|
||||
>
|
||||
{{ images.genere_source_img_multi_formats("#{ site.theme.link }/assets/img/storytelling/scroll9", '', 903, 1080, 'image-scroll9') }}
|
||||
</div>
|
||||
|
||||
<div
|
||||
class="storytelling__image" data-caché
|
||||
data-index="10" tabindex="-1"
|
||||
>
|
||||
{{ images.genere_source_img_multi_formats("#{ site.theme.link }/assets/img/storytelling/scroll10", '', 903, 1080, 'image-scroll10') }}
|
||||
</div>
|
||||
|
||||
<div
|
||||
class="storytelling__image" data-caché
|
||||
data-index="11" tabindex="-1"
|
||||
>
|
||||
{{ images.genere_source_img_multi_formats("#{ site.theme.link }/assets/img/storytelling/scroll11", '', 903, 1080, 'image-scroll11') }}
|
||||
</div>
|
||||
|
||||
<div
|
||||
class="storytelling__image" data-caché
|
||||
data-index="12" tabindex="-1"
|
||||
>
|
||||
{{ images.genere_source_img_multi_formats("#{ site.theme.link }/assets/img/storytelling/scroll12", '', 903, 1080, 'image-scroll12') }}
|
||||
</div>
|
||||
|
||||
<div
|
||||
class="storytelling__image" data-caché
|
||||
data-index="13" tabindex="-1"
|
||||
>
|
||||
{{ images.genere_source_img_multi_formats("#{ site.theme.link }/assets/img/storytelling/scroll13", '', 903, 1080, 'image-scroll13') }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -2,174 +2,24 @@
|
|||
{% import 'macros/images.twig' as images %}
|
||||
|
||||
{% block contenu %}
|
||||
<main id="page-accueil" aria-label="Scroll down to navigate through the pictures">
|
||||
<div class="storytelling">
|
||||
<div
|
||||
aria-hidden="true" class="storytelling__conteneur"
|
||||
inert
|
||||
>
|
||||
{# Animation #}
|
||||
<div class="storytelling__animation no-js">
|
||||
<svg
|
||||
alt="" class="animation-conteneur"
|
||||
height="90px" preserveAspectRatio="xMidYMin"
|
||||
viewBox="0 0 1200 90" width="100%"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<svg
|
||||
alt="Scroll down" class="animation-texte"
|
||||
height="100%" width="100%"
|
||||
y="50%"
|
||||
>
|
||||
<path
|
||||
d="m0 0c600-90 600 90 1200 0" fill="transparent"
|
||||
id="curve-1" transform="translate3d(0,0,0)"
|
||||
/>
|
||||
|
||||
{# TODO: Créer une fonction pour générer les images #}
|
||||
<text dominant-baseline="middle" transform="translate3d(0,0,0)">
|
||||
<textPath id="text-path-1" xlink:href="#curve-1">
|
||||
Scroll down
|
||||
</textPath>
|
||||
<animate
|
||||
attributeName="startOffset" dur="5s"
|
||||
fill="remove" from="-50%"
|
||||
to="0%" repeatCount="indefinite"
|
||||
xlink:href="#text-path-1"
|
||||
/>
|
||||
</text>
|
||||
|
||||
<text dominant-baseline="middle" transform="translate3d(0,0,0)">
|
||||
<textPath id="text-path-2" xlink:href="#curve-1">
|
||||
Scroll down
|
||||
</textPath>
|
||||
<animate
|
||||
attributeName="startOffset" dur="5s"
|
||||
fill="remove" from="0%"
|
||||
to="50%" repeatCount="indefinite"
|
||||
xlink:href="#text-path-2"
|
||||
/>
|
||||
</text>
|
||||
|
||||
<text dominant-baseline="middle" transform="translate3d(0,0,0)">
|
||||
<textPath id="text-path-3" xlink:href="#curve-1">
|
||||
Scroll down
|
||||
</textPath>
|
||||
<animate
|
||||
attributeName="startOffset" dur="5s"
|
||||
fill="remove" from="50%"
|
||||
to="100%" repeatCount="indefinite"
|
||||
xlink:href="#text-path-3"
|
||||
/>
|
||||
</text>
|
||||
|
||||
<text dominant-baseline="middle" transform="translate3d(0,0,0)">
|
||||
<textPath id="text-path-4" xlink:href="#curve-1">
|
||||
Scroll down
|
||||
</textPath>
|
||||
<animate
|
||||
attributeName="startOffset" dur="5s"
|
||||
fill="remove" from="100%"
|
||||
to="150%" repeatCount="indefinite"
|
||||
xlink:href="#text-path-4"
|
||||
/>
|
||||
</text>
|
||||
</svg>
|
||||
</svg>
|
||||
</div>
|
||||
|
||||
{# Images #}
|
||||
<div
|
||||
class="storytelling__image" data-index="1"
|
||||
tabindex="-1"
|
||||
>
|
||||
{{ images.genere_source_img_multi_formats("#{ site.theme.link }/assets/img/storytelling/scroll1", '', 903, 1080, 'image-scroll1') }}
|
||||
</div>
|
||||
|
||||
<div
|
||||
class="storytelling__image" data-caché
|
||||
data-index="2" tabindex="-1"
|
||||
>
|
||||
{{ images.genere_source_img_multi_formats("#{ site.theme.link }/assets/img/storytelling/scroll2", '', 903, 1080, 'image-scroll2') }}
|
||||
</div>
|
||||
|
||||
<div
|
||||
class="storytelling__image" data-caché
|
||||
data-index="3" tabindex="-1"
|
||||
>
|
||||
{{ images.genere_source_img_multi_formats("#{ site.theme.link }/assets/img/storytelling/scroll3", '', 903, 1080, 'image-scroll3') }}
|
||||
</div>
|
||||
|
||||
<div
|
||||
class="storytelling__image" data-caché
|
||||
data-index="4" tabindex="-1"
|
||||
>
|
||||
{{ images.genere_source_img_multi_formats("#{ site.theme.link }/assets/img/storytelling/scroll4", '', 903, 1080, 'image-scroll4') }}
|
||||
</div>
|
||||
|
||||
<div
|
||||
class="storytelling__image" data-caché
|
||||
data-index="5" tabindex="-1"
|
||||
>
|
||||
{{ images.genere_source_img_multi_formats("#{ site.theme.link }/assets/img/storytelling/scroll5", '', 903, 1080, 'image-scroll5') }}
|
||||
</div>
|
||||
|
||||
<div
|
||||
class="storytelling__image" data-caché
|
||||
data-index="6" tabindex="-1"
|
||||
>
|
||||
{{ images.genere_source_img_multi_formats("#{ site.theme.link }/assets/img/storytelling/scroll6", '', 903, 1080, 'image-scroll6') }}
|
||||
</div>
|
||||
|
||||
<div
|
||||
class="storytelling__image" data-caché
|
||||
data-index="7" tabindex="-1"
|
||||
>
|
||||
{{ images.genere_source_img_multi_formats("#{ site.theme.link }/assets/img/storytelling/scroll7", '', 903, 1080, 'image-scroll7') }}
|
||||
</div>
|
||||
|
||||
<div
|
||||
class="storytelling__image" data-caché
|
||||
data-index="8" tabindex="-1"
|
||||
>
|
||||
{{ images.genere_source_img_multi_formats("#{ site.theme.link }/assets/img/storytelling/scroll8", '', 903, 1080, 'image-scroll8') }}
|
||||
</div>
|
||||
|
||||
<div
|
||||
class="storytelling__image" data-caché
|
||||
data-index="9" tabindex="-1"
|
||||
>
|
||||
{{ images.genere_source_img_multi_formats("#{ site.theme.link }/assets/img/storytelling/scroll9", '', 903, 1080, 'image-scroll9') }}
|
||||
</div>
|
||||
|
||||
<div
|
||||
class="storytelling__image" data-caché
|
||||
data-index="10" tabindex="-1"
|
||||
>
|
||||
{{ images.genere_source_img_multi_formats("#{ site.theme.link }/assets/img/storytelling/scroll10", '', 903, 1080, 'image-scroll10') }}
|
||||
</div>
|
||||
|
||||
<div
|
||||
class="storytelling__image" data-caché
|
||||
data-index="11" tabindex="-1"
|
||||
>
|
||||
{{ images.genere_source_img_multi_formats("#{ site.theme.link }/assets/img/storytelling/scroll11", '', 903, 1080, 'image-scroll11') }}
|
||||
</div>
|
||||
|
||||
<div
|
||||
class="storytelling__image" data-caché
|
||||
data-index="12" tabindex="-1"
|
||||
>
|
||||
{{ images.genere_source_img_multi_formats("#{ site.theme.link }/assets/img/storytelling/scroll12", '', 903, 1080, 'image-scroll12') }}
|
||||
</div>
|
||||
|
||||
<div
|
||||
class="storytelling__image" data-caché
|
||||
data-index="13" tabindex="-1"
|
||||
>
|
||||
{{ images.genere_source_img_multi_formats("#{ site.theme.link }/assets/img/storytelling/scroll13", '', 903, 1080, 'image-scroll13') }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<main id="page-accueil">
|
||||
<video
|
||||
autoplay disablepictureinpicture
|
||||
id="intro-video" preload="auto"
|
||||
loop muted
|
||||
width="1280" height="720"
|
||||
>
|
||||
<source
|
||||
media="(width >= 500px)" src="{{ site.theme.link }}/assets/video/intro-desktop.m4v"
|
||||
type="video/mp4"
|
||||
/>
|
||||
<source src="{{ site.theme.link }}/assets/video/intro-phone.m4v" type="video/mp4" />
|
||||
<source
|
||||
media="(width >= 500px)" src="{{ site.theme.link }}/assets/video/intro-desktop.webm"
|
||||
type="video/webm"
|
||||
/>
|
||||
<source src="{{ site.theme.link }}/assets/video/intro-phone.webm" type="video/webm" />
|
||||
<p>Your device does not support videos.</p>
|
||||
</video>
|
||||
</main>
|
||||
{% endblock contenu %}
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue