Aller au contenu
View in the app

A better way to browse. Learn more.

Next

A full-screen app on your home screen with push notifications, badges and more.

To install this app on iOS and iPadOS
  1. Tap the Share icon in Safari
  2. Scroll the menu and tap Add to Home Screen.
  3. Tap Add in the top-right corner.
To install this app on Android
  1. Tap the 3-dot menu (⋮) in the top-right corner of the browser.
  2. Tap Add to Home screen or Install app.
  3. Confirm by tapping Install.

HTML5/CSS3/JS -- Transition sur hover

Featured Replies

Posté(e)

Bonjour à tous!

Je suis en train de me faire un petit site perso tout simple, et j'aurais voulu faire un effet qui me semble tout con, mais que je n'arrive pas à produire (probablement juste parce que je ne cherche pas avec les bons mots-clefs!).

Le principe est simple. En bas de la page, un footer. À l'origine il ne contenait qu'une ligne de remerciement avec un lien vers le background que j'utilisais (droits d'auteur toussa). Sauf qu'il est plus que probable que sur d'autres pages, j'ai un peu plus de trucs à mettre. Du coup j'étais parti pour mettre un hover, avec par défaut juste le mot "Crédits", et quand on passe dessus, l'affichage de tous les liens utilisés etc.

Pour l'instant ça donne quelque chose comme ça:

HTML:

<footer class=wrap>
	<div class=show>Credits</div>
	<div class=no-show>
		Blabla plus long
	</div>
</footer>

CSS:

footer
{
	position: fixed;
	bottom: 5px;
	right: 5px;
	text-align: right;
	border-radius: 10px;
	background-color: rgba(180,200,200,0.6);
	padding-left: 5px;
	padding-right: 5px;
	padding-bottom: 6px;
}

.no-show, .wrap:hover .show
{
	display: none;
}

.wrap:hover .no-show
{
	display: inline-block;
}

Du coup j'aurais bien aimé avoir un effet de transition qui s'étale sur genre 1s, plutôt qu'un changement bien brusque.

J'ai essayer de jouer avec les propriétés transition et tout mais sans résultat...

Merci d'avance.

Xælias

  • 5 semaines après...
  • 2 semaines après...
Posté(e)

Il faut mettre tes effets sur tout le footer :

<footer class="wrap">
<div class="show" style="float:right">Credits</div>
</footer>
<style>
footer
{
    width:100px;
position: fixed;
bottom: 5px;
right: 5px;
text-align: right;
border-radius: 10px;
background-color: rgba(180,200,200,0.6);
padding-left: 5px;
padding-right: 5px;
padding-bottom: 6px;
transition-property: width;
  transition-duration: 1s;
  transition-timing-function: ease;
}
footer:hover
{
width:300px;


}


footer:hover .show {display:none}
footer:hover:before {content:"Blabla plus long";float:right}
</style>

Sur Chrome c'est OK avec le float-right car sinon ça tremble. Sur FF le changement est un peu moins doux, on voit un peu le texte qui s'ajoute au-dessus :/. Mais ça marche relativement bien. J'ai simplifié le code.

Apparemment sous IE ça ne marche pas mais j'ai pas trop le temps de creuser !

Modifié par romjpn

Posté(e)

Pour IE ça ne prend qu'à partir de la version 10 (ptet 11 j'ai pas de 10 pour vérifier) donc pas de soucis (je suppose du coup que tu as un IE9 ;))

Posté(e)

Au temps pour moi j'étais en mode dev "quirks" donc ça passait pas. Oui sous IE10 ça marche mais il y a le même petit effet de basculement gênant que sur FF.

Modifié par romjpn

Posté(e)

Après je pense que le plus simple aussi, c'est de prendre du JS (et en l'occurence du JQuery :chinois: ) dans ce cas. Au moins la transition se fait sur quasi tous les navigateurs avec le même effet :transpi:

Modifié par Goghvan

Archivé

Ce sujet est désormais archivé et ne peut plus recevoir de nouvelles réponses.

Configure browser push notifications

Chrome (Android)
  1. Tap the lock icon next to the address bar.
  2. Tap Permissions → Notifications.
  3. Adjust your preference.
Chrome (Desktop)
  1. Click the padlock icon in the address bar.
  2. Select Site settings.
  3. Find Notifications and adjust your preference.