Ben's Hobbyhoekje -- Tekst overvloeien naar andere tekst

Tekst overvloeien naar andere tekst

We beginnen met het voorbeeld.
Klik op een van de onderstaande links. Je ziet dat de teksten veranderen. Dat gaat niet abrupt, maar ze vloeien in elkaar over.

Eerste
Tweede
Derde

Dit is alleen leesbaar als de pagina net geladen is. Klik op de drie links om het overvloei-effect te zien.

Als je op de link "Eerste" klikt, verschijnt deze tekst. De teksten die onder "Tweede" en "Derde" staan zie je niet.
Deze tekst vloeit over vanuit een van de twee andere teksten.

Als je op de link "Tweede" klikt, verschijnt deze tekst. De teksten die onder "Eerste" en "Derde" staan zie je niet.
Deze tekst vloeit over vanuit een van de twee andere teksten.

Je hebt op de link "Derde" geklikt. Daardoor is deze tekst verschenen. De teksten die onder "Eerste" en "Tweede" staan zie je niet.
Deze tekst vloeit over vanuit een van de twee andere teksten.

Op deze pagina wordt uit de doeken gedaan hoe je dit doet. De code kun je downloaden om zelf te gebruiken.

Inspiratie voor dit item is ontstaan door een artikel in Webdesigner Magazine 96 (juni 2017) pag. 18 t.m. 20.
Dit blad wordt sinds eind november 2017 niet meer gemaakt.
De auteur wordt niet bij het betreffende artikel genoemd.

