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