templates/home/index.html.twig line 1

Open in your IDE?
  1. {% extends 'base.html.twig' %}
  3. {% block title %}SVS - {{"ACCUEIL"|trans}}{% endblock %}
  5. {% block body %}
  6.     <style>
  7.         {% include "home/home.css" %}
  8.     </style>
  10.     <!-- Element -->
  11.     <div class="element1">
  12.         {% include "home/1/refait.html.twig" %}
  13.     </div>
  15.     <!-- Element -->
  16.     <div class="appElement element_about">
  17.         {% include "home/apropos/index.html.twig" %}
  18.     </div>
  20.     <!-- Element -->
  21.     <div class="appElement element_services">
  22.         {% include "home/serviceSlider/index.html.twig" %}
  23.     </div>
  25.     <!-- Element -->
  26.     <div class="appElement element_cadreSVS">
  27.         {% include "home/cadreSVS/element.html.twig" %}
  28.     </div>
  30.     <!-- Element -->
  31.     <div class="appElement element_equipements">
  32.         {% include "home/equipements/index.html.twig" %}
  33.     </div>
  35.     <!-- Element -->
  36.     <div class="appElement element_contact">
  37.         {% include "home/location/index.html.twig" %}
  38.     </div>
  40.     <!-- EXECUT SCRIPT FOR HOME PAGE -->
  41.     <script>
  43.         
  44.         // HERE @VAR IMPORTANT FOR THIS SCRIPT
  45.         var viewportHeight = window.innerHeight; 
  46.         var hasTitleServicesRun = false; // Variable pour suivre si initTitle_about a déjà été exécutée.
  47.         var hasTitleAboutRun = false; // Variable pour suivre si initTitle_about a déjà été exécutée.
  48.         var hasTitleEquipementsRun = false; // Variable pour suivre si initTyped_equipements a déjà été exécutée.
  49.         var hasTitleContactRun = false; // Variable pour suivre si initTyped_equipements a déjà été exécutée.
  50.         var hasTitleCadreSVSRun = false; // Variable pour suivre si initTyped_cadreSVS a déjà été exécutée.
  51.         
  52.         // HERE FUNCTION TITLE_SERVICE_ELEMENT
  53.         function initTitle_services() {
  54.             var typed_services = new Typed('.typed_services', {
  55.                 strings: [  '{{"Sécurité personnalisée, services diversifiés"|trans}}<br><span>{{"explorez l\'éventail de nos services"|trans}}</span>',
  56.                         ],
  57.                 typeSpeed: 15,
  58.                 startDelay: 250,
  59.                 backDelay: 2500,
  60.                 loop: false,
  61.                 cursorChar: '<i class="fas fa-circle"></i>',
  62.             });
  63.         }
  65.         // HERE FUNCTION TITLE_ABOUT_ELEMENT
  66.         function initTitle_about() {
  67.             var typed_about = new Typed('.typed_about', {
  68.                 strings: ['{{"SVS bâtisseurs de confiance"|trans}}<br><span>{{"gardiens de l\'innovation"|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 FUNCTION TITLE_EQUIPEMENTS_ELEMENT
  78.         function initTyped_equipements() {
  79.             var typed_equipements = new Typed('.typed_equipements', {
  80.                 strings: [
  81.                     '{{"Sécurité renforcée par"|trans}}<br><span>{{"des équipements modernes et performants"|trans}}</span>',
  82.                 ],
  83.                 typeSpeed: 25,
  84.                 startDelay: 250,
  85.                 backDelay: 2500,
  86.                 loop: false,
  87.                 cursorChar: '<i class="fas fa-circle"></i>',
  88.             });
  89.         }
  91.         // Fonction pour le titre de l'élément element_cadreSVS
  92.         function initTyped_cadreSVS() {
  93.             var typed_cadreSVS = new Typed('.typed_cadreSVS', {
  94.                 strings: ['{{"Ligne de conduite"|trans}}<br><span>{{"en matiere de sécurité et de protéction"|trans}}</span>'],
  95.                 typeSpeed: 25,
  96.                 startDelay: 250,
  97.                 backDelay: 2500,
  98.                 loop: false,
  99.                 cursorChar: '<i class="fas fa-circle"></i>',
  100.             });
  101.         }
  103.         // HERE FUNCTION TITLE_CONTACT_ELEMENT
  104.         function initTyped_contact() {
  105.             var typed_contact = new Typed('.typed_contact', {
  106.                 strings: ['{{"Nos localisations"|trans}}<br><span>{{"Où nous trouver"|trans}}...</span>'],
  107.                 typeSpeed: 25,
  108.                 startDelay: 250,
  109.                 backDelay: 2500,
  110.                 loop: false,
  111.                 cursorChar: '<i class="fas fa-circle"></i>',
  112.             });
  113.         }
  115.         // HERE EXECUTION OF SCRIPT @HOME
  116.         window.addEventListener('scroll', function() 
  117.         {
  118.             // HERE @VAR FOR SERVICE ELEMENT RECTANGLE
  119.             var element_services = document.querySelector('.element_services');
  120.             var rectangle_services = element_services.getBoundingClientRect();
  122.             if (!hasTitleServicesRun && rectangle_services.top < viewportHeight && rectangle_services.bottom > 0) {
  123.                 initTitle_services();
  124.                 hasTitleServicesRun = true; // Marquer que la fonction a été exécutée.
  125.             }
  127.             // HERE @VAR FOR ABOUT ELEMENT RECTANGLE
  128.             var element_about = document.querySelector('.element_about');
  129.             var rectangle_about = element_about.getBoundingClientRect();
  131.             if (!hasTitleAboutRun && rectangle_about.top < viewportHeight && rectangle_about.bottom > 0) {
  132.                 initTitle_about();
  133.                 hasTitleAboutRun = true; // Marquer que la fonction a été exécutée.
  134.             }
  136.             // HERE @VAR FOR EQUIPEMENTS ELEMENT RECTANGLE
  137.             var element_equipements = document.querySelector('.element_equipements');
  138.             var rectangle_equipements = element_equipements.getBoundingClientRect();
  140.             if (!hasTitleEquipementsRun && rectangle_equipements.top < viewportHeight && rectangle_equipements.bottom > 0) {
  141.                 initTyped_equipements();
  142.                 hasTitleEquipementsRun = true; // Marquer que la fonction a été exécutée.
  143.             }
  145.             // Ici, vous pouvez ajouter la logique pour l'élément element_cadreSVS
  146.             var element_cadreSVS = document.querySelector('.element_cadreSVS');
  147.             var rectangle_cadreSVS = element_cadreSVS.getBoundingClientRect();
  149.             if (!hasTitleCadreSVSRun && rectangle_cadreSVS.top < viewportHeight && rectangle_cadreSVS.bottom > 0) {
  150.                 initTyped_cadreSVS();
  151.                 hasTitleCadreSVSRun = true; // Marquer que la fonction a été exécutée.
  152.             }
  154.             // HERE @VAR FOR CONTACT ELEMENT RECTANGLE
  155.             var element_contact   = document.querySelector('.element_contact');
  156.             var rectangle_contact = element_contact.getBoundingClientRect();
  158.             if (!hasTitleContactRun && rectangle_contact.top < viewportHeight && rectangle_contact.bottom > 0) {
  159.                 initTyped_contact();
  160.                 hasTitleContactRun = true; // Marquer que la fonction a été exécutée.
  161.             }
  162.         });
  163.     </script>
  165. {% endblock %}