Er worden twee items besproken:
1. De werking van het script.
2. Toepassen in je eigen site.
De werking van het script
De code bestaat uit HTML, CSS en JavaScript. Bij deze pagina staat alle code in het HTML-document.
HTML
De HTML van het voorbeeld bestaat uit een enkele <div>-tag met de klasse demo. Daarbinnen zijn een <ul>-tag en een <article>-tag.
De <div> dient om de links en de teksten bij elkaar te houden, het effect op het scherm te positioneren en om de achtergrond op te maken.
De links staan binnen een enkele <ul>-tag met daarbinnen een drietal <li>-tags die elk de klasse menu hebben. Met behulp van onclick="toon(' … ')" zijn er links van gemaakt.
De teksten staan in <section>'s binnen het <article>. Die zijn met CSS doorzichtig gemaakt.
Bij het laden van de pagina wordt een 'begin-tekst' getoond. Die verdwijnt als er op een link wordt geklikt.
Door op een link te klikken verschijnt de bijbehorende tekst.
De <section>'s hebben allemaal een uniek id. De tekst bij het laden van de pagina heeft id="nulde". De tekst die verschijnt als je op de link Eerste klikt, heeft id="eerste". De link Tweede is gekoppeld aan id="tweede, enz.
CSS
Als eerste wordt de klasse demo ingesteld. In je eigen toepassing kun je je meestal beperken tot een transparante achtergrond, zonder rand.
Vervolgens is er de selector ul li.menu. Dit is gedaan om te zorgen dat alleen de <li>-tags met de klasse menu en binnen een <ul> worden opgemaakt. Op deze pagina is dat noodzakelijk, omdat <ul> <li> veelvuldig voorkomt.
In dit geval worden de links achter elkaar getoond i.p.v. onder elkaar. Dat gebeurt met display: inline. Door de tekst te onderstrepen (text-decoration: underline) en van de cursor een handje te maken (cursor: pointer) lijkt het net ee gewone <a>-tag.
Nu is article aan de beurt. Deze tag dient als container voor de teksten. Behalve de opmaak wordt ook de hoogte ingesteld. Dat is nodig, anders zie je niets.
De selector article section maakt de tekst van de vier paragrafen op. De opacity is 0, waardoor de vier <section>'s niet zichtbaar zijn. Ook is hier de vloeiende overgang gedefinieerd: transition: opacity 1.5s;.
Als een <section> binnen een <article> het doel (target) is van een link, wordt van die section de opacity op 1 gezet. De betreffende section wordt in 1.5 seconde zichtbaar, terwijl de zichtbare tekst tegelijkertijd verdwijnt.
JavaScript
Het JavaScript bestaat uit de functions klaar() en toon().
De function klaar() wordt uitgevoerd zodra de pagina is geladen. Deze function vult de vooraf gedeclareerde variabelen p0 t.m. p3 met verwijzingen naar de section's met id="nulde" t.m. id="derde". De opacity van de section met id="nulde" wordt op 1 gezet, zodat de inhoud van die sectie zichtbaar wordt.
De function toon(paragraaf) wordt aangeroepen als er op een van de drie links wordt geklikt. Dat gaat via de event-handler onclick in de HTML.
De function toon(paragraaf) laat de zichtbare tekst verdwijnen. Dat gebeurt door van alle paragrafen (lees: <section>'s de opcacity op 0 te zetten. Vervolgens wordt op basis van de parameter paragraaf een van de <section>'s zichtbaar gemaakt.
Als toon() wordt aangeroepen met een niet-bestaande paragraaf, dan verschijnt de defaultwaarde. Dat is de tekst die zichtbaar wordt na het laden van de pagina.
Toepassen in je eigen site
Download de .zip-file en pak hem uit. Neem de code over naar je eigen document zoals op deze pagina wordt beschreven. Je hebt nu een werkend voorbeeld.
Pas de teksten aan aan je eigen behoefte. Als je met alleen een paar links (dus zonder begintekst) wilt beginnen dan doe je dat dat door in de <section id="nulde"> alleen een non-breaking space (  te plaatsen;
Maak de links en de sections op door de CSS aan te passen, in het bijzonder de klasse demo.
Als je extra <section>'s toevoegt (en dus ook extra links), voeg je ook extra variabelen p4, p5, enz. toe aan het JavaScript.
Het is noodzakelijk dat <article> een hoogte heeft, anders werkt het niet.

Gebruik:

De code staat gedeeltelijk in de <HEAD> en gedeeltelijk in de <BODY>.

De code van het voorbeeld ziet er als volgt uit:

(Zet dit in de <HEAD>).

<style>
.demo {
background-color:#dfd;
border:2px solid navy;
}
ul li.menu {
display: inline;
font-weight: bold;
text-decoration: underline;
padding: 0 20px;
cursor: pointer
}
article {
height: 5em;
position: relative;
font-weight: bold;
color: navy;
margin: 20px;
}
article section {
position: absolute;
top: 0;
left: 0;
opacity: 0;
transition: opacity 1.5s;
}
article section:target {
opacity: 1;
}
</style>
<script>
var p0, p1, p2, p3;
function klaar() {
p0 = document.getElementById('nulde');
p1 = document.getElementById('eerste');
p2 = document.getElementById('tweede');
p3 = document.getElementById('derde');
p0.style.opacity = 1;
}
window.onload = klaar
function toon(paragraaf) {
p0.style.opacity = 0;
p1.style.opacity = 0;
p2.style.opacity = 0;
p3.style.opacity = 0;
switch (paragraaf) {
case 'eerste': p1.style.opacity = 1; break;
case 'tweede': p2.style.opacity = 1; break;
case 'derde' : p3.style.opacity = 1; break;
default: p0.style.opacity = 1;}
}
</script>

(Zet dit in de <BODY> op de plaats waar het effect moet verschijnen).

<div class="demo">
<ul>
<li class="menu" onclick="toon('eerste')">Eerste</li>
<li class="menu" onclick="toon('tweede')">Tweede</li>
<li class="menu" onclick="toon('derde')">Derde</li>
</ul>
<article>
<section id="nulde">
Dit is alleen leesbaar als de pagina net geladen is.
Klik op de drie links om het overvloei-effect te zien.
</section>
<section id="eerste">
Als je op de link "Eerste" klikt, verschijnt deze tekst. …
.
.
.
… Deze tekst vloeit over vanuit een van de twee andere teksten.
</section>
</article>
</div>

Downloaden:

Druk op de knop: File: voorb574.zip, 989 bytes.