Accueil
S'enregistrer
ConnexionComment insérer un scroll CSS
2 participants
Page 1 sur 1
Comment insérer un scroll CSS
par jhamy Lun 24 Avr 2017 - 14:26
Bonjour je souhaiterai insérer un scroll en CSS, a partir d'un code déjà réaliser. 
CSS ------------------
HTML-----------------------
John
CSS ------------------
- Code:
body {
background: #333;
}
*, *:before, *:after {
-moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box;
}
.mouse_scroll {
display: block;
margin: 0 auto;
width: 24px;
height: 100px;
//background: blue;
margin-top: 125px;
}
.m_scroll_arrows
{
display: block;
width: 5px;
height: 5px;
-ms-transform: rotate(45deg); /* IE 9 */
-webkit-transform: rotate(45deg); /* Chrome, Safari, Opera */
transform: rotate(45deg);
border-right: 2px solid white;
border-bottom: 2px solid white;
margin: 0 0 3px 4px;
width: 16px;
height: 16px;
}
.unu
{
margin-top: 1px;
}
.unu, .doi, .trei
{
-webkit-animation: mouse-scroll 1s infinite;
-moz-animation: mouse-scroll 1s infinite;
}
.unu
{
-webkit-animation-delay: .1s;
-moz-animation-delay: .1s;
-webkit-animation-direction: alternate;
}
.doi
{
-webkit-animation-delay: .2s;
-moz-animation-delay: .2s;
-webkit-animation-direction: alternate;
margin-top: -6px;
}
.trei
{
-webkit-animation-delay: .3s;
-moz-animation-delay: .3s;
-webkit-animation-direction: alternate;
margin-top: -6px;
}
.mouse
{
height: 42px;
width: 24px;
border-radius: 14px;
transform: none;
border: 2px solid white;
top: 170px;
}
.wheel
{
height: 5px;
width: 2px;
display: block;
margin: 5px auto;
background: white;
position: relative;
height: 4px;
width: 4px;
border: 2px solid #fff;
-webkit-border-radius: 8px;
border-radius: 8px;
}
.wheel
{
-webkit-animation: mouse-wheel 0.6s linear infinite;
-moz-animation: mouse-wheel 0.6s linear infinite;
}
@-webkit-keyframes mouse-wheel
{
0% {
opacity: 1;
-webkit-transform: translateY(0);
-ms-transform: translateY(0);
transform: translateY(0);
}
100% {
opacity: 0;
-webkit-transform: translateY(6px);
-ms-transform: translateY(6px);
transform: translateY(6px);
}
}
@-moz-keyframes mouse-wheel
{
0% { top: 1px; }
25% { top: 2px; }
50% { top: 3px;}
75% { top: 2px;}
100% { top: 1px;}
}
@-webkit-keyframes mouse-scroll {
0% { opacity: 0;}
50% { opacity: .5;}
100% { opacity: 1;}
}
@-moz-keyframes mouse-scroll {
0% { opacity: 0; }
50% { opacity: .5; }
100% { opacity: 1; }
}
@-o-keyframes mouse-scroll {
0% { opacity: 0; }
50% { opacity: .5; }
100% { opacity: 1; }
}
@keyframes mouse-scroll {
0% { opacity: 0; }
50% { opacity: .5; }
100% { opacity: 1; }
}
HTML-----------------------
- Code:
<!DOCTYPE html>
<html >
<head>
<meta charset="UTF-8">
<title>Mouse scroll animation</title>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<div class="mouse_scroll">
<div class="mouse">
<div class="wheel"></div>
</div>
<div>
<span class="m_scroll_arrows unu"></span>
<span class="m_scroll_arrows doi"></span>
<span class="m_scroll_arrows trei"></span>
</div>
</div>
</body>
</html>
John
Dernière édition par jhamy le Jeu 27 Avr 2017 - 12:23, édité 1 fois
jhamy- Messages : 31
Date d'inscription : 20/04/2017
Age : 35 -
Re: Comment insérer un scroll CSS
par Ellade Lun 24 Avr 2017 - 19:35
Bonsoir
Serait-il possible d'avoir un lien avec ce scroll en fonctionnement difficile de savoir comment l'inserrer dans WA si je ne vois pas à quoi ça doit ressembler et surtout comment il doit fonctionner à priori la chose semble ne pas fonctionner mais difficile de le savoir si je n'ai pas un moyen de comparaison.
Merci et @ +
Serait-il possible d'avoir un lien avec ce scroll en fonctionnement difficile de savoir comment l'inserrer dans WA si je ne vois pas à quoi ça doit ressembler et surtout comment il doit fonctionner à priori la chose semble ne pas fonctionner mais difficile de le savoir si je n'ai pas un moyen de comparaison.
Merci et @ +
Ellade- Admin
- Messages : 1036
Date d'inscription : 11/03/2009 -
jhamy- Messages : 31
Date d'inscription : 20/04/2017
Age : 35 -
Re: Comment insérer un scroll CSS
par Ellade Mar 25 Avr 2017 - 9:44
Bonjour
Ok oui ça j'avais déjà fait ça avec tes codes mais il ne fait rien d'autre que d'être là au milieu de la page, je voulais savoir si tu avais un lien d'une page de démo où il rempli une fonction particulière.
Sinon pour simplement le placer dans WA tu mets dans les propriétés de la page :
Et dans un composant html à l'emplacement souhaité :
Ok oui ça j'avais déjà fait ça avec tes codes mais il ne fait rien d'autre que d'être là au milieu de la page, je voulais savoir si tu avais un lien d'une page de démo où il rempli une fonction particulière.
Sinon pour simplement le placer dans WA tu mets dans les propriétés de la page :
- Code:
<style>
*, *:before, *:after {
-moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box;
}
.mouse_scroll {
display: block;
margin: 0 auto;
width: 24px;
height: 100px;
//background: blue;
margin-top: 125px;
}
.m_scroll_arrows
{
display: block;
width: 5px;
height: 5px;
-ms-transform: rotate(45deg); /* IE 9 */
-webkit-transform: rotate(45deg); /* Chrome, Safari, Opera */
transform: rotate(45deg);
border-right: 2px solid white;
border-bottom: 2px solid white;
margin: 0 0 3px 4px;
width: 16px;
height: 16px;
}
.unu
{
margin-top: 1px;
}
.unu, .doi, .trei
{
-webkit-animation: mouse-scroll 1s infinite;
-moz-animation: mouse-scroll 1s infinite;
}
.unu
{
-webkit-animation-delay: .1s;
-moz-animation-delay: .1s;
-webkit-animation-direction: alternate;
}
.doi
{
-webkit-animation-delay: .2s;
-moz-animation-delay: .2s;
-webkit-animation-direction: alternate;
margin-top: -6px;
}
.trei
{
-webkit-animation-delay: .3s;
-moz-animation-delay: .3s;
-webkit-animation-direction: alternate;
margin-top: -6px;
}
.mouse
{
height: 42px;
width: 24px;
border-radius: 14px;
transform: none;
border: 2px solid white;
top: 170px;
}
.wheel
{
height: 5px;
width: 2px;
display: block;
margin: 5px auto;
background: white;
position: relative;
height: 4px;
width: 4px;
border: 2px solid #fff;
-webkit-border-radius: 8px;
border-radius: 8px;
}
.wheel
{
-webkit-animation: mouse-wheel 0.6s linear infinite;
-moz-animation: mouse-wheel 0.6s linear infinite;
}
@-webkit-keyframes mouse-wheel
{
0% {
opacity: 1;
-webkit-transform: translateY(0);
-ms-transform: translateY(0);
transform: translateY(0);
}
100% {
opacity: 0;
-webkit-transform: translateY(6px);
-ms-transform: translateY(6px);
transform: translateY(6px);
}
}
@-moz-keyframes mouse-wheel
{
0% { top: 1px; }
25% { top: 2px; }
50% { top: 3px;}
75% { top: 2px;}
100% { top: 1px;}
}
@-webkit-keyframes mouse-scroll {
0% { opacity: 0;}
50% { opacity: .5;}
100% { opacity: 1;}
}
@-moz-keyframes mouse-scroll {
0% { opacity: 0; }
50% { opacity: .5; }
100% { opacity: 1; }
}
@-o-keyframes mouse-scroll {
0% { opacity: 0; }
50% { opacity: .5; }
100% { opacity: 1; }
}
@keyframes mouse-scroll {
0% { opacity: 0; }
50% { opacity: .5; }
100% { opacity: 1; }
}
</style>
Et dans un composant html à l'emplacement souhaité :
- Code:
<div class="mouse_scroll">
<div class="mouse">
<div class="wheel"></div>
</div>
<div>
<span class="m_scroll_arrows unu"></span>
<span class="m_scroll_arrows doi"></span>
<span class="m_scroll_arrows trei"></span>
</div>
</div>
Ellade- Admin
- Messages : 1036
Date d'inscription : 11/03/2009 -
Re: Comment insérer un scroll CSS
par Ellade Jeu 27 Avr 2017 - 8:55
Bonjour jhamy
Qu'en est-il est-ce que le code fonctionne dans WA comme tu le souhaitais ?
Qu'en est-il est-ce que le code fonctionne dans WA comme tu le souhaitais ?
Ellade- Admin
- Messages : 1036
Date d'inscription : 11/03/2009 -
Re: Comment insérer un scroll CSS
par jhamy Jeu 27 Avr 2017 - 11:24
Bonjour,
Je suis désolé de ne pas répondre de suite, mais je suis pas mal occupé.
Oui effectivement, cette manipulation cela marche impeccable
, merci encore.
J'ai une autre question qui risque de déborder un peu du sujet, je suis nul en programmation aussi bien en HTML que CSS, mon parcours ma pas permis de ne pas aller l'oins dans ma scolarité malheureusement, et je souhaite à personne, bref y a t'il quelque bon livre a propos du html et du css que je puisse apprendre, au lieu de demander bêtement a une solution a mon avis simple.
John
Je suis désolé de ne pas répondre de suite, mais je suis pas mal occupé.
Oui effectivement, cette manipulation cela marche impeccable
, merci encore.J'ai une autre question qui risque de déborder un peu du sujet, je suis nul en programmation aussi bien en HTML que CSS, mon parcours ma pas permis de ne pas aller l'oins dans ma scolarité malheureusement, et je souhaite à personne, bref y a t'il quelque bon livre a propos du html et du css que je puisse apprendre, au lieu de demander bêtement a une solution a mon avis simple.
John
jhamy- Messages : 31
Date d'inscription : 20/04/2017
Age : 35 -
Re: Comment insérer un scroll CSS
par Ellade Jeu 27 Avr 2017 - 11:51
Oui il y a d’excellents cours avec les livres qui correspondent aux cours
C'est sur le site OpenClassrooms anciennement le "Site du Zero".
La page du début du cours html css est ici il faut une simple inscription pour suivre le cours jusqu'au bout.
Tu peux trouver le livre ici correspondant au cours
Je recommande, des cours de qualité à la portée de tous vraiment très bien faits.
Bon courage et @ +
C'est sur le site OpenClassrooms anciennement le "Site du Zero".
La page du début du cours html css est ici il faut une simple inscription pour suivre le cours jusqu'au bout.
Tu peux trouver le livre ici correspondant au cours
Je recommande, des cours de qualité à la portée de tous vraiment très bien faits.
Bon courage et @ +
Ellade- Admin
- Messages : 1036
Date d'inscription : 11/03/2009 -
Re: Comment insérer un scroll CSS
par jhamy Jeu 27 Avr 2017 - 11:56
C'est vraiment sympathique, merci encore
John
John
jhamy- Messages : 31
Date d'inscription : 20/04/2017
Age : 35 -
Re: Comment insérer un scroll CSS
par Ellade Jeu 27 Avr 2017 - 12:02
En tout cas n'hésites pas à ouvrir des sujets si tu as d'autres questions.
Le forum est là pour partager.
@ +
Le forum est là pour partager.
@ +
Ellade- Admin
- Messages : 1036
Date d'inscription : 11/03/2009 -
jhamy- Messages : 31
Date d'inscription : 20/04/2017
Age : 35 -
Sujets similaires» Comment insérer un calendrier de réservations abritel dans mon site ?
» Insérer un pps
» Insérer un accordéon
» inserer des delais sur des animations
» Insérer WoW slider, évident ou pas ?
» Insérer un pps
» Insérer un accordéon
» inserer des delais sur des animations
» Insérer WoW slider, évident ou pas ?
Page 1 sur 1
Permission de ce forum:
Vous ne pouvez pas répondre aux sujets dans ce forum|
|
|