Créer un CSS de défilement

Le défilement peut sauver beaucoup d'espace, et peut être manipulé de manière très délicate dans CSS3, couplé à la puissance de l'image CSS Sprites et des calculs, nous allons transformer cette image ci-dessous dans la bannière rotative.

C'est le Sprite que nous allons utiliser comme toile de fond pour les liens.

Pour créer une bannière rotative comme celle-ci. Tous les liens indiquent les chaînes de médias sociaux de Claytabase.

CSS

/*Sprite Backgrounds*/
.smFbk64{background-position: 0px -0px}
.smTwi64{background-position:-66px -0px}
.smGoo64{background-position:-132px -0px}
.smLin64{background-position:-198px -0px}
.sm64{width:64px;height:64px;display:inline-block;overflow:hidden;background-image: url('https://www.gsclayton.net/System/Artwork/Articles/SocialMedia_64.png');background-repeat:no-repeat;}
.rnd50{border-radius:50%}
/*Moving Parts*/
.parentDiv{width:64px;height:64px;overflow:hidden;margin:auto}
.followDiv{width:320px;height:64px;position:relative;
animation:followDivSlide ease infinite 10s;-webkit-animation:followDivSlide ease infinite 10s;-moz-animation:followDivSlide ease infinite 10s;
-webkit-animation-fill-mode:forwards;-moz-animation-fill-mode:forwards;animation-fill-mode:forwards;}
@keyframes followDivSlide{from{left:0px;}15%{left:0px;}25%{left:-64px;}40%{left:-64px;}50%{left:-128px;}65%{left:-128px;}75%{left:-192px;}90%{left:-192px;}to{left:-256px;}}
@-webkit-keyframes followDivSlide{from{left:0px;}15%{left:0px;}25%{left:-64px;}40%{left:-64px;}50%{left:-128px;}65%{left:-128px;}75%{left:-192px;}90%{left:-192px;}to{left:-256px;}}
@-moz-keyframes followDivSlide{from{left:0px;}15%{left:0px;}25%{left:-64px;}40%{left:-64px;}50%{left:-128px;}65%{left:-128px;}75%{left:-192px;}90%{left:-192px;}to{left:-256px;}}

</style>
/*HTML*/
<div class="parentDiv">
<div class="followDiv"><a class="sm64 rnd50 smFbk64" href="https://www.facebook.com/Claytabase"></a><a class="sm64 rnd50 smTwi64" href="https://twitter.com/claytabase"></a><a class="sm64 rnd50 smGoo64" href="https://plus.google.com/+ClaytabaseCoUk"></a><a class="sm64 rnd50 smLin64" href="https://www.linkedin.com/company/claytabase-ltd"></a><a class="sm64 rnd50 smFbk64" href="https://www.facebook.com/Claytabase"></a></div>
</div>

Le Sprite

L'image est 8x64 large et 8x64 haute images combinées comme une image 658px large et 196px haute, nous ne sommes intéressés que les premières 4 images en ce moment.

Nous créons 4 classes CSS pour chacune d'entre elles pour créer à l'aide de la propriété de fond abrégé.

Comme vous pouvez le voir, l'image a un espace de 2px entre chaque image, donc nous l'ajoutons à la position, -68px, etc.
Nous pouvons également choisir 2 classes communes pour utiliser tous les éléments, ils définissent le rayon de limite et la taille de chaque élément.

Le conteneur

Il s'agit d'une div simple, qui a exactement la même largeur et la même hauteur (64x64) que les images définies ci-dessus, nous déconcentrons le caché pour masquer le reste de l'enfant.

Exemple Div Parent

L'enfant / les enfants

C'est le deuxième div qui est déplacé dans le CSS. Nous mettons la hauteur à 64px, mais cette fois-ci, la largeur doit être de 64px * 4, ce qui nous donne un total de 256px.

Dans cet exemple, nous voulons répliquer le premier Sprite à la fin, afin d'éviter un brusque sifflement entre Facebook et Linked In, afin d'ajuster la largeur à 320px.

L'animation

Notre animation déplace alors div vers les positions de 0px, -64px, -128px, -192px et -256px de sorte que seul un élément soit visible en tout point pendant le mouvement. Voir ci-dessous un exemple, sans débordement, et sur le côté droit pour une illustration de la façon dont le positionnement déplace chaque élément.