Animation + hover bouton haut et bas

[Kaehlyth]

Détails techniques

Version du forum : phpBB2
Poste occupé : Administrateur
Navigateur(s) concerné(s) : Autre
Personnes concernées par le problème : Tous les utilisateurs
Lien du forum : https://albastrya.bbactif.com/

Description du problème

Bonjour,

je viens vers vous parce que je suis en train de me faire des cheveux blancs...

En effet, j'ai créé un bouton "haut" et "bas" sur le forum, avec un effet de survol qui permet de changer l'image au passage de la souris, avec ce code HTML suivant :

Code:

  <!------------------------------------------- DEBUT FLECHES HAUT BAS -------------------->      
<div class="haut">
    <div class="arrow top-arrow" onclick="document.documentElement.scrollTop = 0;">
        <!-- Feux follets -->
        <div class="will-o-wisp will-o-wisp1"></div>
        <div class="will-o-wisp will-o-wisp2"></div>
        <!-- Éclats -->
        <div class="sparkle sparkle1"></div>
        <div class="sparkle sparkle2"></div>
        <div class="sparkle sparkle3"></div>
        <div class="sparkle sparkle4"></div>
        <div class="sparkle sparkle5"></div>
        <div class="sparkle sparkle6"></div>
        <div class="sparkle sparkle7"></div>
        <div class="sparkle sparkle8"></div>
        <div class="sparkle sparkle9"></div>
        <div class="sparkle sparkle10"></div>
    </div>
</div>

<div class="bas">
    <div class="arrow bottom-arrow" onclick="document.documentElement.scrollTop = document.body.scrollHeight;">
        <!-- Feux follets -->
        <div class="will-o-wisp will-o-wisp1"></div>
        <div class="will-o-wisp will-o-wisp2"></div>
        <!-- Éclats -->
        <div class="sparkle sparkle1"></div>
        <div class="sparkle sparkle2"></div>
        <div class="sparkle sparkle3"></div>
        <div class="sparkle sparkle4"></div>
        <div class="sparkle sparkle5"></div>
        <div class="sparkle sparkle6"></div>
        <div class="sparkle sparkle7"></div>
        <div class="sparkle sparkle8"></div>
        <div class="sparkle sparkle9"></div>
        <div class="sparkle sparkle10"></div>
    </div>
</div>

  <!------------------------------------------- FIN FLECHES HAUT BAS   -------------------->

J'ai deux variantes de CSS ...

La première variante permet d'avoir une animation de "lézard" (je vois ça plutôt comme la mouche au milieu du salon) qui a un effet que j'ADORE : lors du survol du bouton, les sparkles s'animent et se figent. Il y a la "petite mouche" qui continue de voleter mais l'effet d'éclat est là. Simple, efficace.

Code:

/* Styles de base pour les flèches */
.arrow {
    display: inline-block;
    width: 8em;
    height: 8em;
    position: relative;
    text-decoration: none;
    overflow: visible;
    z-index: 1;
}

/* Styles pour les pseudo-éléments ::before */
.arrow::before {
    content: "";
    display: block;
    width: 100%;
    height: 100%;
    background-size: contain;
    background-repeat: no-repeat;
    position: absolute;
    top: 0;
    left: 0;
    transition: opacity 0.3s ease-in-out, transform 0.3s ease-in-out;
    opacity: 1;
    z-index: 2;
}

/* Images de base */
.top-arrow::before {
    background-image: url('https://zupimages.net/up/24/32/8jyq.png');
}

.bottom-arrow::before {
    background-image: url('https://zupimages.net/up/24/32/tg2k.png');
}

/* Effet de survol pour les images de base */
.top-arrow:hover::before {
    background-image: url('https://zupimages.net/up/24/32/5jq1.png');
    transform: translateY(-1em);
}

.bottom-arrow:hover::before {
    background-image: url('https://zupimages.net/up/24/32/ckiv.png');
    transform: translateY(1em);
}

