• Tafsiri

Athari za kusogeza zimekuwepo kwenye wavuti kwa muda mrefu, na ingawa tayari kuna programu-jalizi nyingi za kuchagua, ni idadi ndogo tu kati yao ambazo zina uzito mwepesi na unyenyekevu ambao wabunifu na watengenezaji wengi wanahitaji. Programu-jalizi nyingi ambazo nimeona zinajaribu kufanya sana, na kuzifanya kuwa ngumu kujumuisha katika miradi yako.

Sio muda mrefu uliopita, Apple ilianzisha iPhone 5S, na tovuti ya uwasilishaji ambapo ukurasa uligawanywa katika sehemu, na kila sehemu ilielezea moja ya vipengele vya bidhaa. Nilidhani hii ilikuwa njia nzuri ya kuwasilisha bidhaa bila kukosa maelezo muhimu.

Nilikwenda kutafuta programu-jalizi inayofaa, na kwa mshangao wangu, sikuipata. Hivi ndivyo programu-jalizi ya kusogeza ukurasa ilizaliwa.

Programu-jalizi ya kusogeza ukurasa.

Programu-jalizi inayotegemea jQuery inayokuruhusu kuunda mpangilio wa ukurasa ulio na sehemu nyingi kwa kutumia alama ndogo.

Nitakuambia jinsi iliundwa, kutoka kwa dhana, hadi kupanga, kupima na kutoa msimbo wa bure.

Kumbuka: Kabla ya kuunda programu-jalizi, nilikuwa tayari nafahamu mjadala kuhusu iwapo hati zinapaswa kubadilisha tabia ya asili ya kusogeza ya vivinjari - hii inaweza kuwachanganya watumiaji. Kwa hiyo, nilijaribu kupunguza athari mbaya ya kubadilisha tabia ya mazoea. Katika mipangilio ya programu-jalizi unaweza kuweka ukubwa wa skrini ambapo programu-jalizi inarudi kwenye usogezaji wa kawaida wa skrini. Kwa hivyo, kwenye vifaa vyenye nguvu ya chini kama vile simu mahiri na kompyuta kibao, unaweza kudumisha utendaji wa tovuti. Kwa kuongeza, unaweza kuweka muda wa uhuishaji wakati wa mpito kati ya sehemu.

Haya yote ni ya nini?

Kama nilivyosema tayari, programu-jalizi nyingi zilizotengenezwa tayari zilijumuisha nyingi kazi za hiari, ambayo ilifanya ujumuishaji kuwa mgumu. Programu-jalizi hii inapaswa kuwa:

Rahisi kutumia
- rahisi kuunganisha
- zinahitaji markup ndogo
- fanya kazi moja, lakini vizuri

1. Michoro

Nilianza kupanga programu-jalizi kutoka kwa jumla hadi maalum. Inapaswa kusonga kwa sehemu. Ili kufanya hivyo, unahitaji kuzima utembezaji wa kawaida kwenye kivinjari, huku ukihudumia sehemu moja baada ya nyingine, na kuendeleza ukurasa ikiwa ni lazima.

Unaweza kufikiria kila kitu katika akili yako, au unaweza kufanya michoro.

Gawanya wazo katika kazi ndogo, ukisuluhisha kila moja kwa mlolongo.

1. Tayarisha mpangilio wa sehemu
Wacha tuzime usogezaji wa kawaida kwa kutumia vifurushi: vilivyofichwa kwenye mwili. Tutapanga sehemu katika mlolongo unaohitajika, kuhesabu na kurekebisha taarifa muhimu na madarasa.

2. Sanidi kichochezi cha kusogeza kwa mikono
Tunashika kichochezi kwa kutumia jQuery, tambua mwelekeo wa kusogeza, na uhamishe mpangilio kwa kutumia CSS.

3. Hebu tuongeze vipengele
Hebu tuongeze usikivu, kuzunguka, usaidizi wa kusogeza kwenye skrini za kugusa, utaftaji, n.k.

4. Hebu tuangalie katika vivinjari tofauti.
Hebu tuangalie Vivinjari vya Chrome, Safari, Firefox, Internet Explorer 10 na mifumo maarufu zaidi ya uendeshaji Windows, Mac OS X, iOS na Android 4.0+.

5. Hebu tufanye programu-jalizi ipatikane kwenye hifadhi
Wacha tuunde hazina na tuandike maagizo ya kutumia programu-jalizi

