Sterrenhemel als achtergrond

Hieronder zie je een <iframe>, met daarin een document dat lijkt op een sterrenhemel. Dat is bruikbaar voor een site over astronomie of andere wetenschap die over de sterrenhemel gaat.

Het bijzondere is dat de draaiende achtergrond helemaal is gemaakt met CSS (en een beetje HTML)
Op deze bladzijde wordt uitgelegd hoe je een document maakt zoals in het <iframe> wordt getoond. De code van het voorbeeld kun je downloaden om zelf verder mee te ontwikkelen.
 

Inspiratie voor dit verhaal is gekomen door een artikel in Webdesigner Magazine nr. 91 (november 2016), pag. 22 e.v. Dit blad wordt sinds eind november 2017 niet meer gemaakt.
Voor deze website heb ik de code wat geschoond, beter leesbaar gemaakt en een klein bugje gefikst. Verder heb ik het voorbeeld een beetje leuker gemaakt en de mogelijkheid toegevoegd om content te tonen tegen de draaiende achtergrond.

Het effect komt het beste tot zijn recht in een vierkant venster. Op deze site is een vierkant <iframe> ingezet, zonder randen en zonder schuifbalken.

• 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 wat HTML (in de body van het document) en CSS (in de file styles.css). Er komen geen JavaScript en plaatjes aan te pas, alle graphics wordt gemaakt met CSS.
• De sterrenhemel wordt opgebouwd uit een achtergrond die niet beweegt, met daarbovenop vijf lagen die elk met hun eigen snelheid ronddraaien rondom het middelpunt van het window.
• De content van het document ligt daar bovenop.
• Het is belangrijk dat de HTML-structuur gehandhaafd blijft, anders werkt het niet goed meer.
   
• HTML
• De sterrenhemel wordt gemaakt met een <div>-tag met de klasse starfield. Deze bevat het niet-bewegende stuk van de sterrenhemel.
• Binnen starfield bevindt zich een vijftal <span>-tags, waarmee het bewegende deel van de sterrenhemel wordt gemaakt.
• De content van de pagina komt binnen een <div>-tag met klasse starContent. Deze ligt bovenop starfield.
   
• CSS
• De achtergrond-afbeelding wordt met CSS gemaakt. Op een vierkant van 200px × 200px worden 6 punten geplaatst. Dat gebeurt met radial-gradient binnen background-image. Deze punten zijn cirkels, met een straal van 1px, 2px, 3px of 4px. (Feitelijk zijn het ellipsen, waarvan de halve assen in X- en Y-richting allebei even groot zijn.)
• Elk punt begint op bepaalde coördinaten ('at'). Vanaf een begin-kleur (drie tinten lichtgrijs en wit) verloopt de kleur heel snel naar volledig transparant (rgba(0,0,0,0).
• Het ronddraaien (Animatie) wordt gedaan met keyframes. In de klasse starfield worden de naam (starfieldRotate), de looptijd (infinite = oneindig herhalen) en de timing function (linear = constante snelheid) vastgelegd. De keyframes zorgen ervoor dat het hele spul draait.
• Er zijn vijf "lagen" met sterren, die elk hun eigen snelheid hebben. Dat wordt binnen starfield geregeld met animation-duration, die per de tijdsduur per laag instelt. Dat laatste gaat met nth-child().
   
• Voor de content van de pagina zijn wat aparte maatregelen nodig. De draaiende sterren bevinden zich immers in het document, niet in de achtergrond. Om dit te regelen is de klasse starContent toegevoegd.
• starContent bevindt zich bovenop de draaiende achtergrond. De plaatsing is absoluut in de linker bovenhoek.
• In het voorbeeld is starContent 200px breed en 200px hoog. Dit is in het midden gezet met behulp van een oude truc: margin-left is de − de helft van de breedte en padding-left is 50%. (absoluut geplaatste elementen kun je niet positioneren met float en clear).
• Om te voorkomen dat de sterren en de content door elkaar heen lopen, heeft starContent z-index:100.
   
• Toepassen in je eigen site
• Download de .zip-file en pak hem uit. Hernoem de file html547a.htm naar index.html of iets dergelijks. Je hebt nu het voorbeeld van deze pagina werkend
• Bouw de code op zoals op deze pagina is beschreven. Pas de kleuren en de grootte van de sterren aan aan je eigen wensen.
• De achtergrond van de sterrenhemel is zwart, maar andere kleuren zijn natuurlijk ook mogelijk. Verander daarvoor de kleur in de background van het blok body,html van de CSS.
• In het voorbeeld hebben de sterren allemaal een grijze kleur. Op de meeste monitoren is het verschil moeilijk te zien. Het loont de moeite om eens een groter kleurcontrast te proberen, bijvoorbeeld met de kleuren rood (#f00), groen (#0f0), blauw (#00f), geel (#ff0), magenta (#f0f) en cyaan (#0ff).
   
• Tenslotte
• Het duurt een paar minuten voordat de verdeling van de sterren 'goed' is. Het effect is daarom minder geschikt voor een pagina die meestal snel weer wordt verlaten.
• Aan deze code kleeft een nadeel: Het vergt veel rekenkracht van de grafische kaart. Als de draaiende sterrenhemel lang op het scherm blijft staan, kan de temperatuur van de GPU behoorlijk oplopen, zeker bij wat oudere computers.
• De toepasbaarheid van deze code is beperkt tot de sterrenhemel. Als je een andere toepassing weet: Stuur me een mailtje!

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 rel="stylesheet" media="screen" href="styles.css">

(Zet dit in de <BODY>).

<div class="starfield">
  <span></span>
  <span></span>
  <span></span>
  <span></span>
  <span></span>
</div>
<div class="starContent"><h2>Een blik in<br>Deep Space</h2></div>

Downloaden:
 
Druk op de knop:  File: voorb547.zip, 1281 bytes.

Opmerking:
 
Ook hier geldt: wees voorzichtig met de toepassing. Een achtergrond met bewegende elementen maakt het lastig om te tekst te lezen en jaagt daardoor de bezoekers van je website weg.