/* Images pour le thème VAMPIRE */
.style3 .top-arrow::before {
    background-image: url('https://zupimages.net/up/24/32/y2ib.png');
}

.style3 .bottom-arrow::before {
    background-image: url('https://zupimages.net/up/24/32/0kt1.png');
}

/* Éclats multiples autour de l'élément avec forme de triangle */
.arrow .sparkle {
    position: absolute;
    width: 0;
    height: 0;
    border-left: 0.1em solid transparent;
    border-right: 0.1em solid transparent;
    border-bottom: 0.2em solid;
    opacity: 0;
    pointer-events: none;
    z-index: 3;
    transform: rotate(0deg);
    transition: opacity 0.2s ease-in-out;
}

/* Éclats de couleur pour le thème de base et vampire */
.arrow .sparkle-base { border-bottom-color: orange; }
.style3 .arrow .sparkle { border-bottom-color: red; }

/* Ajouter des triangles supplémentaires avec des positions rapprochées */
.arrow .sparkle1 { top: 25%; left: 25%; }
.arrow .sparkle2 { top: 25%; left: 75%; }
.arrow .sparkle3 { top: 75%; left: 25%; }
.arrow .sparkle4 { top: 75%; left: 75%; }
.arrow .sparkle5 { top: 50%; left: 50%; }

/* Animation spécifique pour l'éclat central (feu follet) */
.arrow .sparkle5 {
    animation: will-o-wisp 2s ease-in-out infinite;
}

/* Animation de feu follet pour l'éclat central */
@keyframes will-o-wisp {
    0% {
        transform: translate(0, 0) scale(0.8);
        opacity: 1;
    }
    25% {
        transform: translate(-0.5em, -0.5em) scale(0.9);
        opacity: 0.8;
    }
    50% {
        transform: translate(0.5em, -0.7em) scale(1.1);
        opacity: 0.9;
    }
    75% {
        transform: translate(-0.3em, 0.5em) scale(0.9);
        opacity: 0.7;
    }
    100% {
        transform: translate(0, 0) scale(1);
        opacity: 0.8;
    }
}

/* Ajouter l'animation des éclats uniquement au survol */
.arrow:hover .sparkle,
.arrow:hover .sparkle::before,
.arrow:hover .sparkle::after {
    opacity: 1;
    animation: sparkle-path 0.6s ease-in-out forwards;
}

/* Animation des triangles avec effet lézard et création de nouveaux triangles */
@keyframes sparkle-path {
    0% {
        transform: scale(0.2) translate(-50%, -50%) rotate(0deg);
        opacity: 0;
    }
    20% {
        transform: scale(0.4) translate(-50%, -50%) rotate(20deg);
        opacity: 0.7;
    }
    40% {
        transform: scale(0.6) translate(-30%, -70%) rotate(40deg);
        opacity: 0.9;
    }
    60% {
        transform: scale(0.8) translate(-10%, -90%) rotate(60deg);
        opacity: 0.9;
    }
    80% {
        transform: scale(1) translate(10%, -110%) rotate(80deg);
        opacity: 0.7;
    }
    100% {
        transform: scale(0.8) translate(30%, -130%) rotate(100deg);
        opacity: 0.5;
        box-shadow: 0 0 0.2em rgba(255, 165, 0, 0.8),
                    0 0 0.2em rgba(255, 0, 0, 0.8);
    }
}

/* Animation pour le thème VAMPIRE */
.style3 .arrow:hover .sparkle,
.style3 .arrow:hover .sparkle::before,
.style3 .arrow:hover .sparkle::after {
    animation: sparkle-path-vampire 0.6s ease-in-out forwards;
}

