Tüm Araçlar
  • Tema Seçeneği
  • Site Sesleri
  • Bildirimler
  • Özel Mesaj Al
lostyazilim
tr.link

Css sprite ile animasyon

 11 Mesajlar 2.940 Okunma
acebozum
tr.link

#1
mujdatsayar mujdatsayar M.Kemal Atatürk Kullanıcı
  • Üyelik 04.04.2012
  • Yaş/Cinsiyet 36 / E
  • Meslek Grafik tasarım
  • Konum İstanbul Avrupa
  • Ad Soyad ** **
  • Mesajlar 1285
  • Beğeniler 452 / 308
  • Ticaret 0, (%0)



KODLAR HTML:

Merhaba Ben geldim



KODLAR CSS:
p {text-align: center;}

.girl {
width:174px;
height:380px;
background:
url(http://dl.dropbox.com/u/33759278/monitaSpriteR2/spriteSheet/jumpSpriteSheet4.png) 0 0 no-repeat;
margin: 0px auto 0;
background-position: -2466px -1530px;
animation: jumping 2.8s steps(1, end) infinite;
-webkit-animation: jumping 2.8s steps(1, end) infinite;
-moz-animation: jumping 2.8s steps(1, end) infinite;
}

keyframes jumping {
1% { background-position: -2466px -1530px;}
2.16% { background-position: -2466px -1148px;}
3.32% { background-position: -2290px -1530px;}
4.48% { background-position: -2290px -1148px;}
5.64% { background-position: -2114px -1530px;}
6.80% { background-position: -2114px -1148px;}
7.96% { background-position: -2466px -766px;}
9.12% { background-position: -2290px -766px;}
10.28% { background-position: -2114px -766px;}
11.44% { background-position: -1938px -1530px;}
12.60% { background-position: -1938px -1530px;}
13.76% { background-position: -1938px -1148px;}
14.92% { background-position: -1938px -766px;}
16.08% { background-position: -1762px -1530px;}
17.24% { background-position: -1762px -1148px;}
18.40% { background-position: -1762px -766px;}
19.56% { background-position: -2466px -384px;}
20.72% { background-position: -2290px -384px;}
21.88% { background-position: -2114px -384px;}
23.04% { background-position: -1938px -384px;}
24.20% { background-position: -1762px -384px;}
25.36% { background-position: -1586px -1530px;}
26.52% { background-position: -1586px -1148px;}
27.68% { background-position: -1586px -766px;}
28.84% { background-position: -1586px -384px;}
30.00% { background-position: -1410px -1530px;}
31.16% { background-position: -1410px -1148px;}
32.32% { background-position: -1410px -766px;}
33.48% { background-position: -1410px -384px;}
34.63% { background-position: -1234px -1530px;}
35.79% { background-position: -1234px -1148px;}
36.95% { background-position: -1234px -766px;}
38.11% { background-position: -1234px -384px;}
39.27% { background-position: -2466px -2px;}
40.43% { background-position: -2290px -2px;}
41.59% { background-position: -2114px -2px;}
42.75% { background-position: -1938px -2px;}
43.91% { background-position: -1762px -2px;}
45.07% { background-position: -1586px -2px;}
46.23% { background-position: -1410px -2px;}
47.39% { background-position: -1234px -2px;}
48.55% { background-position: -1058px -1530px;}
49.71% { background-position: -1058px -1148px;}
50.87% { background-position: -1058px -766px;}
52.03% { background-position: -1058px -384px;}
53.19% { background-position: -1058px -2px;}
54.35% { background-position: -882px -1530px;}
55.51% { background-position: -882px -1148px;}
56.67% { background-position: -882px -766px;}
57.83% { background-position: -882px -384px;}
58.99% { background-position: -882px -2px;}
60.15% { background-position: -706px -1530px;}
61.31% { background-position: -706px -1148px;}
62.47% { background-position: -706px -766px;}
63.63% { background-position: -706px -384px;}
64.79% { background-position: -706px -2px;}
65.95% { background-position: -530px -1530px;}
67.11% { background-position: -530px -1148px;}
68.27% { background-position: -530px -766px;}
69.43% { background-position: -530px -384px;}
70.59% { background-position: -530px -2px;}
71.75% { background-position: -354px -1530px;}
72.91% { background-position: -354px -1148px;}
74.07% { background-position: -354px -766px;}
75.23% { background-position: -354px -384px;}
76.39% { background-position: -354px -2px;}
77.55% { background-position: -178px -1530px;}
78.71% { background-position: -178px -1148px;}
79.87% { background-position: -178px -766px;}
81.03% { background-position: -178px -384px;}
82.19% { background-position: -178px -2px;}
83.35% { background-position: -2px -1530px;}
84.51% { background-position: -2px -1148px;}
85.67% { background-position: -2px -766px;}
86.83% { background-position: -2px -384px;}
87.99% { background-position: -2px -2px;}
89.15% { background-position: -2px -2px;}
90.31% { background-position: -2px -2px;}
91.47% { background-position: -2px -2px;}
92.63% { background-position: -2px -2px;}
93.79% { background-position: -2px -2px;}
94.95% { background-position: -2px -2px;}
96.11% { background-position: -2px -2px;}
97.27% { background-position: -2px -2px;}
98.43% { background-position: -2px -2px;}
99.59% { background-position: -2px -2px;}
100% { background-position: -2px -2px;}
}

@-webkit-keyframes jumping {
1% { background-position: -2466px -1530px;}
2.16% { background-position: -2466px -1148px;}
3.32% { background-position: -2290px -1530px;}
4.48% { background-position: -2290px -1148px;}
5.64% { background-position: -2114px -1530px;}
6.80% { background-position: -2114px -1148px;}
7.96% { background-position: -2466px -766px;}
9.12% { background-position: -2290px -766px;}
10.28% { background-position: -2114px -766px;}
11.44% { background-position: -1938px -1530px;}
12.60% { background-position: -1938px -1530px;}
13.76% { background-position: -1938px -1148px;}
14.92% { background-position: -1938px -766px;}
16.08% { background-position: -1762px -1530px;}
17.24% { background-position: -1762px -1148px;}
18.40% { background-position: -1762px -766px;}
19.56% { background-position: -2466px -384px;}
20.72% { background-position: -2290px -384px;}
21.88% { background-position: -2114px -384px;}
23.04% { background-position: -1938px -384px;}
24.20% { background-position: -1762px -384px;}
25.36% { background-position: -1586px -1530px;}
26.52% { background-position: -1586px -1148px;}
27.68% { background-position: -1586px -766px;}
28.84% { background-position: -1586px -384px;}
30.00% { background-position: -1410px -1530px;}
31.16% { background-position: -1410px -1148px;}
32.32% { background-position: -1410px -766px;}
33.48% { background-position: -1410px -384px;}
34.63% { background-position: -1234px -1530px;}
35.79% { background-position: -1234px -1148px;}
36.95% { background-position: -1234px -766px;}
38.11% { background-position: -1234px -384px;}
39.27% { background-position: -2466px -2px;}
40.43% { background-position: -2290px -2px;}
41.59% { background-position: -2114px -2px;}
42.75% { background-position: -1938px -2px;}
43.91% { background-position: -1762px -2px;}
45.07% { background-position: -1586px -2px;}
46.23% { background-position: -1410px -2px;}
47.39% { background-position: -1234px -2px;}
48.55% { background-position: -1058px -1530px;}
49.71% { background-position: -1058px -1148px;}
50.87% { background-position: -1058px -766px;}
52.03% { background-position: -1058px -384px;}
53.19% { background-position: -1058px -2px;}
54.35% { background-position: -882px -1530px;}
55.51% { background-position: -882px -1148px;}
56.67% { background-position: -882px -766px;}
57.83% { background-position: -882px -384px;}
58.99% { background-position: -882px -2px;}
60.15% { background-position: -706px -1530px;}
61.31% { background-position: -706px -1148px;}
62.47% { background-position: -706px -766px;}
63.63% { background-position: -706px -384px;}
64.79% { background-position: -706px -2px;}
65.95% { background-position: -530px -1530px;}
67.11% { background-position: -530px -1148px;}
68.27% { background-position: -530px -766px;}
69.43% { background-position: -530px -384px;}
70.59% { background-position: -530px -2px;}
71.75% { background-position: -354px -1530px;}
72.91% { background-position: -354px -1148px;}
74.07% { background-position: -354px -766px;}
75.23% { background-position: -354px -384px;}
76.39% { background-position: -354px -2px;}
77.55% { background-position: -178px -1530px;}
78.71% { background-position: -178px -1148px;}
79.87% { background-position: -178px -766px;}
81.03% { background-position: -178px -384px;}
82.19% { background-position: -178px -2px;}
83.35% { background-position: -2px -1530px;}
84.51% { background-position: -2px -1148px;}
85.67% { background-position: -2px -766px;}
86.83% { background-position: -2px -384px;}
87.99% { background-position: -2px -2px;}
89.15% { background-position: -2px -2px;}
90.31% { background-position: -2px -2px;}
91.47% { background-position: -2px -2px;}
92.63% { background-position: -2px -2px;}
93.79% { background-position: -2px -2px;}
94.95% { background-position: -2px -2px;}
96.11% { background-position: -2px -2px;}
97.27% { background-position: -2px -2px;}
98.43% { background-position: -2px -2px;}
99.59% { background-position: -2px -2px;}
100% { background-position: -2px -2px;}
}

@-moz-keyframes jumping {
1% { background-position: -2466px -1530px;}
2.16% { background-position: -2466px -1148px;}
3.32% { background-position: -2290px -1530px;}
4.48% { background-position: -2290px -1148px;}
5.64% { background-position: -2114px -1530px;}
6.80% { background-position: -2114px -1148px;}
7.96% { background-position: -2466px -766px;}
9.12% { background-position: -2290px -766px;}
10.28% { background-position: -2114px -766px;}
11.44% { background-position: -1938px -1530px;}
12.60% { background-position: -1938px -1530px;}
13.76% { background-position: -1938px -1148px;}
14.92% { background-position: -1938px -766px;}
16.08% { background-position: -1762px -1530px;}
17.24% { background-position: -1762px -1148px;}
18.40% { background-position: -1762px -766px;}
19.56% { background-position: -2466px -384px;}
20.72% { background-position: -2290px -384px;}
21.88% { background-position: -2114px -384px;}
23.04% { background-position: -1938px -384px;}
24.20% { background-position: -1762px -384px;}
25.36% { background-position: -1586px -1530px;}
26.52% { background-position: -1586px -1148px;}
27.68% { background-position: -1586px -766px;}
28.84% { background-position: -1586px -384px;}
30.00% { background-position: -1410px -1530px;}
31.16% { background-position: -1410px -1148px;}
32.32% { background-position: -1410px -766px;}
33.48% { background-position: -1410px -384px;}
34.63% { background-position: -1234px -1530px;}
35.79% { background-position: -1234px -1148px;}
36.95% { background-position: -1234px -766px;}
38.11% { background-position: -1234px -384px;}
39.27% { background-position: -2466px -2px;}
40.43% { background-position: -2290px -2px;}
41.59% { background-position: -2114px -2px;}
42.75% { background-position: -1938px -2px;}
43.91% { background-position: -1762px -2px;}
45.07% { background-position: -1586px -2px;}
46.23% { background-position: -1410px -2px;}
47.39% { background-position: -1234px -2px;}
48.55% { background-position: -1058px -1530px;}
49.71% { background-position: -1058px -1148px;}
50.87% { background-position: -1058px -766px;}
52.03% { background-position: -1058px -384px;}
53.19% { background-position: -1058px -2px;}
54.35% { background-position: -882px -1530px;}
55.51% { background-position: -882px -1148px;}
56.67% { background-position: -882px -766px;}
57.83% { background-position: -882px -384px;}
58.99% { background-position: -882px -2px;}
60.15% { background-position: -706px -1530px;}
61.31% { background-position: -706px -1148px;}
62.47% { background-position: -706px -766px;}
63.63% { background-position: -706px -384px;}
64.79% { background-position: -706px -2px;}
65.95% { background-position: -530px -1530px;}
67.11% { background-position: -530px -1148px;}
68.27% { background-position: -530px -766px;}
69.43% { background-position: -530px -384px;}
70.59% { background-position: -530px -2px;}
71.75% { background-position: -354px -1530px;}
72.91% { background-position: -354px -1148px;}
74.07% { background-position: -354px -766px;}
75.23% { background-position: -354px -384px;}
76.39% { background-position: -354px -2px;}
77.55% { background-position: -178px -1530px;}
78.71% { background-position: -178px -1148px;}
79.87% { background-position: -178px -766px;}
81.03% { background-position: -178px -384px;}
82.19% { background-position: -178px -2px;}
83.35% { background-position: -2px -1530px;}
84.51% { background-position: -2px -1148px;}
85.67% { background-position: -2px -766px;}
86.83% { background-position: -2px -384px;}
87.99% { background-position: -2px -2px;}
89.15% { background-position: -2px -2px;}
90.31% { background-position: -2px -2px;}
91.47% { background-position: -2px -2px;}
92.63% { background-position: -2px -2px;}
93.79% { background-position: -2px -2px;}
94.95% { background-position: -2px -2px;}
96.11% { background-position: -2px -2px;}
97.27% { background-position: -2px -2px;}
98.43% { background-position: -2px -2px;}
99.59% { background-position: -2px -2px;}
100% { background-position: -2px -2px;}
}​

DEMO

cgrclk Muhsin ASLAN fatihcan

kişi bu mesajı beğendi.

www.mujdatsayar.com
wmaraci
reklam

#2
Konyali Konyali furkan.konyali@gmail.com Kullanıcı
  • Üyelik 09.04.2011
  • Yaş/Cinsiyet 31 / E
  • Meslek Front-end Developer
  • Konum İstanbul Anadolu
  • Ad Soyad F** K**
  • Mesajlar 1043
  • Beğeniler 130 / 62
  • Ticaret 5, (%100)
Vay be süper bişeymiş.
 

 

#3
cgrclk cgrclk Fortis Fortuna Adiuvat Kullanıcı
  • Üyelik 18.11.2011
  • Yaş/Cinsiyet 35 / E
  • Meslek Web Developer
  • Konum İstanbul Avrupa
  • Ad Soyad B** Ç**
  • Mesajlar 3270
  • Beğeniler 1014 / 1983
  • Ticaret 53, (%100)
Bunu hazır olarak yapabilen bir program var mıdır ya? Yoksa mesele yani :) Araştırmak lazım.
 

 

