Index

Astuces bling bling

Ajouter une icone animée pour inciter au scroll

Voir un exemple sur ce wiki :
https://ancredessavoirs.fr/?Accueil

Le bouton qui renvoie vers une ancre plus bas dans la page :
{{button class="btn-link btn-icon icon-action" icon="fas fa-angle-double-down" link="#homepage" nobtn="1"  }}


L'ancre se déclare comme ceci avec l'id de votre choix ...
""<div id="homepage"></div>""


Et voici le css associé à coller dans PageCss
/* Animation de l'icone chevron sur home */
@keyframes scroll {

    0% { opacity: 0; }
    30% { transform: translateY(0); opacity: .5; }
    90% { transform: translateY(15px); opacity: 1;}
    100% { transform: translateY(20px); opacity: 0;}

}
.icon-action {
  font-size: 4em;
  text-align: center;
  margin-right: auto;
  margin-left: auto;
  width: fit-content;
  display: block;
  animation-name: scroll;
  animation-duration: 2.2s;
  animation-timing-function: cubic-bezier(.15,.41,.69,.94);
  animation-iteration-count: infinite;
}


Afficher un texte au survol d'une image

voir des exemples sur https://imagehover.io/

et aussi https://rrrr-paca.yeswiki.pro/?le-concept#ancre3
/ section effet texte au survol - utilisé pour les missions page concept/
.text-hidden {

    background-color:transparent;
    webkit-transition: all ease-out 0.3s;
    -moz-transition: all .3s ease-in-out;
    transition: background-image 2s ease;
        border: 1em solid var(--secondary-color-1);
        box-shadow: inset 0 0 0 0 var(--secondary-color-1)!important;
        }

.text-hidden:hover{

    background-image: unset !important;
    background-color:var(--secondary-color-1);
    box-shadow: inset 0 0 0 100px var(--secondary-color-1)!important;}

.text-hidden .container {

    display:flex;
    flex-direction:column;
    justify-content:center;
    min-height:630px;
    transition: all .7s ease;
    }


.text-hidden .text-hover{opacity:0;height:0;}
.text-hidden:hover .text-hover{opacity:1;height:100%;transition: all .7s ease;}


Ajouter un séparateur entre 2 sections

https://shapedividers.com/
exemple ici https://csc.yeswiki.pro/?PagePrincipale