templates/formation/index.html.twig line 1

Open in your IDE?
  1. {% extends 'base.html.twig' %}
  3. {% block title %}SVS - FORMATION{% endblock %}
  5. {% block body %}
  7. <!-- Element -->
  8. <style>
  9.     {% include "formation/formation.css" %}
  10. </style>
  12. <div class="element1">
  13.     {% include "formation/6/refait.html.twig" %}
  14. </div>
  16. <!-- Element -->
  17. <div class="appElement element2 element_formation_about">
  18.     {% include "formation/aproposformation/index.html.twig" %}
  19. </div>
  21. <!-- Element -->
  22. <div class="appElement element3 element_formation_icons">
  23.     {% include "formation/serviceIcons/index.html.twig" %}
  24. </div>
  26. <!-- Element -->
  27. <div class="appElement element4 element_formation_section">
  28.     <div class="position1"></div>
  29.     {% include "formation/cadreSVS/element.html.twig" %}
  30. </div>
  32. <!-- EXECUTE SCRIPT FOR FORMATION PAGE -->
  33. <script>
  34.     {% include "formation/formation.js" %}
  35.     
  36.     // HERE @VAR IMPORTANT FOR THIS SCRIPT
  37.     var viewportHeight = window.innerHeight;
  38.     var hasTitleAboutRun = false; // Variable pour suivre si initTitle_formation_about a déjà été exécutée.
  39.     var hasTitleIconsRun = false; // Variable pour suivre si initTitle_formation_icons a déjà été exécutée.
  40.     var hasTitleSectionRun = false; // Variable pour suivre si initTitle_formation_section a déjà été exécutée.
  42.     // HERE FUNCTION TITLE_formation_ABOUT
  43.     function initTitle_formation_about() {
  44.         var typed_formation_about = new Typed('.typed_formation_about', {
  45.             strings: ['{{"Formations Stratégiques"|trans}}<br><span>{{"Expertise, Réactivité et Sécurité Renforcées"|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_formation_ICONS
  55.     function initTitle_formation_icons() {
  56.         var typed_formation_icons = new Typed('.typed_formation_icons', {
  57.             strings: ['{{"Sécurité 360° formation essentielle"|trans}}<br><span> {{"pour une Prévention Efficace"|trans}}</span>'],
  58.             typeSpeed: 25,
  59.             startDelay: 250,
  60.             backDelay: 2500,
  61.             loop: false,
  62.             cursorChar: '<i class="fas fa-circle"></i>',
  63.         });
  64.     }
  66.     // HERE FUNCTION TITLE_formation_SECTION
  67.     function initTitle_formation_section() {
  68.         var typed_formation_section = new Typed('.typed_formation_section', {
  69.             strings: ['{{"SVS et SecurElite unissent"|trans}}<br><span>{{"leurs forces pour vous protéger"|trans}}</span>'],
  70.             typeSpeed: 25,
  71.             startDelay: 250,
  72.             backDelay: 2500,
  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_formation_about ELEMENT RECTANGLE
  81.         var element_formation_about = document.querySelector('.element_formation_about');
  82.         var rectangle_about = element_formation_about.getBoundingClientRect();
  84.         if (!hasTitleAboutRun && rectangle_about.top < viewportHeight && rectangle_about.bottom > 0) {
  85.             initTitle_formation_about();
  86.             hasTitleAboutRun = true; // Marquer que la fonction a été exécutée.
  87.         }
  89.         // HERE @VAR FOR element_formation_icons ELEMENT RECTANGLE
  90.         var element_formation_icons = document.querySelector('.element_formation_icons');
  91.         var rectangle_icons = element_formation_icons.getBoundingClientRect();
  93.         if (!hasTitleIconsRun && rectangle_icons.top < viewportHeight && rectangle_icons.bottom > 0) {
  94.             initTitle_formation_icons();
  95.             hasTitleIconsRun = true; // Marquer que la fonction a été exécutée.
  96.         }
  98.         // HERE @VAR FOR element_formation_section ELEMENT RECTANGLE
  99.         var element_formation_section = document.querySelector('.element_formation_section');
  100.         var rectangle_section = element_formation_section.getBoundingClientRect();
  102.         if (!hasTitleSectionRun && rectangle_section.top < viewportHeight && rectangle_section.bottom > 0) {
  103.             initTitle_formation_section();
  104.             hasTitleSectionRun = true; // Marquer que la fonction a été exécutée.
  105.         }
  106.     });
  107. </script>
  111. {% endblock %}