@keyframes sparkle-path-vampire {
    0% {
        transform: scale(0.2) translate(-50%, -50%) rotate(0deg);
        opacity: 0;
    }
    20% {
        transform: scale(0.4) translate(-50%, -50%) rotate(20deg);
        opacity: 0.7;
    }
    40% {
        transform: scale(0.6) translate(-30%, -70%) rotate(40deg);
        opacity: 0.9;
    }
    60% {
        transform: scale(0.8) translate(-10%, -90%) rotate(60deg);
        opacity: 0.9;
    }
    80% {
        transform: scale(1) translate(10%, -110%) rotate(80deg);
        opacity: 0.7;
    }
    100% {
        transform: scale(0.8) translate(30%, -130%) rotate(100deg);
        opacity: 0.5;
        box-shadow: 0 0 0.2em rgba(255, 0, 0, 0.8);
    }
}

/* Ajout de plusieurs feu follets */
.arrow .will-o-wisp {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0.2em;
    height: 0.2em;
    background: radial-gradient(circle, rgba(255, 165, 0, 0.8), transparent);
    border-radius: 50%;
    pointer-events: none;
    z-index: 4;
    transform: translate(-50%, -50%);
}

/* Animation des feu follets */
.arrow:hover .will-o-wisp {
    animation: wisp-move 2s infinite ease-in-out;
}

/* Trajectoire des feu follets */
@keyframes wisp-move {
    0% { transform: translate(-50%, -50%) translateX(0) translateY(0); }
    20% { transform: translate(-50%, -50%) translateX(1em) translateY(-1em); }
    40% { transform: translate(-50%, -50%) translateX(-1em) translateY(-1em); }
    60% { transform: translate(-50%, -50%) translateX(1em) translateY(1em); }
    80% { transform: translate(-50%, -50%) translateX(-1em) translateY(1em); }
    100% { transform: translate(-50%, -50%) translateX(0) translateY(0); }
}

/* Positions des feu follets */
.arrow .will-o-wisp1 { animation-delay: 0s; }
.arrow .will-o-wisp2 { animation-delay: 0.4s; }
.arrow .will-o-wisp3 { animation-delay: 0.8s; }
.arrow .will-o-wisp4 { animation-delay: 1.2s; }
.arrow .will-o-wisp5 { animation-delay: 1.6s; }

Ensuite, la seconde variante j'ai tenté de rentre ça plus "smooth" et cela a donné un effet étoilé. En fait je voulais que l'effet "mouche" ressemble plus à un feu follet qu'à une mouche et pour une raison obscure, les "sparkles" ont fait une belle pluie d'étoiles extérieure ce qui a annulé l'effet d'animation au survol :

Code:

/* Styles de base pour les flèches */
.arrow {
    display: inline-block;
    width: 8em;
    height: 8em;
    position: relative;
    text-decoration: none;
    overflow: visible;
    z-index: 1;
}

/* Styles pour les pseudo-éléments ::before */
.arrow::before {
    content: "";
    display: block;
    width: 100%;
    height: 100%;
    background-size: contain;
    background-repeat: no-repeat;
    position: absolute;
    top: 0;
    left: 0;
    transition: opacity 0.3s ease-in-out, transform 0.3s ease-in-out;
    opacity: 1;
    z-index: 2;
}

/* Images de base : ALBASTRYA */
.top-arrow::before {background-image: url('https://zupimages.net/up/24/32/8jyq.png');}
.bottom-arrow::before {background-image: url('https://zupimages.net/up/24/32/tg2k.png');}

/* Effet de survol pour les images de base */
.top-arrow:hover::before {background-image: url('https://zupimages.net/up/24/32/5jq1.png');transform: translateY(-1em);}
.bottom-arrow:hover::before {background-image: url('https://zupimages.net/up/24/32/ckiv.png');transform: translateY(1em);}

/* Images pour le thème VAMPIRE */
.style3 .top-arrow::before {background-image: url('https://zupimages.net/up/24/32/y2ib.png');}
.style3 .bottom-arrow::before {background-image: url('https://zupimages.net/up/24/32/0kt1.png');}

