% uh benim sayfa 18 scrollbar içerik altını vurur biz Peek-a-boo kutu animasyonlu bir şekilde görünümüne girer olun ve yalnız animasyon mümkün kılmak için bir satır ve CSS3 kullanabilirsiniz tamam işte yaptım benim var en sayfadaki içeriğin bir göz atalım peek-boo a-o uh bir kimlik% vardır Alt pencere bir ben o dinleme görüldü peek-a-boo de bu ders ile daha uyumlu tamam yüzden var yani Bir çok yüksek ayarlanmış basit bir paragraf başlığı 1600 piksel bana parçacık kaydırma bir sürü vermek için şu benim sayfadaki çok f

azla veri var simüle etmek ardından son elemana bu paragrafta altında dikey kaydırma yapmak için yeterli sayfa Benim pick up bir kutu ve HTML olacak bir örnek var hepsi işte Şimdi en Bizim CSS uygulayalım yüzden stil öğesini açabilirsiniz Bizim baş öğe türü text / css birkaç satır aşağı gitmek ve kapanış koymak Bu stil öğesi için etiket şimdi Şimdi bu hedef edelim peek-a-boo kutu CSS div için bir kural yapmak ve bir kimlik, bir gözetleme bir boo ile biz bunu önemli bir tüm bu özellikleri uygulamak olanlar henüz pozisyon özelliği bu şekilde sabittir dedik olabilir onun alt pozisyon 20 Daha sonra sayfanın altına aldım ve nasıl oldu Doğru pozisyon Ben eksi 352 piksel olarak ayarlanır Benim kutuları 300 piksel genişliğinde güzel düzenlenmiş Sağ 352 piksel yani pencere görünümü ağrısı dışındaki arasında bu yüzden görüntüle ağrı oturma dışında bulunuyor Sağdaki tarafına kapalı iki piksel Kullanıcının pencere biraz background-color: açık mavi Ben bu yüzden kutu 25 doldurma verdi benim sen benim bu üç yüz ile görmek ama ben kutuyu oturan var olan 03:52 dolgu ile birlikte kutu 350 geliyor Beni durumda oldukça 52 Moxie 352 oturan ve görüyorum neden bu kadar işte sen Herhangi koymak kutunuza sınırları you wanna sınırın biraz şerit gösteren yok bu yüzden sadece yeterince doğru taşımak emin olun Kullanıcı görebilirsiniz nerede başlangıçta ve sıkı yazı tipi boyutu 200 piksel Ben kelime koymak istedim çünkü gerçekten büyük Bunun P çift gerçekten büyük nerede sadece bu örnek Kutuyu-a-boo peek o tarzda olursa olsun, istediğiniz koyabilirsiniz Eğer bizim favori tarayıcı test saat içinde istediğiniz herhangi bir şekilde emin olun eleman sağa sayfa gizleme olduğunu bu yüzden alt kısmına gidin ve ben burada artık araçlarının bitti görmüyorum Burada bu alanda kapalı yaşıyor olacaktık üzerinde sağa işini kapalı yapıyor Şimdi onu görmek JavaScript uygulayabilirsiniz sağlayabilirsiniz sihir ve ben he gidiyorum yapmak için kullandığım bir işlev var Biz birkaç ay sırt yapılan önceki bir öğretici alt kaydırma için daha dinamik içerik öğretici eklemek o Facebook ve Google + 'biz üzerinde nasıl böyle gösterdi öğretici oldu Kaydırma Eğer ilerlediğinizde Google+ bir Facebook does it varsa emin değilim Sayfanın alt Facebook böylece yüklenen daha dinamik içerik başlangıçta çok içerik yüklü değil sayfa sendin altına gidin eğer öğretici ile yalnız yüklenmiş tüm hakkında sayılar Ben bu işlevi alıyorum sizi nasıl göstereceğim size göstermek İlk bana CSS altında baş etiketine işlevi etsinler Sana fonksiyon kodu yerine ayarladığınız burada görebilirsiniz ve neden kaydırıldığını eylemcisini isim Ben adını neden dikey düzlem neden şimdi kaydırma neden X yatay düzlem öyleyse neden bu kadar dikey düzlemde olduğunu Okul HP geliştirmek için giderseniz ben şimdi hedef oldu uçağı neden Ördek üzerinde JavaScript eğitim videosu bölümünde Sizin için kaydırma aşağı benim arama çubuğunu kullanın eğer görünür Eğer sayfanın içine JavaScript kaydırma öğretici düşük dinamik içerik aramak istediğiniz Kullanıcı, alt ulaşır bu benim yükleniyor daha bütün kavram bahsediyordu biridir Kullanıcı alt ulaşır sayfaya içerik O kod tür olduğunda burada Y eylemcisini bakın Ben oluşturmak için bu kod benzer tür kullanılır Eğer merak herhangi eğer hoparlör kutusu yani etkileyecek Seni tekrar anlatmaya gitmiyorum tüm hakkında bu ne fonksiyonlarını bilir ve Tekrar ve tekrar öğretici olsa izlemek gidebilirsiniz Eğer derinlemesine nasıl bu fonksiyon y okul eli çalıştığını anlamak istiyorsanız kaydırma olayı aşağı pencere ile çalışır ama seni anlatacağım Kullanıcı, bu ben kaydırma neden işleyici penceresini kayar zaman ve anlamı işlev Her zaman kapalı ateş gidiyor rüzgar yukarı kaydırmak Hatta biraz biz ya sarmak gerek yok edilir Ben sadece belge nokta hedef farkındayız çünkü vücut yerine yüksek ofset gerektiren bir Güzel bir içerik etrafında bir şal sadece vücut elemanı kullanabilirsiniz senin ofset yükseklik ayarı gibi burada ben bu konuyu daha önce en bir göz atalım biraz acı burada soğuk içeriden o Neden okul işleyicisi emin olun tarayıcısına kılan bir göz atalım o eserler altına gidin insanlar kutu var yedekleme çok güzel kaydırma ve uzak tamam çok hızlı bir şekilde kod açıklanmaya çalışılmıştır gider Biz yaş olduğunu, diğer öğretici vardı koduna çok benzer Bir saniye önce sevk Bu fonksiyon yapmak ilk şey bir nesne başvurusu oluşturmak olduğunu sayfadaki peek-a-boo elemanları için bu hoparlör kutusu olan diyoruz gibi belge, kimlik peek-a-boo ile eleman şimdi biz o eleman için bir nesne başvurusu var ve biz demek Pencere nokta sayfası neden Ofset Onun yüksekliği pencereyi kapat nokta daha büyüktür eşit veya vücut ofset yüksekliği belgelemek o zaman yapar kodu çalıştırın istiyorum bunu görebilirsiniz kutu kullanıcının bakış girer ve animasyonlu bir şekilde biz bunu geçiş özelliğini kullanın yaklaşık 3 öğreticiler önce önce sadece birkaç öğreticiler ben olduğunu düşünüyorum Ben CSS3 geçişleri tetiklemek konusunda derinlemesine konuştuk Gitmem vermeyeceğim işte yapıyorum javascript yolu kullanarak Yine ya ama bu konuda derinlemesine sadece zaman bunu biliyor şartlar mantık karşılanmaktadır ve gerçek dönerse Daha sonra bu kod kutusu röportajı getirmek olacak koşmak Temelde bu, eğer koşullar mantık kurulur İki kuruş, sayfanın altındaki kullanıcı verilirse o kadar Eğer değerler tüm bu özellikleri anlamak yoksa onlar olabilir size sadece kullanıcı dibine çarptığında anlamda var olduğunu anlamak Sayfayı onlar altına gidin ne zaman yaptıkları zaman onların sihirli kutu röportaj getirmek istiyorum başka onlar kaydırma yaparken ve onlar belki bu dibe vurmak değil geri sürünerek bu kadar basit yani bir anlaşma geri o kutuyu animasyon istiyorum Kullanıcı çarptığında alt kutusunu animasyon kutusunu animasyon Başka röportaj tüm tarayıcılarda gözden dışarı ve işte o tüm orada şimdi diyelim testi Biz erken peek a boo Chrome'da çalıştığını biliyorum bu yüzden Chrome kontrol ettik peek-a-boo Ben dosya önizleme oldu Firefox peek-a-boo düşünülebilir önizleme ve Internet Explorer alt çift gidin kim Koca adam şimdi Önizleme bu kim Safari'de görünümüne dini enstantane kendi olur kim çıkışları anneler gitmek Bu arada bir çok sigara animasyon çeşit Onlar altına almak, kullanıcı hala çok hoş değil onu görmek böylece eski tarayıcılarda neler yapabileceğini önek onun kullanılmaktadır ve javascript o CSS yaptığını biraz daha farklı yapmak genellikle CSS böyle bir şey görürsünüz Bu WebKit öneki ama bunu yapmak için JavaScript burada ve şimdiye kadar WebKit öneki kullanır böylece javascript dizide burada o sadece WebKit yazdığınız yapmak için Tüm küçük harf ve sonra bir vermek özellik CSS özelliği sermaye Sadece ilk harfi ben WebKit var görebilirsiniz kopyalamak o sizi geçiş Benim dosyayı kaydetmek için geçit burada kontrolünü basın Daha sonra Safari'de önizleme dosya gitmek alt Okul ve biz peek-a-boo canlandırdı İstersen bu işe bu yüzden biz şimdi sadece istediğiniz gibi tüm satırlar için önek hedefleyebilir Urs gerçekten eski Internet Explorer için MS gibi Giriş ms orada Sizlerle olarak en diğer tarayıcılar düşünüyorum düz-up geçiş özelliğini kullanıyorsunuz fark ancak birden çok eklemek zorunda eğer sadece son bu satırı ekleyin Bu çizgi, son emin almak ama yukarıdaki diğerleri Eğer orada ağırlık seti geçişi koyacaktım nereye ve o çalışmak olacak şimdi bunun altında bu tane var krom Ben dibe gitmek Bir göz a boo ve Safari olsun Tamam fakat bu özellik geçişi standardize javascript çağrılabilir Tüm modern tarayıcılar Internet Explorer Firefox Chrome ve belki de benim safari sadece eski bir eski bir sürümü uyuşturucudan uzak kalmak tamam oluştururken bu dersi zevk umut peek-a-boo javascript ve css kullanarak kutuları Bu videoyu beğendiyseniz ve arkadaşlarınızla bir dakika paylaşan kıçına tekmeyi yok.