Mpito laini hadi kiungo cha kutia nanga. Javascript inafifia - mabadiliko ya rangi laini

Kwenye moja ya tovuti ilikuwa ni lazima kutekeleza kusogeza ukurasa hadi juu na uhuishaji laini. Katika jQuery hii inafanywa kwa amri moja:

$("html,body").huisha((scrollTop:0),500);

Lakini katika JavaScript safi ni ngumu zaidi:

var t;
kazi scrolltop() (
var top = Math.max(document.body.scrollTop,document.documentElement.scrollTop);
ikiwa (juu> 0) (
window.scrollTo(0,Math.floor(juu/1.5));
t = setTimeout("scrolltop()",30);
) mwingine (
clearTimeout(t);
}
kurudi kwa uwongo;
}

Inaweza kubadilika juu sawa na umbali wa kusogeza wa ukurasa wa sasa katika pikseli. Kila ms 30 thamani hii hupungua kwa mara 1.5, hatimaye kufikia sifuri vizuri. Huu ni uigaji wa sifa ya urahisi katika uhuishaji wa CSS.

Ikiwa unahitaji kusonga ukurasa kwa mstari, bila kuongeza kasi, basi andika kitu kama hiki:

window.scrollTo(0,-20);

Kisha ukurasa utasogea hadi juu kwa kasi ya saizi 20 kwa 30 ms.

Ni nini husababisha kipindi cha 30 ms? Kiwango cha kuridhisha cha kuonyesha skrini ni takriban fremu 30 kwa sekunde, kumaanisha kwamba muda wa kila fremu ni 30 ms. Kwa ulaini bora, unaweza kutengeneza fremu 60 kwa sekunde, na kisha muda wa kuisha unapaswa kuwa takriban 15 ms. Lakini hii inaweza kubaki kwenye vifaa dhaifu.

Asante kwa mwandishi wa tovuti

Ikiwa unataka kusaidia mradi, tumia jukwaa la Yandex.Money - ni siri na salama.

Habari za mchana. Leo nataka kukuambia kuhusu hili athari ya kuvutia, Vipi laini ya kusogeza kwa nanga. Kwa mfano, hii inaweza kuwa menyu iliyo juu ya ukurasa ambayo, ikibofya, itasogeza kwa urahisi hadi kwa kipengee kinacholingana.

Labda umeona athari sawa kwenye kurasa zingine za kutua. Leo utajifunza jinsi ya kutekeleza.

Kusogeza kwa upole ili kutia nanga kwa kutumia javascript

Katika moja ya miradi, kazi ilikuwa kutekeleza athari sawa na kusongesha laini kwa kitu fulani wakati wa kubonyeza moja ya vitu vya menyu.

Hebu tuanze kwa kuunganisha maktaba ya jQuery kwa mradi wetu na uandike njia ya hati ambayo inawajibika kwa kusogeza laini:

Tulishughulikia hili. Sasa unahitaji kuweka maandiko na nanga ambayo scrolling kutokea.

Nitakuambia mfano wa menyu iliyokuwa katika mradi wa kukodisha vifaa vya kitaalamu kwa kazi ya ujenzi na kusafisha. Hii hapa chanzo:

Vifaa vya kusafisha
Vifaa vya ujenzi
Hisa

Kama unaweza kuona, kila kitu ni cha kawaida na bila hila. Vitalu vinavyolingana na menyu viliundwa baadaye kwenye ukurasa wa kutua. Walifunua huduma maalum. Ilikuwa ni lazima kufanya mabadiliko ya laini kwa vitalu hivi.

Ili kuabiri hadi mahali unapotaka kwenye tovuti, ongeza tu kiungo kwa kitambulisho block inayotaka. Hebu tufanye hivyo.

Vifaa vya kusafisha
Vifaa vya ujenzi
Hisa

Sasa unahitaji kuweka vitambulisho "kusafisha", "kujenga", "vitendo" kwa vitalu vinavyofanana. Kwangu ilionekana kama hii:

Zingatia sifa ya jina="kusafisha". Ni lazima ilingane na kitambulisho. Hapa kuna maandishi yenyewe:

$(function () ( $("a.scrollto").click(function () ( let elementClick = $(this).attr("href") let destination = $(elementClick).offset().top; $ ("html:si(:iliyohuishwa),mwili:si(:imehuishwa)").huisha(( scrollTop: destination ), 1100); rudisha sivyo; )); ));

Ikiwa wewe, kama mimi, unahitaji kutekeleza kusonga kwa vitu kadhaa, basi weka tu vitambulisho, Kwa njia sawa na ndivyo hivyo! Sana njia rahisi na ni rahisi kutekeleza.Sisemi ni bora zaidi, lakini inafanya kazi. Ikiwa mtu yeyote anaweza kuirahisisha, kufupisha au kuboresha kwa namna fulani, ningekushukuru sana. Kama mimi, athari hii inaweza kuwa na manufaa kwa wengi.

Tafadhali kumbuka kuwa mwanzoni mwa kifungu tulionyesha jina na njia ya hati kama ifuatavyo:

Hiyo ni, unahitaji kuunda folda kwenye mzizi wa tovuti yako inayoitwa js na uweke faili inayoitwa perehod.js ndani yake. Na kisha ingiza msimbo wa hati yenyewe ndani yake. Huyu ni mimi, ikiwa tu. Je, ikiwa mtu haelewi?

Na hiyo ni yote kwa leo. Sasa unajua jinsi ya kutekeleza athari nzuri kama vile kusogeza ukurasa laini hadi kwenye nanga. Kwaheri kila mtu!

P.s.: Asante kwa wale walioitikia wito katika mitandao ya kijamii msaada na mawazo kwa ajili ya makala mpya. Sijui kwanini uliamua kumwandikia ujumbe wa faragha, ni bora kuiacha kwenye maoni, kwa hivyo itakuwa rahisi kwa watu wengine kuandika ukaguzi ikiwa wanaona kuwa mtu mwenye ujasiri zaidi tayari amefanya.

U njia hii kuna drawback, haifanyi kazi vizuri na wow.js, ambayo tulitumia kuunda uhuishaji katika makala. Baadhi ya uhuishaji hauchezi na kuna nafasi tupu mahali pake. Ikiwa kuna mtu anajua jinsi ya kurekebisha hii, tafadhali andika kwenye maoni au ndani

Document.querySelector("nav").addEventListener("bofya", kitendakazi (e) ( var dest = e.target.href ikiwa (!dest || !(dest = dest.split("#"))) rudisha e .preventDefault() var p = document.querySelector("main") var a = document.getElementById(dest) var st = p.scrollTop var d = a.getBoundingClientRect().juu - p.getBoundingClientRect().juu - 8 var s = d / 1000 var pt = performance.now() requestAnimationFrame(kazi f(t) ( console.log((p.scrollTop = st + d * (t - pt) / 1000), (st + d)) var cur = p.scrollTop = st + s * (t - pt) ikiwa (s st + d: cur< st + d) requestAnimationFrame(f) else requestAnimationFrame(() =>p.scrollTop = st + d) )))); * ( ukubwa wa kisanduku: kisanduku cha mpaka; ) nav ( nafasi: nata; upana: 1.25em; kuelea: kushoto; ukingo: 8px; ) a ( onyesho: kizuizi; urefu wa mstari: 1.25em; panga maandishi: katikati; ) a:hover ( usuli: fedha; ) html, mwili, kuu ( urefu: 100%; ukingo: 0; ) kuu ( kufurika: otomatiki; ) h1 ( ukingo: 16px 0; usuli: antiquewhite; ) 1 2 3 4 5 6 7 8 9 10 1 2

Kuna kusongesha laini kati ya nanga kwenye JS safi? Nashangaa ikiwa kuna hati ya laini ya kusogeza katika JS safi, mimi hufanya tovuti bila kwa kutumia jQuery

