Besoin d aide pour purifier un code

Signaler
Messages postés
3020
Date d'inscription
lundi 14 mars 2011
Statut
Membre
Dernière intervention
24 juillet 2021
-
bonjour a tous
j ai trouve un module très intéressant sur un site
et ne connaissant rien ou que très très peu en javascript
je souhaiterais avoir de l aide pour ne garder que le strict minimum au niveau du javascript merci

voici le site sur lequel le module fonctionne
c est celui des chiffres clé

voici le code

<!doctype html>
<html lang="en">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css" integrity="sha384-B0vP5xmATw1+K9KRQjQERJvTumQW0nPEzvF6L/Z6nronJ3oUOFUFpCjEUQouq2+l" crossorigin="anonymous">
 <link  rel="stylesheet"    href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css"  />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<style>
body {
 margin: 0;
}
@media (max-width: 640px) {
 .mobile_hidden {
  display: none !important;
 }
}
.clearfix::after {
 clear: both;
}
.paragraphe .innerParagraphe::before,
.paragraphe .innerParagraphe::after {
 content: ".";
 display: block;
 height: 0;
 overflow: hidden;
}
.paragraphe .innerParagraphe::after {
 clear: both;
}
#corps {
 clear: both;
 margin: 0 auto;
 padding: 20px 0;
 max-width: 1200px;
 width: 100%;
 zoom: 1;
}
body {
 background: #fff;
 color: #737373;
 font-family: Arial, Helvetica, sans-serif;
 font-family: "Source Sans Pro";
 font-weight: normal;
 font-size: 100%;
 margin: 0;
 padding: 0;
}
.paragraphe {
 clear: both;
 margin: 0 0 30px;
}
.TPL_CHIFFRESCLES {
 background: url(https://www.federationpeche.fr//include/css/GAB_FNPF/images/chiffres-cles.png) no-repeat top left;
 background-size: cover;
 padding: 25px 0;
}
.TPL_CHIFFRESCLES h2 {
 color: #fff;
 text-transform: uppercase;
 text-align: center;
 font-size: 1.5em;
 font-family: "msl";
 font-weight: normal;
}
.TPL_CHIFFRESCLES .gauche,
.TPL_CHIFFRESCLES .centre,
.TPL_CHIFFRESCLES .droite {
 display: block;
 text-align: center;
 float: left;
 width: 33.333333333333%;
 box-sizing: border-box;
 padding: 15px;
 position: relative;
 height: 159px;
}
.TPL_CHIFFRESCLES .gauche .groupe,
.TPL_CHIFFRESCLES .centre .groupe,
.TPL_CHIFFRESCLES .droite .groupe {
 position: absolute;
 top: 10%;
 left: 0;
 right: 0;
 margin: 0 auto;
 width: calc(100% - 100px);
 padding: 40px;
 border-radius: 5px;
 box-sizing: border-box;
 display: block;
 background: #fff;
}
.TPL_CHIFFRESCLES .gauche .groupe .chiffre,
.TPL_CHIFFRESCLES .centre .groupe .chiffre,
.TPL_CHIFFRESCLES .droite .groupe .chiffre {
 color: #434dab;
 display: block;
 font-size: 1.375em;
 font-family: "Montserrat";
 font-weight: bold;
}
@media screen and (max-width: 1180px) {
 #corps {
  padding: 20px;
  box-sizing: border-box;
 }
}
@media screen and (max-width: 480px) {
 #diaporamaThumbs2 {
  display: none;
 }
}

@media screen and (max-width: 1024px) {
 .TPL_CHIFFRESCLES .gauche,
 .TPL_CHIFFRESCLES .centre,
 .TPL_CHIFFRESCLES .droite {
  padding: 20px;
 }
 .TPL_CHIFFRESCLES .gauche .groupe,
 .TPL_CHIFFRESCLES .centre .groupe,
 .TPL_CHIFFRESCLES .droite .groupe {
  padding: 20px;
 }
}
@media screen and (max-width: 767px) {
 body {
  overflow-x: hidden;
  cursor: pointer;
 }
 .TPL_CHIFFRESCLES .gauche,
 .TPL_CHIFFRESCLES .centre,
 .TPL_CHIFFRESCLES .droite {
  padding: 20px 40px;
  width: 100%;
  height: 130px;
 }
}
</style>