/* Effet de survol pour les images vampire*/
.style3 .top-arrow:hover::before {background-image: url('https://zupimages.net/up/24/32/0r50.png');transform: translateY(-1em);}
.style3 .bottom-arrow:hover::before {background-image: url('https://zupimages.net/up/24/32/wtyt.png');transform: translateY(1em);}

/* Éclats multiples autour de l'élément avec forme de triangle */
.arrow .sparkle {
    position: absolute;
    width: 0;
    height: 0;
    border-left: 0.1em solid transparent;
    border-right: 0.1em solid transparent;
    border-bottom: 0.2em solid;
    opacity: 0.6; /* Moins visible par défaut */
    pointer-events: none;
    z-index: 3;
    transform: rotate(0deg);
    animation: sparkle-path 0.8s ease-in-out infinite; /* Animation plus douce pour les éclats */
}

/* Couleur des éclats pour le thème de base et vampire */
.arrow .sparkle-base { border-bottom-color: orange; }
.style3 .arrow .sparkle { border-bottom-color: red; }

/* Ajouter des triangles supplémentaires avec des positions rapprochées */
.arrow .sparkle1 { top: 25%; left: 25%; }
.arrow .sparkle2 { top: 25%; left: 75%; }
.arrow .sparkle3 { top: 75%; left: 25%; }
.arrow .sparkle4 { top: 75%; left: 75%; }
.arrow .sparkle5 { top: 50%; left: 50%; }
.arrow .sparkle6 { top: 30%; left: 70%; }
.arrow .sparkle7 { top: 70%; left: 30%; }
.arrow .sparkle8 { top: 40%; left: 40%; }
.arrow .sparkle9 { top: 60%; left: 60%; }
.arrow .sparkle10 { top: 50%; left: 70%; }

/* Délais d'animation pour les éclats */
.arrow .sparkle1 { animation-delay: 0s; }
.arrow .sparkle2 { animation-delay: 0.2s; }
.arrow .sparkle3 { animation-delay: 0.4s; }
.arrow .sparkle4 { animation-delay: 0.6s; }
.arrow .sparkle5 { animation-delay: 0.8s; }
.arrow .sparkle6 { animation-delay: 1s; }
.arrow .sparkle7 { animation-delay: 1.2s; }
.arrow .sparkle8 { animation-delay: 1.4s; }
.arrow .sparkle9 { animation-delay: 1.6s; }
.arrow .sparkle10 { animation-delay: 1.8s; }

/* Animation des triangles avec effet lézard et création de nouveaux triangles */
@keyframes sparkle-path {
    0% {
        transform: scale(0.2) translate(-50%, -50%) rotate(0deg);
        opacity: 0.2;
    }
    20% {
        transform: scale(0.4) translate(-50%, -50%) rotate(20deg);
        opacity: 0.4;
    }
    40% {
        transform: scale(0.6) translate(-30%, -70%) rotate(40deg);
        opacity: 0.6;
    }
    60% {
        transform: scale(0.8) translate(-10%, -90%) rotate(60deg);
        opacity: 0.7;
    }
    80% {
        transform: scale(1) translate(10%, -110%) rotate(80deg);
        opacity: 0.5;
    }
    100% {
        transform: scale(0.8) translate(30%, -130%) rotate(100deg);
        opacity: 0.3;
        box-shadow: 0 0 0.1em rgba(255, 165, 0, 0.6),
                    0 0 0.1em rgba(255, 0, 0, 0.6);
    }
}

/* Animation pour le thème VAMPIRE */
.style3 .arrow:hover .sparkle,
.style3 .arrow:hover .sparkle::before,
.style3 .arrow:hover .sparkle::after {
    animation: sparkle-path-vampire 0.8s ease-in-out forwards;
}

