Interaktivar kotur at spæla við
<!DOCTYPE html>
<html>
<head>
<title>Gleðilig jól</title>
<style>
body {
background-color: #ffcccc;
text-align: center;
}
h1 {
color: #ff0000;
}
</style>
</head>
<body>
<h1>Gleðilig jól!</h1>
<p>Lukku og gleði á hesum degi.</p>
</body>
</html><!DOCTYPE html>
<html>
<head>
<title>Jólatræ</title>
<style>
body {
background-color: #e0f7fa;
text-align: center;
font-family: Arial, sans-serif;
}
.tree {
font-size: 16px;
line-height: 1.2;
color: green;
white-space: pre;
display: inline-block;
margin-top: 20px;
}
</style>
</head>
<body>
<h1>Jólatræ</h1>
<div class="tree">
*<br>
***<br>
*****<br>
*******<br>
*********<br>
|||<br>
</div>
</body>
</html><!DOCTYPE html>
<html>
<head>
<title>Jólaperur</title>
<style>
body {
background-color: #001f3f;
color: white;
text-align: center;
font-family: Arial, sans-serif;
}
.light {
display: inline-block;
margin: 5px;
width: 20px;
height: 20px;
border-radius: 50%;
animation: blink 1s infinite alternate;
}
.red { background-color: red; }
.green { background-color: green; }
.yellow { background-color: yellow; }
.blue { background-color: blue; }
@keyframes blink {
0% { opacity: 1; }
100% { opacity: 0.2; }
}
</style>
</head>
<body>
<h1>Jólaperur</h1>
<div class="light red"></div>
<div class="light green"></div>
<div class="light yellow"></div>
<div class="light blue"></div>
<div class="light red"></div>
<div class="light green"></div>
</body>
</html><!DOCTYPE html>
<html lang="fo">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width,initial-scale=1" />
<title>Snar 3D dømi (einfølt)</title>
<style>
html, body { margin: 0; height: 100%; background: #ffffff; }
.mv {
width: 100%;
height: 100%;
background: #ffffff;
display: block;
border: 0;
outline: none;
}
</style>
</head>
<body>
<script type="module" src="https://unpkg.com/@google/model-viewer/dist/model-viewer.min.js"></script>
<model-viewer
class="mv"
src="https://modelviewer.dev/shared-assets/models/Astronaut.glb"
alt="3D modell"
camera-controls
auto-rotate
shadow-intensity="1">
</model-viewer>
</body>
</html><!DOCTYPE html>
<html lang="fo">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width,initial-scale=1" />
<title>Snar 3D dømi (Three.js)</title>
<style>
html, body { margin: 0; height: 100%; background: #ffffff; }
.webgl {
width: 100%;
height: 100%;
display: block;
background: #ffffff;
border: 0;
outline: none;
}
</style>
</head>
<body>
<canvas class="webgl" aria-label="3D scena"></canvas>
<script src="https://unpkg.com/three@0.126.0/build/three.min.js"></script>
<script src="https://unpkg.com/three@0.126.0/examples/js/loaders/GLTFLoader.js"></script>
<script src="https://unpkg.com/three@0.126.0/examples/js/controls/OrbitControls.js"></script>
<script>
(function () {
const canvas = document.querySelector('.webgl');
const scene = new THREE.Scene();
const size = { w: window.innerWidth, h: window.innerHeight };
const camera = new THREE.PerspectiveCamera(12, size.w/size.h, 0.1, 100);
camera.position.set(8, 4, 15);
scene.add(camera);
const renderer = new THREE.WebGLRenderer({ canvas, antialias:true, alpha:true });
renderer.setSize(size.w, size.h);
renderer.setPixelRatio(Math.min(window.devicePixelRatio, 2));
renderer.outputEncoding = THREE.sRGBEncoding;
const controls = new THREE.OrbitControls(camera, renderer.domElement);
controls.enableDamping = true;
controls.enableZoom = true;
controls.enablePan = true;
controls.minDistance = 21;
controls.maxDistance = 50;
controls.minPolarAngle = Math.PI / 5;
controls.maxPolarAngle = Math.PI / 2;
const minPan = new THREE.Vector3(-2, -0.5, -2);
const maxPan = new THREE.Vector3( 2, 0.5, 2);
const textureLoader = new THREE.TextureLoader();
const bakedTexture = textureLoader.load('https://rawcdn.githack.com/ricardoolivaalonso/ThreeJS-Room13/47b05e2db4e49eec33d63729e920894a906cb693/static/baked.jpg');
bakedTexture.flipY = false;
bakedTexture.encoding = THREE.sRGBEncoding;
const bakedMaterial = new THREE.MeshBasicMaterial({ map: bakedTexture });
const loader = new THREE.GLTFLoader();
loader.load(
'https://rawcdn.githack.com/ricardoolivaalonso/ThreeJS-Room13/47b05e2db4e49eec33d63729e920894a906cb693/static/model.glb',
function (gltf) {
const model = gltf.scene;
model.traverse(function (child) {
if (child.isMesh) child.material = bakedMaterial;
});
scene.add(model);
scene.position.set(0, 0.2, 0);
}
);
function onResize() {
const w = window.innerWidth;
const h = window.innerHeight;
camera.aspect = w / h;
camera.updateProjectionMatrix();
renderer.setSize(w, h);
renderer.setPixelRatio(Math.min(window.devicePixelRatio, 2));
}
window.addEventListener('resize', onResize);
(function tick() {
controls.update();
controls.target.clamp(minPan, maxPan);
renderer.render(scene, camera);
requestAnimationFrame(tick);
})();
})();
</script>
</body>
</html><!DOCTYPE html>
<html lang="fo">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Kavi</title>
<style>
html, body { margin:0; height:100%; background:#0b1b2b; }
canvas { display:block; width:100%; height:100%; background:linear-gradient(#0b1b2b, #102a46 60%); }
.msg {
position: fixed;
left: 50%;
top: 16px;
transform: translateX(-50%);
color: #fff;
font: 700 14px/1 Arial, sans-serif;
background: rgba(255,255,255,.12);
border: 1px solid rgba(255,255,255,.25);
padding: 8px 12px;
border-radius: 999px;
text-shadow: 0 1px 2px rgba(0,0,0,.4);
}
</style>
</head>
<body>
<canvas id="snow"></canvas>
<div class="msg">Nú kavar. Royn og flyt músina. ❄️</div>
<script>
(function(){
const c = document.getElementById('snow');
const ctx = c.getContext('2d');
let w, h, flakes;
function resize(){
w = c.width = window.innerWidth;
h = c.height = window.innerHeight;
flakes = new Array(Math.floor(w * 0.15)).fill().map(() => ({
x: Math.random()*w,
y: Math.random()*h,
r: Math.random()*2 + 1,
s: Math.random()*0.7 + 0.3, // speed
a: Math.random()*Math.PI*2, // angle
}));
}
resize();
window.addEventListener('resize', resize);
let wind = 0;
window.addEventListener('mousemove', e => {
const center = w/2;
wind = (e.clientX - center) / center * 0.5; // -0.5 .. 0.5
});
function tick(){
ctx.clearRect(0,0,w,h);
ctx.fillStyle = 'rgba(255,255,255,0.9)';
for(const f of flakes){
f.a += 0.01;
f.y += f.s*(1.5 + Math.sin(f.a)*0.2);
f.x += wind + Math.cos(f.a)*0.3;
if(f.y > h+10){ f.y = -10; f.x = Math.random()*w; }
if(f.x < -10){ f.x = w+10; }
if(f.x > w+10){ f.x = -10; }
ctx.beginPath();
ctx.arc(f.x, f.y, f.r, 0, Math.PI*2);
ctx.fill();
}
requestAnimationFrame(tick);
}
tick();
})();
</script>
</body>
</html>Eitt sindur um koturnar á síðuni
- “Gleðilig jól” – bara HTML
Hetta er tann einfaldasta kotan. Hon vísir eina heimasíðu við reyðum yvirskriftum og einum stuttum boðskapi. HTML-kotan sigur bara, hvat skal vera á síðuni (t.d. yvirskrift og tekstur). - “Jólatræ” – HTML og CSS
Vit brúka HTML at seta ymiskt inn á síðuna og CSS at fáa tað at síggja pent út. Vit gera eitt jólatræ við teknum (* og |) og seta litir og snið við CSS. HTML er innihald; CSS er útsjónd. - “Jólaperur” – HTML og CSS (rørsla)
Sum í dømi 2, men nú gera vit smáar „perur“, sum blinka við einari CSS-rørslu (animatión). Hetta ger heimasíðuna meira livandi. - 3D við <model-viewer> – HTML + ein 3D mynd
Hetta dømið vísir eina 3D-mynd , sum tú kanst snara runt við músini. Tað er gjørt við einum sonevndum HTML-tag, sum longu dugir at vísa 3D. Ein skjótur og lættur máti at fáa 3D á síðuna. - 3D við Three.js – HTML, CSS og JavaScript
Her brúka vit JavaScript-bókasavnið sum verður nevnt “Three.js” at byggja eitt 3D rúm, sum er inni í einari teldu. Tú kanst snara, suma og hyggja uttan og innan. - Kavi – HTML, CSS og JavaScript (canvas)
Ein jólalig kavamynd. Vit tekna hvít korn á eitt canvas og flyta tey við JavaScript, so tað sær út sum tað kavar. Tú kanst eisini ávirka kavan við at flyta músina.
Royn nú at kopiera koturnar, broyt litir og orð, og vita um tú dugir at forrita. Um kotan ikki riggar, so kanst tú bara byrja umaftur. Besti háttur at læra er at kanna, spæla, gera feilir og royna umaftur. Soleiðis kunnu vit sjálvi læra hussu ymiskt virkar! ✨
Fakta!
HTML: Verður brúkt til at siga telduni hvussu ymiskt skal vísast - hvar tað skal standa.
CSS: Hendan kotan verður brúkt til útsjónd (litir, stødd, snið og rørslur).
JavaScript: Fær ymiskt at henda – t.d. rørslur, 3D og ymsar reaktiónir.
