templates/evenementiel/index.html.twig line 1

Open in your IDE?
  1. {% extends 'base.html.twig' %}
  3. {% block title %}SVS - {{"EVENEMENTIEL"|trans}}{% endblock %}
  5. {% block body %}
  7.     <style>
  8.         {% include "evenementiel/evenementiel.css" %}
  9.     </style>
  11.     <!-- Element -->
  12.     <div class="element1">
  13.         {% include "evenementiel/3/refait.html.twig" %}
  14.     </div>
  16.     <!-- Element -->
  17.     <div class="appElement element2 element_evenementiel_about">
  18.         {% include "evenementiel/aproposevenementiel/index.html.twig" %}
  19.     </div>
  21.     <!-- Element -->
  22.     <div class="appElement element3 element_evenementiel_icons">
  23.         {% include "evenementiel/serviceIcons/index.html.twig" %}
  24.     </div>
  26.     <!-- Element -->
  27.     <div class="appElement element4 element_evenementiel_section">
  28.         <div class="position1"></div>
  29.         {% include "evenementiel/cadreSVS/element.html.twig" %}
  30.     </div>
  33. <!-- EXECUTE SCRIPT FOR EVENEMENTIEL PAGE -->
  34. <script>
  36.     // HERE @VAR IMPORTANT FOR THIS SCRIPT
  37.     var viewportHeight = window.innerHeight;
  38.     var hasTitleAboutRun = false; // Variable pour suivre si initTitle_evenementiel_about a déjà été exécutée.
  39.     var hasTitleIconsRun = false; // Variable pour suivre si initTitle_evenementiel_icons a déjà été exécutée.
  40.     var hasTitleSectionRun = false; // Variable pour suivre si initTitle_evenementiel_section a déjà été exécutée.
  42.     // HERE FUNCTION TITLE_evenementiel_ABOUT
  43.     function initTitle_evenementiel_about() {
  44.         var typed_evenementiel_about = new Typed('.typed_evenementiel_about', {
  45.             strings: ['{{"Protection sur mesure"|trans}} <br><span>{{"pour vos rassemblements"|trans}}</span>'],
  46.             typeSpeed: 20,
  47.             startDelay: 250,
  48.             backDelay: 2500,
  49.             loop: false,
  50.             cursorChar: '<i class="fas fa-circle"></i>',
  51.         });
  52.     }
  54.     // HERE FUNCTION TITLE_evenementiel_ICONS
  55.     function initTitle_evenementiel_icons() {
  56.         var typed_evenementiel_icons = new Typed('.typed_evenementiel_icons', {
  57.             strings: ['{{"Créer un environnement sécurisé"|trans}}<br><span>{{"ou chaque détails est anticipé"|trans}}</span>'],
  58.             typeSpeed: 25,
  59.             startDelay: 250,
  60.             backDelay: 3000,
  61.             loop: false,
  62.             cursorChar: '<i class="fas fa-circle"></i>',
  63.         });
  64.     }
  66.     // HERE FUNCTION TITLE_evenementiel_SECTION
  67.     function initTitle_evenementiel_section() {
  68.         var typed_evenementiel_section = new Typed('.typed_evenementiel_section', {
  69.             strings: ['{{"Contrôle Vigilant"|trans}}<br><span>{{"pilier de la sécurité événementielle"|trans}}</span>'],
  70.             typeSpeed: 25,
  71.             startDelay: 250,
  72.             backDelay: 3000,
  73.             loop: false,
  74.             cursorChar: '<i class="fas fa-circle"></i>',
  75.         });
  76.     }
  78.     // HERE EXECUTION OF SCRIPT @HOME
  79.     window.addEventListener('scroll', function() {
  80.         // HERE @VAR FOR element_evenementiel_about ELEMENT RECTANGLE
  81.         var element_evenementiel_about = document.querySelector('.element_evenementiel_about');
  82.         var rectangle_about = element_evenementiel_about.getBoundingClientRect();
  84.         if (!hasTitleAboutRun && rectangle_about.top < viewportHeight && rectangle_about.bottom > 0) {
  85.             initTitle_evenementiel_about();
  86.             hasTitleAboutRun = true; // Marquer que la fonction a été exécutée.
  87.         }
  89.         // HERE @VAR FOR element_evenementiel_icons ELEMENT RECTANGLE
  90.         var element_evenementiel_icons = document.querySelector('.element_evenementiel_icons');
  91.         var rectangle_icons = element_evenementiel_icons.getBoundingClientRect();
  93.         if (!hasTitleIconsRun && rectangle_icons.top < viewportHeight && rectangle_icons.bottom > 0) {
  94.             initTitle_evenementiel_icons();
  95.             hasTitleIconsRun = true; // Marquer que la fonction a été exécutée.
  96.         }
  98.         // HERE @VAR FOR element_evenementiel_section ELEMENT RECTANGLE
  99.         var element_evenementiel_section = document.querySelector('.element_evenementiel_section');
  100.         var rectangle_section = element_evenementiel_section.getBoundingClientRect();
  102.         if (!hasTitleSectionRun && rectangle_section.top < viewportHeight && rectangle_section.bottom > 0) {
  103.             initTitle_evenementiel_section();
  104.             hasTitleSectionRun = true; // Marquer que la fonction a été exécutée.
  105.         }
  106.     });
  107. </script>
  110. {% endblock %}