6 EYLÜL 2014, CUMARTESİ

Sihirli Üstbilgi Kaydırma Sayfa Öğretici Javascript Css Html

Merhaba öğrenebilirsiniz Bu derste herkes program sihirli sayfanın biraz aşağı kullanıcı kaydıran olarak değiştiren bir başlık ne zaman Sayfanın en üstüne geri kullanıcı kayar özgün ekran moduna geri başlık değişikliği yapacak en egzersiz bitirmek üründe bir göz atalım Ben kaydırma kapmak olacak ve ben sayfayı aşağı kaydırmak için başlayacağız Şimdi menü sisteminde başlığını izlemek ne zaman o başlık çöktü veya daha küçük hale veya Gizli modda kullanıcının tüm içeriği aşağı kaydırma yaparken içine zaman Üste geri kullanıcı kayar başlığı izle sayfası Eğer tüm menü sistemi ile birlikte geri geliyor görürsünüz ve animasyon

lu bir şekilde olur bu yüzden de serin bir animasyon etkileri vardır ve bunu ne zaman ne yaptı Kaydırma sayfanın içine 150 piksel aşağı etrafında ulaşır ve bu gerçekten temel bazı ders var Eğer kaydırma olayını dinlemek

için güçlü olmak istiyorum ve sayfanın içine aşağı 150 piksel ulaşırsa değerlendirmek istediğiniz Eğer başlık değişikliği yapmak istiyorsanız işte o zaman biz ilk çıplak kemikleri ile başlayan bir html5 web belgesi v

“Ders Kodu: http://www.developphp.com/video/JavaScript/Magic-Header-Scroll-Page-Tutorial Sihirli Sayfanın altındaki kullanıcı kaydıran olarak değiştiren bir başlık...”
Adam Khoury

ar gidiyoruz yapacak bir şey Bu örnek için HTML olacak muhtaç biraz ekleyin İlk biz eşit bir kimlikle gerekli Sayfa başına dön yaptığımız kıyafetler içinde birkaç satır aşağı gitmek emin olun şimdi yapacağız yaptım yaptım içeriden bir çocuk koymak konum Bu kişinin olacak menü ve hafta sonu bağlı olacak bir kimliği var İç HTML menü sistemi ver ve zeytin vereceğini budur senin Bağlantı elemanları menü sistemini oluşturan siz ancak hiçbir unsurlar Gerçekten bile be

Sihirli Üstbilgi Kaydırma Sayfa Öğretici Javascript Css Html Resim 1 Sihirli Üstbilgi Kaydırma Sayfa Öğretici Javascript Css Html Resim 2 Sihirli Üstbilgi Kaydırma Sayfa Öğretici Javascript Css Html Resim 3 Sihirli Üstbilgi Kaydırma Sayfa Öğretici Javascript Css Html Resim 4

n sadece bir göstermek istiyoruz orada bir menü sistemine sahip gerekmez örnek iki öğe daraltmak için nasıl Eğer bir değişiklik özelliklerini genişletmek daraltmak bu şekilde Eğer herhangi bir animasyonlu bir şekilde değiştirmek istediğiniz herhangi bir CSS özellikleri yaşadığınız elemanlar bu yüzden bazı şeyleri yeniden konumlandırmak zaman menü veya başlık değişikliği Eğer işler fade in ve yükseklik yapabilirsiniz çıkarmak Ben yükseklikleri yapacağız bu derste yapacağım budur değiştirmek değişiklik Eğer demo gördüm e

