Home JQuery Facebook Tarzı Scrollbar Yapımı
Facebook Tarzı Scrollbar Yapımı

Facebook Tarzı Scrollbar Yapımı

254
9

Merhaba Arkadaşlar ,

Facebook‘un artık hayatımızın vazgeçilmezi olduğunu hepimiz biliyoruz ” tabi benim için değil:) “Günlük hayatının büyük bir bölümünü orda olmasada sanal dünyada geçiren arkadaşlar var , emin olun 🙂 Sanırsam reel hayat artık kendisini sanal hayata bıraktı. Belkide ben yanlış düşünüyorumdur.:) NE DERSİNİZ ?

Tabi konumuzla ne alakası var diyeceksiniz Ömer hocam. 🙂 Ne yapayım? Burda bir uygulamadan bahsederken biraz hiciv yapalım dedik.:) Neyse asıl konumuza geçelim facebook’ta yeni dönem uygulamalarında bildiğiniz gibi herkesin durumu hakkında bilgi aldığımız “facebook’un sağ tarafında olan ” bil bölüm var. İşte o tarz Yapılmış bir  scroollbar‘ın  düzenlenmesini anlatacağım..

Size vereceğim Rar’lı dosyanın içinde 3  klasör ve 1 adet index.html dosyası bulunmakta. Bu klasörlerden css klasörü içerik düzenleme ile alakalı dosyanın olduğu klasördür. Js klasörü javascript kodlarının olduğu klasörüdür. İmages klasörü  uygulamanın içinde yer alan küçük resimlerin bulunuğu klasördür.

Bizim için önemli olan dosyalar tabikide index.html ve images klasörü içinde yer alan resimlerdir. Onun için ilk olarak resimlerimizi ordaki boyutları göz önünde bulundurarak resimler değiştirilmeli.

İndex.html dosyasını editör programı vasıtasıyla açtığımızda aşağıdaki kodları göreceğiz;

<a target=”_blank” href=”http://www.omerbozalan.com/”> ( burası tıklandığında gidecek  sayfa )
                        <img src=”images/thumbs/1.jpg”/> ( burası ise images klasörünün içinde bulunan scrollbarda yer alan küçük resim)
                        <div>
                            <h3>Draggable Image Boxes Grid</h3> ( scrooll bar başlığı )
                            Fikir kutulari kucuk ve menu ogeleri gibi gosteren bir suruklenebilir izgara sahip olmaktir. Bir kere tiklandiginda, thumbnail Tam boy resmi genisletmek ve menu ogesi kutusunda tam ekran bir icerik alanina genisletmek olacaktir. ( burası ise içerik )
                        </div>
                    </a>(Yukarıdaki alan yani mavi yazı kısmı  1 bölümden  oluşuyor. Artırmak için bu alanı çoğaltmanız yeterlidir.)
<a target=”_blank” href=”www.omerbozalan.com/”>
<img src=”images/thumbs/2.jpg”/>
<div>
<h3>Facebook Zaman Tuneli</h3>
Ana fikir yanal belgenin kaydirma konumuna bagli unsurlar slayt etmektir. Bir sol ve sag tarafina dogru sayfa bolmek, biz onlar ekranlarinda oldugunda merkezine sayfanin “disaridan” gelen unsurlar tasimak istiyorum. Ayrica 3D alaninda ogeleri tasimak icin bu secenegi ekleyecek.
</div>
</a>

Gördüğünüz gibi yukarıdaki kırmizi yazılarla sizlere index.html dosyasındaki kodların ve yerlerinin ne anlama geldiğini anlattık. Kolay gelsin. Anlamadığınız bir yer olursa yorum bölümünden bizlere iletişime geçin…

Anlatım : Ömer BOZALAN

DemoButton
 

hemen-indir-butonu

(254)

omerbozalan 1981 doğumluyum. Üniversite eğitimimi, Sakarya Ünv. Elektronik ve Bilgisayar Öğretmeni bitirerek tamamladım. Ayrıca C Sınıfı İş Sağlığı ve Güvenliği Uzmanıyım. 2014 Nisan ayında Adobe Dreamweaver CS6 Kitabımı yayınlarak tüm bildiklerimi sizlerle paylaşmak istedim. Kendimi Web Tasarım, Grafik Tasarım, Donanım konusunda hâlâ geliştirmekteyim.

Yorum(9)

  1. elimde bir çalışma var ve buna scrollbar eklemeye çalışıyorum scrollbarı kullandığım yer index.html sayfasının içine gömülü olan iframe de index.html çalıştırdığımda scrollbar sürekli ekranda duruyor normalde üstüne gelice gözükmesi gerekiyor sorun nedir anlamadım iframe olan dosyada ise tam çalışıyor. birde aynı frame içinde başka bir div de daha kullanmam gerekiyor bunu nasıl yapabilirim.

    İlginizden dolayı teşekkür ederim iyi çalışmalar

  2. Facebook üyeliğim yok mail adresi için teşekkür ederim gönderdim dosyamı yardımlarınız ve paylaşımlarınız için çok teşekkür ederim bir takipçiniz daha oldu başarılarınızın devamını diliyorum.

  3. kardeş, paylaşımın için teşekkürler. fakat benim bir sorum olacak. bu jquery.mousewheel.js ne işe yarıyor? bu uygulamayla bir ilgisi yok gibi. sayfadan kaldırıyorum, değişen hiç bir şey olmuyor.

  4. Ömer bey sorunum şu bu özelliği uzun zamandır kullanıyorum ama farkettik ki internet explorerda bu özellik bozuluyor gerektiği gibi çalışmıyor. Bunu nasıl düzelte biliriz*

  5. Selam. Ben kendi sitem için bu tür bir scroll box istiyorum. Fakat bir sorunum var: Fare textin üstündeyken scroll yapmasın istiyorum. Sadece butonu kullanarak yazıyı kaydırmalıyım. Fareyi scroll barın üstüne getirince hiç tıklamadan, tekerlek yardımıyla çevirebilmem gerekiyor. Zaten sizin mevcut tasarımınızda tıklamadan hemen scroll yapabiliyorum. Tek derdim, fareyi textin üstüne getirince kutunun içindeki yazı kaymasın, komple sayfa kaysın, kutunun yanındaki scroll barın üstünde gelince kutu içindeki metni scroll edebileyim. Bunu yazıştıklarım içinde çözen olmadı henüz. Sizin bir bilginiz var mı bu konuda?

Senin Yorumların

E-posta hesabınız yayımlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir

Sonucu Giriniz * Time limit is exhausted. Please reload CAPTCHA.