Ou trouver ce genre d animation

flexi2202 Messages postés 3640 Date d'inscription Statut Membre Dernière intervention -
flexi2202 Messages postés 3640 Date d'inscription Statut Membre Dernière intervention - 9 juin 2021 à 16:28

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

Afficher la suite

11 réponses

Réponse 1 / 11
Pierrecastor Messages postés 10830 Date d'inscription Statut Modérateur Dernière intervention 4 215

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.
0

flexi2202 Messages postés 3640 Date d'inscription Statut Membre Dernière intervention 190

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>

Réponse 3 / 11
Pierrecastor Messages postés 10830 Date d'inscription Statut Modérateur Dernière intervention 4 215

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/
0
Réponse 4 / 11
flexi2202 Messages postés 3640 Date d'inscription Statut Membre Dernière intervention 190

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
0
1. Pierrecastor Messages postés 10830 Date d'inscription Statut Modérateur Dernière intervention 4 215
  
  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
  
  ?
  
  0
Vous n’avez pas trouvé la réponse que vous recherchez ?
Posez votre question
Réponse 5 / 11
flexi2202 Messages postés 3640 Date d'inscription Statut Membre Dernière intervention 190

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
0
Réponse 6 / 11
Pierrecastor Messages postés 10830 Date d'inscription Statut Modérateur Dernière intervention 4 215

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.
0
Réponse 7 / 11
flexi2202 Messages postés 3640 Date d'inscription Statut Membre Dernière intervention 190

c est bien ce que je suis occupé a faire
mais on peux pas dire que les explications soient bien claire
0
1. Pierrecastor Messages postés 10830 Date d'inscription Statut Modérateur Dernière intervention 4 215
  
  <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.
  
  0
Réponse 8 / 11
flexi2202 Messages postés 3640 Date d'inscription Statut Membre Dernière intervention 190

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
0
Réponse 9 / 11
flexi2202 Messages postés 3640 Date d'inscription Statut Membre Dernière intervention 190

j ai donc fini par trouver
il y avait du javascript
0
1. Pierrecastor Messages postés 10830 Date d'inscription Statut Modérateur Dernière intervention 4 215
  
  Ok, super, merci pour le retour. Par curiosité, c'est que lib JS qui gérait ça ?
  
  0
Réponse 10 / 11
flexi2202 Messages postés 3640 Date d'inscription Statut Membre Dernière intervention 190

non il y avait aussi du css
0
Réponse 11 / 11
flexi2202 Messages postés 3640 Date d'inscription Statut Membre Dernière intervention 190

et pour l instant je cherche a nettoyer la javascript mais pas évident quand on n y connaît rien en javascript
0

Ou trouver ce genre d animation

11 réponses

Discussions similaires

Newsletters