6. Tupanue usaidizi.
Wacha tuchunguze njia zingine za kuongeza usaidizi wa programu-jalizi.

2. Kujenga msingi

Baada ya kubuni programu-jalizi, nilianza kujenga msingi kwenye kiolezo hiki:

Function($) ( var defaults = ( sectionContainer: "section", ... ); $.fn.onepage_scroll = function(options) ( var settings = $.extend((), chaguo-msingi, chaguo); ... ) )($)

Kiolezo kinaanza na moduli!function($) ( ... )($), ambayo inaweka utofauti wa kimataifa wa jQuery katika eneo la ndani- hii itasaidia kupunguza mzigo na kuzuia migogoro na maktaba zingine.

Tofauti ya chaguo-msingi ina mipangilio chaguo-msingi.

$.fn.onepage_scroll ndio chaguo kuu la kukokotoa ambalo huanzisha kila kitu. Ikiwa unatengeneza programu-jalizi yako mwenyewe, usisahau kuandika jina tofauti badala ya onepage_scroll.

Unaweza kuzuia usogezaji wa kawaida kwa kukabidhi kufurika: sifa iliyofichwa kwa lebo ya mwili
kupitia jina la darasa maalum la programu-jalizi. Ni muhimu kutumia majina ya mtindo wa kipekee ili kuepuka migogoro na zilizopo. Kwa kawaida mimi hutumia ufupisho kutoka kwa jina la programu-jalizi, na kisha mstari unaotenganishwa na jina la mtindo, kwa mfano: .onepage-wrapper.

Msingi umewekwa, hebu tuendelee kwenye kazi ya kwanza.

3. Kuandaa mpangilio na kupanga sehemu

Mwanzoni nilienda njia mbaya. Nilidhani ningeweka sehemu zote kwa mpangilio, nikizipitia kwa kitanzi. Nilipata nini kwanza:

Var sehemu = $(settings.sectionContainer); var topPos = 0; $.kila(sehemu, kazi(i) ( $(hii).css(( nafasi: "absolute", juu: topPos + "%" )).addClass("ops-section").attr("data-index ", i+1); topPos = topPos + 100; ));

Kitanzi kinarudia kupitia viteuzi vyote (sectionContainer imefafanuliwa katika sehemu ya viambajengo chaguo-msingi), inapeana nafasi: kamili na inapeana kila sehemu inayofuata nafasi sahihi ya juu ili visiendeane.

Nafasi ya juu imehifadhiwa kwenye topPos. Tunaanza kutoka mwanzo na kuongeza kwa kila mzunguko. Ili kufanya kila sehemu ichukue ukurasa mzima, niliweka urefu wao hadi 100% na kuongeza 100 kwa topPos.

Maendeleo na upimaji vilinichukua masaa kadhaa, lakini katika hatua iliyofuata niligundua kuwa haya yote hayakuwa ya lazima.

4. Kichochezi cha mwongozo na ubadilishaji wa ukurasa

Utafikiri hatua inayofuata itakuwa kusogeza kila sehemu hadi kwenye nafasi mpya wakati kusongesha kunapowasha moto... Lakini kuna njia bora zaidi. Badala ya kuhamisha kila sehemu katika kitanzi, ninaziweka zote kwenye chombo kimoja na kutumia kitendakazi cha CSS3 translate3d kuihamisha. Chaguo hili la kukokotoa linaauni asilimia, tunaweza kusogeza sehemu ili ziwekwe kwa usahihi kwenye dirisha bila kuhesabu tena kila kitu tena. Pia hurahisisha kudhibiti kasi na vigezo vingine vya uhuishaji.

Suluhisho la kwanza sio kila wakati lenye ufanisi zaidi, kwa hivyo kumbuka kuacha wakati wa majaribio.

Sasa kinachobakia ni kuamua mwelekeo wa kusogeza na kusogeza chombo katika mwelekeo unaotaka.

