Css jQuery

Səhifəni üfüqi hərəkət etdirmək – Scroll Page Horizontally

Səhifəni aşağı-yuxarı (şaquli istiqamətdə) doğru hərəkət etdirmək üçün hər hansı əlavə bir kod yazmağa ehtiyac olmadığını bilirik. Səhifəmizdəki məlumatlar nə qədər çox olarsa səhifəmiz sağ tərəfdəki scroll çubuğu ilə aşağı-yuxarı doğru hərəkət etdirilir.

Əslində səhifənin sağa-sola (üfüqi istiqamətdə) hərəkəti üçün də əlavə hər hansı koda ehtiyac yoxdur. Bu tamamilə səhifənin genişliyi ilə əlaqədardır. Genişlik istifadə etdiyimiz kompyuterin çözünürlüyü (resulation – motirodakı pixel sayı) ilə əlaqəlidir. Adətən səhifələrin genişliyini sağdan və soldan boşluqlarla kodlaşdırırıq ki istifadəçi əziyyət çəkməsin. Müasir frameworklərdə isə artıq bunu avtomatik tətbiq etmək mümükündür. Yəni səhifələrin hər istifadəçinin minotoruna uyğun şəkildə göstərilməsi artıq mümkündür.

 
Ancaq bəzi xüsusi səhifələr var ki onlarda standart qaydalara əməl etmək əvəzinə bəzi qeyri adi dizaynlara üstünlük verilir. Bu yazımda paylaşacağım kodlar da belə istifadə üçün nəzərdə tutulub. Belə ki, səhifəmizdəki mətnlərin aşağı doğru deyil avtomatik olaraq sağa doğru davam etməsini və mouse`un diyircəyi ilə səhifəni sağa sola doğru hərəkət etdirməyi göstərməyə çalışacam.

Əvvəla yeni bir səhifə hazırlamalıyıq. Bunun üçün səhifəmizdə aşağıdaki kodlar yer almalıdır:

Boş səhifəmizi hazırladıqdan sonra səhifəmizə istifadə edəcəyimiz javascript kitabxanalarını əlavə etməliyik. Bunun üçün biz jquery kitabxanasını və səhifəni üfüqi istiqamətdə hərəkət etdirmək üçün jquery.mousewheel kitabxanasını əlavə edəcəyik. Bu kitabxanaları səhifəmizdə head etiketləri içərisinə daxil etməliyik. Kodlar aşağıdaki şəkildə olacaq:

Jquery kitabxanalarını əlavə etdikdən sonra səhifəmizə məlumatlarımızı əlavə edək. Məlumatları əlavə edərkən xüsusi formadan istifadə edəcəyik. Belə ki, məlumatlarımız page-wrap id`li div içərisində post sinifi onun içərisində də h2 etiketi ilə başlıq və p etiketi ilə mətn şəklində daxil edilməlidir. Bunun səbəbi isə bir sonraki addımlarda açıqlanacaq. Məlumatımız aşağıdaki formada body etiketləri arasına əlavə edilməlidir:

Məlumatlarımızı bu formada bir neçə dəfə əlavə etməliyik ki, səhifədə məlumat çox görünsün ki, sağa sola doğru hərəkət əmələ gəlsin.
Bu şəkildə məlumatlarımızı əlavə etdikdən sonra post sinifi içərisindəki məlumatlara bir genişlik vermək lazımdır. Bu genişliyi verməkdə məqsəd isə səhifənin sağa doğru genişlənməsini istəməyimizdir. Ancaq səhifməzi sağa doğru genişləndiyi zaman səhifəmizin alt hissəsində scroll çubuğu əmələ gələcək. Bu da xoş bir görüntü olmayacaq. Ona görə də body bölməsində css kodlarından istifadə edərək scroll çubuğunu görünməz etməliyik. Bunu da overflow-x kodu ilə edə bilərik. Nəticədə kodlarımız aşağıdaki şəkildə olacaq:

Bu stil kodlarını səhifəmizdə head etiketi arasına daxil etməliyik.
 

İndi isə yuxarıda əlavə etdiyimiz məlumatları avtomatik olaraq javascript kodları ilə cədvəl şəklində göstərməliyik. Yəni post-wrap id`li div`imiz cədvəl, post sinifi`miz isə cədvəldəki sütunlar olmalıdır. Hansı ki yuxarıda css kodları ilə genişliyini 500px dəyərində qeyd etmişdik. Nəticədə cədvəlin sütunları sağa doğru genişlənəcək və məlumatlar səhifənin altına yox sağına doğru genişlənəcək. Bunun üçün aşağıdaki kodları səhifəmizə əlavə etdiyimiz jquery kitabxanalarından sonra əlavə etməliyik:

NƏTİCƏ:

Nəticəni ayrı səhifədə buradan yoxlaya bilərsiniz.

Tətbiqi buradan endirim incələyə bilərsiniz.

Qaynaq: http://css-tricks.com/snippets/jquery/horz-scroll-with-mouse-wheel/

Müəllif haqqında: Anar SAMADOV

Bilgi paylaşdıqca çoxalır deyərək paylaşmağa çalışıram bildiklərimi, öyrəndiklərimi və xoşuma gələnləri :)

2 şərh

Şərh yaz