#4
mujdatsayar mujdatsayar M.Kemal Atatürk Kullanıcı
  • Üyelik 04.04.2012
  • Yaş/Cinsiyet 36 / E
  • Meslek Grafik tasarım
  • Konum İstanbul Avrupa
  • Ad Soyad ** **
  • Mesajlar 1285
  • Beğeniler 452 / 308
  • Ticaret 0, (%0)

cgrclk adlı üyeden alıntı

Bunu hazır olarak yapabilen bir program var mıdır ya? Yoksa mesele yani :) Araştırmak lazım.


adobe edge ile de yapılıyor ama böyle css kodunu veriyor mu bilmiyorum AMA html 5 jqeery kodunu veriyor.
cgrclk

kişi bu mesajı beğendi.

www.mujdatsayar.com
wmaraci
wmaraci

#5
cgrclk cgrclk Fortis Fortuna Adiuvat Kullanıcı
  • Üyelik 18.11.2011
  • Yaş/Cinsiyet 35 / E
  • Meslek Web Developer
  • Konum İstanbul Avrupa
  • Ad Soyad B** Ç**
  • Mesajlar 3270
  • Beğeniler 1014 / 1983
  • Ticaret 53, (%100)

mujdatsayar adlı üyeden alıntı

adobe edge ile de yapılıyor ama böyle css kodunu veriyor mu bilmiyorum AMA html 5 jqeery kodunu veriyor.