Kazi init_scroll(tukio, delta) ( var deltaOfInterest = delta, timeNow = new Date().getTime(), quietPeriod = 500; // Ghairi kusogeza ikiwa inahuishwa kwa sasa au ndani ya kipindi tulivu ikiwa(timeNow - lastUhuishaji< quietPeriod + settings.animationTime) { event.preventDefault(); return; } if (deltaOfInterest < 0) { el.moveDown() } else { el.moveUp() } lastAnimation = timeNow; } $(document).bind("mousewheel DOMMouseScroll", function(event) { event.preventDefault(); var delta = event.originalEvent.wheelDelta || -event.originalEvent.detail; init_scroll(event, delta); });

Kwanza, tunaunganisha kazi kwenye tukio la mousewheel (DOMMouseScroll katika Firefox), basi tunaweza kukataza data na kuamua mwelekeo. Tunaiunganisha kwenye usindikaji wa init_scroll, ambao hupokea wheelData kwa hili.

KATIKA ulimwengu bora Itatosha kuhesabu mabadiliko katika wheelData. Hata hivyo, wakati wa kuhuisha mfuatano, unahitaji kujenga katika hundi ili kuhakikisha kwamba tukio la kichochezi halijarudiwa (vinginevyo picha itapishana wakati wa uhuishaji). Unaweza kutumia setInterval kuita kila uhuishaji kwa zamu, lakini hii haitatoa usahihi na kuegemea, kwa sababu. kila kivinjari huishughulikia kwa njia tofauti. Kwa mfano, katika Chrome na Firefox, setInterval hupunguza kasi katika vichupo visivyotumika, kwa sababu hiyo, kazi hazitekelezeki kwa wakati. Kama matokeo, niliamua kutumia kazi ambayo inarudisha wakati wa sasa.

Var timeNow = new Date().getTime(), quietPeriod = 500; … if(timeNow - lastUhuishaji< quietPeriod + settings.animationTime) { event.preventDefault(); return; } … lastAnimation = timeNow;

Katika kijisehemu hiki, ambacho nilinukuu kutoka kwa nambari iliyotangulia, ninahifadhi wakati wa sasa katika TimeNow ili baadaye niweze kuangalia ikiwa uhuishaji ulichukua zaidi ya 500ms. Ikiwa haijachukuliwa, basi mabadiliko hayatokea na uhuishaji hauingiliani. Kufanya kazi na wakati wa sasa kuaminika zaidi, kwa sababu ni sawa kwa kila mtu.

Ikiwa(deltaOfInterest< 0) { el.moveDown() } else { el.moveUp() }

Vitendaji vya moveUp na moveDown hubadilisha sifa za mpangilio ili ziakisi Hali ya sasa tovuti. Kila mmoja wao mwishoni mwa kazi huita njia ya mwisho ya mabadiliko ya kuhamisha sehemu inayofuata kwenye tovuti ya kutazama.

$.fn.transformPage = function(mipangilio, pos, index) ( … $(this).css(( "-webkit-transform": (settings.direction == "horizontal") ? "translate3d(" + pos + " %, 0, 0)" : "translate3d(0, " + pos + "%, 0)", "-webkit-transition": "yote " + settings.animationTime + "ms " + settings.easing, "-moz -transform": (settings.direction == "horizontal") ? "translate3d(" + pos + "%, 0, 0)" : "translate3d(0, " + pos + "%, 0)", "-moz -transition": "yote " + settings.animationTime + "ms " + settings.easing, "-ms-transform": (settings.direction == "horizontal") ? "translate3d(" + pos + "%, 0, 0)" : "translate3d(0, " + pos + "%, 0)", "-ms-transition": "yote " + settings.animationTime + "ms " + settings.easing, "transform": (mipangilio. direction == "horizontal") ? "translate3d(" + pos + "%, 0, 0)" : "translate3d(0, " + pos + "%, 0)", "transition": "mipangilio yote " +. uhuishajiMuda + "ms" + settings.easing )); …)

Hii ni njia ya mabadiliko ambayo hubadilisha sehemu. Nilizifanya kwa Javascript badala ya kutaja mitindo tofauti, ili watengenezaji wapate fursa ya kubadilisha mipangilio kwenye programu-jalizi yenyewe (haswa kasi ya uhuishaji na kuongeza kasi), na isingelazimika kupekua faili ya mitindo kutafuta mipangilio. Kwa kuongeza, asilimia ya mabadiliko bado inahitaji kuhesabiwa upya, kwa hivyo huwezi kufanya bila JavaScript.

5. Vipengele vya ziada

Mwanzoni sikutaka kuongeza chochote, lakini nilipokea maoni mengi kutoka kwa jamii ya GitHub hivi kwamba niliamua kuboresha programu-jalizi polepole. Nilitoa toleo la 1.2.1, ambalo linaongeza simu nyingi na vitanzi, na sehemu ngumu zaidi ni mwitikio.

Hapo awali sikufanya programu-jalizi nikiwa na majukwaa ya rununu akilini (ambayo najuta). Badala yake, ilitubidi kufuatilia na kukokotoa upya matukio ya skrini ya kugusa kuwa fomu inayofaa kutumika katika init_scroll. Hii haifanyi kazi vizuri katika vivinjari vyote, kwa hivyo tulilazimika kuunda katika kipengee cha kurudisha nyuma ambapo kivinjari kinarudi kwenye usogezaji wa kawaida wakati upana wa dirisha fulani umefikiwa.

Var chaguo-msingi = (responsiveFallback: uongo ... ); kazi msikivu() (ikiwa ($(window).width()< settings.responsiveFallback) { $("body").addClass("disabled-onepage-scroll"); $(document).unbind("mousewheel DOMMouseScroll"); el.swipeEvents().unbind("swipeDown swipeUp"); } else { if($("body").hasClass("disabled-onepage-scroll")) { $("body").removeClass("disabled-onepage-scroll"); $("html, body, .wrapper").animate({ scrollTop: 0 }, "fast"); } el.swipeEvents().bind("swipeDown", function(event) { if (!$("body").hasClass("disabled-onepage-scroll")) event.preventDefault(); el.moveUp(); }).bind("swipeUp", function(event){ if (!$("body").hasClass("disabled-onepage-scroll")) event.preventDefault(); el.moveDown(); }); $(document).bind("mousewheel DOMMouseScroll", function(event) { event.preventDefault(); var delta = event.originalEvent.wheelDelta || -event.originalEvent.detail; init_scroll(event, delta); }); } }

Wacha tufafanue kigezo cha msingi. Tunatumia responsiveFallback ili kubainisha ni lini programu-jalizi inapaswa kurudisha nyuma. Nambari hii huamua upana wa kivinjari. Ikiwa upana chini ya thamani kutoka ResponsiveFallback, chaguo la kukokotoa huondoa matukio yote, kusogeza ukurasa hadi mwanzo na kukuruhusu kuisogeza kama kawaida. Ikiwa upana unazidi thamani, programu-jalizi hukagua uwepo wa darasa la kusogeza la ukurasa mmoja lililozimwa ili kuona kama limeanzishwa. Ikiwa sivyo, itaanzishwa tena.

Suluhisho sio kamili, lakini huwapa watengenezaji na wabunifu fursa ya kuchagua jinsi tovuti yao inavyoonyeshwa jukwaa la simu, badala ya kukataa majukwaa haya kabisa.

6. Kujaribu katika vivinjari tofauti.

Kujaribu ni sehemu muhimu ya ukuzaji; kabla ya kutoa programu-jalizi, unahitaji kuhakikisha kuwa inafanya kazi kwenye mashine nyingi. Mimi huendeleza kila wakati katika Chrome - kwanza, napenda zana zake za msanidi programu, na pili, najua kuwa ikiwa programu-jalizi itafanya kazi katika Chrome, itafanya kazi zaidi katika Safari na Opera.

Mimi kawaida kutumia Macbook Air kwa maendeleo, na nyumbani nina PC ya majaribio. Baada ya programu-jalizi kufanya kazi katika Chrome, ninaijaribu kwa mikono katika Safari, Opera, na hatimaye Firefox kwenye Mac OS X, na kisha Chrome, Firefox, na Internet Explorer 10 kwenye Windows.

Hiyo sio yote vivinjari vinavyowezekana, lakini jambo zuri kuhusu chanzo huria ni kwamba wasanidi programu wengine wataweza kujaribu na kurekebisha makosa wenyewe - hiyo ndiyo hoja yake. Sio lazima kutengeneza bidhaa kamili mara moja, lakini weka ubao wa kuanza.

Usisahau kujaribu programu-jalizi zako dhidi ya vifaa vya simu.

Ili kurahisisha upimaji, baada ya kumaliza programu-jalizi, ninaunda ukurasa wa onyesho ili kuonyesha uwezo wake wote na kuipakia kwenye tovuti yangu. Kuna makosa ambayo hayawezi kupatikana ndani ya nchi, lakini ambayo yanaonekana wakati wa kufanya kazi kwenye tovuti halisi. Mara tu ukurasa wa onyesho unapoendeshwa, ninaanza kujaribu kwenye vifaa vya rununu.

7. Pakia programu-jalizi ili kufungua chanzo

Hatua ya mwisho ni kushiriki programu-jalizi kwenye GitHub. Ili kufanya hivyo, unahitaji kuunda akaunti hapo, usanidi Git na uunda hazina mpya. Kisha ifananishe mashine ya ndani- hii itaunda saraka na jina la programu-jalizi. Tunakili Plugin huko na kuanzisha muundo.

Muundo wa hifadhi

Ibinafsishe upendavyo. Mimi hufanya hivi:

Saraka ya onyesho ina maonyesho ya kazi, na rasilimali zote muhimu
- matoleo ya kawaida na yaliyobanwa ya programu-jalizi yako kwenye mzizi
- CSS na nyenzo za majaribio, kama vile picha (ikihitajika) ziko kwenye mzizi
- readme faili kwenye mzizi

Muundo wa kusoma

Hatua muhimu ni kuandika maelekezo wazi kwa jumuiya ya chanzo huria. Kawaida mimi huandika kwenye usomaji, lakini kwa kesi ngumu ukurasa wa wiki unaweza kuhitajika. Jinsi ninavyoandika kusoma:

1. Utangulizi
Ninaelezea madhumuni ya programu-jalizi, toa picha na kiunga cha onyesho.
2. Mahitaji na utangamano.
Ni bora kusogeza sehemu hii juu ili iwe wazi mara moja ikiwa mtu anaweza kutumia programu-jalizi.
3. Kanuni za msingi za matumizi
Maagizo ya hatua kwa hatua kuanzia miunganisho ya jQuery, kumalizia na alama za HTML na simu ya kukokotoa. Mipangilio pia imeelezewa.
4. Matumizi ya hali ya juu.
Maagizo magumu zaidi - mbinu za umma, simu za nyuma na habari zingine muhimu.
5. Rasilimali nyingine
Viungo vya mafunzo, asante, n.k.

8 Kupanua usaidizi

Kwa ujumla, ingewezekana kufanya bila jQuery, lakini nilikuwa na haraka kuifanya kuwa chanzo wazi, kwa hivyo niliamua kupunguza wakati wa maendeleo na kutegemea kazi zilizotengenezwa tayari katika jQuery.

Lakini ili kusafisha dhamiri yangu, nilirekebisha programu-jalizi katika JavaScript safi (toleo lenye usaidizi wa Zepto linapatikana pia). Na JS safi hakuna haja ya kujumuisha jQuery, kila kitu hufanya kazi nje ya boksi.

Ili kufanya marekebisho, na kwa wasomaji wa Jarida la Smashing pekee, nimeunda upya. Ukurasa Mmoja Tembeza kwa kutumia JavaScript safi (toleo la Zepto linapatikana pia). Ukiwa na toleo safi la JavaScript, huhitaji tena kujumuisha jQuery. Programu-jalizi hufanya kazi nje ya kisanduku.

Safi JS na toleo la Zepto

Inatayarisha upya programu-jalizi kwa JavaScript safi

Usindikaji kama huo unaweza kuonekana kama kazi ngumu, lakini hii ni mara ya kwanza tu. Jambo gumu zaidi sio kufanya makosa na hesabu. Kwa sababu Tayari nimefanya, maendeleo kazi za msaidizi Ilinichukua masaa machache tu kuondoa jQuery.

Programu-jalizi inategemea CSS3, kwa hivyo tulihitaji tu kubadilisha simu za jQuery na zile zetu zinazofanana. Wakati huo huo, nilipanga upya muundo wa hati:

Thamani chaguomsingi za kutofautisha
Kila kitu ni sawa na katika toleo la awali
- kazi ya uanzishaji
Hutayarisha na kupanga mpangilio na uanzishaji wa kile kinachotokea wakati kitendakazi cha onePageScroll kinapoitwa. Hapa ndipo taratibu zote zinazopeana majina ya darasa, sifa, na mitindo ya kuweka nafasi hukaa.
- njia za kibinafsi
Wote mbinu za ndani programu-jalizi - tembeza matukio, mabadiliko ya ukurasa, urejeshaji unaobadilika na ufuatiliaji wa kusogeza.
- mbinu za umma
Mbinu zote za watengenezaji: moveDown(), moveUp() na moveTo()
- njia za msaidizi
Kitu chochote kinachobatilisha simu za jQuery.

Wanandoa walikutana nyakati zisizofurahi- tenganisha chaguo za kukokotoa ili tu kuongeza au kuondoa jina la mtindo, au kutumia document.querySelector badala ya $. Lakini mwisho tulipata programu-jalizi iliyopangwa vizuri zaidi.

Kuunda upya programu-jalizi ya Zepto

Niliamua kuunga mkono Zepto, licha ya ukweli kwamba inalenga tu kwa wengi vivinjari vya kisasa(IE10+), kwa sababu inafanya kazi haraka na kwa ufanisi zaidi kuliko jQuery 2.0+, huku ikiwa na API inayoweza kunyumbulika zaidi. Zpeto ni ndogo mara 4 kuliko jQuery, ambayo huathiri kasi ya upakiaji wa ukurasa. Kwa watu wanaotumia simu mahiri mara nyingi zaidi, Zepto inaibuka kama mbadala bora.

Ni rahisi kubadilisha programu-jalizi kutoka jQuery hadi Zepto kwa sababu wana API zinazofanana. Karibu kila kitu ni sawa, isipokuwa kwa sehemu ya uhuishaji. Kwa kuwa kitendakazi cha Zepto cha $.fn.animate() kina usaidizi wa uhuishaji wa CSS3 na usaidizi wa uhuishaji Mwisho, sehemu ifuatayo:

$(this).css(( "-webkit-transform": "translate3d(0, " + pos + "%, 0))", "-webkit-transition": "-webkit-transform " + settings.animationTime + " ms " + settings.easing, "-moz-transform": "translate3d(0, " + pos + "%, 0)", "-moz-transition": "-moz-transform " + settings.animationTime + "ms " + settings.easing, "-ms-transform": "translate3d(0, " + pos + "%, 0)", "-ms-transition": "-ms-transform " + settings.animationTime + "ms " + settings.easing, "transform": "translate3d(0, " + pos + "%, 0)", "transition": "badilisha " + settings.animationTime + "ms " + settings.easing )); $(hii).one("webkitTransitionEnd otransitionend oTransitionEnd msTransitionEnd transitionend", kazi(e) ( ikiwa (typeof settings.afterMove == "function") settings.afterMove(index, next_el); ));

Inaweza kubadilishwa na nambari hii:

$(this).animate(( translate3d: "0, " + pos + "%, 0" ), settings.animationTime, settings.easing, function() ( if (typeof settings.afterMove == "function") mipangilio. afterMove(index, next_el); )); )

