Wanneer u markeringen voor langere geschreven stukken op één pagina maakt, is het vaak belangrijk om navigatiestructuren te maken om van de ene naar de andere tekstgedeelte te springen. Dit wordt standaard in HTML ondersteund, waardoor we naar secties binnen een pagina kunnen gaan en ze zelfs rechtstreeks vanuit externe links kunnen bezoeken.
A List Apart-hier ziet u de sectiekoppeling en de "fragment-ID" (hash-tag ...) in de URLDe help-documentatie op GitHub is een andere plaats waar u dynamische sectie-links vindt
In deze zelfstudie bespreken we een techniek voor het dynamisch genereren van die links met JavaScript en deze vervolgens te animeren met behulp van CSS. Laten we erin duiken!
markup
De eerste noodzakelijke stap is om een geschikte opmaak voor uw geschreven stuk te maken. We nemen aan dat je een hebt artikel, en binnen dat artikel zijn er veel secties, elk met een eigen h1 tag en daaropvolgende inhoud.
Dit is hoe uw HTML er kan uitzien:
Hier is een deel
Mobiliseer trotse fondsenwervingscampagne, basiscriteria redden levens mensenrechten geven empowerment. Vrijgevigheid klimaatverandering, kwetsbare bevolking mondiale leiders blijvende verandering. Uitkomsten, eerlijkheid ontwikkelingslanden ontwrichten mensgericht ontwerp; voortgang implementatie UNHCR veel stemmen proces.
The Elders; complexiteit vieren; rechtsbijstand diversificatie sanitatie sociaal ondernemerschap open source bijstandsbijdrage gezondheidswerkers in de gemeenschap.
Hier is er nog een
Het eigendom van de gemeenschap uitbreiden; Kickstarter openbare dienst collaboratieve consumptie, werkgelegenheid Rockefeller publiek-private partnerschappen transformatieve aanpak. Partner Aga Khan informele economieën benodigdheden samenwerkingssteden publieke instellingen kansvoeding.
En toch nog een
Publieke sector vrije expressie zinvol, enabler; Andrew Carnegie Bloomberg, emergent involvement globalisation crisissituatie. Gender, gendergelijkheid waarheid op lange termijn kwaliteitsverbetering jeugd civic engagement gelijkheid schaalbaar einde honger duurzaam Medecins du Monde agency change lives.
Sociale analyse, aangesloten; hoeksteen levensreddende grantees Jane Addams vrije meningsuiting, veranderingsbewegingen mensen opheffen sociale uitdagingen positieve sociale verandering ontwrichtende toekomst.
Notitie: zoals je kunt zien, passen we een toe ID kaart naar de afzonderlijke secties. We kiezen ervoor om dit te doen omdat het ID kaart is eigenlijk gerelateerd aan de sectie zelf, niet aan de h1 label.
Naar een element springen met een gegeven ID kaart op een pagina maakt u een ankertag met een href waarde gelijk aan het hekje, gevolgd door de ID kaart. In onze voorbeeldinhoud van hierboven bijvoorbeeld, om naar de tweede sectie te springen, zouden we de volgende link kunnen maken:
Tweede deel
Er zijn veel manieren om dit te doen: je zou de links handmatig kunnen coderen, je zou een abstractie kunnen gebruiken die je sectie-HTML, inclusief de link, uitbouwt. In deze zelfstudie gebruiken we JavaScript om de links dynamisch te genereren.
Vanilla JS
Hier is de JavaScript:
var sections = document.querySelectorAll ('sectie'); for (var i = 0; i < sections.length; i++) var section = sections[i]; var id = section.id; var h1 = section.querySelectorAll('h1')[0]; var text = h1.innerHTML; h1.innerHTML = ""+ tekst +""+" "+ id +" ";
jQuery-versie
En hier is een jQuery-versie, die in feite hetzelfde bereikt:
$ ('article section'). each (functie (i, el) var id = $ (this) .attr ('id'); var h1 = $ (this) .find ('h1'). first () ; var t = h1.text (); h1.html (""+ t +""); h1.append (" # "+ id +" "););
Beide geven hetzelfde resultaat. We zoeken naar alle afstammelingen van een bepaald artikel en voor elk daarvan vinden we het ID kaart van die sectie. Vervolgens bouwen we een link die daarop wijst ID kaart en voeg het toe aan de hoofd element. We wikkelen de bestaande tekst ook in een reeks voor meer flexibele vormgeving.
Over styling gesproken ...
Laten we vervolgens een aantal basis-CSS toepassen om een hide-and-reveal-effect te bieden:
Deze regels stellen eerst een aantal basisstijlen in; doopvont, kleur, artikel breedte enzovoorts. Vervolgens stellen we dat de een (die we eerder hebben toegevoegd via JavaScript) hebben overgangen die erop worden toegepast en hebben standaard een dekking van 0. Alleen als we erover zweven, neemt de dekking toe tot 1, waardoor we het fade-effect krijgen.
En dat is het! Nu hebben we een relatief eenvoudige implementatie van deze techniek in actie:
Conclusie
We hebben zojuist een heel nuttige verbetering voor inhoudrijke webpagina's gemaakt! De fallback is ook sierlijk: als JavaScript is uitgeschakeld, verschijnen de links gewoon niet - en als er een hashtag aanwezig is aan het einde van de URL, wordt deze genegeerd.
Ons fade-in-effect is een eenvoudige manier om de link te presenteren, dus hoe kunt u dit verbeteren? Wat voor soort animaties zou je kunnen toepassen? Zou je de link op dezelfde manier positioneren? We kijken uit naar uw ideeën (en kijk uit voor het communityproject dat we binnenkort over dit onderwerp gaan lanceren!)
Accentsconagua
Share
A List Apart-hier ziet u de sectiekoppeling en de "fragment-ID" (hash-tag ...) in de URL
De help-documentatie op GitHub is een andere plaats waar u dynamische sectie-links vindt