templates/transportdefond/index.html.twig line 1

Open in your IDE?
  1. {% extends 'base.html.twig' %}
  3. {% block title %}SVS - {{"TRANSPORT DE FOND"|trans}}{% endblock %}
  5. {% block body %}
  8.     <style>
  9.         {% include "transportdefond/transportdefond.css" %}
  10.     </style>
  12.     <!-- Element -->
  13.     <div class="element1">
  14.         {% include "transportdefond/4/refait.html.twig" %}
  15.     </div>
  17.     <!-- Element -->
  18.     <div class="appElement element2 element_transportdefond_about">
  19.         {% include "transportdefond/apropostransportdefond/index.html.twig" %}
  20.     </div>
  22.     <!-- Element -->
  23.     <div class="appElement element3 element_transportdefond_icons">
  24.         {% include "transportdefond/serviceIcons/index.html.twig" %}
  25.     </div>
  27.     <!-- Element -->
  28.     <div class="appElement element4 element_transportdefond_section">
  29.         <div class="position1"></div>
  30.         {% include "transportdefond/cadreSVS/element.html.twig" %}
  31.     </div>
  34. <!-- EXECUTE SCRIPT FOR TRANSPORTDEFOND PAGE -->
  35. <script>
  37.     // HERE @VAR IMPORTANT FOR THIS SCRIPT
  38.     var viewportHeight = window.innerHeight;
  39.     var hasTitleAboutRun = false; // Variable pour suivre si initTitle_transportdefond_about a déjà été exécutée.
  40.     var hasTitleIconsRun = false; // Variable pour suivre si initTitle_transportdefond_icons a déjà été exécutée.
  41.     var hasTitleSectionRun = false; // Variable pour suivre si initTitle_transportdefond_section a déjà été exécutée.
  43.     // HERE FUNCTION TITLE_transportdefond_ABOUT
  44.     function initTitle_transportdefond_about() {
  45.         var typed_transportdefond_about = new Typed('.typed_transportdefond_about', {
  46.             strings: ['{{"Transport sécurisée,"|trans}}<br><span>{{"garentir l\'intégrité des biens en mouvement"|trans}}</span>'],
  47.             typeSpeed: 20,
  48.             startDelay: 250,
  49.             backDelay: 2500,
  50.             loop: false,
  51.             cursorChar: '<i class="fas fa-circle"></i>',
  52.         });
  53.     }
  55.     // HERE FUNCTION TITLE_transportdefond_ICONS
  56.     function initTitle_transportdefond_icons() {
  57.         var typed_transportdefond_icons = new Typed('.typed_transportdefond_icons', {
  58.             strings: ['{{"Sécurité sans compromis"|trans}}<br><span>{{"l\'excellence de la planification à la satisfaction"|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_transportdefond_SECTION
  68.     function initTitle_transportdefond_section() {
  69.         var typed_transportdefond_section = new Typed('.typed_transportdefond_section', {
  70.             strings: ['{{"Sécurité et Confidentialité"|trans}}<br><span>{{"un duo indispensable"|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_transportdefond_about ELEMENT RECTANGLE
  82.         var element_transportdefond_about = document.querySelector('.element_transportdefond_about');
  83.         var rectangle_about = element_transportdefond_about.getBoundingClientRect();
  85.         if (!hasTitleAboutRun && rectangle_about.top < viewportHeight && rectangle_about.bottom > 0) {
  86.             initTitle_transportdefond_about();
  87.             hasTitleAboutRun = true; // Marquer que la fonction a été exécutée.
  88.         }
  90.         // HERE @VAR FOR element_transportdefond_icons ELEMENT RECTANGLE
  91.         var element_transportdefond_icons = document.querySelector('.element_transportdefond_icons');
  92.         var rectangle_icons = element_transportdefond_icons.getBoundingClientRect();
  94.         if (!hasTitleIconsRun && rectangle_icons.top < viewportHeight && rectangle_icons.bottom > 0) {
  95.             initTitle_transportdefond_icons();
  96.             hasTitleIconsRun = true; // Marquer que la fonction a été exécutée.
  97.         }
  99.         // HERE @VAR FOR element_transportdefond_section ELEMENT RECTANGLE
  100.         var element_transportdefond_section = document.querySelector('.element_transportdefond_section');
  101.         var rectangle_section = element_transportdefond_section.getBoundingClientRect();
  103.         if (!hasTitleSectionRun && rectangle_section.top < viewportHeight && rectangle_section.bottom > 0) {
  104.             initTitle_transportdefond_section();
  105.             hasTitleSectionRun = true; // Marquer que la fonction a été exécutée.
  106.         }
  107.     });
  108. </script>
  110. {% endblock %}