Zepto hukuruhusu kutengeneza uhuishaji bila kufafanua mitindo yote au kugawa simu zako mwenyewe.

Na kwa nini kujisumbua na hili?

Kadiri watu wengi wanavyotumia jQuery, inakuwa ngumu zaidi na wakati mwingine polepole. Ukisaidia mifumo mingine, programu-jalizi yako itakuwa maarufu zaidi.
Kuunda upya kutoka mwanzo kutakusaidia pia kutengeneza programu-jalizi bora zaidi katika siku zijazo. jQuery na maktaba zingine zinasamehe sana makosa madogo kama kukosa koma - kwa hivyo, haujali kabisa ubora wa kazi yako. Bila mafaili haya katika JavaScript safi, nilihisi vizuri zaidi jinsi programu-jalizi yangu inavyofanya kazi - ni nini kinachofanya kazi, kinachoathiri utendaji, na nini kinaweza kuboreshwa.

Ingawa maktaba kama jQuery zimerahisisha maisha yetu, kuzitumia sio bora zaidi njia ya ufanisi kufikia lengo. Baadhi ya programu-jalizi zinaweza kufanya hivi.

Hitimisho.

Naam, hapa kuna mchakato mzima wa kuunda programu-jalizi ya Kusogeza Ukurasa Mmoja. Kulikuwa na makosa, lakini nilijifunza kutoka kwao kadiri maendeleo yalivyokuwa yakiendelea. Ikiwa ningeiendeleza leo, ningezingatia vifaa vya rununu na kuongeza maoni zaidi kwenye msimbo.

