haiku-atelier-2024/web/app/themes/haiku-atelier-2024/views/a-propos.twig

{% 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 %}