Vytvoření scrollingu CSS

Scrolling může ušetřit spoustu místa a může být velmi delikátně zpracován v CSS3, spojený se silou obrazu CSS Sprites a několika matematiky, tento obrázek změníme dolů na rotující banner.

Toto je Sprite, který použijeme jako pozadí pro odkazy.

Vytvoření takového rotujícího banneru. Všechny odkazy odkazují na kanály sociální sítě 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>

Sprite

Obraz je 8x64 široký a 8x64 vysoký obraz kombinovaný jako obrázek 658px široký a 196px vysoký, my se zajímá jenom prvních 4 snímků v tuto chvíli.

Pro každý z nich vytvoříme 4 třídy CSS, které vytvoříme pomocí vlastností pozadí zkratky.

Jak vidíte, že obrázek má mezi jednotlivými snímky velikost 2px, přidáme to k pozici, -68px apod.
Můžeme také zvolit 2 běžné třídy pro použití všech položek, nastavit poloměr mezí a velikost každé položky.

Kontejner

Jedná se o jednoduchou div, která má přesně stejnou šířku a výšku (64x64) jako obrázky definované výše, nastavíme přetečení na skryté, abychom skryli zbytek dítěte.

Parent Div Příklad

Dítě / děti

Toto je druhý div, který se přesune do CSS. Nastavili jsme výšku na 64 pixelů, tentokrát však musí být šířka 64 pixelů * 4, což nám dává celkem 256 pixelů.

V tomto příkladu chceme replikovat první Sprite na konci, aby se zabránilo náhlé škubání mezi Facebookem a Linked In, takže upravte šířku na 320px.

Animace

Náš animace pak posune div na pozicích 0px, -64px, -128px, -192px a -256px, takže pouze jedna položka je viditelná v libovolném okamžiku pohybu. Níže uvádíme příklad bez přetečení a na pravé straně ilustrujeme, jak se polohování pohybuje každý prvek.