Bila usaidizi wa jumuiya kama GitHub, StackOverflow na Smashing Magazine, nisingeweza kufanya programu-jalizi haraka sana. Jumuiya hizi zilinisaidia sana katika kazi yangu, ndiyo maana ninafanya programu-jalizi zangu zipatikane bila malipo kwa kila mtu. Hii ni njia yangu ya kulipa msaada wa ajabu.

Katika nakala hii fupi, nataka kuonyesha njia ya kuamua mwelekeo wa kusongesha kwa gurudumu la panya. Upeo wa maombi hauwezi kuwa mkubwa sana, lakini mimi mwenyewe nimepata zaidi ya mara moja ambapo ilikuwa ni lazima. Kwa mfano, ili kuunda "athari ya parallax", ambapo ukurasa kimsingi haukuhitaji kusonga, na athari ilitokea tu kulingana na ikiwa mtumiaji alikuwa akigeuza gurudumu la kipanya na kwa mwelekeo gani. Inawezekana kwamba utapata maombi katika miradi yako, ikiwa sio sasa, basi katika siku zijazo.

Function addEvent(elem, type, handler)( if(elem.addEventListener)( elem.addEventListener(type, handler, false);) vinginevyo ( elem.attachEvent("on"+type, handler); ) rudisha sivyo; ) kitendakazi scrollDirection())( var weelEvt = (/Firefox/i.test(navigator.userAgent))) ? "DOMMouseScroll" : "mousewheel", el = document.body; addEvent(el, weelEvt, function(e)( var evt = e .originalEvent ; )); ) // Anzisha kidhibiti cha tukio la kupakia hati - DOM-Ready addEvent(dirisha, "mzigo", scrollDirection); // Kwa jQuery - piga simu tu kazi baada ya DOM kupakiwa /*$(function())( scrollDirection();));*/

