Utwórz przewijanie CSS

Przewijanie może zaoszczędzić sporo miejsca i może być bardzo delikatnie obsługiwane w CSS3, w połączeniu z mocą obrazów CSS Sprites i trochę matematyki, obrócimy ten obraz na rotacyjny baner.

To Sprite będziemy używać jako tło linków.

Aby utworzyć obracający się baner w następujący sposób. Wszystkie linki wskazują na kanały społecznościowe 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 ma 8x64 szerokie i 8x64 wysokiej rozdzielczości w połączeniu jako obraz 658 pikseli i 196 pikseli, interesuje nas tylko pierwsze 4 zdjęcia.

Tworzymy 4 klasy CSS dla każdego z nich, aby utworzyć przy użyciu właściwości shorthand background.

Jak widać obraz ma przestrzeń 2px pomiędzy każdym obrazem, dlatego dodajemy to do pozycji, -68px itd.
Możemy również wybrać 2 wspólne klasy do używania wszystkich elementów, ustalają promień graniczny i rozmiar każdego elementu.

Pojemnik

Jest to prosty div, czyli dokładnie taka sama szerokość i wysokość (64 x 64), co zdefiniowane powyżej obrazy, ustawiamy przepełnienie na ukryte, aby ukryć resztę dziecka.

Przykład Div Parent

Dziecko / Dzieci

Jest to drugi div, który jest przenoszony w CSS. Ustawiamy wysokość na 64px, ale tym razem powinna być szerokość 64px * 4, co daje nam 256px.

W tym przykładzie chcemy powtórzenie pierwszego Sprite pojawiającego się na końcu, aby zapobiec nagłowi między Facebook a Linked In, więc dostosuj szerokość do 320px.

Animacja

Nasza animacja przenosi div do pozycji 0px, -64px, -128px, -192px i -256px, dzięki czemu tylko jedna pozycja jest widoczna w dowolnym punkcie podczas ruchu. Poniżej znajdziesz przykład, bez przepełnienia, a po prawej stronie do ilustracji, w jaki sposób pozycjonowanie przenosi każdy element.