Ou trouver ce genre d animation

Signaler
Messages postés
2902
Date d'inscription
lundi 14 mars 2011
Statut
Membre
Dernière intervention
10 juin 2021
-
Messages postés
2902
Date d'inscription
lundi 14 mars 2011
Statut
Membre
Dernière intervention
10 juin 2021
-
bonjour a tous

j ai décidé de refaire l page d accueil de mon site
et je pense pencher vers un modèle comme ce site

https://www.federationpeche.fr/

mais je bloque avec le module chiffres clé

j ai trouve pas mal d animations en css mais aucune qui fait cet effet la

j ai fait une recherche sur google de flipInY animated

mais je ne trouve pas ce modèle bien précis

merci de l aide

11 réponses

Messages postés
38616
Date d'inscription
mercredi 5 novembre 2003
Statut
Modérateur
Dernière intervention
10 juin 2021
3 814
Salut,

Il faut regarder ans les propriété CSS de l'élément pour voir quels propriété ont été utilisé. Pour ça, rien de tel que les outils développeur.

Sous firefox, F12 ou ctrl+maj+K pour les activer. Tu cliques ensuite sur l’icône carré avec une flèche à gauche de "inspecteur" et tu sélectionne l’élément qui t’intéresse pour avoir les propriété CSS qui correspondent.
Messages postés
2902
Date d'inscription
lundi 14 mars 2011
Statut
Membre
Dernière intervention
10 juin 2021
138
bonsoir

merci pour la réponse

oui c est bien ce a quoi j ai pense

voila je pense avoir tout récupérer
mais cela ne fonctionne pas ...aucun effet ne se produit

<!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">

    <title>Hello, world!</title>
 <style>
 .TPL_CHIFFRESCLES {
    background: url(/include/css/GAB_FNPF/images/chiffres-cles.png) no-repeat top left;
        background-size: auto;
    background-size: cover;
    padding: 25px 0;
}

body {
    color: #737373;
    font-family: Arial, Helvetica, sans-serif;
    font-family: "Source Sans Pro";
    font-weight: normal;
    font-size: 100%;
}


.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, .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;
élément {
}
.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: 159p




.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: 159p
}
 </style>
  </head>
  <body>
    <h1>Hello, world!</h1>
 <div class="innerParagraphe">
<div id="listeContainer">
    <h2>Chiffres clés</h2>

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

            <div class="centre parent">
                            <div class="groupe animated flipInY actif" style="display: block;">
                    <span class="chiffre">40 000</span>
                    <span>BENEVOLES</span>
                </div>
                            <div class="groupe animated last" style="display: none;">
                    <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>

    <!-- 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>
Messages postés
38616
Date d'inscription
mercredi 5 novembre 2003
Statut
Modérateur
Dernière intervention
10 juin 2021
3 814
Alors, il manque déjà : <link rel="stylesheet" href="/include/css/GAB_FNPF/animate.css" media="screen">

Qui est la lib CSS avec les effets que l'on recherche.

On trouve la dernière version ici, avec les instructions pour l'utiliser.
https://animate.style/
Messages postés
2902
Date d'inscription
lundi 14 mars 2011
Statut
Membre
Dernière intervention
10 juin 2021
138
merci pour la reponse
je venais juste de l ajouter mais cela ne fonctionne toujours pas

mais je suis occupé a lire la documentation

mais malheureusement il n y a pas d exemple comme avec boostrap
Messages postés
38616
Date d'inscription
mercredi 5 novembre 2003
Statut
Modérateur
Dernière intervention
10 juin 2021
3 814
Si tu as ajouté cette ligne comme je l'ai mise, tu as aussi hébergé le fichier animate.css dans un dossier : /include/css/GAB_FNPF/animate.css

?
Messages postés
2902
Date d'inscription
lundi 14 mars 2011
Statut
Membre
Dernière intervention
10 juin 2021
138
non j avais oublie
je viens de l insérer
mais cela va mieux j ai des animations sur des exemples que j ai mis en plus dans la page
mais rien ne bouge dans le animated flipInY
Messages postés
38616
Date d'inscription
mercredi 5 novembre 2003
Statut
Modérateur
Dernière intervention
10 juin 2021
3 814
Plutôt que de copier coller des trucs sans vraiment comprendre ce que l'on fait, je conseillerait de faire une page de zéro, et d'essayer différentes animations en suivant bien les explications de la page de la lib.
Messages postés
2902
Date d'inscription
lundi 14 mars 2011
Statut
Membre
Dernière intervention
10 juin 2021
138
c est bien ce que je suis occupé a faire
mais on peux pas dire que les explications soient bien claire
Messages postés
38616
Date d'inscription
mercredi 5 novembre 2003
Statut
Modérateur
Dernière intervention
10 juin 2021
3 814
<head>
  <link
    rel="stylesheet"
    href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css"
  />
</head>
<body>

	<h1 class="animate__animated animate__flipInY" style="display: flex;flex-direction: column;  align-items: center;">PÊCHEURS	</h1>
                
        
            
</body>


Par contre, j'ai l'impression que c'est un autre module qui s'occupe du coté recto verso de l'animation.
Messages postés
2902
Date d'inscription
lundi 14 mars 2011
Statut
Membre
Dernière intervention
10 juin 2021
138
merci pour le code
c est gentil
mais en effet il manque le module recto verso

je suis occupé a chercher après aussi

je télécharge tous les scripts mais pour l instant rien ne se déclenche
Messages postés
2902
Date d'inscription
lundi 14 mars 2011
Statut
Membre
Dernière intervention
10 juin 2021
138
j ai donc fini par trouver
il y avait du javascript
Messages postés
38616
Date d'inscription
mercredi 5 novembre 2003
Statut
Modérateur
Dernière intervention
10 juin 2021
3 814
Ok, super, merci pour le retour. Par curiosité, c'est que lib JS qui gérait ça ?
Messages postés
2902
Date d'inscription
lundi 14 mars 2011
Statut
Membre
Dernière intervention
10 juin 2021
138
non il y avait aussi du css
Messages postés
2902
Date d'inscription
lundi 14 mars 2011
Statut
Membre
Dernière intervention
10 juin 2021
138
et pour l instant je cherche a nettoyer la javascript mais pas évident quand on n y connaît rien en javascript