Sioni umuhimu wa kuelezea chochote haswa. Kitu pekee unachoweza kujionea mwenyewe ni kwamba ndani kwa kesi hii FireFox "ilijitofautisha" na tukio lisilo la kawaida "DOMMouseScroll".
Kwa ufahamu bora na mtazamo, niliamua kufanya mfano mmoja, ambapo tunachukua kazi ifuatayo: kwa kila mtumiaji wa kitabu, anapaswa kufikia sehemu inayofuata / iliyotangulia ya ukurasa, bila kuiruka, hata ikiwa alisogeza sana. Wakati huo huo, tutapakia yaliyomo sambamba kwenye kizuizi cha sasa. Wacha tujenge HTML na CSS ifuatayo:

* ( ukingo: 0; padding: 0; ) #gridi li (mtindo wa orodha: hakuna; urefu: 300px; mpaka-chini: 1px yenye nukta #333; ) #bandia (urefu: 5000px;) /* hadi hapo hakika kulikuwa na upau wa kusogeza */

Wacha tuendelee na JS. Hapa kazi yetu ni kughairi tabia ya kawaida wakati wa tukio la kusogeza panya ( kimsingi - zuia mtumiaji kutoka kusogeza ukurasa kwa mikono), hesabu, kulingana na mwelekeo wa harakati ya gurudumu, block inayofuata au ya awali, tembeza kwa uhuishaji kwenye kizuizi hiki na upakie maudhui muhimu ndani yake.

