templates/produitssensible/index.html.twig line 1

Open in your IDE?
  1. {% extends 'base.html.twig' %}
  3. {% block title %}SVS - {{"PRODUITS SENSIBLES"|trans}}{% endblock %}
  5. {% block body %}   
  7. <style>
  8.     {% include "produitssensible/produitssensible.css" %}
  9. </style>
  12. <!-- Element -->
  13. <div class="element1">
  14.     {% include "produitssensible/5/refait.html.twig" %}
  15. </div>
  17. <!-- Element -->
  18. <div class="appElement element2 element_produitssensible_about">
  19.     {% include "produitssensible/aproposproduitssensible/index.html.twig" %}
  20. </div>
  22. <!-- Element -->
  23. <div class="appElement element3 element_produitssensible_icons">
  24.     {% include "produitssensible/serviceIcons/index.html.twig" %}
  25. </div>
  27. <!-- Element -->
  28. <div class="appElement element4 element_produitssensible_section">
  29.     <div class="position1"></div>
  30.     {% include "produitssensible/cadreSVS/element.html.twig" %}
  31. </div>
  33. <!-- EXECUTE SCRIPT FOR PRODUITSSENSIBLE PAGE -->
  34. <script>
  35.     // HERE @VAR IMPORTANT FOR THIS SCRIPT
  36.     var viewportHeight = window.innerHeight;
  37.     var hasTitleAboutRun = false; // Variable pour suivre si initTitle_produitssensible_about a déjà été exécutée.
  38.     var hasTitleIconsRun = false; // Variable pour suivre si initTitle_produitssensible_icons a déjà été exécutée.
  39.     var hasTitleSectionRun = false; // Variable pour suivre si initTitle_produitssensible_section a déjà été exécutée.
  41.     // HERE FUNCTION TITLE_produitssensible_ABOUT
  42.     function initTitle_produitssensible_about() {
  43.         var typed_produitssensible_about = new Typed('.typed_produitssensible_about', {
  44.             strings: ['{{"Sentinelles du convoyage"|trans}}<br><span>{{"garants de la sûreté intégrale"|trans}}</span>'],
  45.             typeSpeed: 20,
  46.             startDelay: 250,
  47.             backDelay: 2500,
  48.             loop: false,
  49.             cursorChar: '<i class="fas fa-circle"></i>',
  50.         });
  51.     }
  53.     // HERE FUNCTION TITLE_produitssensible_ICONS
  54.     function initTitle_produitssensible_icons() {
  55.         var typed_produitssensible_icons = new Typed('.typed_produitssensible_icons', {
  56.             strings: ['{{"Convoi Protégé"|trans}}<br><span>{{"préparation pour un trajet sans risque"|trans}}</span>'],
  57.             typeSpeed: 25,
  58.             startDelay: 250,
  59.             backDelay: 2500,
  60.             loop: false,
  61.             cursorChar: '<i class="fas fa-circle"></i>',
  62.         });
  63.     }
  65.     // HERE FUNCTION TITLE_produitssensible_SECTION
  66.     function initTitle_produitssensible_section() {
  67.         var typed_produitssensible_section = new Typed('.typed_produitssensible_section', {
  68.             strings: ['{{"Une connaissance approfondie de la réglementation"|trans}}<br><span>{{"pour garantir la sécurité du transport des produits sensibles"|trans}}.</span>'],
  69.             typeSpeed: 25,
  70.             startDelay: 250,
  71.             backDelay: 2500,
  72.             loop: false,
  73.             cursorChar: '<i class="fas fa-circle"></i>',
  74.         });
  75.     }
  77.     // HERE EXECUTION OF SCRIPT @HOME
  78.     window.addEventListener('scroll', function() {
  79.         // HERE @VAR FOR element_produitssensible_about ELEMENT RECTANGLE
  80.         var element_produitssensible_about = document.querySelector('.element_produitssensible_about');
  81.         var rectangle_about = element_produitssensible_about.getBoundingClientRect();
  83.         if (!hasTitleAboutRun && rectangle_about.top < viewportHeight && rectangle_about.bottom > 0) {
  84.             initTitle_produitssensible_about();
  85.             hasTitleAboutRun = true; // Marquer que la fonction a été exécutée.
  86.         }
  88.         // HERE @VAR FOR element_produitssensible_icons ELEMENT RECTANGLE
  89.         var element_produitssensible_icons = document.querySelector('.element_produitssensible_icons');
  90.         var rectangle_icons = element_produitssensible_icons.getBoundingClientRect();
  92.         if (!hasTitleIconsRun && rectangle_icons.top < viewportHeight && rectangle_icons.bottom > 0) {
  93.             initTitle_produitssensible_icons();
  94.             hasTitleIconsRun = true; // Marquer que la fonction a été exécutée.
  95.         }
  97.         // HERE @VAR FOR element_produitssensible_section ELEMENT RECTANGLE
  98.         var element_produitssensible_section = document.querySelector('.element_produitssensible_section');
  99.         var rectangle_section = element_produitssensible_section.getBoundingClientRect();
  101.         if (!hasTitleSectionRun && rectangle_section.top < viewportHeight && rectangle_section.bottom > 0) {
  102.             initTitle_produitssensible_section();
  103.             hasTitleSectionRun = true; // Marquer que la fonction a été exécutée.
  104.         }
  105.     });
  106. </script>
  109. {% endblock %}