Schuin afgesneden achtergrondfoto's
Op deze bladzijde wordt een interessante opmaak voor een website besproken. De gedachtegang achter de code wijkt nogal af van wat op deze site wordt toegepast. Daarom wordt het programmeervoorbeeld getoond in een apart tabblad.
Dit voorbeeld is gemaakt in HTML5. Afwijkingen van de standaard leiden er al gauw toe dat de schuine randen (beurtelings +5° en -5° met de horizontaal) geheel of gedeeltelijk verloren gaan.
Op deze pagina wordt uitgelegd hoe je zoiets maakt. De code van het voorbeeld kun je downloaden, echter zonder de achtergrondfoto's.
- Er worden drie items besproken:
- De oorsprong van het script.
- De werking van het script.
- Toepassen voor je eigen site.
- De oorsprong van het script
- De oorspronkelijke CSS is gemaakt door Mark Shufflebottom.
- Voor het uittrekken van de foto's over de breedte van het document is Anystretch.js ingezet. Dat is een jQuery-plug-in die is gemaakt door de Engelsman Dan Millar. Zijn programmeerwerk vind je op GitHub.com. Deze plug-in wordt niet meer onderhouden.
- De inspiratie en de bron voor deze pagina: Webdesigner magazine nr. 61, pag. 60 e.v. Dit blad wordt
sinds eind november 2017 niet meer gemaakt.
- De werking van het script
- Tijdens het laden van de pagina worden de breedte van de browser viewport en alle opmaakinstellingen van het document gereset. Dat gebeurt met meta-tag en een link naar het reset-script van Eric Meyer. Daarna wordt de CSS van het document zelf ingeladen.
- De HTML-code van de broodtekst heeft de volgende structuur:
<div class="top-container">
<header>
<h1><span> Schuin afgesneden</span> achtergrond­foto's</h1>
<h2>Interessante schermopmaak met achtergrondfiguren</h2>
</header>
<section class="container">
<div class="angle full" data-stretch="achtergrondfoto1.jpg">
<article class="content">
<h3>De zon gaat onder...</h3>
<p>...
</p>
</article>
</div>
<div class="angle">
<article class="content">
<h3>Totale Controle</h3>
<p>...
</p>
</article>
</div>
<div class="angle full" data-stretch="achtergrondfoto2.jpg">
<article class="content">
<h3>Krachtig</h3>
<p>...
</p>
</article>
</div>
<div class="angle">
<article class="content">
<h3>Fine Tuning</h3>
<p>...
</p>
</article>
</div>
<div class="angle full" data-stretch="achtergrondfoto3.jpg">
<article class="content">
<h3>De zon gaat onder...</h3>
<p>...
</p>
</article>
</div>
<div class="angle">
<article class="content">
<h3>Tenslotte</h3>
<p>...
</p>
</article>
</div>
</section>
</div> - Elk schuin afgesneden blok is gevat in een tag <div class="angle">.
Als er een achtergrondfoto is, wordt dat:
<div class="angle full" data-stretch="achtergrondfotoX.jpg">.
De class full wordt door Anystretch.js uitgerekt naar de gewenste grootte. De foto staat genoemd in het attribuut data-stretch. - Binnen een blok staat een tag <article class="content">. Deze fungeert als container voor een kopje (<h3>) en een of meerdere <p>-tags.
- De class top-container stelt de default-opmaak van de <body> in. Het is dus de wrapper voor de content die de gebruiker te zien krijgt.
- Daarbinnen bevinden zich een <header> en een <section> die de content bevatten.
- Helemaal aan het einde van de <body>, buiten de class top-container, worden jQuery en Anystretch.js gelinkt.
- Tenslotte wordt de function anystretch() geactiveerd voor alle elementen die de class full hebben.
- Toepassen voor je eigen site
- Maak een HTML-bestand aan met een <head> en een <body>
- De <head> bevat tenminste deze code:
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,
initial-scale=1.0">
<link rel="stylesheet" href="reset453.css">
<link rel="stylesheet" href="style453.css" - Bouw de structuur in de <body> en zet daar de achtergrond-foto's en de content-tekst in.
- Net voor de </body>-tag zet je deze code neer:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js">
</script>
<script src="jquery.anystretch.min.js"></script>
<script>
$(".full").anystretch();
</script> - De jQuery-code wordt hier van een CDN gehaald. Zelf hosten kan natuurlijk ook.
Downloaden:
Druk op de knop:
File: voorb453.zip, 8285 bytes.
