Vloeiend pagina's scrollen in puur javascript. JavaScript-vervaging - vloeiende kleurverandering

Hallo vrienden. Ik wil graag een onderwerp bespreken zoals een soepele overgang naar een ankerlink op een websitepagina. Als u op uw website schrijft omvangrijke teksten, formatteer het correct, met schermafbeeldingen en andere elementen, en soepel scrollen naar het anker maakt het ontwerp nog aantrekkelijker. Maar laten we eerst eens kijken wat het is en hoe het zal werken. U kunt een voorbeeld van werk op deze pagina bekijken door op de items in deze lijst te klikken.

Ankerlinks worden in de taal gemaakt hypertext-opmaak. Het maken van een anker in HTML is helemaal niet lastig. Het enige wat je nodig hebt is een beetje kennis van deze taal en een goed begrip van hoe het werkt. Als u hier geen problemen mee heeft, kunt u dit zonder veel moeite doen. Dus om voor anker te gaan HTML-pagina, moet je zoiets als het volgende in de code schrijven.

En om naar deze plaats op de pagina te gaan waar dit label wordt aangegeven, moet u dit in de link schrijven:

Ga naar een label op een pagina

Met deze aanpak zal de overgang worden uitgevoerd door een onmiddellijke sprong van de ene plaats naar de andere

Met de ontwikkeling van webtechnologieën is het mogelijk geworden om mooiere, dynamische websites te maken met verschillende effecten, enz. En het is echt geweldig als je een bezoeker voor iets anders dan de inhoud kunt interesseren en kunt vertrekken goede indrukken van het bezoeken van de site. Tot op zekere hoogte speelt dit de site-eigenaar in de kaart. Voor een soepele overgang naar het anker zullen we de bibliotheek gebruiken en volledig aansluiten klein schrift.

$(document).ready(function() ( $("a").click(function () ( elementClick = $(this).attr("href"); bestemming = $(elementClick).offset().top ; if($.browser.safari)( $("body").animate(( scrollTop: bestemming ), 1100); )else( $("html").animate(( scrollTop: bestemming ), 1100); ) retour vals ));

Er zijn drie manieren om dit script te verbinden. De eerste is om op de pagina ertussen in te voegen hoofdlabels. De tweede is om het mee te nemen apart bestand en sluit afzonderlijk als volgt aan:

Label op de pagina om ernaartoe te gaan

Ten tweede, als je niet voor alle ankers vloeiend wilt scrollen, maar alleen voor bepaalde ankers, moet je de derde regel van het script als volgt wijzigen:

Ga naar een label op een pagina

Een andere nuance die ik wil noemen is dat, in tegenstelling tot een eenvoudig HTML-anker, het jQuery-anker zich niet registreert adresbalk browserlink naar het anker wanneer u ernaartoe navigeert. Zodat je begrijpt waar ik het over heb, zal ik een voorbeeld geven van hoe een link naar een anker eruit zou kunnen zien in de adresbalk van een browser.

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.

In een van de projecten was het de taak om een ​​soortgelijk effect te implementeren door soepel naar te scrollen specifiek element wanneer u op een van de menu-items klikt.

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 het je vertellen aan de hand van het voorbeeld van het menu dat in het huurproject zat 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. Het was noodzakelijk om een ​​soepele overgang naar deze blokken te maken.

Om de overgang naar naar de juiste plaats op de site 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 de ID's op een vergelijkbare manier en dat is alles! 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 dit kunt implementeren cool effect, zoals een vloeiende pagina, scroll naar een 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 hebt besloten om in privéberichten te schrijven, het is beter om het in de reacties achter te laten, zodat het voor andere mensen gemakkelijker zal zijn om een ​​recensie te 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 spelen niet af en blijven op hun plaats. lege ruimte. Als iemand weet hoe dit kan worden opgelost, schrijf dan in de reacties of in

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 (dit is dus niet de plek voor jonge Michurinians :-), maar we zullen praten over het veranderen van de kleur van webpagina-elementen, over de vloeiende overgang van de ene kleur naar de andere, d.w.z. Laten we het hebben over fade-effecten.

Laten 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.

Er 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.

Laten we bijvoorbeeld wit als beginkleur nemen en oranjerood als eindkleur.

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 het 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 het formaat voor het vastleggen van een RGB-waarde 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 witte kleur (#ffffff) verder worden gespecificeerd korte vorm(#fff).
• In functionele weergave is het formaat voor het schrijven van een RGB-waarde de tekenreeks "rgb(", onmiddellijk gevolgd door een lijst van drie door komma's gescheiden reële (of geheel getal, of percentage) waarden, onmiddellijk gevolgd door een 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):

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 het groen en trek 255 af van het blauw -206, Δ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 de volledige ophoogwaarde om de uiteindelijke kleur te verkrijgen, die we in principe al kennen).

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.

Laten 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