Kuna kusongesha laini kati ya nanga kwenye JS safi? Ninajiuliza ikiwa kuna hati ya kusongesha laini katika JS safi, ninatengeneza wavuti bila kutumia jQuery.

KATIKA Hivi majuzi Uhuishaji unaocheza unaposogeza ukurasa unazidi kuwa maarufu. Walakini, niligundua kuwa vivinjari vingi havikuundwa kwa uhuishaji kama huo. Kusonga kwa kurasa na panya haifanyiki vizuri (kama kwenye Firefox), lakini kwa hatua. Kwa hivyo, uhuishaji wa kusogeza kwenye kurasa pia hucheza kwa ucheshi. Kwa maoni yangu, shida hapa sio na vivinjari kabisa, lakini na programu-jalizi ambazo hutumiwa kuunda michoro hizi. Kwa sababu wao ndio wanaoruhusu kuruka kwa ghafla. Ninaamini kuwa kwa uhuishaji wowote kunapaswa kuwa na kasi ya juu zaidi ya uchezaji ambapo uhuishaji utakuwa laini na mtumiaji ataweza kuelewa kilichotokea kwenye ukurasa. Ikiwa unakubaliana nami, basi songa vizuri na bila kutetemeka chini ya paka.

Katika makala hii tutazungumza juu ya programu-jalizi ya kuunda uhuishaji unaodhibitiwa na kusongesha, ambao niliuita Scrollissimo. Analog yake ya karibu ni programu-jalizi ya ScrollMagic. Kutoka vipengele vya kawaida wana madhumuni yao na ukweli kwamba Greensock alichaguliwa kama injini ya uhuishaji. Ikiwa kwa sababu fulani bado haujaifahamu, basi labda ili kuelewa kikamilifu kila kitu kinachotokea unapaswa kusoma makala kuhusu Greensock ambayo tayari yamechapishwa kwenye Habre. Kwa mfano huyu.

Mbali na kufanana, programu-jalizi hizi pia zina tofauti. Lakini ningependa kuangazia jambo kuu - uhuishaji laini. Ili hii isionekane kuwa haina msingi, hapa kuna uthibitisho kwako. Ukurasa wa nyumbani ScrollMagic pia inathibitisha maneno yangu.

Jinsi ya kuitumia?Unganisha Ili kuanza kutumia Scrollissimo unahitaji kufanya mambo mawili. Kwanza, unganisha Greensock. Inaweza tu kuunganishwa kidogo maktaba zinazohitajika(TweenLite, TimelineLite na CSS):

au, unganisha maktaba moja iliyo na yote hapo juu:

Na pili, tunaunganisha Scrollissimo yenyewe. Maktaba inapatikana kutoka kwa hifadhi. Na kwa watumiaji wa bower pia inawezekana kufunga na amri

Bower kufunga scrollissimo
Imepakuliwa, sasa unganisha:

Unaweza kwa hiari (lakini sio lazima) kujumuisha jQuery kwa urahisi wako. Baadaye katika makala nitaandika msimbo nikitumia kwa usomaji zaidi.

Nimetoa kwa uwezekano wa kuanzisha Scrollissimo sio tu kwa kusogeza ukurasa mzima, lakini pia kwenye tukio lingine lolote, lakini katika hali nyingi unahitaji kujiandikisha kwa tukio la kusogeza ukurasa:

$(dirisha).sogeza(kazi())( Scrollissimo.knock();));
Sasa, kila tukio la kusogeza linapotokea, Scrollissimo itakokotoa maendeleo ya sasa ya uhuishaji na kuicheza.

KUMBUKA: Ikiwa hauitaji programu-jalizi ili kuhesabu kusongesha kwa ukurasa yenyewe, unaweza kupitisha thamani ya mali yako ya scrollTop kwa mbinu ya knock() Kwa hivyo, kwa mfano, Scrollissimo.knock(1000) itaambia programu-jalizi kuwa umetembeza. ukurasa wa saizi 1000 .

