-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
99 lines (96 loc) · 8.72 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="styles.css">
<!--jQuery-library from CDN-->
<script src= "https://code.jquery.com/jquery-3.5.1.min.js"></script>
<!--Follow width of screen-->
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<h1>Sommerkveld</h1>
<div class="textbox">
<p style="margin:0px"> Kunstneren er inspirert av sene sommerkvelder på hytta </p>
</div>
<div class=" container">
<div class = "box" >
<svg width = 250px height = 250px>
<rect x="0" y="230" width="250" height="20" stroke="#8ec3eb" fill="#8ec3eb" stroke-width="5"></rect>
<circle fill="#8ec3eb" cy="220" r="20" >
<animate attributeName="cx" from="-30" to="0" dur="4s" repeatCount="indefinite"></animate>
</circle>
<circle fill="#8ec3eb" cy="220" r="20">
<animate attributeName="cx" from="0" to="30" dur="4s" repeatCount="indefinite"></animate>
</circle>
<circle fill="#8ec3eb" cy="220" r="20">
<animate attributeName="cx" from="30" to="60" dur="4s" repeatCount="indefinite"></animate>
</circle>
<circle fill="#8ec3eb" cy="220" r="20">
<animate attributeName="cx" from="60" to="90" dur="4s" repeatCount="indefinite"></animate>
</circle>
<circle fill="#8ec3eb" cy="220" r="20">
<animate attributeName="cx" from="90" to="120" dur="4s" repeatCount="indefinite"></animate>
</circle>
<circle fill="#8ec3eb" cy="220" r="20">
<animate attributeName="cx" from="120" to="150" dur="4s" repeatCount="indefinite"></animate>
</circle>
<circle fill="#8ec3eb" cy="220" r="20">
<animate attributeName="cx" from="150" to="180" dur="4s" repeatCount="indefinite"></animate>
</circle>
<circle fill="#8ec3eb" cy="220" r="20">
<animate attributeName="cx" from="180" to="210" dur="4s" repeatCount="indefinite"></animate>
</circle>
<circle fill="#8ec3eb" cy="220" r="20">
<animate attributeName="cx" from="210" to="240" dur="4s" repeatCount="indefinite"></animate>
</circle>
<circle fill="#8ec3eb" cy="220" r="20">
<animate attributeName="cx" from="240" to="270" dur="4s" repeatCount="indefinite"></animate>
</circle>
<circle class = 'sun' fill="#db9833" cx="250" cy="0" r="100"></circle>
<path d="M50 100 A 10 10 100 0 1 70 100" class="bird" />
<path d="M70 100 A 10 10 300 0 1 90 100" class="bird" />
<path d="M110 150 A 10 10 100 0 1 130 150" class="bird" />
<path d="M130 150 A 10 10 300 0 1 150 150" class="bird" />
</svg>
</div>
<div class = "box">
<canvas id="myCanvas" width = 250px height = 250px> </canvas>
<script src="canvas.js"></script>
</div>
</div>
<button class= 'btn' onclick="showDoc()">Vis/skjul dokumentasjon</button>
<div class="doc">
<h2 >Dokumentasjon</h2>
<div class="textbox">
<h3> CSS Flexbox-layout</h3>
<p> For å få de to interaktive kunstverkene til å se bra ut ved siden av hverandre er det brukt CSS Flexbox-layout. Dette innebærer at de er sentrerte, på samme horisontale linje, har mellomrom mellom seg og at de er fleksible med tanke på størrelsen på nettleseren (vises under hverandre dersom nettleseren ikke har plass til begge ved siden av hverandre). Jeg valgte å bruke Flexbox kun til dette fordi resten av elementene på siden skal være sentrert under hverandre, noe som er lett å få til uten Flexbox. </p>
<p> CSS Flexbox er brukt ved å ha en container-klasse med display-egenskapen “flex”. Inni containeren er det definert hvordan forholdet mellom elementene i flexcontaineren skal fungere for eksempel at det skal være et 30px gap mellom “boxene” og at de skal wrappes under hverandre dersom det ikke er plass til begge. Under containeren er det definert en box-klasse som definerer hvordan det inni boksene skal se ut. Boxene har definert bredde og høyde slik at det alltid er plass til bildene inni.</p>
<p>Grunnen til bruk av CSS Flexbox istedenfor CSS Grid er fordi Flexbox fungerer godt på en-dimensjonal layout (enten en rad eller kolonne), mens Grid fungerer bedre for to-dimensjonal layout (rad og kolonne). CSS Flexbox virket derfor som det beste alternativet siden det kun skulle brukes til to objekter som skulle være på èn rad hvis det var plass eller èn kolonne hvis det kun var plass til et bilde på en rad.</p>
<h3> SVG i HTML</h3>
<p> SVG-bildet er laget ved å ha SVG-elementet direkte inne i html-koden. Inni SVG-elementet er det brukt forhåndsdefinerte figur-elementer som sirkler og rektangler, i tillegg til path-elementer med arc-kommando som er brukt til å lage halvsirkler til måker. Hvert figur-element har definert posisjon, størrelse og farge. </p>
<p> For å få til animasjon av de små sirklene (bølgene) er det brukt animate-element innad i sirkel-elementene. I animate-elementet er det satt at x-posisjonen til sirkelen skal gå fra en startposisjon til sluttposisjon i løpet av fire sekunder og at animasjonen skal foregå i det uendelige.</p>
<p> For interaktivitet er det brukt en CSS :hover-selektor til sun-klassen som endrer fargen på solen til hvit ved mouseover.</p>
<h3>HTML Canvas </h3>
<p> For å lage Canvas-bildet er det lagt til et canvas-element i HTML-en som er referert til i canvas.js-scriptet som er scriptet der bildet blir tegnet. Scriptet inneholder funksjoner for å tegne bildet og for å utføre animasjoner.</p>
<p> Draw-funksjonen tar inn farge på sola og posisjonstall som brukes til animasjon av bølgene. I funksjonen blir lerretet tegnet ved bruk av forhåndssatte som figurer som rec og arc. </p>
<p>For at animasjonen (bølgene) skal fungere kaller vi på animate-funksjonen med requestAnimationFrame som er en funksjon som sier til nettleseren at man ønsker å gjennomføre en animasjon. Animate-funksjonen oppdaterer posisjonstallet x ved å legge til speed som er forhåndssatt. Deretter tømmes lerretet for elementer før det blir tegnet på nytt ved et kall på draw-funksjonen. Når lerretet er tegnet, kaller animate-funksjonen på seg selv gjennom requestAnimationFrame. Slik får vi animasjon av bølgene som går i det uendelige.</p>
<p>For interaktivitet brukes javascript-metoden addEventListener for mousemove som kjører funksjonen handleMouseMove hver gang musen beveger seg på skjermen. Funksjonen beregner hvor musen er på skjermen og om den er inni solen ved hjelp av matematiske beregninger. Dersom musen er inni solen endres fargen på solen til hvit og dersom musen er utenfor endres fargen tilbake.</p>
<h3>jQuery </h3>
<p> jQuery er brukt på siden for å lage knappen som viser/skjuler dokumentasjonen. I jQuery-biblioteket er det en funksjon toggle() som bytter mellom hide() og show() av elementer spesifisert med en selektor. Dokumentasjonen er satt til å være av klassen doc, som er definert i CSS til å være gjemt i starten ved hjelp av display:none- egenskapen. Når knappen “Vis/skjul dokumentasjon” blir trykket på, vil funksjonen “showDoc” kjøre og denne funksjonen trigger toggle()-metoden med klassen doc som selektor. jQuery-biblioteket er hentet fra en CDN-server som er linket til i headeren. </p>
<h3> Cross-browser testing</h3>
<p>Nettsiden er testet kontinuerlig under utvikling i Safari. Her er alle elementene innenfor nettsiden og sentrert uavhengig av størrelsen på nettleseren. Knappen til “vis/skjul”-dokumentasjon fungerer også godt. Ved testing av nettsiden med ulike mobilskjermer i Chrome kom det frem at wrap-egenskapen ikke fungerte på disse mobilskjermene. For å fikse det endret jeg størrelsen på bildene (de var for store for mobilskjermene) og la til meta-informasjon i html-siden som sier at siden skal følge bredden på skjermen til enheten og zoom-level til 1. Etter dette utførte jeg cross-browser-testing igjen og her fungerte nettsiden godt på alle skjermene. </p>
<h3> Viktigste informasjonskilder</h3>
<p> - <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Grid_Layout/Relationship_of_Grid_Layout"> CSS Grid og FlexBox </a> </p>
<p> - <a href="https://www.w3schools.com/graphics/svg_intro.asp"> SVG </a> </p>
<p> - <a href="https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API"> Canvas </a> </p>
<p> - <a href="https://www.w3schools.com/jquery/default.asp"> jQuery </a> </p>
</div>
</div>
<!--Show/hide documentation-->
<script type="text/javascript">
function showDoc() {
$(".doc").toggle();
}
</script>
</body>
</html>