Çok ilginç ve çok güzel bi yöntem :)
 

 

#6
mujdatsayar mujdatsayar M.Kemal Atatürk Kullanıcı
  • Üyelik 04.04.2012
  • Yaş/Cinsiyet 36 / E
  • Meslek Grafik tasarım
  • Konum İstanbul Avrupa
  • Ad Soyad ** **
  • Mesajlar 1285
  • Beğeniler 452 / 308
  • Ticaret 0, (%0)

cgrclk adlı üyeden alıntı

Çok ilginç ve çok güzel bi yöntem :)


Tüm ilginçlikleri burada bulabilirsin hocam http://codepen.io/
cgrclk

kişi bu mesajı beğendi.

www.mujdatsayar.com

#7
cgrclk cgrclk Fortis Fortuna Adiuvat Kullanıcı
  • Üyelik 18.11.2011
  • Yaş/Cinsiyet 35 / E
  • Meslek Web Developer
  • Konum İstanbul Avrupa
  • Ad Soyad B** Ç**
  • Mesajlar 3270
  • Beğeniler 1014 / 1983
  • Ticaret 53, (%100)

mujdatsayar adlı üyeden alıntı

Tüm ilginçlikleri burada bulabilirsin hocam http://codepen.io/


Teşekkürler, demoya baktıktan sonra keşfetmiştim :D
mujdatsayar

