Criar CSS de rolagem

O deslocamento pode economizar muito espaço e pode ser manipulado de forma muito delicada no CSS3, juntamente com o poder da imagem do CSS Sprites e algumas matemáticas, transformaremos esta imagem abaixo no banner rotativo.

Este é o Sprite que usaremos como um plano de fundo para os links.

Para criar um banner rotativo como este. Todos os links apontam para os canais de mídia social da 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>

O Sprite

A imagem tem 8x64 de largura e imagens altas de 8x64 combinadas como uma imagem de 658px de largura e 196px de alta, só nos interessamos as primeiras 4 imagens no momento.

Criamos 4 classes CSS para cada uma delas para criar usando a propriedade de fundo abreviada.

Como você pode ver, a imagem tem um espaço de 2px entre cada imagem, então adicionamos isso à posição, -68px, etc.
Também podemos escolher 2 classes comuns para usar todos os itens, eles definem o raio de limite e o tamanho de cada item.

O Recipiente

Esta é uma div simples, que é exatamente a mesma largura e altura (64x64) como as imagens definidas acima, definimos o transbordamento para oculto para ocultar o resto da criança.

Exemplo Div Div.

A criança / crianças

Esta é a segunda div que é movida no CSS. Definimos a altura para 64px, mas desta vez a largura deve 64px * 4, o que nos dá um total de 256px.

Neste exemplo, queremos replicar o primeiro Sprite ao final, para evitar um súbito idiota entre o Facebook e Linked In, então ajuste a largura para 320px.

A animação

Nossa animação, em seguida, move a div para posições de 0px, -64px, -128px, -192px e -256px para que apenas um item seja visível em qualquer ponto durante o movimento. Veja abaixo um exemplo, sem excesso, e no lado direito para uma ilustração de como o posicionamento move cada elemento.

User Email Password Remember Me

Checkout