fekti oluşturmak için ve başlıkta iç HTML Ben sayfa top adında ki ben öylece kelime başlığını koymak yaşıyorum Şimdi bizim sayfa üst konteyner altında Biz geri kalanı için sarıcı başka konteyner zorunda gidiyoruz Sayfanızda olurdu, normal varsayılan içeriği content Kullanıcı yukarı gidiyor ve aşağı yüzden o isim o Dave rapçi ve biraz içine ben sadece olacak bazı kukla koydu biraz komut koymak sayfa içeriği kaç satır olacak 40 satır sayfa içeriğini yapmış koymak bunun için döngü içinde biz basit kullanıyorsanız kırk h2 elemanları olacak javascript ve sen olurdu çünkü kendinizi endişe zorunda değilsiniz Gerçek sayfa içeriği içinde bir rapçi olmak eleman ve HTML şimdi bazı CSS uygulanacaktır için bu kadar Bu sayfayı üst elemana menü öğesi için ve işte tarzı rapçi element sayfa üst için kuralda olacak pop konum Şimdi biz animasyon efekti elde yolu sadece geçiş koyuyor Üzerinde mülkiyet ve biz istediğimiz CSS diğer özellikleri koymak Bu arada bir animasyon tür etkiler bu yüzden yüksekliği ve doldurma etkileyecek gidiyoruz animasyonlu şekilde header Şimdi değişim o olacak javascript olacakları geldiğinde ama değişim olacak javascript gerçekleşmesi olsa bile Örneğin biz sadece CSS değiştirmek için JavaScript talimat gidiyoruz Bu eleman ve biz bu geçiş uyguladık beri o olacak ve animasyonlu efekt biz koymak zorunda değilsiniz Herhangi bir animasyon veya referans herhangi animasyonlar Biz javascript özelliğini değiştirdiğinizde Yapmamız gereken tüm basitçe sonraki bir değerden özelliğini değiştirmek olduğunu ve sonra biz bir yerde bu geçiş özelliğine sahip olması o ve animasyonlu etkisi olacak demektir JavaScript var teknoloji olacak olsa bile şimdi bir sonraki değişim talimat biz yerde olacak koymak olduğunu kuralı menüsü için vermek o çocuk atıf sayfa üst yaptım bulunuyor hangi bu özellikleri çok doğru burada bu adam etkileyen yaptım ve bu sadece sahip olacak animasyonlu bir yüksekliğe etkisi ve nihayet CSS biz eklemek için gidiyoruz için kural bizim hangi sarıcı div seveceksin normal sayfa içeriğini sarar sarıcı olacak margin-top yapmak: 230 piksel İstediğimiz o aittir bu şekilde sihirli başlık ihtiyaç Ben tüm CSS çöküşü devam ediyorum görsel hiçbir şekilde değil ve biz script öğesindeki işe yaramayacak konum sadece bu yüzden Şimdi gerekli javascript eklemek için kaydırma konumu belirli bir noktaya ulaştığında bu değişikliklerin gerçekleşmesi için böylece sayfada dikey kaydırma dinlemek için biz sadece pencereye bir dinleyici ekleyin edeceksin olay dinleyicisi kaydırma de pencere nokta Olay bu kadar zaman fare tekerleği ile kullanıcı kaydırıldığını veya çubuk veya herhangi bir şekilde sürükleyerek onlar sayfayı kaydırma Bu yüzden kaydırma fonksiyonu ateşlemesi için gidiyor bu yüzden bu yüzden kaydırma fonksiyonu şu an yazmak gerekir ki ben oldum fonksiyon neden kaydırma küme ayracı çevreleyen yakın parantez açma küme ayracı açmak ve yapacak patlama sayfasında iki eleman ile nesne başvurularını olsun Biz etkilenen istediğiniz sayfa üst ve menü bu yüzden biz burada bu değişkenleri koyabilirsiniz Bir olacağını aslında biz fonksiyonun dışında bu değişkenleri atayabilirsiniz daha verimli küçük Biz var sayfa üst koyarsanız virgül menüsü Şimdi biz imzalamak, bu değişkenler İlk Programımızda bir şey ve bu fonksiyonu olarak içeride mevcut olacak iyi bu yüzden biz belgeye eşit L olsun emin olun sayfa üst değişken söylemek Belki Kimliği Sayfanın üst şimdi başvuruları sayfa üst nesne değil ve menü nesne referansı şimdi en go ahead ve bir daha değişken koyalım y POS denir ve o gidiyor Kullanıcı sayfasına aşağı kaydırma sahip geniş konumunu temsil şimdi neden kaydırma işlevi o değer kolay olsun o y pencere nokta sayfaya neden eşit Pos demek Eğer değeri elde edebilirsiniz ofset sayısına göre bir piksel kullanıcıların sayfanın içine aşağı kaydırma o sayfayı penceresini kullanarak neden üzgün mülkiyet Şimdi bu sayı ne yapmanız gereken tüm basit konur Başka koşul deyimi ise çok basit bir mantık var Programınız sadece kullanıcı nerede kaydırma konumu okuyabilecek olmak zorunda Sayfanın okul konumunda ve daha sonra buna göre şeyler o yüzden durum deyimi söyler koymak bana tamam let nasıl basit hemen ve ben bir basit işte size açıklayacağım Geniş poz eğer başka koşul deyimi yüzden yazarsanız daha büyük 150 piksel Eğer ne istiyorsanız ve istediğiniz herhangi bir şey için bu numarayı ayarlayabilirsiniz Biraz erken sadece yüz o koydu onlar içine biraz daha aşağı kaydırma zaman o istiyorum biraz sonra gerçekleşmesi sayfa 400 bu yüzden sadece dediğim gibi ve daha fazla sayıda bu koymak o da sayfa top 250 piksel alırsa merhaba elemanlar 36 piksel değiştirildi olacak Sayfanın üst öğeleri padding-top: değişmiş olacak 8 piksel ve oradan görebilirsiniz Sayfa yüklendiğinde elimizde orijinal ayar Bir padding-top var: 50 piksel ve 120 yüksek bu yüzden biz oldukça köklü değişiklik veriyoruz Daha sonra yükseklik ve padding biz menü söylüyorsun yükseklik içinde sıfıra eşit tarzı sadece tamamen go away y konumu az ise şimdi başka 150'den bu başka koşulu gidiyor Bu kodun yangın ve orijinal geri döner menü Tam ekran devlet 120 pics yüksek padding-top: ellide ve menü kullanmak için kullanıcının görünümüne geri geliyor karmaşık basit bu gerçekten bir şey oluyor işte Bütün matematik mantık basit basit: Her şey basit ihtiyaç vardır hiçbir çerçeveler olduğunu çok az gerektirir gerçekten serin etkisi var zihinsel çalışma üretmek ve ben tüm büyük popüler tarayıcılarda bu test Ben biraz aşağı kaydırma yaparken etkileyecek bitmiş son bir göz atın Benim fare ile veya çubuğunu sürükleyerek ya bir kaydırma up gibi ve menü sisteminde başlık sihirli Sayfanın altındaki animasyonlu şekilde değiştirmek video zevk eğer o sadece seyretti 2010 yılında ayarlamak abone butonuna tıklayın O sizce bir mola bu yeni şeyler kullanabilirsiniz birkaç barış şefi Julian için sağ tuşa var liste o bulgu yararlı olduğu tespit görünümüne geliyor izlediğiniz için teşekkürler Bir dahaki sefere, eğer.

