Создать прокрутку CSS

Прокрутка может сэкономить много места и может быть очень деликатно обработана в CSS3, в сочетании с мощью изображения CSS Sprites и некоторой математикой, мы превратим этот снимок ниже в вращающийся баннер.

Это Sprite, который мы будем использовать в качестве фона для ссылок.

Чтобы создать такой вращающийся баннер. Все ссылки указывают на каналы социальных сетей 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>

Спрайте

Изображение имеет ширину 8x64 и 8x64 высокое изображение, объединенное как изображение шириной 658 пикселей и высотой 196 пикселей, нас интересуют только первые 4 изображения на данный момент.

Мы создаем 4 класса CSS для каждого из них для создания с использованием свойства стенографического фона.

Как вы можете видеть, изображение имеет пространство 2px между каждым изображением, поэтому мы добавляем его в положение -68px и т. Д.
Мы также можем выбрать 2 общих класса для использования всех элементов, установить предельный радиус и размер каждого элемента.

Контейнер

Это простой div, который является точно такой же шириной и высотой (64x64), как изображения, определенные выше, мы устанавливаем переполнение для скрытия, чтобы скрыть остальную часть дочернего элемента.

Пример родительского Div

Дети / Дети

Это второй div, который перемещается в CSS. Мы устанавливаем высоту 64px, но на этот раз ширина должна 64px * 4, давая нам всего 256 пикселей.

В этом примере мы хотим, чтобы первый экземпляр Sprite появился в конце, чтобы предотвратить внезапный рывок между Facebook и Linked In, поэтому отрегулируйте ширину до 320 пикселей.

Анимация

Затем наша анимация перемещает div в позиции 0px, -64px, -128px, -192px и -256px, так что только один элемент отображается в любой момент во время движения. Ниже приведен пример, без переполнения, и с правой стороны для иллюстрации того, как позиционирование перемещает каждый элемент.