Gönderen Konu: böyle bir giriş sayfası nasıl yapılır?  (Okunma sayısı 768 defa)

Çevrimdışı zamzam23

  • Profesyonel Üye
  • *****
  • İleti: 1071
  • Birinciysen birincisindir, ikinciysen hiçbirşey.
böyle bir giriş sayfası nasıl yapılır?
« : 04 Mayıs 2012, 03:05:39 »
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ı?
« Son Düzenleme: 04 Mayıs 2012, 03:14:59 Gönderen: zamzam23 »

Çevrimdışı elektronikhobi

  • Kıdemli
  • ****
  • İleti: 252
    • Elektronik hobi
Ynt: böyle bir giriş sayfası nasıl yapılır?
« Yanıtla #1 : 04 Mayıs 2012, 03:20:52 »
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

Çevrimdışı Burhan

  • Profesyonel Üye
  • *****
  • İleti: 1658
Ynt: böyle bir giriş sayfası nasıl yapılır?
« Yanıtla #2 : 04 Mayıs 2012, 03:22:27 »
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



Kod: [Seç]
<!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>

Çevrimdışı zamzam23

  • Profesyonel Üye
  • *****
  • İleti: 1071
  • Birinciysen birincisindir, ikinciysen hiçbirşey.
Ynt: böyle bir giriş sayfası nasıl yapılır?
« Yanıtla #3 : 04 Mayıs 2012, 04:08:56 »
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.

Çevrimdışı elektronikhobi

  • Kıdemli
  • ****
  • İleti: 252
    • Elektronik hobi
Ynt: böyle bir giriş sayfası nasıl yapılır?
« Yanıtla #4 : 04 Mayıs 2012, 04:47:14 »
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

Çevrimdışı Oceanicy

  • Üye
  • **
  • İleti: 28
Ynt: böyle bir giriş sayfası nasıl yapılır?
« Yanıtla #5 : 04 Mayıs 2012, 07:22:50 »
flashlada yapılabilir çok zor olacagını sanmıyorum.
tasarimus.com