Arkadaşlar
www.fem.com.tr (http://www.fem.com.tr)
bu web sayfasındaki gibi açılıs ekranı,yani bu harekeli arkaplan nasıl yapılabilir bılgısı olan varmı?
Jquery ve Ajax'la yapılabilir. Sanırım o efekti bgpos isimli bir Javascript eklentisi ile yapmışlar.
https://github.com/brandonaaron/jquery-cssHooks
jquery kütüphanesi ve jquery.bgpos script kullanılıyor belli konulara arka plan resimi belirlenebiliyor
http://code.google.com/p/exteenscript/downloads/detail?name=jquery.bgpos.js&can=2&q= (http://code.google.com/p/exteenscript/downloads/detail?name=jquery.bgpos.js&can=2&q=)
http://snook.ca/technical/jquery-bg/ (http://snook.ca/technical/jquery-bg/)
sayfanın kaynağına bakınca herşey ortada
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1"><title>
Fem Dershaneleri
</title><meta name="description" content="ÖSYM sınavlarına hazırlıkta Türkiye'nin uzman dershanesi. Kurumlarımızda YGS, LYS, KPSS-A, KPSS, KPDS, ÜDS, Ales ve DGS kursları uzman öğretmenler ile kaliteli dokümanlar eşliğinde verilmektedir." /><meta name="keywords" content="YGS kursu,LYS kursu,KPSS kursu,KPSS-A Kursu,KPDS kursu,ÜDS kursu,Ales kursu,DGS kursu" /><link rel="shortcut icon" href="/images/favicon.ico" type="image/x-icon" /><link href="/style/splash-grid.css" rel="stylesheet" type="text/css" media="screen" />
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
<script type="text/javascript" src="/js/jquery.bgpos.js"></script>
<script type="text/javascript">
$(function () {
$('#btn1')
.mouseover(function () {
$('#pics').stop().animate({ backgroundPosition: "0px 0px" }, { duration: 800 })
$('#slogan2, #slogan3, #slogan4, #slogan5, #slogan6, #slogan7,#slogan8').hide()
$('#slogan1').show()
})
$('#btn2')
.mouseover(function () {
$('#pics').stop().animate({ backgroundPosition: "-974px 0px" }, { duration: 800 })
$('#slogan1, #slogan3, #slogan4, #slogan5, #slogan6, #slogan7,#slogan8').hide()
$('#slogan2').show()
})
$('#btn3')
.mouseover(function () {
$('#pics').stop().animate({ backgroundPosition: "0px -486px" }, { duration: 800 })
$('#slogan1, #slogan2, #slogan4, #slogan5, #slogan6, #slogan7,#slogan8').hide()
$('#slogan3').show()
})
$('#btn4')
.mouseover(function () {
$('#pics').stop().animate({ backgroundPosition: "-974px -486px" }, { duration: 800 })
$('#slogan1, #slogan2, #slogan3, #slogan5, #slogan6, #slogan7,#slogan8').hide()
$('#slogan4').show()
})
$('#btn5')
.mouseover(function () {
$('#pics').stop().animate({ backgroundPosition: "0px -972px" }, { duration: 800 })
$('#slogan1, #slogan2, #slogan3, #slogan4, #slogan6, #slogan7,#slogan8').hide()
$('#slogan5').show()
})
$('#btn6')
.mouseover(function () {
$('#pics').stop().animate({ backgroundPosition: "-974px -972px" }, { duration: 800 })
$('#slogan2, #slogan3, #slogan4, #slogan5, #slogan1, #slogan7,#slogan8').hide()
$('#slogan6').show()
})
$('#btn7')
.mouseover(function () {
$('#pics').stop().animate({ backgroundPosition: "0px -1458px" }, { duration: 800 })
$('#slogan2, #slogan3, #slogan4, #slogan5, #slogan6, #slogan1,#slogan8').hide()
$('#slogan7').show()
})
$('#btn8')
.mouseover(function () {
$('#pics').stop().animate({ backgroundPosition: "-974px -1458px" }, { duration: 800 })
$('#slogan2, #slogan3, #slogan4, #slogan5, #slogan6, #slogan1,#slogan7').hide()
$('#slogan8').show()
})
});
</script>
<link href="/js/Colorbox/Colorbox.css" rel="stylesheet" type="text/css" />
<script src="/js/Colorbox/jquery.colorbox.js" type="text/javascript"></script>
</head>
<body>
<form name="form1" method="post" action="Splash.aspx" id="form1">
<div>
<input type="hidden" name="__VIEWSTATE" id="__VIEWSTATE" value="/wEPDwUJNjc3NDk0Mzc4ZGSuXjAd4hhgaaiHGdc4NJ AXTHnScLBteLYZex Atob1w==" />
</div>
<div class="wrapper">
<div class="resimler" id="pics">
<div class="grid">
<div class="slogan">
<div id="slogan1">
<img src="/images/slogan-1.gif" height="120" width="364" alt="" /></div>
<div id="slogan5" style="display: none;">
<img src="/images/slogan-2.gif" height="120" width="364" alt="" /></div>
<div id="slogan3" style="display: none;">
<img src="/images/slogan-3.gif" height="120" width="364" alt="" /></div>
<div id="slogan2" style="display: none;">
<img src="/images/slogan-4.gif" height="120" width="364" alt="" /></div>
<div id="slogan4" style="display: none;">
<img src="/images/slogan-5.gif" height="120" width="364" alt="" /></div>
<div id="slogan6" style="display: none;">
<img src="/images/slogan-6.gif" height="120" width="364" alt="" /></div>
<div id="slogan7" style="display: none;">
<img src="/images/slogan-7.gif" height="120" width="364" alt="" /></div>
<div id="slogan8" style="display: none;">
<img src="/images/slogan-7.gif" height="120" width="364" alt="" /></div>
</div>
</div>
</div>
<div class="btns">
<a href="/default.aspx" id="btn1">
<img src="/images/splash_btn_1.gif" width="120" height="120" alt="" /></a> <a href="http://www.femdershaneleri.com.tr"
id="btn2">
<img src="/images/splash_btn_4.gif" width="120" height="120" alt="" /></a>
<a href="http://www.femyayinlari.com.tr" id="btn3">
<img src="/images/splash_btn_3.gif" width="120" height="120" alt="" /></a> <a href="http://www.femakademi.com"
id="btn4">
<img src="/images/splash_btn_5.gif" width="120" height="120" alt="" /></a>
<a href="http://www.femozel.com.tr" id="btn5">
<img src="/images/splash_btn_2.gif" width="120" height="120" alt="" /></a> <a href="http://www.dilfem.com.tr"
id="btn6" style="margin: 0px;">
<img src="/images/splash_btn_6.gif" width="120" height="120" alt="" /></a>
<a href="http://www.teknofem.com" id="btn7" style="margin: 0px; margin-left: 2px;">
<img src="/images/splash_btn_7.gif" width="120" height="120" alt="" /></a> <a href="http://www.femdergi.com/"
id="btn8" style="margin: 0px; margin-left: 2px;">
<img src="/images/splash_btn_8.gif" width="120" height="120" alt="" /></a>
</div>
</div>
</form>
</body>
</html>
evet kaynaga bende göz atmıstım fakat bişi cıkmamıstı. sadece jquery diye daha once hıc duymadıgım bır teknolojı ıle yazılmıs.onu gördüm.gercekten yenı bır teknolojı mı yoksa benmı gerı kalmısım orasını bılemıyorum.
ama hazır kod bulabılırmıyım dıye bi sorayım ıstedım.
JQuery açık kaynak kodlu, özgür bir yazılım. Bir javascript kütüphanesi.
Bu sitelerde JQuery'e başlangıç dersleri var:
http://docs.jquery.com/Tutorials (http://docs.jquery.com/Tutorials)
http://www.noupe.com/tutorial/51-best-of-jquery-tutorials-and-examples.html (http://www.noupe.com/tutorial/51-best-of-jquery-tutorials-and-examples.html)
JQuery kitapları da çok güzel hazırlanmış. Hiç alakasız bir konuda çalışmama rağmen bunlardan bir tanesi elime geçmişti. İlk bölümden sonra zor durdurabildim kendimi ;)
http://stackoverflow.com/questions/2859434/your-opinion-on-the-best-jquery-book (http://stackoverflow.com/questions/2859434/your-opinion-on-the-best-jquery-book)
flashlada yapılabilir çok zor olacagını sanmıyorum.