-elementen om aan de regels van het W3C te voldoen. We kunnen CSS inzetten om deze <span>-elementen op dezelfde manier te gebruiken als
-elementen. We zetten de display-eigenschap op ‘block’, zodat de afmetingen en padding ingesteld kunnen worden en elk element op een nieuwe regel komt.
| | |
nav a span{ display: block; }
15. Preview De structuur van de HTML gebruikt een <span>-tag om de paneelinformatie te bevatten, met daarin weer twee <span>-tags voor de preview en de volledige content. We gebruiken CSS om consistente eigenschappen te definiëren voor alle binnenste <span>tags in het contentdeel van het informatiekaartje.
| | | |
nav a span span{ position: relative; font-size: 50%; }
16. Contenttransitie De contentgebieden van de panelen moeten veranderen tijdens een hover, van preview naar vol-
ledige content. We willen dus transitie-animaties kunnen tonen. We gebruiken dezelfde CSS-verwijzing en de transition-eigenschap om de opacityen display-eigenschappen in te stellen. We gebruiken weer een overgangsduur van één seconde.
te tonen wanneer de hoofdcontent zichtbaar is. We gebruiken dus dezelfde manier om naar het eerste <span>-element te verwijzen wanneer de cursor over het paneel gaat. Zo wordt de dekking en weergave aangepast om de preview te verbergen.
| | | |
20. Huidige paneel
nav a span span{ -webkit-transition: opacity 1s, display 1s; transition: opacity 1s, display 1s; }
17. Zichtbaarheid De HTML is zo ingesteld dat het eerste binnenste <span>-element gebruikt wordt voor previewcontent. Daarom moet je de tweede binnenste <span> verbergen totdat de cursor over het informatiekaartje beweegt. Dit doe je met de CSS-selector :nth-child().
| | |
nav a span span:nth-child(2){ opacity: 0; }
18. Content tonen Nu gaan we aan de slag om de daadwerkelijke content te tonen tijdens de hover. We gebruiken de :hover- en de :nth-child(2)-selector om de contentcontainer aan te spreken, zodat we volledige dekking en block-weergave kunnen toepassen.
| | | |
nav a:hover span span:nth-child(2){ opacity: 1; display: block; }
19. Preview verbergen We hoeven de previewcontent natuurlijk niet meer
Hoewel het actieve paneel vergroot wordt, kan het voor sommige mensen toch nog lastig zijn om de content te onderscheiden van de rest van de panelen. Dit lossen we op door de achtergrondkleur te veranderen. Hier maken we de achtergrond wit, zodat deze opvalt tussen de rest van de panelen.
21. Afbeelding De afbeeldingen die we hier gebruiken, hebben een blauwe achtergrond. Dat ziet er natuurlijk niet uit als we de achtergrond van het paneel wit maken. Dat lossen we voor dit voorbeeld even simpel op met een border in dezelfde kleur. Zo vullen we de rechterkant mooi in.
| | |
nav a img{ border-right: 500px solid rgb(81, 173, 228); }
22. Padding De padding zorgt voor een wit vlak aan de linkerkant van de afbeelding. Dat lossen we op met een negatieve margin die even groot is als de padding. Zo plaatsen we de afbeelding over de witte ruimte. Niet de beste oplossing, maar goed genoeg voor dit voorbeeld.
| | |
nav a img{ margin-left: -1em; }
workshops ��������������������������������������������������������������� 59
Workshops
Maak desktopapplicaties met Electron Gebruik pseudo-elementen, HTML, CSS en JavaScript om crossplatform desktopapps te maken
60 �������������������������������������������������������������� workshops
Workshopbestanden Te vinden op wdmag.nl/WDfiles
Workshops
G
itHub heeft een nieuw opensource project gelanceerd: Electron (voorheen Atom-Shell). Hierin wordt Chromium, waarop Chrome van Google gebouwd is, gecombineerd met Node.js, de JavaScript-omgeving voor het bouwen van applicaties. Met het resultaat kun je crossplatform applicaties bouwen met HTML, CSS en JavaScript. Grote bedrijven als Microsoft, Facebook en Slack maken al gebruik van Electron. Electron-applicaties beginnen meestal met een enkel JavaScript-bestand dat uitgevoerd wordt. De code beheert het hoofdproces, kan nieuwe applicatievensters starten en beheren, en luisteren naar belangrijke events. Van elk venster dat ingesteld wordt, kan de UI gerenderd worden met behulp van HTML, CSS en JavaScript. De JavaScript die binnen een venster wordt uitgevoerd, krijgt ook toegang tot speciale API’s van Electron en de API van Node.js. Het Chromium-deel van Electron wordt continu bijgewerkt met de nieuwste versies, waardoor actuele HTML- en CSS-features en opkomende JavaScript-standaarden gebruikt kunnen worden. Node. js wordt ook goed bijgehouden. Er wordt momenteel zelfs een fork gebruikt, genaamd io.js. De fork ondersteunt ES6 JavaScript-syntax en kan gebruikmaken van de registry-modules van npm (npmjs.com).
1. Kant-en-klaar Electron Je hoeft Electron niet vanaf de grond te compileren als je applicaties wilt bouwen. Het project biedt reeds gecompileerde versies van Electron voor verschillende besturingssystemen, deze kun je eenvoudig installeren via de pakketmanager npm van Node.js (te vinden op nodejs.org).
|
$ npm install -g electron-prebuilt
2. Electron testen Electron is nu beschikbaar op je systeem. Verifieer dit door het ‘electron’-commando te starten. Je ziet nu een standaardbericht van de applicatie, negeer dit eventjes en sluit het scherm.
|
$ electron
3. Gebruik package.json Electron heeft package.json nodig om te snappen welk bestand uitgevoerd moet worden. Het slaat ook de naam van je applicatie en de versie op. ‘npm’ voegt de details toe van de modules die je gaat installeren en gebruiken. De applicatie in deze workshop wordt gebruikt voor het aanpassen van Markdown-bestanden.
| | | | |
{ "name": "wdMarkdown", "main": "index.js", "version": "0.1.0" }
4. De applicatie en index.js Het bestand index.js is het middelpunt van de applicatie, dit maakt het eerste applicatievenster om onze applicatie weer te geven. Het hangt van je applicatie af wat dit bestand doet, maar meestal bevat het de basis van je applicatie en voert het het zware werk uit. Door het ‘app’-object te gebruiken, kunnen we achterhalen wanneer Electron klaar is, waarna een browservenster (dat ook als een normaal applicatiescherm) gemaakt kan worden.
| | |
var app = require(‘app’); var BrowserWindow = require (‘browser-window’);
| | | | | | | | | |
var window = null; app.on(‘ready’, function() { window = new BrowserWindow({width: 800, height: 600}); window.loadUrl(‘file://’ + __dirname + ‘/root/index.html’); window.on(‘closed’, function() { window = null; }); });
5. App testen Om onze app te kunnen testen, maken we een klein HTML-bestand met wat simpele HTML. Na het toevoegen van onderstaande code voer je het commando ‘electron ./’ uit in dezelfde map als het eerder gemaakte package.json-bestand.
| | |
Hello World, from Electron
6. Bower installeren Onze applicaties heeft een paar dependencies voor het bouwen van de UI. Door Bower te installeren, kunnen deze en andere dependencies eenvoudig geïnstalleerd en bijgewerkt worden.
|
$ npm install -g bower
Desktopapplicaties
Voor complexere applicaties kun je overwegen npm-modules te gebruiken (meer info op npmjs.com). Deze kun je inzetten voor databases, netwerkcommunicatie en meer. Denk ook aan een framework voor je UI, zoals React, AngularJS of Backbone.
Links
Met het View-menu kunnen we schakelen tussen de originele Markdown-content en de gerenderde HTML-versie van de content Linksboven
Dit is de uiteindelijke UI van de HTML-pagina. Het hoofddoel is om alle JavaScript-bestanden op te nemen die nodig zijn om de UI op te bouwen, Bootstrap voor het uiterlijk en ons belangrijke JavaScript-bestand Rechtsboven
Zo ziet de applicatie eruit als we een Markdown-document aanpassen. De tab toont de titel van het bestand en de editor bevat de ruwe Markdown-content workshops ���������������������������������������������������������������� 61
Workshops Maak desktop-applicaties met Electron
7. Bootstrap-framework
10. Bootstrap opnemen
Om iets te kunnen weergeven, moeten we een UI maken met HTML en CSS. Bootstrap is handig als startpunt, want je krijgt de beschikking over fijne componenten en stijlen. Geavanceerde applicaties kunnen ook prima gebruikmaken van AngularJS of React. Aangezien we Bower gebruiken om Bootstrap op te halen, krijgen we ook direct jQuery, want dit is verplicht.
Maak vervolgens Bootstrap, Ace editor en Marked beschikbaar door ze op te nemen in ons index. html-bestand. Je ziet dat jQuery op een bijzondere manier is opgenomen. jQuery heeft moeite om te bepalen in wat voor omgeving het werkt als deze in Electron actief is, vandaar de omweg.
|
$ bower install bootstrap
8. Markdown renderen De app wordt gebruikt om Markdown-bestanden aan te passen. Markdown is een veelgebruikte markuptaal voor het opmaken van tekst in een kaal tekstbestand. Dit kan dan tot HTML verwerkt worden door een bibliotheek als ‘Marked’.
|
$ bower install marked
9. Markdown aanpassen Ace is een uitgebreide code-editor, geschreven in JavaScript en te gebruiken binnen webpagina’s. In deze workshop gebruiken we Ace om de Markdown-bestanden te kunnen aanpassen. We krijgen de beschikking over handige features als regelnummers, syntax highlighting en meer.
|
$ bower install ace-builds
Electron debuggen
Om de schermen te debuggen die je met Electron maakt, roep je de .openDevTools()methode aan op de instantie van dat scherm. Het scherm met developertools wordt nu geopend.
Linksboven
Microsoft heeft onlangs hun eigen editor gelanceerd, deze is op Electron gebouwd en heet Visual Studio Code Rechtsboven
Atom is de code-editor van GitHub en vanuit dit product is het Electron-project ontstaan Rechts
De uiteindelijke versie van de editor, inclusief meerdere tabs en content in Markdown-formaat
62��������������������������������������������������������������� workshops
11. Opmaak De Markdown-editor heeft een deel voor het aanpassen van de content en een deel voor het bekijken van de gegenereerde HTML. Om de app eenvoudig te houden, vullen de editor- en previewdelen de applicatie, min een gebied voor tabs om tussen bestanden te schakelen.
| | | | |
.editor, .preview {position: absolute !important; top: 58px; right: 0; bottom: 0; left: 0; z-index:5;} .preview {display:none; overflow:auto; z-index:10; background-color: white;}
tie met de belangrijkste JavaScript-processen die Electron uitvoert (./index.js). We moeten de aangepaste bestanden identificeren en extra informatie opslaan, plus referenties aan de tab- en de paneeldelen van de UI. We hebben ook een kleine functie nodig om de ID van de actieve tab te achterhalen.
| | | | | | | |
var ipc = require('ipc'); var files = {}, rollingId = 0; var tabs = $('#fileTabs'), panes = $('#filePanes'); var ActiveTab = function() { return id = tabs.find('.active a'). attr('href').slice(1); };
14. FileNew-functie Om eennieuw bestand te kunnen maken of een bestaand te kunnen openen, moet onze UI een nieuwe tab en paneel maken, plus een relevante titel en content instellen. We gebruik hiervoor FileNew.
12. Tabs maken
15. Ace gebruiken
Bootstrap regelt de opmaak en JavaScript die nodig is voor de tabinterface van de applicatie. Elke tab staat voor een bestand en een klik opent het bestand in de editor of weergave. We kunnen nu even volstaan met heel eenvoudige HTML, omdat we de tabs en panelen met JavaScript gaan maken.
Nu de tab, het paneel en de content gereed zijn, kunnen we de Ace-editor tot leven wekken. Dadelijk kunnen we informatie makkelijker opslaan en schakelen naar de nieuwe tabs.
| | | | |
13. root/app.js Dit bestand bevat de UI-code. Dankzij de ipc-module kan deze events publiceren voor de communica-
16. Menu-events We voeren nu eenmaal de FileNew-functie uit, presenteren een tab voor een nieuw bestand en luisteren naar menu-events afkomstig van het hoofdproces van de applicatie. De menu-events, die we dadelijk maken, zijn voor het maken een nieuw bestand en het openen van een bestaande.
| | |
FileNew(); ipc.on(‘file-new’, FileNew); ipc.on (‘file-open’, FileNew);
Workshops Maak desktop-applicaties met Electron
applicaties verpakken Je kunt gebruikers crashrapportages laten versturen naar je site, hiervoor gebruik je de ‘crash-reporter’module van Electron. Je applicatiecode kan ook gearchiveerd worden in een beveiligd ASAR-bestand, voordat je deze distribueert. Je hebt hier het ‘asar’-commando voor nodig en dat is te installeren via npm: ‘npm install -g asar’. Electron ondersteunt auto-updating momenteel alleen op Mac OS X. Je kunt natuurlijk wel via een url controleren of er een nieuwe versie is en de gebruiker hiervan op de hoogte stellen. Op GitHub vind je kant-en-klare versies van Electron: github. com/atom/electron/releases. Je appcode kan hiermee samengevoegd en opnieuw gedistribueerd worden.
17. Menu’s Op dit moment zou onze Electron-app moeten opstarten met een verse tab om content in aan te passen. We kunnen alleen niks anders openen en opslaan. We hebben nu een menu nodig en ditbouwen we binnen het bestand ./index.js. We gebruiken de ‘fs’ en ‘path’-modules van Node.js om het werken met bestanden af te handelen.
| | | | | | | | | | | | | | | | | | | | | | | | | | | |
/* Below ‘window = null’ */ var fs = require('fs'), path = require('path'); var ipc = require('ipc'); var dialog = require('dialog'), Menu = require('menu'); /* Within “app.on(‘ready’)” */ var SendEvent = function(name) { return function() {window.webContents. send(name);}; }; var template = [ {label: 'File', submenu: [ {label: 'New', click: SendEvent ('file-new')}, {label: 'Open', click: OpenFile}, {label: 'Save', click: SendEvent ('file-save')}, {label: 'Save As', click: SendEvent ('file-save-as')}, {label: 'Close', click: SendEvent ('file-close')}, {type: 'separator'}, {label: 'Quit', click: function() {app. quit();}} ]}, {label: 'View', submenu: [ {label: 'HTML/Markdown', click: SendEvent('view-toggle')}
| | | |
]} ]; Menu.setApplicationMenu(Menu. buildFromTemplate(template));
18. Bestand openen We kunnen nu binnen het ./index.js-bestand een functie toevoegen (waar we al aan refereren in ons menu) om een dialoog te tonen (opgegeven door Electron), het bestand te openen en de data terug te geven om in onze UI weer te geven. Als je de app nu uitvoert, zie je een menu waarin we een nieuw bestand kunnen openen om weer te geven in de editor.
19. Bestandsdata doorgeven Het opslaan van een bestand vergt nog wat meer werk. Als er op het ‘Save/Save a’-menu geklikt wordt, sturen we een event naar de UI. De UI bevat de data die we gaan opslaan, dus moet deze luisteren naar de events. De data moet teruggestuurd worden, zodat we een dialoog kunnen weergeven en het gerelateerde bestand kunnen maken of bijwerken.
20. Bestand schrijven Onze UI stuurt een file-save event naar het hoofdproces (./index.js), waarbij het ID, de content en het pad (nieuwe bestanden hebben er geen) opgegeven worden. We moeten luisteren naar dit event en slaan het bestand direct op als er een pad opgegeven is. We vragen om een locatie als save-as gebruikt wordt, voordat we een bestand maken of een bestaand bestand overschrijven met content.
| |
ipc.on('file-save', function(evet, data, id, type, filepath) {
| | | | | | | | | | | | | | | | | | |
if (filepath) { return fs.writeFile(filepath, data, function(err) { if (err) return console.error(err); }); } dialog.showSaveDialog(window, { filters: [{ name: 'Markdown', extensions: ['md', 'markdown'] }] }, function(filepath) { if (filepath && filepath.length > 0) { fs.writeFile(filepath, data, function(err) { if (err) return console.error(err); window.webContents.send('file-saved', id, path.basename(filepath), filepath); }); } }); });
21. Renderen Markdown is handig om snel tekst te schrijven en aan te geven hoe deze opgemaakt moet worden, maar wordt nog handiger als je meteen ziet hoe deze gerenderd wordt. Ons menu bevat een optie om te schakelen naar de gerenderde view. Onze view moet hier naar luisteren, de editor-content ophalen, doorgeven aan ‘marked’ voor het omzetten en weergeven in het scherm.
22. Afsluiten Nu moeten we een tab afsluiten. Luister naar het menu event binnen de UI, waarna de editor de boel opruimt en de tab- en paneelelementen verwijdert. Tot slot schakel je over naar een andere tab, mocht deze er zijn. De volledige code van deze workshop vind je op wdmag.nl/WDfiles. workshops ��������������������������������������������������������������� 63
webworkshop
Laat koppen verschijnen tijdens het laden Zoals te zien op onedollarlesson.com
Beangstigende statistieken De animatie toont onaangename statistieken over het aantal cyberaanvallen gericht op de bankgegevens van gebruikers.
Handig menu Het menu is netjes verwerkt aan de linkerkant. Tijdens het scrollen wordt de positie uitgerekt om de plaats op de pagina te bepalen.
Claim je prijs Als je de drie lessen doorloopt, krijg je een proefabonnement van drie maanden op de securitytools van Kaspersky. Een mooie beloning.
Verborgen animaties Tijdens het scrollen komen er geweldige handgemaakte animaties tevoorschijn.
64_______________________________________________________________ workshops
Na het laden Wanneer de eerste laadanimatie (met een dollarbiljet) afgerond is, begint de reis door de beangstigende wereld van cybercrime.
WOrKsHOpBestAnden Te vinden op wdmag.nl/WDfiles
Laat koppen verschijnen tijdens het laden
D
us je bent op zoek naar een manier om je bezoekers direct bij de kladden te grijpen? Het blijft een voortdurende strijd voor webbouwers om de aandacht van gebruikers erbij te houden. Er zijn vele mogelijkheden, van automatisch spelende video’s tot pop-ups die gebruikersinteractie vereisen. Soms kun je de aandacht tijdens die eerste paar enorm belangrijke seconden vasthouden met een simpele animatie. Wat denk je van een animatie die de titel van de site in korte tijd in stapjes onthult? Internetbe-
veiligingsbedrijf Kaspersky heeft deze prachtige microsite gebouwd om gebruikers bewust te maken van de gevaren van online betalingen en de vele bedreigingen waar men slachtoffer van kan worden. De site bevat een aantal prachtige scrollanimaties en fullscreen video’s. One Dollar Lessens begint met het perfecte voorbeeld van het effect dat we in deze workshop gaan nabouwen. Als de achtergrond van de homepage geladen is, komen de titel en het logo langzaam in beeld, één voor één. Een simpel, maar zeer efficiënt effect.
Maak het wachten interessant
Wat vinden de experts?
“Je moet tegenwoordig van goede huize komen als je de gebruiker wilt laten wachten op een laadbalk, hoe kort ook. Alles moet nu en wel meteen. Als dit niet mogelijk is, dan moet je in ieder geval iets interessants hebben om naar te kijken.” richard Lamb
Techniek 1. Achtergrondafbeelding We moeten eerst de achtergrondafbeelding toevoegen. We hebben een afbeelding gekozen waarbij de focus aan de linkerkant ligt, zodat we de geanimeerde content rechts kunnen plaatsen.
2. Basis-HTML Maak een intro-div die aan de linkerkant van het canvas komt (met Bootstrap CSS gaat dat makkelijker). Hierbinnen hebben we vier divs nodig, elk met daarin een div-klasse genaamd yum. De yumklassen bevatten de animaties.
| | | | | | | | | | | | | | Advies vAn experts Content verspreiden Het is een enorme uitdaging om belangrijke informatie in een vermakelijke, eenvoudig te gebruiken website te gieten. Dat geldt al helemaal voor informatie die nog helemaal onbekend is voor mensen. One Dollar Lesson biedt de juiste mix interactie en spektakel.
3. Eerste CSS De intro-div moet aan de bovenkant een klein beetje padding krijgen. De title-div krijgt een overflow:hidden-eigenschap. De child-elementen moeten onzichtbaar zijn tot ze de grenzen van diens parent bereiken. We noemen dit ‘rise’.
4. Titelbeelden toevoegen Maak vier png-afbeeldingen voor de drie woorden en een streep van gelijke lengte. Deze vormen de titel ‘Um Num Num!’ Plaats er steeds eentje in de
yum-divs. Geef dan elke div een andere klassenaam die overeenkomt met de naam van de afbeelding.
5. Animatietijden We gaan ons nu bezighouden met de keyframes die de titel gaan animeren. Eerst stellen we de animatietijd in van de verschillende divs.
| | | | | | | | | | | |
.um { animation-duration: } .num-one { animation-duration: } .num-two { animation-duration: } .underline { animation-duration: }
2s;
4s;
6s;
7s;
6. Keyframes schrijven De keyframes apen het effect van onze voorbeeldsite na. De vier titelelementen schuiven van beneden naar boven en komen met een kleine stuiter op hun plek.
| | | | | | | | | | | | |
@keyframes rise { 0%, 60%, 75%, 90%, 100% { transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); } 0% {opacity: 0; transform: translate3d (0, 3000px, 0);} 60% {opacity: 1; transform: translate3d (0, -20px, 0);} 75% {transform: translate3d(0, 10px, 0);} 90% {transform: translate3d(0, -5px, 0);} 100% {transform: translate3d(0, 0, 0);} }
workshops _______________________________________________________________ 65
KORTINGS van
€89,90 voor
€50,-
ABO
ACTIE
NNE
MEN
10x
Webdesigner Magazine
voor € 50,-
• Achtergrondartikelen, workshops en inspiratie • Bespaar ruim 45% op de losse uitgaves • Inclusief gratis video-tutorials • Exclusief voor abonnees: toegang tot de digitale editie Bestel nu via:
www.fnl.nl/webdesignabo Deze actie is geldig tot 13 oktober 2015. Je abonneert tot wederopzegging en voor ten minste de actieperiode van 10 nummers. Na de actieperiode wordt het abonnement automatisch verlengd tegen het dan geldende standaardtarief.
T
webworkshop
Laat een scherm krimpen tijdens het scrollen Zoals te zien op devstars.com
Verborgen menu Het gebruikelijke menu is verborgen achter een hamburgericoon en valt over de hele pagina na activatie.
Secties schalen Een klik op de bolletjes aan de rechterkant scrollt de pagina automatisch naar de volgende sectie.
Krimpende beelden De grafische content op de pagina is geanimeerd, waardoor er een krimpeffect ontstaat als de pagina naar beneden scrollt.
68 ______________________________________________________________ workshops
Formaat omkeren
Gevarieerde navigatie
Klik je weer naar boven op de navigatiebolletjes, dan schuift de pagina naar boven en komt de grafische content weer groot in beeld.
De homepage combineert een eenpaginasite met een slideshow. De scrollbalk is verborgen, maar de navigatiebolletjes zijn zichtbaar.
WORKSHOPBESTANDEN Te vinden op wdmag.nl/WDfiles
Laat een scherm krimpen tijdens het scrollen
A
ls je een webdesign- of developmentbureau hebt, is het heel belangrijk om te kunnen pronken. Als je je beste werk kunt verpakken in een innovatieve presentatie op je site, ben je helemaal goed op weg. Dat is precies wat Devstars heeft gedaan. Devstars.com is een volledige site met meerdere pagina’s, maar op de homepage wordt een eenpaginadesign ingezet om te laten zien wat het bedrijf doet. De pagina heeft een aantal navigatiebolletjes, waardoor je direct aan een slideshow moet denken. Deze bolletjes bevatten het laatste werk, plus een overzicht van het werk van het bureau.
De kleine animatietrucjes die plaatsvinden als de gebruiker naar beneden scrollt, zijn heel goed gedaan. Elke scherm lijkt wel een nieuwe slide in een slideshow, maar als je op de bolletjes klikt, scroll je naar beneden, in plaats van naar rechts. De scrollbalk is verborgen, dus deze navigatie-optie is een handige manier om de volgende schermen te ontdekken. Terwijl je scrollt naar de volgende sectie, worden de graphics geanimeerd en geschaald. De graphics worden steeds kleiner en verdwijnen naar de bovenkant van de pagina. Het echte menu is verborgen achter een hamburgericoon. De homepage is een ongewone slideshow met belangrijke content waarmee Devstars de bezoeker wil laten kennismaken.
Je werk in de spotlights Wat vinden de experts?
“De sterke kleuren, in combinatie met de negatieve ruimte, zorgen ervoor dat het logo en de content opvallen. De content op de homepage krijgt een interessante animatie en laat zien dat het team oog heeft voor details” Mark Shufflebottom
Techniek 1. Het krimpende logo Om dit effect te kunnen maken, hebben we een logo nodig op de pagina. Omdat we geen content hebben, voegen we wat div-tags toe, deze hebben een hoogte van 600 pixels. De afbeelding krimpt als deze de bovenkant van de pagina bereikt.
| | | | |
class="space"> id="shrink" src="img/Wikimedia-logo. /> class="space">
