böyle bir giriş sayfası nasıl yapılır?

Başlatan zamzam23, 03 Mayıs 2012, 13:05:39

zamzam23

Arkadaşlar

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ı?

elektronikhobi

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

gevv

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://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&#39;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>
 

zamzam23

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.

elektronikhobi

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://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

Oceanicy

flashlada yapılabilir çok zor olacagını sanmıyorum.