176 lines
6.3 KiB
Twig
Executable file
176 lines
6.3 KiB
Twig
Executable file
{% extends 'base.twig' %}
|
|
|
|
{% import 'macros/images.twig' as images %}
|
|
|
|
{% block contenu %}
|
|
<main id="page-a-propos" 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>
|
|
{% endblock contenu %}
|