haiku-atelier-2024/web/app/themes/haiku-atelier-2024/views/accueil.twig

{% extends "base.twig" %}
{% 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>
{% endblock contenu %}