templates/section/statistiques.html.twig line 1

Open in your IDE?
  2. <section class="elementor-section elementor-top-section elementor-element elementor-element-31c5a00 elementor-section-boxed elementor-section-height-default elementor-section-height-default wpr-particle-no wpr-jarallax-no wpr-parallax-no wpr-sticky-section-no" data-id="31c5a00" data-element_type="section">
  3.    <div class="elementor-container elementor-column-gap-no">
  4.       <div class="elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-b12bddc" data-id="b12bddc" data-element_type="column">
  5.          <div class="elementor-widget-wrap elementor-element-populated">
  6.             <div class="elementor-element elementor-element-431f1c5 elementor-widget elementor-widget-gimont_elementor_counter_list" data-id="431f1c5" data-element_type="widget" data-widget_type="gimont_elementor_counter_list.default">
  7.                <div class="elementor-widget-container">
  8.                   <div class="ova-counter-list-wrapper template_1 four_column">
  9.                      <div class="ova-counter-list" data-count="37000">
  10.                         <div class="icon-wrapper">
  11.                            <div class="icon">
  12.                               <i class="flaticonnew2- flaticon-new2-self-employed"></i>
  13.                            </div>
  14.                         </div>
  15.                         <div class="odometer-wrapper">
  16.                            <span id="participant" style="font-weight: bold; font-size: 40px; color: #051a53;">0</span>
  17.                            <span class="suffix" style="font-weight: bolder;">+</span>
  18.                         </div>
  19.                         <h3 class="title" style="font-family: arial !important;">Participants</h3>
  20.                      </div>
  21.                      <div class="ova-counter-list" data-count="27000">
  22.                         <div class="icon-wrapper">
  23.                            <div class="icon">
  24.                               <i class="fas fa-award"></i>
  25.                            </div>
  26.                         </div>
  27.                         <div class="odometer-wrapper">
  28.                            <span id="certificat" style="font-weight: bold; font-size: 40px; color: #051a53;">0</span>
  29.                            <span class="suffix" style="font-weight: bolder;">+</span>
  30.                         </div>
  31.                         <h3 class="title" style="font-family: arial !important;">Certificats</h3>
  32.                      </div>
  33.                      <div class="ova-counter-list" data-count="10">
  34.                         <div class="icon-wrapper">
  35.                            <div class="icon">
  36.                               <i class="fas fa-clock"></i>
  37.                            </div>
  38.                         </div>
  39.                         <div class="odometer-wrapper">
  40.                            <span id="experience" style="font-weight: bold; font-size: 40px; color: #051a53;">0</span>
  41.                            <span class="suffix" style="font-weight: bolder;">ans</span>
  42.                         </div>
  43.                         <h3 class="title" style="font-family: arial !important;">Année d’expérience</h3>
  44.                      </div>
  45.                      <div class="ova-counter-list" data-count="3000">
  46.                         <div class="icon-wrapper">
  47.                            <div class="icon">
  48.                               <i class="fas fa-video"></i>
  49.                            </div>
  50.                         </div>
  51.                         <div class="odometer-wrapper">
  52.                             <span id="formation" style="font-weight: bold; font-size: 40px; color: #051a53;">0</span>
  53.                             <span class="suffix" style="font-weight: bolder;">+</span>
  54.                         </div>
  55.                         <h3 class="title" style="font-family: arial !important;">Formation en ligne</h3>
  56.                      </div>
  57.                   </div>
  58.                </div>
  59.             </div>
  60.          </div>
  61.       </div>
  62.    </div>
  63. </section>
  65. <section id="stats" class="py-5" style="background: #f8f9fa;">
  66.     <div class="container">
  67.         <div class="row text-center align-items-center">
  71.         </div>
  72.     </div>
  73. </section>
  76. <script>
  77. document.addEventListener("DOMContentLoaded", function () {
  79.     function animateCounter(id, target, duration = 2000) {
  80.         const el = document.getElementById(id);
  81.         let start = 0;
  82.         const step = Math.ceil(target / (duration / 16));
  84.         function update() {
  85.             start += step;
  86.             if (start >= target) {
  87.                 el.textContent = target;
  88.             } else {
  89.                 el.textContent = start;
  90.                 requestAnimationFrame(update);
  91.             }
  92.         }
  93.         update();
  94.     }
  96.     const observer = new IntersectionObserver(entries => {
  97.         entries.forEach(entry => {
  98.             if (entry.isIntersecting) {
  99.                 animateCounter("participant", 37000);
  100.                 animateCounter("certificat", 27000);
  101.                 animateCounter("experience", 10);
  102.                 animateCounter("formation", 3000);
  103.                 observer.disconnect();
  104.             }
  105.         });
  106.     }, { threshold: 0.4 });
  108.     observer.observe(document.getElementById("stats"));
  109. });
  110. </script>