Veritabanı Hizmetleri
Araçlar
Claytabase Server Disk IOPs Calculator
SQL Kod Yedekleme
SQL Yazıcı
Teknik Makaleler
SQL-Server
SQL Server 2008 Bakım Planı
SQL Server işlevlerini kullanma
SQL Server Tarihlerini Kullanma
Web Sitesi Tasarımı
Ousia
Teknik Makaleler
ASP-NET
CSS
Web Sitesi Güvenliği
Wight Adası
İş hizmetleri
Microsoft Azure
Microsoft Office
Sosyal Medya
Hakkında
Portföy
Takım
Chester Copperpot
CS - čeština
DE - Deutsch
EN - English
ES - Español
FR - Français
HI - हिंदी
IT - italiano
PL - polski
PT - Português
RU - русский
ZH - 中国的
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
<
style
type
="text/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.
Add to home screen