Le Blog

Le blog laboratoire de F.L.D. Studio
0

Oh my JS

Liste des micros fonctions : scripts JavaScript

Dév. interne :  ℱℒ

Micro Librairie Version Rôle Mot clé 
 avisPage.js 1.0 Affichage des avis avisPage
 bkgCycle.js 3.8 Slider ul-li textes et images bckCycle
 mnuMob.js 1.1 Menu pour mobile mnuMob
 revealEl.js 1.0 Affiche images sur evenement revealEl
 validForm.js 1.0 Validateur de formulaire intégrée dans formulaire

Fonctions JS

Dév. externe

Micro Librairie Version Rôle  
   
baguetteBox.min.js 1.8.2 LightBox 
inview.js 0.6.1 Evenements sur Elements entrent/sortent du ViewPort 
lazyload.js  Chargement des images 
pace.js  Barre progression affichage des ressources 
van11y-accessible-accordion-aria.js 1.0.5 Accordeon 

Google Map

https://maps.googleapis.com/maps/api/js?key=xxx

 avisPage.js

Option 1 : pas de paramétres : 

    avisPage();
Option 2 : Paramétre class CSS de transition sur groupe visible :
        avisPage({'effetCss':'slideFromBottom'});
    

bkgCycle.js : 

http://preprod.visicod.pro/test/bkgCycle/build/

Gestion des animations CSS pour la transition des images Toutes ces classes sont facultatives.
  • cssIntro : class CSS pour afficher la première image
  • cssIn : class CSS pour introduction des images ( image suivante )
  • cssOut : class CSS pour sortir les images ( image suivante )
  • cssInBack : class CSS pour introduction des images ( image précédante )
  • cssOutBack : class CSS pour sortir les images ( image précédante )
  • cssIn et cssOut flagCss = false (defaut) : synchroniser les classes = true : activer les classes l'une après l'autre
Au total 5 combinaisons de gestions des classes CSS - supBackground : boolean (false par défaut), indique si il faut supprimer le background après l'affichage de la première image. Si oui indiquer le nom de la div qui contient le background.

        var arrImages = [ 'img/imgFashion.jpg', .... ]; var sliderImg = new bkgCycle( { 'arrImages' : arrImages, // Array des images
        (si images en background/sinon texte seul) 'idContainer' : 'bkgContainer', // defaut : bkgContainer (ID) 'prefix' : 'bkg',
        // defaut : bkg ( prefix ID des li ) 'modeSlider' : true, // defaut : true (mode slider) / false 'tempo' : 8000, // defaut
        : 8000 (8 secondes) 'idLoader' : 'bkgLoader', // defaut : bkgLoader (ID) ou autre / false : pas de loader 'whenLoaderHide':'first',
        // defaut : 'first' sup loader après affichage première image 'last' : après chargement de la dernière 'supBackground' :
        false, // defaut : false (supprimer l'image du background après première image affichée) ou ID de la div contenant le background
        'cssActived' : 'bkgActived', // defaut : bkgActived ou 'nom classe CSS' pour transition sur l'image active 'cssIntro' : 'bkgCycleIntro',
        // defaut : false ou 'nom classe CSS' affichage première image 'cssIn' : 'bkgFadeIn', // defaut : false ou 'nom classe CSS'si
        enchainement d'animation (si différent de cssActived) 'cssOut' : 'bkgFadeOut', // defaut : false ou 'nom classe CSS' si enchainement
        d'animation (si différent de cssActived) 'cssInBack' : 'bkgFadeIn', // defaut : false ou 'nom classe CSS' sortie mode back
        (retour arriere) 'cssOutBack' : 'bkgFadeOut', // defaut : false ou 'nom classe CSS' sortie mode back (retour arriere) 'flagCss'
        : false, // defaut : false. Drapeau gestion des animations CSS glbCssIn et glbCssOut (synchrones par défaut) 
        'flagTouch'     : false,                // defaut : false. Drapeau de gestion du touch sur les écrans tactiles
'idPrev' : false,
        // defaut : false ou Id bouton navigation précédente (si navigation dans le slider) 'idNext' : false, // defaut: false ouId
        bouton navigation suivante (si navigation dans le slider) 'callBack' : function() { // defaut : false. Fonction anonyme de
        callBack exécutée à la fin des transitions ...code... } });
    

Gestion des animations CSS :

  • cssActived : Classe par défaut opacity de 0 à 1 (voir css li)
  • cssIntro : Classe pour affichage de la première image
  • cssIn : Classe pour introduire l'image ( image suivante )
  • cssOut : Classe pour sortir l'image ( image suivante )
  • cssInBack : Classe pour introduire l'image ( image précédante )
  • cssOutBack : Classe pour sortir l'image ( image précédante )
  • flagCss : Drapeau de gestion des animations cssIn et cssOut ( si existent)
  •  false : animation schyncronisées ( synchrones )
  •  true : animations enchainées ( asynchrones )

Dans le cas des animations asynchrone, si on veux supprimer l'effet de fondu, modifier le CSS du li, suprimmer opacity 0/1 et remplacer par display:none/block. Adapter classe .bkgCycle .bkgActived en conséquence (transition: opacity 0;)

Fonction de callBack : voir exemple avec affichage d'une légende pour la dernière image.

mnuMob.js

Option 1 : pas de paramétres : 

            mnuMob();
        
Option 2 : Paramétre effet CSS de transition sur groupe visible :
                    mnuMob({  idMnuMob : 'mnuMobBtn', /* Id du bouton menu : défaut : mnuMobBtn */  idMnuMobNav : 'mnuMobNav' /* Id du menu
                    déroulant : défaut : mnuMobNav */ });
                

revealEl.js

    var reveal = new revealEl( {   'idContainer': 'img-gal-container', // ID du container des images. img-gal-container    
    'cssHide' : 'cssHide', // Class pour cacher les images. cssHide     'cssShow' : 'foldFromLeft', // Class pour afficher les
    images.(paire) null     'cssShowOdd' : 'foldFromRight', // Class pour afficher les images.(impaire) null     'nbrEl' : 6,
    // Nbr d'image àafficher. 6     'uiMore' : 'uiMore' // ID du bouton/lien Interface : En voir Plus uiMore   } ); // Ecoute
    evement interface utilisateur bouton/lien : en voir plus document.getElementById('uiMore').addEventListener('click',function(e){
      e.preventDefault();   reveal.revealEl(); }); function f_redimensionnement() { var result = 6; if('matchMedia' in window)
    { // Détection if ( window.matchMedia('(max-width:600px)').matches ) { result = 4; } else if ( window.matchMedia('(max-width:400px)').matches
    ) { result = 5; } // Modification du paramétre de nombre d'élements à afficher reveal.nbrEl(result); } } // On lie l'événement
    resize à la fonction f_redimensionnement() window.addEventListener('resize', f_redimensionnement, false); // Premier test
    quand la page est chargée f_redimensionnement(); // Premier affichage reveal.revealEl();

Catégories: Conférence

Commentaires: Pas de commentaires

Envoyer un commentaire