Kaydırma CSS oluştur

Kaydırma çok fazla yerden tasarruf edebilir ve CSS3'te çok hassas bir şekilde ele alınabilir, buna CSS Sprite görüntüsü ve bazı matematik güçleri eklenebilir; bu görüntüyü aşağıdaki dönen pankarta dönüştüreceğiz.

Bu, bağlantıların arka planı olarak kullanacağımız Sprite'dır.

Böyle bir dönen banner oluşturmak için. Tüm bağlantılar Claytabase sosyal medya kanallarına işaret ediyor.

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

Resim 8x64 genişliğinde ve 8x64 yüksek görüntüler, 658px genişliğinde ve 196px yüksekliğinde bir görüntü olarak birleştirildiğinde şu an sadece ilk 4 resimle ilgileniyoruz.

Her biri için, kısaltıcı background özelliğini kullanarak oluşturmak için 4 CSS sınıfı oluşturduk.

Gördüğünüz gibi, resim her resim arasında 2 piksel bir boşluğa sahip. Bu yüzden, bunu -68px vb. Konumuna ekledik.
Ayrıca, tüm öğeleri kullanmak için 2 ortak sınıf seçebiliriz, sınır yarıçapını ve her bir öğenin boyutunu ayarlarlar.

Konteyner

Bu, yukarıda tanımlanan resimlerle aynı genişlik ve yüksekliğe (64x64) sahip basit bir div, çocuğun geri kalan bölümünü gizlemek için gizlenmiş olarak taşmayı ayarladık.

Üst Bölüm Örnek

Çocuk / Çocuk

CSS'de taşınan ikinci div budur. Yüksekliği 64 piksele, ancak bu kez genişlik 64 piksellik olmalıdır * 4 bize toplam 256 piksellik veriyor.

Bu örnekte, sonunda görünen ilk Sprite'ı çoğaltmak, Facebook ile Linked In arasında ani bir gerginlik önlemek için genişliği 320px olarak ayarlamak istiyoruz.

Animasyon

Animasyonumuz div'u hareket ettirirken herhangi bir noktada yalnızca bir öğenin görülebilmesi için div'u 0 piksel, -64 piksel, -128 piksel, -192 piksel ve -256 piksel konumlarına taşır. Taşmanın olmadığı bir örnek için aşağıya bakınız ve pozisyonlamanın her bir unsuru nasıl taşıdığının bir örneği için sağ tarafta görüyorsunuz.