Ou trouver ce genre d animation

flexi2202 -

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 Modérateur
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 Auteur

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 Modérateur
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 Auteur
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 Modérateur
  
  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 ?

La communauté CCM répond en moyenne en moins de 2h.

Posez votre question
Réponse 5 / 11
flexi2202 Auteur
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 Modérateur
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

flexi2202 Auteur

c est bien ce que je suis occupé a faire
mais on peux pas dire que les explications soient bien claire

Pierrecastor Modérateur

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

Réponse 8 / 11
flexi2202 Auteur
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 Auteur
j ai donc fini par trouver
il y avait du javascript
0
1. Pierrecastor Modérateur
  
  Ok, super, merci pour le retour. Par curiosité, c'est que lib JS qui gérait ça ?
  
  0
Réponse 10 / 11
flexi2202 Auteur
non il y avait aussi du css
0
Réponse 11 / 11
flexi2202 Auteur
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