$(function())( var flag = uongo, // inahitajika ili kuzuia vitendo wakati wa uhuishaji bn = 0, // index ya block blocks ya sasa = $("#grid li"), // blocks all cnt = blocks . urefu, // idadi ya vizuizi mousewheelevt = (/Firefox/i.test(navigator.userAgent)) ? "DOMMouseScroll" : "mousewheel"; // wheel scroll event blocks.eq(0).load("loadblocks. html # b0"); // pakia mara moja yaliyomo kwenye kizuizi cha kwanza // kitendakazi cha kubaini mwelekeo wa kusogeza kitendakazi cha gurudumu getDelta(e)( var evt = e || window.event; evt = evt.originalEvent ? evt.originalEvent : evt; rudisha delta = evt.detail ? evt.detail*(-40) : evt.wheelDelta; ) // pata tukio la kusogeza $(document).on(mousewheelevt+".my_wheel", function(e)( e. preventDefault(); // ghairi tabia ya kawaida (ukurasa hautasonga) ikiwa(bendera) itarudi kuwa sivyo; // ikiwa bendera == kweli, basi wakati huu uhuishaji hutokea ikiwa(getDelta(e) > 0)( if(bn<= 0) return false; // если дошли до первого блока, то отменяем vitendo zaidi--bn; // ikiwa kizuizi sio cha kwanza, basi hesabu faharisi ya kizuizi kilichopita) mwingine ( if(bn >= cnt-1) kurudi kwa uwongo; // ikiwa tumefikia kizuizi cha mwisho, basi ghairi vitendo zaidi ++bn; // ikiwa kizuizi sio mwisho, basi tunahesabu index ya block inayofuata) bendera = kweli; // weka bendera inayoonyesha kuwa uhuishaji umeanza $("html, body").finish().animate(( scrollTop: blocks.eq(bn).offset().juu // sogeza ukurasa hadi kwenye kizuizi kilichokokotwa by index) , 1000, function())( blocks.eq(bn).load("loadblocks.html #b" + bn); // pakia maudhui ya bendera ya kuzuia = uongo; // ondoa bendera, ikionyesha kuwa uhuishaji umekamilika)); )); ));

Nilielezea kila kitu kwenye maoni, lakini inabaki kuelezea ni wapi data imepakiwa kutoka. Katika mbinu mzigo(), inawezekana si tu kutaja hati ambayo inahitaji kupakiwa, lakini pia kuamua ni kipengele gani tutahitaji. Katika mfano, nilitumia hati ya kawaida ya html na vitu kadhaa ( kulingana na idadi ya vitalu vyetu) kuwa na vitambulisho kutoka "b0" hadi "b6". Baada ya kupokea faharisi ya kizuizi cha sasa, tunapakia kipengee na kitambulisho kinacholingana.

Jaribu, jaribu, na muhimu zaidi kumbuka kwamba baadhi ya mambo ambayo huenda usihitaji leo yanaweza kukusaidia sana kesho. Na ikiwa una maswali au kazi zisizo za kawaida, ziandike katika mada hii au katika sehemu "

Ujanja wa leo unahusiana vipi na tovuti yetu? Kwa mtazamo wa kwanza, hakuna kitu. Lakini ikiwa kwenye Mac yako Sehemu ya Boot Kambi inaishi kwenye Windows, basi labda tayari umegundua kuwa Microsoft haikupanga na haikusudii kubadilisha mwelekeo wa kusogeza kwa panya na trackpad. Kwa sababu ya hii, zinageuka kuwa katika Mac OS X yaliyomo kwenye windows yatafuata harakati ya kidole chako (yaani, kusonga nyuma), na katika Windows utasonga kitelezi kwenye skrini, na yaliyomo yenyewe yatasonga kwenye skrini. mwelekeo mwingine.

Kwa ujumla, ikiwa huwezi kubadili kutoka kwa njia moja ya kudhibiti panya hadi nyingine, ni wakati wa kuchukua hatua madhubuti. Kuna njia mbili (chaguo na kusanidua Windows na uhamisho wake kwa mashine virtual hatutazingatia):

• afya backscrolling katika Simba au Simba wa milimani . Hii inafanywa katika mipangilio ya mfumo, katika vidhibiti vya mbali vya "Mouse" na "Trackpad", kwa mtiririko huo.
• wezesha kusogeza nyuma katika Windows. Cha ajabu, kuna kigezo cha hii kwenye sajili ya mfumo, hata hivyo, kuipata ni safari tofauti.

Kwa kuwa hatutafuti njia rahisi, leo tutazungumza juu ya mbadala wa pili - kuamilisha utembezaji wa nyuma katika Windows.

Kwanza utahitaji kuingia, kwa mfano, hii inaweza kufanyika kupitia Jopo la Kudhibiti. Katika Kidhibiti, angalia sehemu ya "Panya na vifaa vingine vya kuashiria":

Chagua kipanya chako kutoka kwenye orodha ya vifaa bonyeza mara mbili. Nenda kwenye kichupo cha "Maelezo", kwenye orodha kunjuzi utahitaji kipengee cha "Kitambulisho cha Vifaa":

Zingatia mstari wa kwanza, kuanzia na herufi VID (kwa mfano, VID_203A&PID_FFFC&REV_0100&MI_01). Kumbuka mchanganyiko huu.

Kwenye kibodi, bonyeza Amri+R, chapa regedit kwenye dirisha linalofungua na ubonyeze Ingiza. Mhariri atafungua Usajili wa Windows. Upande wa kushoto chagua tawi HKEY_LOCAL_MACHINE\SYSTEM\CurrentControlSet\Enum\HID. Utaona orodha ya panya na pedi za kufuatilia zilizo na michanganyiko ya VID, PID na MI. Utahitaji kutambua kifaa unachosanidi hapa:

Ndani ya kifaa unaweza kupata folda kadhaa zaidi. Katika kila mmoja wao unahitaji kwenda ndani ya folda ya Vigezo vya Kifaa na kubadilisha thamani ya parameter FlipFlopWheel kutoka 0 hadi 1. Baada ya kuwasha upya, kusogeza nyuma kutafanya kazi katika Windows.