KUMBUKA: Ili kutumia vifaa vya kugusa, kuna adapta ya kugusa scrollissimo.touch.js, ambayo inakabiliana na kuganda kwa ukurasa wakati wa kusogeza.

Hiyo ndiyo yote, sasa unaweza kuhuisha moja kwa moja! Scrollissimo inaweza kuhuisha mapacha (uhuishaji mmoja) na kalenda ya matukio (foleni ya uhuishaji mmoja). Wacha tuanze na mapacha.

Uhuishaji rahisi zaidi Hebu tuseme tuna div nzuri nyekundu inayoitwa Divy. Anataka sana kukua, lakini hadi sasa ana upana wa saizi 50 tu na juu.

#Divy(nafasi: fasta; juu: 0; kushoto: 0; urefu: 50px; upana: 50px; mandharinyuma: nyekundu;)
Wacha tuifanye ili tayari baada ya saizi 1000 tangu mwanzo wa ukurasa inakuwa saizi 300 kwa upana. Ili kufanya hivyo, kwanza tutaunda kati inayolingana, kana kwamba tunafanya uhuishaji wa kawaida kwa kutumia Greensock:

Var divyTween = new TweenLite($("#Divy"), 1000, ( upana: 300 ));
KUMBUKA: Kama ulivyoona, tofauti pekee kutoka kwa uhuishaji wa kawaida wa Greensock ni kwamba tunabainisha muda wa uhuishaji sio kwa sekunde, lakini kwa saizi (kwa upande wetu, 1000).

Kubwa! Kilichobaki ni kumpa pacha huyu kuliwa na Scrollissimo:

Scrollissimo.ongeza(divyTween, 0, 6);
Sasa hebu tupunguze kasi na tuangalie mstari huu. Hoja ya kwanza ni kati ile ile tuliyounda. Hoja ya pili ni kutoka kwa nafasi gani ya kuanza uhuishaji. Kwa upande wetu, hii ni mwanzo wa ukurasa (pikseli 0). Hoja ya tatu inabaki. Hapa ndipo tunapofikia kipengele kikuu, ambayo hutofautisha Scrollissimo kutoka kwa programu-jalizi za kawaida. Hoja ya tatu ni kasi ya juu ya uchezaji wa uhuishaji. Kasi hii inapimwa kwa muhtasari vitengo visivyo na kipimo na huchaguliwa "kwa jicho". Mara moja nitajibu swali "Ni nini kitatokea ikiwa hautataja parameter ya tatu?" Usipobainisha kasi ya juu, basi haitakuwepo. Uhuishaji huu utachezwa kwa njia sawa na ungechezwa na programu-jalizi za kawaida.

Timelines Hivyo, Divy imeongezeka kwa upana. Tunawezaje kumsaidia kukua kwa urefu? Minyororo ya uhuishaji au, kwa maneno ya Greensock, kalenda za matukio zitatusaidia hapa. Ikiwa umezitumia hapo awali kuunda uhuishaji, basi hakuna jipya kwako. Kwa njia ile ile kama tulivyofanya na pacha hapo juu, tunaifanya kwa ratiba. jsFiddle

Var divyTimeline = TimelineLite mpya(); divyTimeline.to($("#Divy"),1000 ( upana: 300 )); divyTimeline.to($("#Divy"), 1000, ( urefu: 300 )); Scrollissimo.add(divyTimeline, 0, 6);

Hitimisho Hayo tu ndiyo unayohitaji ili kufanikiwa kuunda uhuishaji wa kusogeza kwa kutumia Scrollissimo. Hapa ndipo pengine nitamalizia makala. Kwa kumalizia, nitasema kwamba programu-jalizi iko chini ya maendeleo ya kazi, ina nafasi ya kukua na kuboresha. Kwa hiyo, nitafurahi kupokea maswali yoyote, ushauri na maombi ya kipengele.

Muundo, huisha!