Document.querySelector("nav").addEventListener("click", function (e) ( var dest = e.target.href if (!dest || !(dest = dest.split("#"))) return e .preventDefault() var p = document.querySelector("pangunahing") var a = document.getElementById(dest) var st = p.scrollTop var d = a.getBoundingClientRect().top - p.getBoundingClientRect().top - 8 var s = d / 1000 var pt = performance.now() requestAnimationFrame(function f(t) ( console.log((p.scrollTop = st + d * (t - pt) / 1000), (st + d)) var cur = p.scrollTop = st + s * (t - pt) kung (s st + d: cur< st + d) requestAnimationFrame(f) else requestAnimationFrame(() =>p.scrollTop = st + d) ))));
* ( box-sizing: border-box; ) nav ( position: sticky; width: 1.25em; float: left; margin: 8px; ) a ( display: block; line-height: 1.25em; text-align: center; ) a:hover (background: silver; ) html, body, main ( height: 100%; margin: 0; ) main ( overflow: auto; ) h1 ( margin: 16px 0; background: antiquewhite; ) 1 2 3 4 5 6 7 8 9 10 1 2 meron ba makinis na pag-scroll sa pagitan ng mga anchor sa purong JS? Iniisip ko kung may script para sa smooth na pag-scroll sa purong JS, gumagawa ako ng isang website na wala
3gamit ang jQuery
4gamit ang jQuery
5gamit ang jQuery
6gamit ang jQuery
7gamit ang jQuery
8gamit ang jQuery
9gamit ang jQuery
10gamit ang jQuery
Mayroon bang maayos na pag-scroll sa pagitan ng mga anchor sa purong JS? Iniisip ko kung may script para sa maayos na pag-scroll sa purong JS, gumagawa ako ng isang website nang hindi gumagamit ng jQuery SA kani-kanina lang
Ang mga animation na nagpe-play habang nag-i-scroll ka sa pahina ay nagiging mas sikat. Gayunpaman, napansin ko na ang karamihan sa mga browser ay hindi idinisenyo para sa mga naturang animation. Ang pag-scroll ng mga pahina gamit ang mouse ay hindi nangyayari nang maayos (tulad ng sa Firefox), ngunit sa mga hakbang. Bilang resulta, ang pag-scroll ng mga animation sa mga pahina ay naglalaro din nang marahas. Sa palagay ko, ang problema dito ay hindi sa mga browser, ngunit sa mga plugin na ginagamit upang lumikha ng mga animation na ito. Dahil sila ang nagpapahintulot ng biglaang pagtalon. Naniniwala ako na para sa anumang animation dapat mayroong ilang pinakamataas na bilis ng pag-playback kung saan magiging maayos ang animation at mauunawaan ng user kung ano ang nangyari sa page. Kung sumasang-ayon ka sa akin, pagkatapos ay kumilos nang maayos at walang jerking sa ilalim ng pusa. Sa artikulong ito ay pag-uusapan natin ang tungkol sa isang plugin para sa paglikha ng mga animation na kinokontrol ng scroll, na tinawag kong Scrollissimo. Ang pinakamalapit na analogue nito ay ang ScrollMagic plugin. Mula sa mayroon silang layunin at ang katotohanang napili ang Greensock bilang makina ng animation. Kung sa ilang kadahilanan ay hindi ka pa pamilyar dito, marahil upang lubos na maunawaan ang lahat ng nangyayari dapat mong basahin ang mga artikulo tungkol sa Greensock na nai-publish na sa Habré. Halimbawa ang isang ito.
Bilang karagdagan sa mga pagkakatulad, ang mga plugin na ito ay mayroon ding mga pagkakaiba. Ngunit mas gusto kong i-highlight ang pangunahing bagay - makinis na animation. Upang hindi ito mukhang walang batayan, narito ang patunay para sa iyo. Home page Kinukumpirma din ng ScrollMagic ang aking mga salita.
Paano ito gamitin? Connect Upang simulan ang paggamit ng Scrollissimo kailangan mong gawin ang dalawang bagay. Una, ikonekta ang Greensock. Maaari lamang ikonekta nang minimal mga kinakailangang aklatan(TweenLite, TimelineLite at CSS):
o, ikonekta ang isang library na naglalaman ng lahat ng nasa itaas:
At pangalawa, ikinonekta namin ang Scrollissimo mismo. Available ang library mula sa repository. At para sa mga gumagamit ng bower posible ring i-install gamit ang command
Bower install scrollissimo
Na-download, ngayon kumonekta:
Maaari mong opsyonal (ngunit hindi kinakailangan) isama ang jQuery para sa iyong sariling kaginhawahan. Mamaya sa artikulo ay magsusulat ako ng code gamit ito para sa higit na pagiging madaling mabasa.
Nagbigay ako ng posibilidad na ma-trigger ang Scrollissimo hindi lamang sa pag-scroll sa buong page, kundi sa anumang iba pang kaganapan, ngunit sa karamihan ng mga sitwasyon na kailangan mong mag-subscribe sa page scroll event:
$(window).scroll(function())( Scrollissimo.knock(); ));
Ngayon, sa tuwing may magaganap na kaganapan sa pag-scroll, kakalkulahin ng Scrollissimo ang kasalukuyang progreso ng animation at i-play ito.
TANDAAN: Kung hindi mo kailangan ng plugin para mabilang ang page scroll mismo, maaari mong ipasa ang iyong scrollTop property value sa knock() method Kaya, halimbawa, sasabihin ng Scrollissimo.knock(1000) ang plugin na na-scroll mo. ang pahina 1000 pixels.
TANDAAN: Upang suportahan ang mga touch device, mayroong touch adapter na scrollissimo.touch.js, na lumalaban sa pagyeyelo ng page habang nag-i-scroll.
Iyon lang, maaari mo na ngayong i-animate nang direkta! Maaaring i-animate ng Scrollissimo ang kambal (mga single animation) at mga timeline (queue ng mga single animation). Magsimula tayo sa kambal.
Ang pinakasimpleng animation Sabihin nating mayroon tayong magandang pulang div na tinatawag na Divy. Gusto niya talagang lumaki, pero sa ngayon ay 50 pixels lang ang lapad at taas niya.
#Divy( posisyon: fixed; tuktok: 0; kaliwa: 0; taas: 50px; lapad: 50px; background: pula; )
Gawin natin ito na pagkatapos ng 1000 pixels mula sa simula ng page ay magiging 300 pixels na ang lapad. Upang gawin ito, gagawa muna kami ng kaukulang tween, na parang gumagawa kami ng isang regular na animation gamit ang Greensock:
Var divyTween = new TweenLite($("#Divy"), 1000, ( lapad: 300 ));
TANDAAN: Tulad ng napansin mo, ang pagkakaiba lamang mula sa karaniwang Greensock animation ay tinukoy namin ang tagal ng animation hindi sa mga segundo, ngunit sa mga pixel (sa aming kaso, 1000).
Mahusay! Ang natitira na lang ay ibigay ang kambal na ito upang kainin ni Scrollissimo:
Scrollissimo.add(divyTween, 0, 6);
Ngayon ay magdahan-dahan tayo at tingnan ang linyang ito. Ang unang argumento ay ang parehong tween na aming nilikha. Ang pangalawang argumento ay mula sa kung anong posisyon upang simulan ang animation. Sa aming kaso, ito ang simula ng pahina (0 pixels). Ang ikatlong argumento ay nananatili. Dito tayo pupunta pangunahing tampok, na nagpapaiba sa Scrollissimo mula sa mga regular na plugin. Ang ikatlong argumento ay ang maximum na bilis ng pag-playback ng animation. Ang bilis na ito ay sinusukat sa abstract mga unit na walang sukat at pinili "sa pamamagitan ng mata". Sasagutin ko kaagad ang tanong na "Ano ang mangyayari kung hindi mo tinukoy ang pangatlong parameter?" Kung hindi mo tinukoy pinakamataas na bilis, pagkatapos ay hindi ito iiral. Ipe-play ang animation na ito sa parehong paraan tulad ng paglalaro nito ng mga regular na plugin.
Var divyTimeline = bagong TimelineLite(); divyTimeline.to($("#Divy"),1000 ( lapad: 300 )); divyTimeline.to($("#Divy"), 1000, ( taas: 300 )); Scrollissimo.add(divyTimeline, 0, 6);
Konklusyon Iyon lang ang kailangan mo upang matagumpay na makalikha ng mga scrolling animation gamit ang Scrollissimo. Dito ko marahil tatapusin ang artikulo. Sa konklusyon, sasabihin ko na ang plugin ay nasa ilalim ng aktibong pag-unlad, mayroon itong puwang upang lumago at mapabuti. Samakatuwid, ikalulugod kong makatanggap ng anumang mga katanungan, payo at mga kahilingan sa tampok.Layout, i-animate!
Magandang hapon po. Ngayon gusto kong sabihin sa iyo ang tungkol dito kawili-wiling epekto, Paano makinis na pag-scroll sa anchor. Halimbawa, ito ay maaaring isang menu sa tuktok ng pahina na, kapag na-click, ay maayos na mag-i-scroll sa kaukulang elemento.
Marahil ay nakakita ka ng katulad na epekto sa iba pang mga landing page. Ngayon ay matututunan mo kung paano ito ipatupad.
Makinis na pag-scroll sa anchor gamit ang javascriptSa isa sa mga proyekto, ang gawain ay upang ipatupad ang isang katulad na epekto na may makinis na pag-scroll sa isang tiyak na elemento kapag nag-click sa isa sa mga item sa menu.
Magsimula tayo sa pamamagitan ng pagkonekta jquery library sa aming proyekto at isulat ang landas sa script na responsable para sa maayos na pag-scroll:
Hinarap namin ito. Ngayon ay kailangan mong maglagay ng mga label at anchor kung saan magaganap ang pag-scroll.
Sasabihin ko sa iyo ang halimbawa ng menu na nasa proyekto para sa pag-upa ng mga propesyonal na kagamitan para sa pagtatayo at paglilinis ng trabaho. Eto na source code:
- Mga kagamitan sa paglilinis
- Mga kagamitan sa pagtatayo
- Stock
Tulad ng nakikita mo, ang lahat ay pamantayan at walang mga trick. Ang mga bloke na naaayon sa menu ay kasunod na ginawa sa landing page. Nagsiwalat sila ng isang partikular na serbisyo. Ito ang mga bloke na kailangang gawin maayos na paglipat.
Upang mag-navigate sa gustong lugar sa site, magdagdag lang ng link sa identifier ang nais na bloke. Gawin natin ito.
- Mga kagamitan sa paglilinis
- Mga kagamitan sa pagtatayo
- Stock
Ngayon ay kailangan mong itakda ang mga identifier na "paglilinis", "gusali", "mga aksyon" sa kaukulang mga bloke. Para sa akin ito ay ganito:
Bigyang-pansin ang pangalan = "paglilinis" na katangian. Dapat itong tumugma sa ID. Narito ang script mismo:
$(function () ($("a.scrollto").click(function () ( let elementClick = $(this).attr("href") let destination = $(elementClick).offset().top; $ ("html:not(:animated),body:not(:animated)").animate(( scrollTop: destination ), 1100 ));
Kung ikaw, tulad ko, ay kailangang magpatupad ng pag-scroll sa maraming elemento, pagkatapos ay maglagay lamang ng mga identifier, sa katulad na paraan at yun lang! napaka maginhawang paraan at madaling ipatupad hindi ko sinasabing ito ang pinakamahusay, ngunit ito ay gumagana. Kung sinuman ang makapagpapasimple nito, paikliin o kahit papaano ay mapabuti ito, ako ay lubos na nagpapasalamat sa iyo. Para sa akin, ang epektong ito ay maaaring maging kapaki-pakinabang sa marami.
Pakitandaan na sa simula ng artikulo ay ipinahiwatig namin ang pangalan at landas ng script tulad ng sumusunod:
Iyon ay, kailangan mong lumikha ng isang folder sa ugat ng iyong site na tinatawag na js at maglagay ng file na tinatawag na perehod.js dito. At pagkatapos ay ipasok ang script code mismo dito. Ako ito, kung sakali. Paano kung may hindi makaintindi?
At iyon lang para sa araw na ito. Ngayon alam mo na kung paano ipatupad ang tulad ng isang cool na epekto bilang makinis na pag-scroll ng pahina sa anchor. Bye sa lahat!
P.s.: Salamat sa mga tumugon sa tawag mga social network tumulong sa mga ideya para sa mga bagong artikulo. Hindi ko alam kung bakit mo naisipang sumulat mga personal na mensahe, mas mabuting iwanan ito sa mga komento, para mas madali para sa ibang tao na magsulat ng pagsusuri kung nakita nilang may mas matapang na gumawa nito.
U ang pamamaraang ito mayroong isang sagabal, hindi ito gumagana nang maayos sa wow.js, na ginamit namin upang lumikha ng animation sa artikulo. Ang ilang mga animation ay hindi naglalaro at mayroong walang laman na espasyo sa kanilang lugar. Kung may nakakaalam kung paano ayusin ito, mangyaring sumulat sa mga komento o sa
Sa isa sa mga site, kinailangang ipatupad ang pag-scroll (pag-scroll) sa pahina mula sa itaas makinis na animation. Sa jquery ito ay ginagawa sa isang utos:
$("html,body").animate((scrollTop:0),500);
Ngunit sa purong JavaScript ito ay medyo mas kumplikado:
var t;
function scrolltop() (
var top = Math.max(document.body.scrollTop,document.documentElement.scrollTop);
if(top>0) (
window.scrollTo(0,Math.floor(top/1.5));
t = setTimeout("scrolltop()",30);
) iba pa (
clearTimeout(t);
}
ibalik ang mali;
}
Variable itaas katumbas ng kasalukuyang distansya ng pag-scroll ng pahina sa mga pixel. Bawat 30 ms ang value na ito ay bumababa ng 1.5 beses, sa kalaunan ay maayos na umabot sa zero. Ito ay isang imitasyon ng ease-out property sa mga animation ng CSS.
Kung kailangan mong i-scroll ang pahina nang linearly, nang walang acceleration, pagkatapos ay sumulat ng ganito:
window.scrollTo(0,-20);
Pagkatapos ay mag-i-scroll ang page sa itaas sa bilis na 20 pixels bawat 30 ms.
Ano ang sanhi ng panahon ng 30 ms? Ang isang komportableng rate ng pag-refresh ng screen ay humigit-kumulang 30 mga frame bawat segundo, na nangangahulugang ang tagal ng bawat frame ay 30 ms. Para sa perpektong kinis, maaari kang gumawa ng 60 mga frame bawat segundo, at pagkatapos ay ang mga timeout ay dapat na humigit-kumulang 15 ms. Ngunit ito ay maaaring mahuli sa mga mahihinang device.
Salamat sa may-akda ng siteKung gusto mong suportahan ang proyekto, gamitin ang Yandex.Money platform - ito ay kumpidensyal at ligtas.
Tulad ng malamang na nahulaan mo na, ang artikulo ay hindi magsasalita tungkol sa mga tulip at rosas, o kung paano palaguin ang isang puno ng mansanas mula sa isang mansanilya (kaya hindi ito ang lugar para sa mga batang Michurinians :-), ngunit pag-uusapan natin ang pagbabago ng kulay ng mga elemento ng isang web page, tungkol sa maayos na daloy ng isang kulay patungo sa isa pa, i.e. Pag-usapan natin ang tungkol sa fade effects.
HalimbawaMagsimula tayo sa isang halimbawa: mag-hover sa isang larawan at pagkatapos ay ilayo ang cursor.
Kung hindi ka interesado sa mga teoretikal na detalye, ngunit kailangan handa na solusyon tapos sayo.
Pahayag ng problemaDalawang kulay ang ibinibigay: ang kulay ng simula at ang kulay ng pagtatapos.
Kinakailangan na makahanap ng mga intermediate na kulay, na inilalapat kung alin ang isa-isa sa isang elemento sa pahina, makakakuha tayo ng maayos na paglipat mula sa paunang kulay hanggang sa pangwakas. Dapat mo ring malaman kung ilan sa mga intermediate na kulay na ito ang dapat at pagkatapos kung anong oras dapat magpalit ang isang intermediate na kulay sa isa pa.
Mas malalim ang pagtingin sa isyuKunin natin, halimbawa, puti bilang paunang kulay, at orange-pula bilang panghuling kulay.
| #FFFFFF | ? | ...n... | ? | #FF4500 |
Ngayon kailangan nating makahanap ng mga intermediate na kulay. ayos lang. Pero paano?! Paano natin dapat lapitan ang isyung ito? Upang gawin ito, tandaan natin (o alamin :-) kung paano nabuo ang kulay sa screen ng monitor. Ang anumang kulay sa screen ng monitor ay nabuo mula sa tatlong pangunahing kulay: pula (Red), berde (Berde) at asul (Blue), sa pamamagitan ng paghahalo ng mga ito (i.e. modelo ng kulay RGB). At ang mga kulay ay ipinahiwatig sa isang web page o sa pamamagitan ng mga numerical na halaga sa pareho RGB system, o mga literal ng pinangalanang mga kulay (halimbawa, Puti para sa puti, Pula para sa pula, atbp., ngunit hindi lahat ng mga kulay ay may mga pangalan), na tumuturo pa rin sa mga numeric na halaga. Ngunit hindi namin isasaalang-alang ang pagtukoy ng isang kulay sa pamamagitan ng pangalan, dahil ang mga pangalan ay naimbento para sa kaginhawaan ng pagsasaulo ng tao, ngunit sa aming kaso ay lilikha sila ng abala sa panahon ng mga kalkulasyon, dahil mangangailangan pa rin ng pagsasalin sa numerical form. Maaari mong itakda ang numerical value ng isang kulay sa dalawang paraan: hexadecimal at functional.
- Sa hexadecimal notation, ang RGB value ay susunod na format: Isang "#" na character na agad na sinundan ng tatlo o anim na hexadecimal na character. Ang isang tatlong-digit na halaga ng RGB (#rgb) ay kino-convert sa isang anim na digit na pagkakasunud-sunod (#rrggbb) sa pamamagitan ng pag-duplicate ng mga digit sa halip na pagdaragdag ng mga zero. Halimbawa, lumalawak ang #fb0 sa #ffbb00. Samakatuwid, ang kulay na puti (#ffffff) ay maaaring tukuyin sa mas maikling anyo (#fff).
- Sa functional representation, ang RGB value recording format ay susunod na view: ang string na "rgb(", na sinusundan kaagad ng isang listahan ng tatlong real (o integer, o percentage) na halaga na pinaghihiwalay ng kuwit, kaagad na sinusundan ng panaklong ")". Ang halaga ng integer na 255 ay katumbas ng halaga ng porsyento na 100% at mga halaga ng hexadecimal F o FF, kaya rgb(255,255,255) = rgb(100%,100%,100%) = #FFF.
Kaya, ang isang kulay na ibinigay sa numerical form ay nagbibigay sa amin ng mga halaga ng mga bahagi ng kulay nito, na sa huli ay nagbibigay sa amin ng pagkakataon, sa pamamagitan ng pagbabago ng bawat isa sa mga pangunahing kulay ng unang kulay, upang makarating sa pangalawa, panghuling kulay. Kung isasaalang-alang natin ang ating kongkretong halimbawa, pagkatapos ay mayroon kaming mga sumusunod (ang mga halaga sa sistema ng decimal ay ipinahiwatig sa mga panaklong):
| #FFFFFF | = | FF (255) | FF (255) | FF (255) |
| 0 | – CE (206) | – FF (255) | ||
| #FF4500 | = | FF (255) | 45 (49) | 0 |
Yung. upang mula sa puti upang makakuha ng orange-red, kailangan mong iwanan ang pulang bahagi ng puting kulay na hindi nagbabago (baguhin ang halaga sa zero), ibawas ang 206 mula sa berde, at ibawas ang 255 mula sa asul Tawagan natin ang mga numerong ito (ΔR = 0, ΔG = -206, ΔB = -255) mga dagdag.
Ngayon, upang makakuha, halimbawa, dalawang intermediate na kulay + ang pangwakas na kulay (3 sa kabuuan), kailangan mong baguhin ang mga paunang halaga ng RGB triplet (#FFFFFF) hindi sa pamamagitan ng buong halaga ng mga pagtaas ΔR, ΔG, ΔB, ngunit una sa pamamagitan ng 1/3, pagkatapos ay sa pamamagitan ng 2/3 at sa wakas sa pamamagitan ng 3/3 (3/3 = 1, ito ay buong kahulugan mga pagdaragdag upang makuha ang pangwakas na kulay, na, sa prinsipyo, alam na natin).
| #FFFFFF | = | FF (255) | FF (255) | FF (255) |
| #FFBAAA | = | 255 -0 | 255 - 206*1/3 = 186 (BA) | 255 - 255*1/3 = 170 (AA) |
| #FF7655 | = | 255 - 0 | 255 - 206*2/3 = 118 (76) | 255 - 255*2/3 = 85 (55) |
| #FF4500 | = | FF (255) | 45 (49) | 0 |
Kaya, natutunan naming kalkulahin ang mga intermediate na kulay. Ito ay nananatiling linawin ang isa pang nuance, upang mapansin ng isang tao ang mga intermediate na kulay, kinakailangan na gumawa ng mga pagkaantala ng oras sa pagitan ng pagbabago ng mga kulay, kung hindi man ang mga pagbabago ay magaganap nang napakabilis na ang gumagamit ay hindi mapapansin ang mga intermediate na kulay.
Ngayon ay mayroon na tayong malinaw na pangkalahatang larawan at maaari tayong magpatuloy sa pagsusulat ng code. May mga kulay na nagsisimula at nagtatapos, maaari nating kalkulahin ang n intermediate na mga kulay (kung saan ang n ay pinili nang arbitraryo), at mayroong isang pagkaantala na halaga t (kung saan ang t ay pinili nang arbitraryo). Kaya, ang algorithm ay ang mga sumusunod: italaga ang unang intermediate na kulay sa elemento sa web page, gumawa ng pagkaantala sa halagang t, italaga ang pangalawang intermediate na kulay sa elemento, gumawa ng pagkaantala, ..., italaga ang nth intermediate kulay sa elemento, na siyang panghuling kulay.
PagpapatupadBilang halimbawa, gumawa tayo ng isang button na ang background ay nagbabago mula puti hanggang orange-pula kapag na-click.
Tara na... Ang unang maling pag-iisip na maaaring pumasok sa isip ay ang kalkulahin ang mga intermediate na kulay sa isang loop, na gumagawa ng pagkaantala pagkatapos ng bawat pag-ulit.
Function fade() ( para sa (var i = 1; i
