GAME LUAR ANGKASA
Tampilkan postingan dengan label CSS. Tampilkan semua postingan
Latihan CSS pada font
<html>
<head>
<title>Contoh Font Size</title>
</head>
<body>
<h1>Contoh Font Size</h1>
<p class="font-big">Ini adalah paragraf dengan ukuran font besar</p>
<p>Ini adalah paragraf dengan ukuran font normal</p>
<p class="font-small">Ini adalah paragraf dengan ukuran font kecil</p>
<h2>
MAN KAPUAS
</h2>
</body>
</html>
h1 {
font-size: 45px;
color: slateblue;
}
.font-big {
font-size: x-large;
}
.font-small {
font-size: small;
}
h2 {
font-size: 50px;
color: red;
}
body {
font-family: 'Dancing Script', sans-serif;
}
bagian 2 :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Contoh Font Style</title>
<style>
blockquote {
font-style: italic;
font-size: larger;
color: dodgerblue;
}
cite {
font-size: small;
font-style: normal;
color: fuchsia;
}
</style>
</head>
<body>
<h1>Contoh Font Style</h1>
<blockquote>
"Hidup itu sebentar. Kamu harus bisa tersenyum saat merasakan kepedihan atau kita tak akan pernah melanjutkan hidup".
<cite>~ Jeff Ross</cite>
</blockquote>
</body>
</html>
Tumbuh
<!DOCTYPE html>
<html>
<head>
<title>Latihan Koding Informatika MAN Kapuas</title>
<style>>
body {
margin: 0;
overflow:hidden;
background: #131313;
}
</style>
</head>
<body>
<canvas id="tree"></canvas>
<h1>This is a animation</h1>
<p>MAN Kapuas.</p>
<script>
'use strict';
class Tree {
constructor() {
this.rule = 'FF+[+FF-F]-[-F+FFF]'
this.sentence = 'F'
this.length = 3
this.angle = Math.PI / 10
this.speed = 30
this.resize()
}
resize() {
this.width = canvas.width = window.innerWidth
this.height = canvas.height = window.innerHeight
this.color = 10
this.pos = -1
ctx.translate(this.width / 4, this.height)
ctx.strokeStyle = 'hsla(0,100%,50%,0.5)'
}
build() {
let nextSentence = ''
for (var j = 0; j < this.sentence.length; j++) {
let currentChar = this.sentence.charAt(j)
if (currentChar === 'F') nextSentence += this.rule
else nextSentence += currentChar
}
this.sentence = nextSentence
}
draw() {
if (this.pos < this.sentence.length) ++this.pos
else this.build()
switch (this.sentence.charAt(this.pos)) {
case 'F':
ctx.moveTo(0, 0)
ctx.lineTo(0, -this.length)
ctx.translate(0, -this.length)
break
case '+':
ctx.rotate(this.angle)
break
case '-':
ctx.rotate(-this.angle)
break
case '[':
ctx.stroke()
ctx.save()
ctx.beginPath()
ctx.strokeStyle = 'hsla(' + (((this.color += 1) < 140) ? this.color : this.color = 40) + ',100%,50%,0.3)'
break
case ']':
ctx.stroke()
ctx.restore()
break
}
}
}
let canvas = document.getElementById('tree')
let ctx = canvas.getContext('2d')
let tree = new Tree()
window.onresize = () => tree.resize()
;(function update() {
requestAnimationFrame(update)
for (let i = 0; i < tree.speed; i++) tree.draw()
}());
</scrip>
</body>
</html>
Animasi Koneksi Bintang
<!DOCTYPE html>
<html>
<head>
<title>Latihan Koding Informatika MAN Kapuas</title>
<style>>
body {
margin: 0;
background: #020202;
overflow:hidden;
}
</style>
</head>
<body>
<canvas id="connect"></canvas>
<script>'use strict';
const PI2 = 2 * Math.PI
function map(s, a1, a2, b1, b2) {
return (b1 + (s - a1) * (b2 - b1) / (a2 - a1));
}
class Connect {
constructor() {
ctx.lineWidth = 0.1
this.connectArea = {
maxConnectionLength: 80,
connectAreaRadius: 130,
x: 0,
y: 0,
destX: 0,
destY: 0
};
this.bounds = {
top: 2,
left: 2,
right: 0,
bottom: 0
};
this.dots = []
this.resize()
this.connectArea.x = this.centerX
this.connectArea.y = this.centerY
}
resize() {
this.width = window.innerWidth
this.height = window.innerHeight
this.centerX = this.width / 2 | 0
this.centerY = this.height / 2 | 0
canvas.width = this.width
canvas.height = this.height
this.connectArea.destX = this.centerX
this.connectArea.destY = this.centerY
this.bounds.right = this.width - 2
this.bounds.bottom = this.height - 2
this.colorCounter = 0
this.dotCount = this.width * this.height / 3000 | 0
if (this.dotCount > this.dots.length) {
for (let i = this.dotCount - this.dots.length; i > 0; i--) {
this.dots.push(
new Dot(
this.width,
this.height,
(((this.colorCounter += 2) < 360) ? this.colorCounter : this.colorCounter = 0)
)
)
}
} else if (this.dotCount < this.dots.length) {
this.dots.splice(0, this.dotCount - this.dots.length)
for (let i = 0; i < this.dotCount; i++) {
if (this.dots[i].y < this.bounds.top ||
this.dots[i].y > this.bounds.bottom ||
this.dots[i].x < this.bounds.left ||
this.dots[i].x > this.bounds.right) {
this.dots[i].x = Math.random() * this.width | 0
this.dots[i].y = Math.random() * this.height | 0
}
}
}
}
onMove(evt) {
this.connectArea.destX = evt.clientX || evt.touches && evt.touches[0].pageX
this.connectArea.destY = evt.clientY || evt.touches && evt.touches[0].pageY
}
onLeave(evt) {
this.connectArea.destX = this.centerX
this.connectArea.destY = this.centerY
}
connectDots() {
for (let i = 0; i < this.dotCount; i++) {
for (let j = i+1; j < this.dotCount; j++) {
let dot1 = this.dots[i]
let dot2 = this.dots[j]
let xDiff = Math.abs(dot1.x - dot2.x)
let yDiff = Math.abs(dot1.y - dot2.y)
let xDiffArea = Math.abs(dot1.x - this.connectArea.x)
let yDiffArea = Math.abs(dot1.y - this.connectArea.y)
if (xDiff < this.connectArea.maxConnectionLength && yDiff < this.connectArea.maxConnectionLength &&
xDiffArea < this.connectArea.connectAreaRadius && yDiffArea < this.connectArea.connectAreaRadius) {
let gradient = ctx.createLinearGradient(dot1.x, dot1.y, dot2.x, dot1.y)
gradient.addColorStop(0, dot1.color)
gradient.addColorStop(1, dot2.color)
ctx.beginPath()
ctx.moveTo(dot1.x, dot1.y)
ctx.lineTo(dot2.x, dot2.y)
ctx.strokeStyle = gradient
ctx.stroke()
}
}
}
}
update() {
ctx.globalCompositeOperation = 'hard-light'
ctx.fillStyle = 'rgba(20,20,20,0.2)'
ctx.fillRect(0, 0, this.width, this.height)
ctx.globalCompositeOperation = 'source-over'
// ctx.clearRect(0, 0, this.width, this.height)
let distX = this.connectArea.destX - this.connectArea.x
if (distX > 5 || distX < 5) this.connectArea.x += distX / 10 | 0
let distY = this.connectArea.destY - this.connectArea.y
if (distX > 5 || distX < 5) this.connectArea.y += distY / 10 | 0
for (let i = 0; i < this.dotCount; i++) this.dots[i].update(this.bounds)
this.connectDots()
for (let i = 0; i < this.dotCount; i++) this.dots[i].draw()
}
}
class Dot {
constructor(width, height, color) {
this.x = Math.random() * width | 0
this.y = Math.random() * height | 0
this.vx = (Math.random() - 0.7) / 2
this.vy = (Math.random() - 0.7) / 2
this.radius = Math.random() * 2 + 0.3
this.color = 'hsla(' + color + ',80%,50%,' + this.radius * .5 + ')'
}
draw() {
ctx.beginPath()
ctx.fillStyle = this.color
ctx.arc(this.x, this.y, this.radius, 0, PI2)
ctx.fill()
}
update(bounds) {
if (this.y < bounds.top || this.y > bounds.bottom) this.vy = -this.vy
else if (this.x < bounds.left || this.x > bounds.right) this.vx = -this.vx
this.x += this.vx
this.y += this.vy
}
}
let canvas = document.getElementById('connect')
let ctx = canvas.getContext('2d')
let connect = new Connect()
canvas.onmousemove = (evt) => connect.onMove(evt)
canvas.onmouseleave = (evt) => connect.onLeave(evt)
canvas.ontouchstart = (evt) => connect.onMove(evt)
canvas.ontouchmove = (evt) => connect.onLeave(evt)
window.onresize = () => connect.resize()
;(function update() {
requestAnimationFrame(update)
connect.update()
}());</scrip>
</body>
</html>
Langganan:
Postingan (Atom)