<script>
var fnpf = {
    mobile: 767,
    win: $(window),

    init: function(){

        fnpf.scrollTopInit();
        fnpf.setRotationNb();

        fnpf.win.bind('load resize orientationchange', function (){
            fnpf.rwdFooter();
            fnpf.rwdHeader();
         fnpf.rwdLink();
        });

        $('#btnMenu').click(function (e) {
            e.preventDefault();
            $('#wrap').toggleClass('visible');
        });

        $('body').on('click','#cboxClose',function(){
          $('#diaporamaMain4 .owl-stage').css('display','none');
          setTimeout(function(){
            $('#diaporamaMain4 .owl-stage').css('display','block');
           },400);
        });

        fnpf.styleListe();

        $('.innerParagraphe table').wrap('<div style="overflow-x: auto;width: 100%;"></div>');
    },


    /* ===================================================================
     * MODIFICATION DES ELEMENTS RESPONSIVE
     * =================================================================*/
    rwdFooter: function(){
        var bloc = $("#bandeauBas .droite"),
            elem = $('.titreFooter');

        fnpf.win.width() <= fnpf.mobile ? bloc.prepend(elem) : bloc.append(elem);
    },
  


    /* ===================================================================
     * GESTION DES ONGLETS DU BANDEAU HAUT
     * =================================================================*/
   menuGalactique: function (){
    var menu  = $('.menuGalactique'),
     barre = $('.sousBarre'),
     delay = 300;

       menu.find('ul > li > a').each(function(i, element) {
           var link = $(element),
               idGal = link.attr('data-gal'),
               notidGal = barre.find('div:not(' + idGal + ')');

           link.click(function(event) {
            for (var i = 0 ; i < notidGal.length ; i++) {
                      $('#' + notidGal[i].id).slideUp(delay);
                  };
                  barre.find(idGal).slideToggle(delay);
           });
       });
   },
    scrollTopInit : function(){
        $("#bandeauBas").before('<div class="scrollTop"></div>');

        $('.scrollTop').click(function(){
            $("html, body").animate({ scrollTop: 0 }, 500);
            return false;
        });

        $(document).scroll(function (){
            //stick nav to top of page
            var y = $(this).scrollTop();
            if (y > $(window).height()) {
                $('.scrollTop').addClass('sticky').fadeIn(450);
            } else {
                $('.scrollTop').removeClass('sticky').fadeOut(450);
            }
        });
    },
    setRotationNb : function(){
        $(".TPL_CHIFFRESCLES #listeContainer").find("> div").each(function(){
            var current = this;

            $(current).find("> .groupe:not(:first-child)").hide();
            $(current).find("> .groupe:first-child").addClass('actif');

            if($(current).find("> .groupe").length > 1) {
                $(current).addClass("parent")
                $(current).find("> .groupe").last().addClass("last");

                setInterval(function(){
                    if(!$(current).find("> .actif").hasClass("last")) {
                        $(current).find("> .actif").removeClass('actif flipOutY').addClass('flipInY').hide().removeClass('actif flipOutY')
                                  .next(".groupe").show().addClass('actif flipInY');
                    } else {
                        $(current).find("> .actif").removeClass('flipInY').addClass('flipOutY').hide().removeClass('actif flipOutY')
                                  .parent().find("> .groupe:first-child").show().addClass('actif flipInY');
                    }
                }, 4750);
            }
        });
    },
 
}

$(document).ready(fnpf.init);
</script>

</head>
 <body >
  <div id="corps" class="clearfix">
        <div id="contenu">
<div id="par9" class="paragraphe tpl TPL_CHIFFRESCLES"><div class="innerParagraphe">
<div id="listeContainer">
    <h2>Chiffres clés</h2>

    <div class="gauche parent">
                    <div class="groupe animated flipInY" style="display: none;">
                <span class="chiffre">1 528 452</span>
                <span>PÊCHEURS</span>
            </div>
                    <div class="groupe animated last actif flipInY" style="display: block;">
                <span class="chiffre">3 700</span>
                <span>ASSOCIATIONS DE PÊCHE</span>
            </div>
            </div>

            <div class="centre parent">
                            <div class="groupe animated flipInY" style="display: none;">
                    <span class="chiffre">40 000</span>
                    <span>BENEVOLES</span>
                </div>
                            <div class="groupe animated last actif flipInY" style="display: block;">
                    <span class="chiffre">500 000</span>
                    <span>KM DE COURS D'EAU</span>
                </div>
                    </div>
     <div class="droite">
                    <div class="groupe animated actif">
                <span class="chiffre">2 milliards d'euros</span>
                <span>D'IMPACT ECONOMIQUE</span>
            </div>
            </div>
</div>
</div>
</div>
</div>  
  </div>


<    <!-- Optional JavaScript; choose one of the two! -->

    <!-- Option 1: jQuery and Bootstrap Bundle (includes Popper) -->
    <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-Piv4xVNRyMGpqkS2by6br4gNJ7DXjqk09RmUpJ8jgGtD7zP9yug3goQfGII0yAns" crossorigin="anonymous"></script>

    <!-- Option 2: Separate Popper and Bootstrap JS -->
    <!--
    <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/js/bootstrap.min.js" integrity="sha384-+YQ4JLhjyBLPDQt//I+STsc9iw4uQqACwlvpslubQzn4u2UU2UFM80nGisd026JF" crossorigin="anonymous"></script>
    -->
  </body>
</html>