@keyframes sparkle-path-vampire {
    0% {
        transform: scale(0.2) translate(-50%, -50%) rotate(0deg);
        opacity: 0.2;
    }
    20% {
        transform: scale(0.4) translate(-50%, -50%) rotate(20deg);
        opacity: 0.4;
    }
    40% {
        transform: scale(0.6) translate(-30%, -70%) rotate(40deg);
        opacity: 0.6;
    }
    60% {
        transform: scale(0.8) translate(-10%, -90%) rotate(60deg);
        opacity: 0.7;
    }
    80% {
        transform: scale(1) translate(10%, -110%) rotate(80deg);
        opacity: 0.5;
    }
    100% {
        transform: scale(0.8) translate(30%, -130%) rotate(100deg);
        opacity: 0.3;
    }
}

/* Feux follets */
.arrow .will-o-wisp {
    position: absolute;
    width: 0.2em;
    height: 0.2em;
    background: radial-gradient(circle, rgba(255, 165, 0, 0.8), transparent);
    border-radius: 50%;
    pointer-events: none;
    z-index: 4;
    /* Positionné au centre */
    transform: translate(-50%, -50%);
    opacity: 0.6; /* Moins visible par défaut */
}

/* Animation spécifique pour les wisps */
.arrow .will-o-wisp1 {
    top: 50%;
    left: 50%;
    animation: will-o-wisp 8s ease-in-out infinite;
    animation-delay: 0s;
}

.arrow .will-o-wisp2 {
    top: 50%;
    left: 50%;
    animation: will-o-wisp 8s ease-in-out infinite;
    animation-delay: 0.2s;
}

.arrow .will-o-wisp3 {
    top: 50%;
    left: 50%;
    animation: will-o-wisp 8s ease-in-out infinite;
    animation-delay: 0.4s;
}

.arrow .will-o-wisp4 {
    top: 50%;
    left: 50%;
    animation: will-o-wisp 8s ease-in-out infinite;
    animation-delay: 0.6s;
}

/* Animation de feu follet pour les wisps */
@keyframes will-o-wisp {
    0% {
        transform: translate(-50%, -50%) translate(0, 0) scale(1);
        opacity: 0.6;
    }
    25% {
        transform: translate(-50%, -50%) translate(-1em, 1em) scale(1.2);
        opacity: 0.8;
    }
    50% {
        transform: translate(-50%, -50%) translate(1em, -1em) scale(1);
        opacity: 0.6;
    }
    75% {
        transform: translate(-50%, -50%) translate(-1em, -1em) scale(0.8);
        opacity: 0.8;
    }
    100% {
        transform: translate(-50%, -50%) translate(0, 0) scale(1);
        opacity: 0.6;
    }
}

SAUF QUE, le soucis il est là

Je suis amoureuse des deux itérations.

La première pour l'effet de survol avec les sparkles figés au passage de la souris.
La deuxième pour l'effet feu follet + pluie d'étoiles extérieure.


Comment faire pour fusionner les deux ?
(qui ont le même code HTML)

Merci à vous et désolé, je crois que je ne suis pas encore assez douée malgré les outils sur internet pour ce genre de casse-tête ...

[Chacha]

Bonjour, Attention, cela fait 7 jours que nous n'avons pas de nouvelles concernant votre demande, si vous ne voulez pas voir votre sujet déplacé à la corbeille, merci de poster dans les 24h qui suivent ce message. Si votre sujet est résolu, merci d'éditer votre premier message et de cocher l'icône « résolu »

[Kaehlyth]

Bonjour,

je me permets un up. 

[Chacha]

Bonjour, Attention, cela fait 6 jours que nous n'avons pas de nouvelles concernant votre demande, si vous ne voulez pas voir votre sujet déplacé à la corbeille, merci de poster dans les 24h qui suivent ce message. Si votre sujet est résolu, merci d'éditer votre premier message et de cocher l'icône « résolu »

[Kaehlyth]

Petit UP.

[Kaehlyth]

Sans réponse, je préfère mettre résolu; Ce n'est pas un code très important.


Merci à vous.