Açıklama

Ders Kodu: http://www.developphp.com/video/JavaScript/Magic-Header-Scroll-Page-Tutorial Sihirli Sayfanın altındaki kullanıcı kaydıran olarak değiştiren bir başlık Öğrenmek için program. Ne zaman kullanıcı verilirse geri Sayfanın en biz başlık geri orijinal görüntü ayarları değiştirmek yapacaktır.

Bunu Paylaş:
  • Google+
  • E-Posta
Etiketler:

Adam Khoury

Adam Khoury

Profesyonel bir online bedava gibi kod ve tasarım öğrenin. JavaScript, PHP, SQL, HTML, CSS, ActionScript ve daha fazlası gibi usta geliştirme teknolojileri. Tüm videoları http://www.developphp.com daha iyi organize olan

YORUMLAR



9.9/10

  • 418
    Olumlu
  • 2
    Olumsuz
  • 98
    Yorum
  • 31373
    Gösterim

SPONSOR VİDEO

Rastgele Yazarlar

  • Ammine Getahun

    Ammine Getah

    21 HAZİRAN 2011
  • Boiler Room

    Boiler Room

    10 Mayıs 2012
  • Mr_BrettHooge

    Mr_BrettHoog

    3 Ocak 2011

ANKET



Bu sayfa işinize yaradı mı?