templates/gardiennage/index.html.twig line 1

Open in your IDE?
  1. {% extends 'base.html.twig' %}
  3. {% block title %}SVS - {{"GARDIENNAGE"|trans}}{% endblock %}
  5. {% block body %}
  8. <style>
  9.     {% include "gardiennage/gardiennage.css" %}
  10. </style>
  12. <div class="element1">
  13.     {% include "gardiennage/2/refait.html.twig" %}
  14. </div>
  16. <!-- Element -->
  17. <div class="appElement element2 element_gardiennage_about">
  18.     {% include "gardiennage/aproposgardiennage/index.html.twig" %}
  19. </div>
  21. <!-- Element -->
  22. <div class="appElement element3 element_gardiennage_icons">
  23.     {% include "gardiennage/serviceIcons/index.html.twig" %}
  24. </div>
  26. <!-- Element -->
  27. <div class="appElement element4 element_gardiennage_section">
  28.     <div class="position1"></div>
  29.     {% include "gardiennage/cadreSVS/element.html.twig" %}
  30. </div>
  32. <!-- EXECUTE SCRIPT FOR GARDIENNAGE PAGE -->
  33. <script>
  35.     // HERE @VAR IMPORTANT FOR THIS SCRIPT
  36.     var viewportHeight = window.innerHeight;
  37.     var hasTitleAboutRun = false; // Variable pour suivre si initTitle_gardiennage_about a déjà été exécutée.
  38.     var hasTitleIconsRun = false; // Variable pour suivre si initTitle_gardiennage_icons a déjà été exécutée.
  39.     var hasTitleSectionRun = false; // Variable pour suivre si initTitle_gardiennage_section a déjà été exécutée.
  41.     // HERE FUNCTION TITLE_GARDIENNAGE_ABOUT
  42.     function initTitle_gardiennage_about() {
  43.         var typed_gardiennage_about = new Typed('.typed_gardiennage_about', {
  44.             strings: ['{{"Approche préventive"|trans}}<br><span>{{"anticiper pour assurer votre sécurité"|trans}}</span>'],
  45.             typeSpeed: 20,
  46.             startDelay: 250,
  47.             backDelay: 2500,
  48.             loop: false,
  49.             cursorChar: '<i class="fas fa-circle"></i>',
  50.         });
  51.     }
  55.     // HERE FUNCTION TITLE_GARDIENNAGE_ICONS
  56.     function initTitle_gardiennage_icons() {
  57.         var typed_gardiennage_icons = new Typed('.typed_gardiennage_icons', {
  58.             strings: ['{{"Nos équipes en action"|trans}}<br><span>{{"les différentes missions de nos agents"|trans}}</span>'],
  59.             typeSpeed: 25,
  60.             startDelay: 250,
  61.             backDelay: 2500,
  62.             loop: false,
  63.             cursorChar: '<i class="fas fa-circle"></i>',
  64.         });
  65.     }
  67.     // HERE FUNCTION TITLE_GARDIENNAGE_SECTION
  68.     function initTitle_gardiennage_section() {
  69.         var typed_gardiennage_section = new Typed('.typed_gardiennage_section', {
  70.             strings: ['{{"Planification Perfectionnée"|trans}} <br><span>{{"briefings rigoureux pour chaque mission"|trans}}</span>'],
  71.             typeSpeed: 25,
  72.             startDelay: 250,
  73.             backDelay: 2500,
  74.             loop: false,
  75.             cursorChar: '<i class="fas fa-circle"></i>',
  76.         });
  77.     }
  79.     // HERE EXECUTION OF SCRIPT @HOME
  80.     window.addEventListener('scroll', function() {
  81.         // HERE @VAR FOR element_gardiennage_about ELEMENT RECTANGLE
  82.         var element_gardiennage_about = document.querySelector('.element_gardiennage_about');
  83.         var rectangle_about = element_gardiennage_about.getBoundingClientRect();
  85.         if (!hasTitleAboutRun && rectangle_about.top < viewportHeight && rectangle_about.bottom > 0) {
  86.             initTitle_gardiennage_about();
  87.             hasTitleAboutRun = true; // Marquer que la fonction a été exécutée.
  88.         }
  90.         // HERE @VAR FOR element_gardiennage_icons ELEMENT RECTANGLE
  91.         var element_gardiennage_icons = document.querySelector('.element_gardiennage_icons');
  92.         var rectangle_icons = element_gardiennage_icons.getBoundingClientRect();
  94.         if (!hasTitleIconsRun && rectangle_icons.top < viewportHeight && rectangle_icons.bottom > 0) {
  95.             initTitle_gardiennage_icons();
  96.             hasTitleIconsRun = true; // Marquer que la fonction a été exécutée.
  97.         }
  99.         // HERE @VAR FOR element_gardiennage_section ELEMENT RECTANGLE
  100.         var element_gardiennage_section = document.querySelector('.element_gardiennage_section');
  101.         var rectangle_section = element_gardiennage_section.getBoundingClientRect();
  103.         if (!hasTitleSectionRun && rectangle_section.top < viewportHeight && rectangle_section.bottom > 0) {
  104.             initTitle_gardiennage_section();
  105.             hasTitleSectionRun = true; // Marquer que la fonction a été exécutée.
  106.         }
  107.     });
  108. </script>
  111. {% endblock %}