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

Html Marquee Yardım!

 5 Mesajlar 1.042 Okunma
acebozum
tr.link

#1
gkmnbkr gkmnbkr WM Aracı Kullanıcı
  • Üyelik 22.04.2014
  • Yaş/Cinsiyet 35 / E
  • Meslek Dış Ticaret Uzmanı
  • Konum Konya
  • Ad Soyad G** B**
  • Mesajlar 80
  • Beğeniler 3 / 11
  • Ticaret 0, (%0)
Merhaba arkadaşlar. marquee etiketini kullanarak iki farklı elementi aynı satırda göstermek istiyorum. Ancak bu elementlerin sağa sola yukarı aşağıya değil de birinin kaybolup diğerinin ortaya çıkması şeklinde nasıl yapabilirim? Ya da marquee dışında başka bir yöntemle bunu yapmam mümkün mü? Şimdiden teşekkür ediyorum
 

 

elektronikssl
webimgo

#2
sovetski sovetski ♛ PHP ♛ Kimlik Onayı
  • Üyelik 03.08.2015
  • Yaş/Cinsiyet 27 / E
  • Meslek Yazılımcı
  • Konum Fransa
  • Ad Soyad A** H**
  • Mesajlar 1205
  • Beğeniler 437 / 458
  • Ticaret 2, (%100)
Aradıgınız marquee degil Slider, internetten binlerce kaynak bulabilirsiniz
 

 

#3
tatarkursad tatarkursad WM Aracı Kullanıcı
  • Üyelik 26.12.2015
  • Yaş/Cinsiyet 31 / E
  • Meslek Grafik Tasarım
  • Konum İstanbul Avrupa
  • Ad Soyad K** T**
  • Mesajlar 80
  • Beğeniler 31 / 30
  • Ticaret 0, (%0)
Şu sayfa işini görebilir.

http://www.fillster.com/htmlcodes/marquees.html
 

 

#4
ontedi ontedi www.ontedi.com Kullanıcı
  • Üyelik 03.10.2013
  • Yaş/Cinsiyet 44 / E
  • Meslek Yazılım Uzmanı, Matematikçi
  • Konum Ankara
  • Ad Soyad S** T**
  • Mesajlar 1118
  • Beğeniler 325 / 324
  • Ticaret 2, (%100)
http://www.ontedi.com/javascript/jquery-ile-kayan-haber-yapimi-ornek-1

İşini görecektir.
 

 

www.ontedi.com
www.cizgi.site
wmaraci
wmaraci

#5
Mertkaynak Mertkaynak WM Aracı Kullanıcı
  • Üyelik 14.01.2016
  • Yaş/Cinsiyet 25 / E
  • Meslek Öğrenci
  • Konum İzmir
  • Ad Soyad M** K**
  • Mesajlar 8
  • Beğeniler 8 / 1
  • Ticaret 0, (%0)
Hocam @sovetski'nin de dediği gibi o dediğiniz özellik marquee değil, Slider oluyor.
Resimlere manuel bir kontrol olmadan belli bir süreye göre birinin kaybolup, diğerinin gelmesini HTML + CSS ile yapabilirsiniz.
Yok, ben manuel geçişle olsun istiyorum derseniz de, JavaScript kullanmanız gerekiyor.

Otomatik geçiş için @Key-frame ile yapılan bir örneği göstereyim size;

CSS kodlarında bulunan animation: ustslider2 50s infinite;

"50s" yazan yerden geçişin ne kadar sürede olacağını ayarlayabilirsiniz.

HTML Kodları:










CSS Kodları:

