Ou trouver ce genre d animation

Fermé

flexi2202 Messages postés 3795 Date d'inscription lundi 14 mars 2011 Statut Membre Dernière intervention 21 avril 2024 - Modifié le 7 juin 2021 à 22:26
flexi2202 Messages postés 3795 Date d'inscription lundi 14 mars 2011 Statut Membre Dernière intervention 21 avril 2024 - 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

A voir également:

Ou trouver ce genre d animation
Trouver adresse mac - Guide
Ou trouver mon adresse ip - Guide
Trouver un lieu avec coordonnées gps - Guide
Trouver une adresse avec un nom de famille gratuit ✓ - Forum Mobile
Presse papier iphone ou le trouver ✓ - Forum Windows 7

11 réponses

Réponse 1 / 11

Pierrecastor Messages postés 41466 Date d'inscription mercredi 5 novembre 2003 Statut Modérateur Dernière intervention 5 avril 2024 4 131
7 juin 2021 à 22:40

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.

Réponse 2 / 11

flexi2202 Messages postés 3795 Date d'inscription lundi 14 mars 2011 Statut Membre Dernière intervention 21 avril 2024 187
Modifié le 7 juin 2021 à 23:21

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 41466 Date d'inscription mercredi 5 novembre 2003 Statut Modérateur Dernière intervention 5 avril 2024 4 131
7 juin 2021 à 23:38

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/

Réponse 4 / 11

flexi2202 Messages postés 3795 Date d'inscription lundi 14 mars 2011 Statut Membre Dernière intervention 21 avril 2024 187
Modifié le 7 juin 2021 à 23:45

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

Pierrecastor Messages postés 41466 Date d'inscription mercredi 5 novembre 2003 Statut Modérateur Dernière intervention 5 avril 2024 4 131
7 juin 2021 à 23:52

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

?

Vous n’avez pas trouvé la réponse que vous recherchez ?

Posez votre question

Réponse 5 / 11

flexi2202 Messages postés 3795 Date d'inscription lundi 14 mars 2011 Statut Membre Dernière intervention 21 avril 2024 187
7 juin 2021 à 23:57

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

Réponse 6 / 11

Pierrecastor Messages postés 41466 Date d'inscription mercredi 5 novembre 2003 Statut Modérateur Dernière intervention 5 avril 2024 4 131
8 juin 2021 à 00:09

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.

Réponse 7 / 11

flexi2202 Messages postés 3795 Date d'inscription lundi 14 mars 2011 Statut Membre Dernière intervention 21 avril 2024 187
8 juin 2021 à 00:11

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

Pierrecastor Messages postés 41466 Date d'inscription mercredi 5 novembre 2003 Statut Modérateur Dernière intervention 5 avril 2024 4 131
Modifié le 8 juin 2021 à 00:38

<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 Messages postés 3795 Date d'inscription lundi 14 mars 2011 Statut Membre Dernière intervention 21 avril 2024 187
8 juin 2021 à 00:45

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

Réponse 9 / 11

flexi2202 Messages postés 3795 Date d'inscription lundi 14 mars 2011 Statut Membre Dernière intervention 21 avril 2024 187
8 juin 2021 à 09:40

j ai donc fini par trouver
il y avait du javascript

Pierrecastor Messages postés 41466 Date d'inscription mercredi 5 novembre 2003 Statut Modérateur Dernière intervention 5 avril 2024 4 131
8 juin 2021 à 14:54

Ok, super, merci pour le retour. Par curiosité, c'est que lib JS qui gérait ça ?

Réponse 10 / 11

flexi2202 Messages postés 3795 Date d'inscription lundi 14 mars 2011 Statut Membre Dernière intervention 21 avril 2024 187
9 juin 2021 à 16:27

non il y avait aussi du css

Réponse 11 / 11

flexi2202 Messages postés 3795 Date d'inscription lundi 14 mars 2011 Statut Membre Dernière intervention 21 avril 2024 187
9 juin 2021 à 16:28

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

Discussions similaires

Comment retrouver le presse papier sur iPhone ?

Trouver l'autorité de délivrance d'une carte d'identité

Comment trouver un numéro à partir du nom et prénom

Trouver un nom avec une adresse

Trouver propriétaire d'un numéro de téléphone gratuitement

Discussions similaires

Newsletters