Document.querySelector("nav").addEventListener("klik", function (e) ( var dest = e.target.href if (!dest || !(dest = dest.split("#"))) return e .preventDefault() var p = document.querySelector("main") 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(functie f(t) ( console.log((p.scrollTop = st + d * (t - pt) / 1000), (st + d)) var cur = p.scrollTop = st + s * (t - pt) if (s st + d: cur< st + d) requestAnimationFrame(f) else requestAnimationFrame(() =>p.scrollTop = st + d) )) ));
* ( box-size: border-box; ) nav ( position: sticky; width: 1.25em; float: left; margin: 8px; ) a ( display: block; line-height: 1.25em; text-align: center; ) a:hover ( achtergrond: zilver; ) html, body, main ( hoogte: 100%; marge: 0; ) main ( overflow: auto; ) h1 ( marge: 16px 0; achtergrond: antiekwit; ) 1 2 3 4 5 6 7 8 9 10 1 2 Is er soepel scrollen tussen ankers in pure JS? Ik vraag me af of er een script is voor soepel scrollen in pure JS, ik maak een website zonder
3jQuery gebruiken
4jQuery gebruiken
5jQuery gebruiken
6jQuery gebruiken
7jQuery gebruiken
8jQuery gebruiken
9jQuery gebruiken
10jQuery gebruiken
Is er soepel scrollen tussen ankers in pure JS? Ik vraag me af of er een script is voor soepel scrollen in pure JS, ik maak een website zonder jQuery te gebruiken IN de laatste tijd
Animaties die worden afgespeeld terwijl u door de pagina scrolt, worden steeds populairder. Het viel mij echter op dat de overgrote meerderheid van de browsers niet voor dergelijke animaties is ontworpen. Het scrollen van pagina's met de muis gaat niet soepel (zoals in Firefox), maar in stappen. Als gevolg hiervan spelen scrollende animaties op pagina's ook schokkerig. Naar mijn mening ligt het probleem helemaal niet bij de browsers, maar bij de plug-ins die worden gebruikt om deze animaties te maken. Omdat zij degenen zijn die plotselinge sprongen toestaan. Ik ben van mening dat er voor elke animatie een maximale afspeelsnelheid moet zijn waarbij de animatie vloeiend verloopt en de gebruiker kan begrijpen wat er op de pagina is gebeurd. Als je het met mij eens bent, beweeg dan soepel en zonder schokken onder de kat. In dit artikel zullen we het hebben over een plug-in voor het maken van scroll-gestuurde animaties, die ik Scrollissimo heb genoemd. De dichtstbijzijnde analoog is de ScrollMagic-plug-in. Van ze hebben hun doel en het feit dat Greensock werd gekozen als animatie-engine. Als je er om wat voor reden dan ook nog niet mee bekend bent, dan zou je misschien om alles wat er gebeurt volledig te begrijpen, de artikelen over Greensock moeten lezen die al op Habré zijn gepubliceerd. Deze bijvoorbeeld.
Naast overeenkomsten hebben deze plug-ins ook verschillen. Maar ik zou vooral het belangrijkste willen benadrukken: vloeiende animaties. Zodat dit niet ongegrond klinkt, hier is het bewijs voor u. Startpagina ScrollMagic bevestigt ook mijn woorden.
Hoe gebruik je het? Connect Om Scrollissimo te kunnen gebruiken, moet je twee dingen doen. Sluit eerst Greensock aan. Kan slechts minimaal worden aangesloten benodigde bibliotheken(TweenLite, TimelineLite en CSS):
of sluit één bibliotheek aan die al het bovenstaande bevat:
En ten tweede verbinden we Scrollissimo zelf. De bibliotheek is beschikbaar vanuit de repository. En voor prieelgebruikers is het ook mogelijk om met het commando te installeren
Bower installeer scrollissimo
Gedownload, nu verbinden:
U kunt optioneel (maar niet noodzakelijkerwijs) jQuery toevoegen voor uw eigen gemak. Later in het artikel zal ik code schrijven om deze beter leesbaar te maken.
Ik heb voorzien in de mogelijkheid om Scrollissimo niet alleen te activeren bij het scrollen van de hele pagina, maar ook bij elk ander evenement, maar in de overgrote meerderheid van de situaties moet je je abonneren op het pagina-scroll-evenement:
$(venster).scroll(function())( Scrollissimo.knock(); ));
Elke keer dat er een scrollgebeurtenis plaatsvindt, berekent Scrollissimo de huidige voortgang van de animatie en speelt deze af.
OPMERKING: Als u niet wilt dat de plug-in het scrollen door de pagina zelf meetelt, kunt u de eigenschapswaarde scrollTop doorgeven aan de knock()-methode. Zo vertelt Scrollissimo.knock(1000) de plug-in dat u hebt gescrolld de pagina 1000 pixels.
OPMERKING: Ter ondersteuning van touch-apparaten is er een touch-adapter scrollissimo.touch.js, die het vastlopen van pagina's tijdens het scrollen tegengaat.
Dat is alles, nu kunt u direct animeren! Scrollissimo kan tweelingen (enkele animaties) en tijdlijnen (rij van enkele animaties) animeren. Laten we beginnen met de tweeling.
De eenvoudigste animatie Laten we een prachtige rode div hebben met de naam Divy. Hij wil heel graag groeien, maar tot nu toe is hij slechts 50 pixels breed en hoog.
#Divy( positie: vast; boven: 0; links: 0; hoogte: 50px; breedte: 50px; achtergrond: rood; )
Laten we ervoor zorgen dat deze al na 1000 pixels vanaf het begin van de pagina 300 pixels breed wordt. Om dit te doen, zullen we eerst de corresponderende tween maken, alsof we een gewone animatie zouden maken met Greensock:
Var divyTween = new TweenLite($("#Divy"), 1000, ( breedte: 300 ));
OPMERKING: Zoals je hebt gemerkt, is het enige verschil met de standaard Greensock-animatie dat we de duur van de animatie niet in seconden opgeven, maar in pixels (in ons geval 1000).
Geweldig! Het enige dat overblijft is om deze tweelingbroer door Scrollissimo te laten verslinden:
Scrollissimo.add(divyTween, 0, 6);
Laten we nu langzamer gaan lopen en naar deze lijn kijken. Het eerste argument is dezelfde tween die we hebben gemaakt. Het tweede argument is vanuit welke positie de animatie moet starten. In ons geval is dit het begin van de pagina (0 pixels). Het derde argument blijft bestaan. Dit is waar we terechtkomen belangrijkste kenmerk, wat Scrollissimo onderscheidt van reguliere plug-ins. Het derde argument is de maximale afspeelsnelheid van animaties. Deze snelheid wordt abstract gemeten dimensieloze eenheden en wordt “op het oog” geselecteerd. Ik zal onmiddellijk de vraag beantwoorden: "Wat gebeurt er als u de derde parameter niet opgeeft?" Als u het niet specificeert maximale snelheid, dan bestaat het niet. Deze animatie wordt op dezelfde manier afgespeeld als door reguliere plug-ins.
Var divyTimeline = nieuwe TimelineLite(); divyTimeline.to($("#Divy"),1000 ( breedte: 300 )); divyTimeline.to($("#Divy"), 1000, ( hoogte: 300 )); Scrollissimo.add(divyTijdlijn, 0, 6);
Conclusie Dat is alles wat u nodig heeft om succesvol scrollende animaties te maken met Scrollissimo. Hier zal ik waarschijnlijk het artikel beëindigen. Concluderend kan ik zeggen dat de plug-in actief wordt ontwikkeld en ruimte heeft om te groeien en te verbeteren. Daarom ontvang ik graag al uw vragen, advies en functieverzoeken.Lay-out, animeren!
Goedemiddag. Vandaag wil ik je hierover vertellen interessant effect, Hoe soepel scrollen naar het anker. Dit kan bijvoorbeeld een menu bovenaan de pagina zijn dat, wanneer erop wordt geklikt, soepel naar het overeenkomstige element scrollt.
U heeft waarschijnlijk een soortgelijk effect gezien op andere bestemmingspagina's. Vandaag leer je hoe je het kunt implementeren.
Vloeiend scrollen om te verankeren met behulp van javascriptIn een van de projecten was het de taak om een soortgelijk effect te implementeren door soepel naar een bepaald element te scrollen wanneer je op een van de menu-items klikte.
Laten we beginnen met verbinden jQuery-bibliotheek naar ons project en schrijf het pad naar het script dat verantwoordelijk is voor soepel scrollen:
Wij hebben dit afgehandeld. Nu moet u labels en ankers plaatsen waarop gescrolld zal worden.
Ik zal je het voorbeeld vertellen van het menu dat in het project zat voor het huren van professionele apparatuur voor bouw- en schoonmaakwerkzaamheden. Hier is het broncode:
- Reinigingsapparatuur
- Bouwmachines
- Voorraad
Zoals je kunt zien, is alles standaard en zonder trucs. Op de landingspagina zijn vervolgens blokken gemaakt die overeenkomen met het menu. Ze onthulden een specifieke dienst. Dit waren de blokken die gedaan moesten worden soepele overgang.
Om naar de gewenste plaats op de site te navigeren, hoeft u alleen maar een link naar de ID toe te voegen het gewenste blok. Laten we dit doen.
- Reinigingsapparatuur
- Bouwmachines
- Voorraad
Nu moet u de identificatiegegevens “opschonen”, “bouwen”, “acties” instellen op de overeenkomstige blokken. Voor mij zag het er zo uit:
Let op het kenmerk name="cleaning". Het moet overeenkomen met het identiteitsbewijs. Hier is het script zelf:
$(function () ( $("a.scrollto").click(function () ( let elementClick = $(this).attr("href") let bestemming = $(elementClick).offset().top; $ ("html:not(:geanimeerd),body:not(:geanimeerd)").animate(( scrollTop: bestemming ), 1100 ));
Als je, net als ik, het scrollen naar verschillende elementen moet implementeren, plaats dan gewoon identificatiegegevens, op een vergelijkbare manier en dat is het! Erg handige manier en gemakkelijk te implementeren. Ik zeg niet dat het de beste is, maar het werkt. Als iemand het kan vereenvoudigen, inkorten of op de een of andere manier kan verbeteren, zou ik u zeer dankbaar zijn. Wat mij betreft, dit effect kan voor velen nuttig zijn.
Houd er rekening mee dat we aan het begin van het artikel de naam en het pad van het script als volgt hebben aangegeven:
Dat wil zeggen dat u een map in de hoofdmap van uw site moet maken met de naam js en daarin een bestand met de naam perehod.js moet plaatsen. En plaats vervolgens de scriptcode zelf erin. Dit ben ik, voor het geval dat. Wat als iemand het niet begrijpt?
En dat is alles voor vandaag. Nu weet je hoe je zo'n cool effect kunt implementeren als soepel scrollen van de pagina naar het anker. Dag iedereen!
P.s.: Dank aan degenen die hebben gereageerd op de oproep sociale netwerken helpen met ideeën voor nieuwe artikelen. Ik weet niet waarom je besloot te schrijven persoonlijke berichten, is het beter om het in de reacties achter te laten, zodat andere mensen gemakkelijker een recensie kunnen schrijven als ze zien dat iemand die moediger is, het al heeft gedaan.
U deze methode er is een nadeel: het werkt niet goed met wow.js, waarmee we de animatie in het artikel hebben gemaakt. Sommige animaties worden niet afgespeeld en er is lege ruimte op hun plaats. Als iemand weet hoe dit kan worden opgelost, schrijf dan in de reacties of in
Op een van de sites was het nodig om de pagina naar boven te scrollen (scrollen). vloeiende animatie. In jQuery gebeurt dit met één commando:
$("html,body").animate((scrollTop:0),500);
Maar in puur JavaScript is het iets ingewikkelder:
var t;
functie scrolltop() (
var top = Math.max(document.body.scrollTop,document.documentElement.scrollTop);
als(boven>0) (
window.scrollTo(0,Math.floor(top/1.5));
t = setTimeout("scrolltop()",30);
) anders (
clearTimeout(t);
}
retour vals;
}
Variabel bovenkant gelijk aan de huidige scrollafstand van de pagina in pixels. Elke 30 ms neemt deze waarde 1,5 keer af en bereikt uiteindelijk geleidelijk nul. Dit is een imitatie van de 'eas-out'-eigenschap in CSS-animaties.
Als je de pagina lineair omhoog moet scrollen, zonder versnelling, schrijf dan zoiets als dit:
venster.scrollTo(0,-20);
Vervolgens scrollt de pagina naar boven met een snelheid van 20 pixels per 30 ms.
Wat veroorzaakt de periode van 30 ms? Een comfortabele schermverversingssnelheid is ongeveer 30 frames per seconde, wat betekent dat de duur van elk frame 30 ms is. Voor een ideale vloeiendheid kun je 60 frames per seconde maken, en dan moeten de time-outs ongeveer 15 ms zijn. Maar dit kan achterblijven op zwakke apparaten.
Met dank aan de auteur van de siteAls u het project wilt steunen, gebruik dan het Yandex.Money-platform - het is vertrouwelijk en veilig.
Zoals je waarschijnlijk al geraden hebt, gaat het artikel niet over tulpen en rozen, of hoe je een appelboom uit een kamille kunt laten groeien (dus dit is niet de plek voor jonge Michurinians :-), maar we zullen het hebben over het veranderen van de kleur van elementen van een webpagina, over een vloeiende overgang van de ene kleur naar de andere, d.w.z. Laten we het hebben over fade-effecten.
VoorbeeldLaten we beginnen met een voorbeeld: beweeg over een afbeelding en verplaats de cursor vervolgens weg.
Als je niet geïnteresseerd bent in theoretische details, maar wel nodig hebt kant-en-klare oplossing dan naar jou.
Verklaring van het probleemEr worden twee kleuren gegeven: de startkleur en de eindkleur.
Het is noodzakelijk om tussenkleuren te vinden, die één voor één op een element op de pagina worden toegepast, we krijgen een vloeiende overgang van de oorspronkelijke kleur naar de uiteindelijke kleur. Je moet ook uitzoeken hoeveel van deze tussenkleuren er moeten zijn en na hoeveel tijd de ene tussenkleur in de andere moet veranderen.
Er wordt dieper op de kwestie ingegaanLaten we bijvoorbeeld wit als beginkleur nemen en oranjerood als eindkleur.
| #FFFFFF | ? | ...N... | ? | #FF4500 |
Nu moeten we tussenkleuren vinden. Prima. Maar hoe?! Hoe moeten we dit vraagstuk benaderen? Laten we, om dit te doen, onthouden (of ontdekken :-) hoe kleur op het beeldscherm wordt gevormd. Elke kleur op een beeldscherm wordt gevormd uit drie primaire kleuren: rood (rood), groen (groen) en blauw (blauw), door ze te mengen (d.w.z. kleur model RGB). En kleuren worden aangegeven op een webpagina of door numerieke waarden daarin RGB-systeem of letterlijke waarden van benoemde kleuren (bijvoorbeeld wit voor wit, rood voor rood, enz., maar niet alle kleuren hebben namen), die nog steeds naar numerieke waarden verwijzen. Maar we zullen niet overwegen om de kleur bij naam te specificeren, omdat namen zijn uitgevonden voor het gemak van het menselijk onthouden, maar in ons geval zullen ze ongemak veroorzaken tijdens berekeningen, omdat zal nog steeds een vertaling in numerieke vorm vereisen. U kunt de numerieke waarde van een kleur op twee manieren instellen: hexadecimaal en functioneel.
- In hexadecimale notatie is de RGB-waarde: volgende formaat: Een "#"-teken, onmiddellijk gevolgd door drie of zes hexadecimale tekens. Een driecijferige RGB-waarde (#rgb) wordt geconverteerd naar een reeks van zes cijfers (#rrggbb) door de cijfers te dupliceren in plaats van nullen toe te voegen. #fb0 wordt bijvoorbeeld uitgebreid naar #ffbb00. Daarom kan de kleur wit (#ffffff) in een kortere vorm (#fff) worden gespecificeerd.
- In functionele weergave is het registratieformaat van de RGB-waarden: volgende weergave: de tekenreeks "rgb(", onmiddellijk gevolgd door een lijst met drie door komma's gescheiden reële (of geheel getal, of percentage) waarden, onmiddellijk gevolgd door het haakje ")". De gehele waarde 255 is gelijk aan de procentuele waarde 100% en hexadecimale waarden F of FF, dus rgb(255.255.255) = rgb(100%,100%,100%) = #FFF.
Een kleur die in numerieke vorm wordt gegeven, geeft ons dus de waarden van de samenstellende kleuren, wat ons uiteindelijk de mogelijkheid geeft om, door elk van de primaire kleuren van de oorspronkelijke kleur te veranderen, tot de tweede, uiteindelijke kleur te komen. Als we bedenken dat onze concreet voorbeeld, dan hebben we het volgende (waarden in het decimale systeem worden tussen haakjes aangegeven):
| #FFFFFF | = | FF (255) | FF (255) | FF (255) |
| 0 | – CE (206) | – FF (255) | ||
| #FF4500 | = | FF (255) | 45 (49) | 0 |
Die. om van wit om oranjerood te krijgen, moet je de rode component van de witte kleur ongewijzigd laten (verander de waarde naar nul), trek 206 af van groen en trek 255 af van blauw. ΔB = -255) stappen.
Om nu bijvoorbeeld twee tussenkleuren + de uiteindelijke kleur (3 in totaal) te krijgen, moet u de beginwaarden van het RGB-triplet (#FFFFFF) wijzigen, niet met de volledige waarde van de stappen ΔR, ΔG, ΔB, maar eerst met 1/3, dan met 2/3 en tenslotte met 3/3 (3/3 = 1, dit is volledige betekenis stappen om de uiteindelijke kleur te verkrijgen, die we in principe al weten).
| #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 |
We hebben dus geleerd tussenliggende kleuren te berekenen. Er moet nog een nuance worden verduidelijkt, zodat een persoon tussenliggende kleuren kan opmerken, is het noodzakelijk om tijdsvertragingen te maken tussen de veranderende kleuren, anders zullen de veranderingen zo snel plaatsvinden dat de gebruiker de tussenliggende kleuren eenvoudigweg niet zal opmerken.
Nu hebben we een duidelijk totaalbeeld en kunnen we verder gaan met het schrijven van code. Er zijn begin- en eindkleuren, we kunnen n tussenkleuren berekenen (waarbij n willekeurig wordt gekozen) en er is een vertragingswaarde t (waarbij t willekeurig wordt gekozen). Het algoritme is dus als volgt: wijs de eerste tussenkleur toe aan het element op de webpagina, maak een vertraging met de hoeveelheid t, wijs de tweede tussenkleur toe aan het element, maak een vertraging, ..., wijs de n-de tussenkleur toe kleur toe aan het element, wat de uiteindelijke kleur is.
UitvoeringLaten we als voorbeeld een knop maken waarvan de achtergrond verandert van wit in oranjerood wanneer erop wordt geklikt.
Laten we gaan... De eerste verkeerde gedachte die in je opkomt is het berekenen van tussenliggende kleuren in een lus, waarbij na elke iteratie een vertraging ontstaat.
Functie fade() ( for (var i = 1; i