.ustslider1 {
position: absolute;
-webkit-animation: ustslider1 50s infinite; /* Chrome, Safari, Opera */
animation: ustslider1 50s infinite;
}
.ustslider2 {
position: absolute;
-webkit-animation: ustslider2 50s infinite; /* Chrome, Safari, Opera */
animation: ustslider2 50s infinite;
}
.ustslider3 {
position: absolute;
-webkit-animation: ustslider3 50s infinite; /* Chrome, Safari, Opera */
animation: ustslider3 50s infinite;
}
.ustslider4 {
position: absolute;
-webkit-animation: ustslider4 50s infinite; /* Chrome, Safari, Opera */
animation: ustslider4 50s infinite;
}
/* Üst Slider 1 */
@-webkit-keyframes ustslider1 {
0% {opacity:0; -webkit-opacity:0; -moz-opacity:0;}
2% {opacity:1; -webkit-opacity:1; -moz-opacity:1;}
24% {opacity:1; -webkit-opacity:1; -moz-opacity:1;}
25% {opacity:0; -webkit-opacity:0; -moz-opacity:0;}
100% {opacity:0; -webkit-opacity:0; -moz-opacity:0;}
}
@keyframes ustslider1 {
0% {opacity:0; -webkit-opacity:0; -moz-opacity:0;}
2% {opacity:1; -webkit-opacity:1; -moz-opacity:1;}
24% {opacity:1; -webkit-opacity:1; -moz-opacity:1;}
25% {opacity:0; -webkit-opacity:0; -moz-opacity:0;}
100% {opacity:0; -webkit-opacity:0; -moz-opacity:0;}
}


/* Üst Slider 2 */
@-webkit-keyframes ustslider2 {
0% {opacity:0; -webkit-opacity:0; -moz-opacity:0;}
25% {opacity:0; -webkit-opacity:0; -moz-opacity:0;}
27% {opacity:1; -webkit-opacity:1; -moz-opacity:1;}
49% {opacity:1; -webkit-opacity:1; -moz-opacity:1;}
50% {opacity:0; -webkit-opacity:0; -moz-opacity:0;}
100% {opacity:0; -webkit-opacity:0; -moz-opacity:0;}
}
@keyframes ustslider2 {
0% {opacity:0; -webkit-opacity:0; -moz-opacity:0;}
25% {opacity:0; -webkit-opacity:0; -moz-opacity:0;}
27% {opacity:1; -webkit-opacity:1; -moz-opacity:1;}
49% {opacity:1; -webkit-opacity:1; -moz-opacity:1;}
50% {opacity:0; -webkit-opacity:0; -moz-opacity:0;}
100% {opacity:0; -webkit-opacity:0; -moz-opacity:0;}
}


/* Üst Slider 3 */
@-webkit-keyframes ustslider3 {
0% {opacity:0; -webkit-opacity:0; -moz-opacity:0;}
50% {opacity:0; -webkit-opacity:0; -moz-opacity:0;}
52% {opacity:1; -webkit-opacity:1; -moz-opacity:1;}
74% {opacity:1; -webkit-opacity:1; -moz-opacity:1;}
75% {opacity:0; -webkit-opacity:0; -moz-opacity:0;}
100% {opacity:0; -webkit-opacity:0; -moz-opacity:0;}
}
@keyframes ustslider3 {
0% {opacity:0; -webkit-opacity:0; -moz-opacity:0;}
50% {opacity:0; -webkit-opacity:0; -moz-opacity:0;}
52% {opacity:1; -webkit-opacity:1; -moz-opacity:1;}
74% {opacity:1; -webkit-opacity:1; -moz-opacity:1;}
75% {opacity:0; -webkit-opacity:0; -moz-opacity:0;}
100% {opacity:0; -webkit-opacity:0; -moz-opacity:0;}
}


/* Üst Slider 4 */


@-webkit-keyframes ustslider4 {
0% {opacity:0; -webkit-opacity:0; -moz-opacity:0;}
75% {opacity:0; -webkit-opacity:0; -moz-opacity:0;}
77% {opacity:1; -webkit-opacity:1; -moz-opacity:1;}
99% {opacity:1; -webkit-opacity:1; -moz-opacity:1;}
100% {opacity:0; -webkit-opacity:0; -moz-opacity:0;}
}
@keyframes ustslider4 {
0% {opacity:0; -webkit-opacity:0; -moz-opacity:0;}
75% {opacity:0; -webkit-opacity:0; -moz-opacity:0;}
77% {opacity:1; -webkit-opacity:1; -moz-opacity:1;}
99% {opacity:1; -webkit-opacity:1; -moz-opacity:1;}
100% {opacity:0; -webkit-opacity:0; -moz-opacity:0;}
}
 

 

Ücretsiz bulduğum sitede birşeyi çözemedim lütfen yardım.
DERS | CSS ve Jquery Kullanarak Açılıp Kapanan Perde Yapımı
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