Inschuivende titels
De techniek die hier wordt getoond is bij uitstek geschikt als voorblad van een presentatie site, bijvoorbeeld een serie groot-formaat foto's. Het voorbeeld toont iets wat het voorblad van een fotoalbum met herfstfoto's zou kunnen zijn.
Het gaat hier om de titels die omhoog komen schuiven en na een beetje stuiteren op hun plaats komen.
De code kun je downloaden om zelf te gebruiken, behalve de achtergrondfoto. Daar moet je zelf voor zorgen.
We beginnen met het voorbeeld, dat opent in een nieuw venster of tabblad.
Dit is een vrije bewerking van een script dat ik aantrof in Webdesigner Magazine nr. 79 (september 2015), pag. 64 e.v. Dit
blad wordt sinds eind november 2017 niet meer gemaakt.
Het oorspronkelijke script is niet meer beschikbaar op internet. De auteur is niet bij het betreffende artikel genoemd.
Voor deze site is de vormgeving van het voorbeeld aangepast.
- Er worden twee items besproken:
- De werking van het script.
- Inbouwen in je eigen site.
- De werking van het script
- De code bestaat uit twee delen: HTML en CSS (in de file styles.css).
- HTML
- De HTML5-structuur is hier van belang:
- Binnen de <body> staat alleen een <div>-tag met id="container". Dit zorgt ervoor dat het geheel bij elkaar wordt gehouden.
- Voor elk van de vier titel-regels is er een <div class="titel">-tag. Deze dient alleen om te titel goed op het scherm te positioneren.
- Binnen elke <div class="titel">-tag staat weer een <div>-tag, met een uniek klasse-naam. In het voorbeeld zijn dat de klassen een, twee, drie en vier. Hier wordt de werkelijke titel-tekst gezet. Er kan ook een plaatje in staan (met een <img>-tag). Dat is het geval bij class="vier".
- CSS
- De CSS begint met wat instellingen voor de body, waaronder de achtergrondfoto.
- Hierna volgt de klasse container, waar in de tekst wordt gecentreerd en de afstand tot de bovenkant van het window op 200px wordt gezet.
- Vervolgens worden de instellingen gemaakt voor de klasse titel. Hier wordt overflow:hidden gezet, zodat zaken die buiten beeld vallen, onzichtbaar zijn. Ook wordt het Web-font ingesteld, op een letterhoogte van 100px. Er wordt gebruik gemaakt van het font "Shojumaru", dat afkomstig is van Google.
- Nu zijn de vier titelregels aan de beurt, in de klassen een, twee, drie en vier. De eerste drie klassen hebben een instelling voor de tekst-kleur, de vierde heeft dat niet omdat er alleen een figuur in zit.
- Alle vier de klassen verwijzen naar de animatie omhoog, maar elk met een eigen (steeds langere) looptijd.
- Tijdens de loop van de animatie, zie @keyframes, wordt de zichtbaarheid van de titelregels steeds beter. De opacity
loopt op van 0 naar 1. De beweging wordt gestuurd door een cubic-bezier-function in combinatie met de plaats waar de titelregels
zich bevinden.
Meer informatie over cubic-bezier-functies vind je in de items Over @keyframes en Bezier-krommen gebruiken in CSS-animaties.
- Door de verschillende looptijden van de vier animaties verschijnen de vier titels niet tegelijkertijd maar na elkaar.
- In de huidige stand van de techniek (augustus 2017) is voor transition in de grote browsers geen vendor-prefix
(meer) nodig, uiteraard mits de browsers goed up-to-date zijn gehouden.
- Deze code is niet responsive en daardoor minder geschikt voor kleine beeldschermpjes.
- Inbouwen in je eigen site
- Download de .zip-file en pak hem uit. Hernoem de file html036a.htm naar bijvoorbeeld index.html.
- Neem de naam van de achtergrondfoto op in de files styles, zoals hierboven is aangegeven. Je hebt nu een werkend template voor je site.
- Verander desgewenst de kleuren van de tekst. Kies het font en de letterhoogte die je mooi vindt voor jouw toepassing.
- Als je wilt dat dit ook werkt met wat oudere browsers, moet je de vendor-prefix
-webkit- toevoegen aan de CSS-eigenschappen voor de animatie: animation-duration, animation-name en het
blok @keyframes met daarbinnen: transition-timing-function, transform en translate3d.
- Het voorbeeld is bij uitstek geschikt als voorblad voor een website. Door links te maken van de titels, wordt het een (hoogf-)menu waarmee de bezoekers je site verder kunnen bekijken.
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>).
<link href="https://fonts.googleapis.com/css?family=Shojumaru" rel="stylesheet">
<link rel="stylesheet" href="styles.css">
(Zet dit in de <BODY>).
<div class="container">
<div class="titel">
<div class="een">Herfst</div>
</div>
<div class="titel">
<div class="twee">Kleuren</div>
</div>
<div class="titel">
<div class="drie">in het Park</div>
</div>
<div class="titel">
<div class="vier"><img src="guirlande.png" alt="" height="43" width="481"></div>
</div>
</div>
Downloaden:
Druk op de knop:
File: voorb036.zip, 6167 bytes.