kişi bu mesajı beğendi.

#8
kilitbilgi kilitbilgi kilitbilgi@gmail.com Kullanıcı
  • Üyelik 13.06.2012
  • Yaş/Cinsiyet 31 / E
  • Meslek Bilgisayar Mühendisi
  • Konum İzmir
  • Ad Soyad B** Ç**
  • Mesajlar 396
  • Beğeniler 82 / 125
  • Ticaret 3, (%100)
Eğlenceli bir çalışma , paylaşım için teşekkürler.
mujdatsayar

kişi bu mesajı beğendi.

#9
fatihcan fatihcan www.ktubotekulubu.com Kullanıcı
  • Üyelik 28.08.2012
  • Yaş/Cinsiyet 32 / E
  • Meslek Öğrenci
  • Konum Trabzon
  • Ad Soyad ** **
  • Mesajlar 478
  • Beğeniler 212 / 75
  • Ticaret 2, (%100)

cgrclk adlı üyeden alıntı

Çok ilginç ve çok güzel bi yöntem :)


SWF'in her karesini resim olarak kaydedilebilir bu resimler sprite tekniği ile birleştirilebilir sonrası malum alt alta koordinatlar değişecek. Düşündüğüm mantık yapılabilir mi?
 

 

#10
cgrclk cgrclk Fortis Fortuna Adiuvat Kullanıcı
  • Üyelik 18.11.2011
  • Yaş/Cinsiyet 35 / E
  • Meslek Web Developer
  • Konum İstanbul Avrupa
  • Ad Soyad B** Ç**
  • Mesajlar 3270
  • Beğeniler 1014 / 1983
  • Ticaret 53, (%100)

fatihcan adlı üyeden alıntı

SWF'in her karesini resim olarak kaydedilebilir bu resimler sprite tekniği ile birleştirilebilir sonrası malum alt alta koordinatlar değişecek. Düşündüğüm mantık yapılabilir mi?


Çok zor bir işlem olur, koordinatları da tam ayarlanmayabilir. Bilemeyeceğim :)
 

 

Akış Diyagramları
Online ziyaretçi sayacı dileyen arkadaşlar yararlanabilirler
wmaraci
wmaraci
Konuyu toplam 1 kişi okuyor. (0 kullanıcı ve 1 misafir)
 
Site Ayarları
  • Tema Seçeneği
  • Site Sesleri
  • Bildirimler
  • Özel Mesaj Al