Game Dino

0 komentar:

Intro web

<html>

<head>

<title>

latihan koding informatika MAN Kapuas

</title>

</head>

<styl>

@layer library, reset, base, demo;

@import 'https://unpkg.com/open-props@2.0.0-beta.5' layer(library);

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300..700&display=swap');

@layer reset {

::before,

::after {

box-sizing: border-box;

}

:where(:not(dialog)) {

margin: 0;

}

@layer base {

html {

--nav-block-size: 74px;

--brand-gradient: linear-gradient(227deg,

#1400c7 0%,

#00bbff 100%);

@media (prefers-reduced-motion: no-preference) {

scroll-behavior: smooth;

}

body {

font-family: 'Inter', sans-serif;

min-block-size: 100dvb;

}

@layer demo {

.navbar {

min-block-size: var(--nav-block-size);

display: grid;

position: fixed;

inset-block-start: 0;

inset-inline: 0;

background-color: white;

z-index: var(--layer-3);

place-items: center end;

padding-block: var(--size-3);

padding-inline: var(--size-5);

@media (width >=600px) {

padding-inline: 6dvi;

}

.nav-cta-btn {

font-size: var(--font-size-1);

font-weight: var(--font-weight-7);

inline-size: max-content;

white-space: nowrap;

text-decoration: none;

padding-block: var(--size-3);

padding-inline: var(--size-7);

border: var(--border-size-2) solid transparent;

color: black;

position: relative;

isolation: isolate;

background: linear-gradient(white, white) padding-box,

var(--brand-gradient) border-box;

border-radius: var(--radius-6);

overflow: hidden;

&::before {

content: '';

display: block;

position: absolute;

inset: 0;

background: var(--brand-gradient);

mix-blend-mode: screen;

}

&:hover {

color: white;

&::before {

background: var(--brand-gradient) padding-box,

var(--brand-gradient) border-box;

background-repeat: no-repeat;

background-size: contain;

mix-blend-mode: normal;

z-index: -1;

}

.section {

--section-block-size: max(400px, 100dvb);

display: grid;

background-color: white;

min-block-size: var(--section-block-size);

position: relative;

block-size: 100%;

display: grid;

>* {

grid-area: 1/1;

}

.section-wrapper {

position: relative;

display: grid;

@media (width >=960px) {

grid-template-columns: 1fr 1fr;

}

@media (width < 960px) {

padding-block-start: calc(var(--nav-block-size) + var(--size-7));

padding-block-end: var(--size-7);

}

.video {

display: block;

inline-size: 100%;

block-size: 100%;

object-fit: cover;

position: relative;

z-index: -1;

}

.content-wrapper {

display: grid;

@media (width < 960px) {

gap: var(--size-7);

}

.meta {

display: grid;

gap: var(--size-3);

}

.content {

display: grid;

inline-size: 100%;

place-items: center;

padding-block: var(--size-7);

padding-inline: var(--size-5);

@media (width >=960px) {

padding: var(--size-10);

min-block-size: 100cqb;

place-items: center end;

}

@media (width < 960px) {

gap: var(--size-5);

}

.mobile-visual {

inline-size: 100%;

aspect-ratio: var(--ratio-square);

@media (width >=960px) {

display: none;

}

.headline {

font-size: var(--font-size-7);

font-weight: var(--font-weight-4);

max-inline-size: var(--size-content-1);

text-wrap: pretty;

@media (width < 960px) {

font-size: var(--font-size-6);

}

.desc {

font-size: var(--font-size-4);

line-height: 1.5;

max-inline-size: 40ch;

text-wrap: pretty;

@media (width < 960px) {

font-size: var(--font-size-3);

}

.visual {

display: grid;

position: sticky;

block-size: var(--section-block-size);

inset-block-start: 0;

container-type: size;

@media (width < 960px) {

display: none;

}

.video-visual {

inline-size: 100%;

block-size: var(--section-block-size);

display: block;

position: sticky;

inset-block-start: 0;

isolation: isolate;

filter: hue-rotate(210deg);

}

.card-wrapper {

container-type: size;

display: grid;

place-items: center;

overflow: clip;

>* {

grid-area: 1/1;

}

.card {

aspect-ratio: var(--ratio-square);

inline-size: 70cqi;

border-radius: var(--radius-3);

scale: 0.4;

}

.card-img {

display: block;

inline-size: 100%;

block-size: 100%;

object-fit: cover;

}

.card-1 {

scale: 1;

}

.card-2 {

translate: -35cqi 30cqb;

opacity: 0.3;

}

.card-3 {

translate: 0cqi 50cqb;

opacity: 0.5;

}

.card-4 {

translate: 45cqi 40cqb;

opacity: 0.5;

}

.content-1 {

--_text-gradient: linear-gradient(227deg,

#1400c7 0%,

#00bbff 100%);

}

.content-2 {

--_text-gradient: linear-gradient(227deg,

#28dc28 0%,

#00bbff 100%);

}

.content-3 {

--_text-gradient: linear-gradient(227deg,

#1400c7 0%,

#b800b1 100%);

}

.content-4 {

--_text-gradient: linear-gradient(227deg,

#b800b1 0%,

#f50000 100%);

}

.text-highlight {

background: var(--_text-gradient);

-webkit-background-clip: text;

-webkit-text-fill-color: transparent;

background-clip: text;

text-fill-color: transparent;

}

@supports (animation-timeline: scroll()) {

body {

timeline-scope: --content-1, --content-2, --content-3, --content-4;

}

.section {

view-timeline-name: --section;

}

.content-1 {

view-timeline-name: --content-1;

}

.content-2 {

view-timeline-name: --content-2;

}

.content-3 {

view-timeline-name: --content-3;

}

.content-4 {

view-timeline-name: --content-4;

}

.card {

animation-timing-function: linear;

animation-fill-mode: forwards;

}

.card-1 {

animation-timeline: --content-1;

animation-name: slide-up-first-card;

}

.card-2 {

animation-timeline: --content-2;

animation-name: slide-up-card;

}

.card-3 {

animation-timeline: --content-3;

animation-name: slide-up-card;

}

.card-4 {

animation-timeline: --content-4;

animation-name: slide-up-card;

}

.video-visual {

animation-timeline: --section;

animation-range-end: exit 110%;

animation-name: update-hue;

animation-timing-function: step-end;

animation-fill-mode: forwards;

}

@keyframes update-hue {

0% {

filter: hue-rotate(210deg);

}

25% {

filter: hue-rotate(150deg);

}

45% {

filter: hue-rotate(300deg);

}

60% {

filter: hue-rotate(4deg);

}

@keyframes slide-up-first-card {

50% {

translate: 0;

opacity: 1;

}

90% {

translate: 0 -50cqi;

scale: 0.6;

}

100% {

translate: 0 -100cqi;

opacity: 0;

}

@keyframes slide-up-card {

50% {

opacity: 1;

translate: 0;

scale: 1;

}

90% {

opacity: 0.5;

scale: 0.6;

translate: 0 -50cqb;

}

100% {

translate: 0 -100cqi;

opacity: 0;

}

</style>

<a href="#" class="nav-cta-btn">Get Started</a>

</nav>

<video

class="video"

autoplay

loop

muted

poster=""

role="none"

aria-label="background gradient animation"

<source

src="https://raw.githubusercontent.com/mobalti/open-props-interfaces/main/dynamic-content-lockups-v2/assets/bg-gradient-animation.mp4"

type="video/mp4"

</video>

</div>

<img

class="card-img"

src="https://raw.githubusercontent.com/mobalti/open-props-interfaces/main/dynamic-content-lockups-v2/assets/img-1.avif"

alt="Fantasy warrior - Video game character"

</div>

Unleash Your<span class="text-highlight"> Inner Warrior</span>

</h2>

Join the battle and conquer the arena with unmatched skill and

strategy.

</p>

</div>

<img

class="card-img"

src="https://raw.githubusercontent.com/mobalti/open-props-interfaces/main/dynamic-content-lockups-v2/assets/img-2.avif"

alt="Green haired ninja in armor - Video game character"

</div>

Embark on Your

<span class="text-highlight">Legendary Journey</span>

</h2>

Immerse Yourself in a World Where Legends Clash and Heroes Rise

to Glory.

</p>

</div>

<img

class="card-img"

src="https://raw.githubusercontent.com/mobalti/open-props-interfaces/main/dynamic-content-lockups-v2/assets/img-3.avif"

alt="Female warrior in armor - Video game character"

</div>

Master the

<span class="text-highlight">Art of Magic</span>

</h2>

Harness powerful spells and enchantments to dominate your foes

and change the course of battle.

</p>

</div>

<img

class="card-img"

src="https://raw.githubusercontent.com/mobalti/open-props-interfaces/main/dynamic-content-lockups-v2/assets/img-4.avif"

alt="Agile warrior - Video game character"

</div>

Rise as the <span class="text-highlight">Champion</span>

</h2>

Lead your team to victory with unparalleled strength and

unwavering determination.

</p>

</div>

<img

class="card-img"

src="https://raw.githubusercontent.com/mobalti/open-props-interfaces/main/dynamic-content-lockups-v2/assets/img-1.avif"

alt="Fantasy warrior - Video game character"

</div>

<img

class="card-img"

src="https://raw.githubusercontent.com/mobalti/open-props-interfaces/main/dynamic-content-lockups-v2/assets/img-2.avif"

alt="Green haired ninja in armor - Video game character"

</div>

<img

class="card-img"

src="https://raw.githubusercontent.com/mobalti/open-props-interfaces/main/dynamic-content-lockups-v2/assets/img-3.avif"

alt="Female warrior in armor - Video game character"

</div>

<img

class="card-img"

src="https://raw.githubusercontent.com/mobalti/open-props-interfaces/main/dynamic-content-lockups-v2/assets/img-4.avif"

alt="Agile warrior - Video game character"

</div>

</html>

0 komentar:

Balon Terbang

0 komentar:

Game Mobil 1

0 komentar:

Tumbuh

<!DOCTYPE html>

<html>

<head>

<title>Latihan Koding Informatika MAN Kapuas</title>

body {

margin: 0;

overflow:hidden;

background: #131313;

}

</style>

</head>

<body>

<h1>This is a animation</h1>

<p>MAN Kapuas.</p>

'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>

0 komentar:

Animasi Koneksi Bintang

<!DOCTYPE html>

<html>

<head>

<title>Latihan Koding Informatika MAN Kapuas</title>

body {

margin: 0;

background: #020202;

overflow:hidden;

}

</style>

</head>

<body>

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>

0 komentar:

Game Batawakan

0 komentar:

Game jalan hidup

0 komentar:

Alat Hitung 3

0 komentar:

Animasi garis

<!DOCTYPE html>

<html>

<head>

<title>Latihan koding Informatika MAN Kapuas</title>

<style>canvas {

position: absolute;

top: 0;

left: 0;

background-color: black;

}</style>

</head>

<body>

<h1>Animation</h1>

h = c.height = window.innerHeight,

ctx = c.getContext( '2d' ),

minDist = 10,

maxDist = 30,

initialWidth = 10,

maxLines = 100,

initialLines = 4,

speed = 5,

lines = [],

frame = 0,

timeSinceLast = 0,

dirs = [

// straight x, y velocity

[ 0, 1 ],

[ 1, 0 ],

[ 0, -1 ],

[ -1, 0 ],

// diagonals, 0.7 = sin(PI/4) = cos(PI/4)

[ .7, .7 ],

[ .7, -.7 ],

[ -.7, .7 ],

[ -.7, -.7]

starter = { // starting parent line, just a pseudo line

x: w / 2,

y: h / 2,

vx: 0,

vy: 0,

width: initialWidth

};

function init() {

lines.length = 0;

for( var i = 0; i < initialLines; ++i )

lines.push( new Line( starter ) );

ctx.fillStyle = '#222';

ctx.fillRect( 0, 0, w, h );

// if you want a cookie ;)

// ctx.lineCap = 'round';

}

function getColor( x ) {

return 'hsl( hue, 80%, 50% )'.replace(

'hue', x / w * 360 + frame

);

}

function anim() {

window.requestAnimationFrame( anim );

++frame;

ctx.shadowBlur = 0;

ctx.fillStyle = 'rgba(0,0,0,.02)';

ctx.fillRect( 0, 0, w, h );

ctx.shadowBlur = .5;

for( var i = 0; i < lines.length; ++i )

if( lines[ i ].step() ) { // if true it's dead

lines.splice( i, 1 );

--i;

}

// spawn new

++timeSinceLast

if( lines.length < maxLines && timeSinceLast > 10 && Math.random() < .5 ) {

timeSinceLast = 0;

lines.push( new Line( starter ) );

// cover the middle;

ctx.fillStyle = ctx.shadowColor = getColor( starter.x );

ctx.beginPath();

ctx.arc( starter.x, starter.y, initialWidth, 0, Math.PI * 2 );

ctx.fill();

}

function Line( parent ) {

this.x = parent.x | 0;

this.y = parent.y | 0;

this.width = parent.width / 1.25;

do {

var dir = dirs[ ( Math.random() * dirs.length ) |0 ];

this.vx = dir[ 0 ];

this.vy = dir[ 1 ];

} while (

( this.vx === -parent.vx && this.vy === -parent.vy ) || ( this.vx === parent.vx && this.vy === parent.vy) );

this.vx *= speed;

this.vy *= speed;

this.dist = ( Math.random() * ( maxDist - minDist ) + minDist );

}

Line.prototype.step = function() {

var dead = false;

var prevX = this.x,

prevY = this.y;

this.x += this.vx;

this.y += this.vy;

--this.dist;

// kill if out of screen

if( this.x < 0 || this.x > w || this.y < 0 || this.y > h )

dead = true;

// make children :D

if( this.dist <= 0 && this.width > 1 ) {

// keep yo self, sometimes

this.dist = Math.random() * ( maxDist - minDist ) + minDist;

// add 2 children

if( lines.length < maxLines ) lines.push( new Line( this ) );

if( lines.length < maxLines && Math.random() < .5 ) lines.push( new Line( this ) );

// kill the poor thing

if( Math.random() < .2 ) dead = true;

}

ctx.strokeStyle = ctx.shadowColor = getColor( this.x );

ctx.beginPath();

ctx.lineWidth = this.width;

ctx.moveTo( this.x, this.y );

ctx.lineTo( prevX, prevY );

ctx.stroke();

if( dead ) return true

}

init();

anim();

window.addEventListener( 'resize', function() {

w = c.width = window.innerWidth;

h = c.height = window.innerHeight;

starter.x = w / 2;

starter.y = h / 2;

init();

} )</scrip>

</body>

</html>

0 komentar:

Fullscreen with JavaScript

<!DOCTYPE html>

<html>

<head>

<title>latihan koding infrmatika MAN Kapuas</title>

<style>

/* Safari syntax */

:-webkit-full-screen {

background-color: yellow;

}

/* IE11 */

:-ms-fullscreen {

background-color: yellow;

}

/* Standard syntax */

:fullscreen {

background-color: yellow;

}

/* Style the button */

button {

padding: 20px;

font-size: 20px;

}

</style>

</head>

<body>

<h2>Fullscreen with JavaScript</h2>

<p>Click on the "Open Fullscreen" button to open this page in fullscreen mode. Close it by either clicking the "Esc" key on your keyboard, or with the "Close Fullscreen" button.</p>

<button onclick="openFullscreen();">Open Fullscreen</button>

<button onclick="closeFullscreen();">Close Fullscreen</button>

var elem = document.documentElement;

function openFullscreen() {

if (elem.requestFullscreen) {

elem.requestFullscreen();

} else if (elem.webkitRequestFullscreen) { /* Safari */

elem.webkitRequestFullscreen();

} else if (elem.msRequestFullscreen) { /* IE11 */

elem.msRequestFullscreen();

}

function closeFullscreen() {

if (document.exitFullscreen) {

document.exitFullscreen();

} else if (document.webkitExitFullscreen) { /* Safari */

document.webkitExitFullscreen();

} else if (document.msExitFullscreen) { /* IE11 */

document.msExitFullscreen();

}

</scrip>

<p>Note: Internet Explorer 10 and earlier versions do not support the msRequestFullscreen() method.</p>

</body>

</html>

0 komentar:

Jam Digital Basic

<!DOCTYPE html>

<html>

<head>

<title>latihan koding informatika MAN Kapuas</title>

<styl>

body {

background: black;

}

#clock {

position: absolute;

top: 50%;

left: 50%;

transform: translate(-50%, -50%);

width: calc(100vw - 4px);

height: auto;

max-width: 700px;

}

</style>

</head>

<body>

<h1>Informatika MAN Kapuas</h1>

<p>jam digital</p>

const defaultProperties = {color: '#0ff', date: new Date(), glow: true, militaryTime: false, showMs: true};

const c = Object.assign(defaultProperties, opt_properties);

!c.dotColor ? c.dotColor = defaultProperties.color : false;

const getSecondsPassed = (now = c.date, militaryTime = c.militaryTime) => {

const s10 = Math.floor(now.getSeconds());

const m10 = Math.floor(now.getMinutes() * 60 + s10);

const h = Math.floor(now.getHours() * 3600 + m10);

return { hour: h, minute10: m10, minute1: Math.floor((now.getMinutes() % 10) * 60 + s10), second10: s10, second1: Math.floor(now.getSeconds() % 10) };

};

let td = getSecondsPassed();

let vxEnd = c.showMs ? 175 : 130;

let showGlow = c.glow ? `<use href="#fullClock" filter="url(#glow)"/>` : '';

let showGlowBlur = c.glow ? `<filter id="glow" x="-200%" y="-200%" width="1000%" height="1000%"><feGaussianBlur in="SourceGraphic" stdDeviation="1.4" /></filter>` : '';

let hrDur = c.militaryTime ? '86400' : '43200';

let hr1Offsets = c.militaryTime ? `0 0; 0 -30; 0 -60; 0 -90; 0 -120; 0 -150; 0 -180; 0 -210; 0 -240; 0 -270; 0 0; 0 -30; 0 -60; 0 -90; 0 -120; 0 -150; 0 -180; 0 -210; 0 -240; 0 -270; 0 0; 0 -30; 0 -60; 0 -90` : `0 -60; 0 -30; 0 -60; 0 -90; 0 -120; 0 -150; 0 -180; 0 -210; 0 -240; 0 -270; 0 0; 0 -30`;

let hr10Offsets = c.militaryTime ? `0 0; 0 0; 0 0; 0 0; 0 0; 0 0; 0 0; 0 0; 0 0; 0 0; 0 -30; 0 -30; 0 -30; 0 -30; 0 -30; 0 -30; 0 -30; 0 -30; 0 -30; 0 -30; 0 -60; 0 -60; 0 -60; 0 -60` : `0 -30; 0 0; 0 0; 0 0; 0 0; 0 0; 0 0; 0 0; 0 0; 0 0; 0 -30; 0 -30`;

let msDots = c.showMs ? `M 132.5 10 v0 m0 10 v0` : '';

let milliseconds = c.showMs ? `<g class="ms10"><use href="#nums" transform="translate(135)" /><animateTransform id="ms10" attributeName="transform" type="translate" values="0 0; 0 -30; 0 -60; 0 -90; 0 -120; 0 -150; 0 -180; 0 -210; 0 -240; 0 -270" dur="1s" begin="0s" repeatCount="indefinite" calcMode="discrete" /></g><g class="ms"><use href="#nums" transform="translate(155)" /><animateTransform id="ms" attributeName="transform" type="translate" values="0 0; 0 -30; 0 -60; 0 -90; 0 -120; 0 -150; 0 -180; 0 -210; 0 -240; 0 -270" dur=".1s" begin="0s" repeatCount="indefinite" calcMode="discrete" /></g>` : '';

const wrapper = document.createElement("div");

wrapper.insertAdjacentHTML('afterbegin', svg);

const doc = wrapper.firstChild;

elt.appendChild(doc);

}

initClock(document.querySelector("#clock"), {color: 'red', dotColor: 'red', showMs: true});

// refresh it if we leave the page

document.addEventListener("visibilitychange", () => {

if (!document.hidden) {

clock.innerHTML = '';

initClock(document.querySelector("#clock"), {color: '#D5FF77', dotColor: '#80AACC', showMs: true});

}

});</scrip>

</body>

</html>

0 komentar:

Responsive Images

<html>

<head>

<style>

.responsive {

width: 100%;

max-width: 200px;

height: auto;

}

</style>

</head>

<body>

<h2>Responsive Images</h2>

<p>If you want to restrict a responsive image to a maximum size, use the max-width property, with a pixel value of your choice.</p>

<p>Resize the browser window to see the effect.</p>

</body>

</html>

0 komentar:

Jam Digital 2

Jam Digital Informatika Versi 2

0 komentar:

Kalender Informatika

Kode bisa dilihat disini

0 komentar:

Game Pantul

<!DOCTYPE html>

<html>

<head>

<title>Latihan koding Informatika MAN Kapuas</title>

<style>

canvas{

position:absolute;

top:0px; left:0px;

}

#stats{

color:white;

background-color:rgba(255, 255, 255, 0.3);

font-size:20px;

padding:40px;

position:absolute;

top:0px; left:0px;

}

#rules{

opacity:0;

color:white;

background-color:rgba(255, 255, 255, 0.1);

font-size:20px;

position:absolute;

text-align:center;

top:40vh;

width:96vw;

left:0px;

padding:2vw;

-webkit-animation:disappear 4s linear;

}

@-webkit-keyframes disappear{

from{

opacity:1;

}

70%{

opacity:1;

}

100%{

opacity:0;

}

}</style>

</head>

<body>

<div id=rules>klik diarea untuk membuat ledakan</div>

var w=window.innerWidth,

h=window.innerHeight,

amount=((w*h)/10000)|0;

outOf.textContent=amount+1;

c.width=w;

c.height=h;

var ctx=c.getContext('2d');

var inGame=false,

cells=[];

function getRandomColor(min){

return 'rgb(cr, cg, cb)'.replace(

'cr', (Math.random()*(255-min))|0+min).replace(

'cg', (Math.random()*(255-min))|0+min).replace(

'cb', (Math.random()*(255-min))|0+min)

};

clicked=false;

function init(){

clicked=false;

ctx.fillStyle='black';

ctx.fillRect(0, 0, w, h);

score.textContent='0';

cells=[];

for(var n=0; n<amount; ++n){

cells.push(new Cell);

}

inGame=true;

anim();

}

var maxSize=10, minSize=6,

maxV=4;

function Cell(size, x, y){

this.color=getRandomColor(100);

this.size=size||Math.random()*(maxSize-minSize)+minSize;

this.initSize=this.size;

this.x=x||Math.random()*w;

this.y=y||Math.random()*h;

this.vx=Math.random()*maxV*2-maxV;

this.vy=Math.random()*maxV*2-maxV;

this.exploded=false;

this.explosionSize=10;

}

Cell.prototype.update=function(){

this.x+=this.vx;

this.y+=this.vy;

if(this.x<0||this.x>w) this.vx*=-1;

if(this.y<0||this.y>h) this.vy*=-1;

ctx.fillStyle=this.color;

ctx.beginPath();

ctx.arc(this.x, this.y, Math.abs(this.size/2), 0, Math.PI*2);

ctx.fill();

ctx.closePath();

//ctx.fillRect(this.x-this.size/2, this.y-this.size/2, this.size, this.size);

if(this.exploded){

if(this.size>0){

this.explosionSize+=1/this.explosionSize*10;

this.size-=0.05;

}else{

cells.splice(cells.indexOf(this), 1);

}

ctx.beginPath();

ctx.arc(this.x, this.y, this.explosionSize, 0, Math.PI*2);

for(var i=0; i<cells.length; ++i){

var cell=cells[i];

if(!cell.exploded){

var a=this, b=cell;

var distX=a.x-b.x,

distY=a.y-b.y,

dist=Math.sqrt((distX*distX)+(distY*distY));

if(dist<=this.explosionSize) cells[i].explode();

}

ctx.strokeStyle=this.color;

ctx.stroke();

ctx.closePath();

}

Cell.prototype.explode=function(){

this.exploded=true;

this.vx=this.vy=0;

score.textContent=parseInt(score.textContent)+1;

}

nextInit=false;

function anim(){

if(nextInit){

nextInit=false;

init();

return;

}

if(inGame) window.requestAnimationFrame(anim);

ctx.fillStyle='rgba(0, 0, 0, 0.1)';

ctx.fillRect(0, 0, w, h);

var c;

for(c=0; c<cells.length; ++c) cells[c].update();

if(cells.length===0) gameOver();

}

function gameOver(){

inGame=false;

}

init();

document.addEventListener('click', function(e){

if(!inGame) init();

else if(clicked) nextInit=true;

else{

var cell=new Cell(15, e.clientX, e.clientY)

cells.push(cell);

cell.explode();

clicked=true;

}

})</scrip>

</body>

</html>

0 komentar:

Animasi gelombang teks

<!DOCTYPE html>

<html>

<head>

<title>Latihan koding informatika MAN Kapuas</title>

style@import url("https://fonts.googleapis.com/css?family=Poppins:100,200,300,400,500,600,700,800,900");

* {

margin: 0;

padding: 0;

box-sizing: border-box;

font-family: "Poppins", sans-serif;

}

body {

display: flex;

background: #000;

min-height: 100vh;

align-items: center;

justify-content: center;

}

.content {

position: relative;

}

.content h2 {

color: #fff;

font-size: 8em;

position: absolute;

transform: translate(-50%, -50%);

}

.content h2:nth-child(1) {

color: transparent;

-webkit-text-stroke: 2px RED;

}

.content h2:nth-child(2) {

color: WHITE;

animation: animate 4s ease-in-out infinite;

}

@keyframes animate {

0%,

100% {

clip-path: polygon(

0% 45%,

16% 44%,

33% 50%,

54% 60%,

70% 61%,

84% 59%,

100% 52%,

100% 100%,

0% 100%

);

}

50% {

clip-path: polygon(

0% 60%,

15% 65%,

34% 66%,

51% 62%,

67% 50%,

84% 45%,

100% 46%,

100% 100%,

0% 100%

);

}

</style>

</head>

<body>

<h2>BIHANN</h2>

</div>

</section>

</body>

</html>

0 komentar:

Animasi teks slide in

<!DOCTYPE html>

<html>

<head>

<title>Belajar Koding Informatika</title>

<styl>@import url('https://fonts.googleapis.com/css?family=Roboto:300');

body {

text-align:center;

background:linear-gradient(141deg, #ccc 25%, #eee 40%, #ddd 55%);

color:#555;

font-family:'Roboto';

font-weight:300;

font-size:32px;

padding-top:40vh;

height:100vh;

overflow:hidden;

-webkit-backface-visibility: hidden;

-webkit-perspective: 1000;

-webkit-transform: translate3d(0,0,0);

}

div {

display:inline-block;

overflow:hidden;

white-space:nowrap;

}

div:first-of-type { /* For increasing performance

ID/Class should've been used.

For a small demo

it's okaish for now */

animation: showup 7s infinite;

}

div:last-of-type {

width:0px;

animation: reveal 7s infinite;

}

div:last-of-type span {

margin-left:-355px;

animation: slidein 7s infinite;

}

@keyframes showup {

0% {opacity:0;}

20% {opacity:1;}

80% {opacity:1;}

100% {opacity:0;}

}

@keyframes slidein {

0% { margin-left:-800px; }

20% { margin-left:-800px; }

35% { margin-left:0px; }

100% { margin-left:0px; }

}

@keyframes reveal {

0% {opacity:0;width:0px;}

20% {opacity:1;width:0px;}

30% {width:355px;}

80% {opacity:1;}

100% {opacity:0;width:355px;}

}

p {

font-size:12px;

color:#999;

margin-top:200px;

}</styl>

</head>

<body>

<div>MAN Kapuas</div>

<div>

<span>Mari Belajar Informatika </span>

</div>

<p>mankapuas.sch.id</p>

</body>

</html>

0 komentar:

Animasi drop teks

<!DOCTYPE html>

<html>

<head>

<title>Belajar koding informatika MAN Kapuas</title>

<styl>

@import url('https://fonts.googleapis.com/css?family=Roboto:100,300,400');

body {

margin:0px;

text-align:center;

padding-top:43vh;

color:#fff;

font-family:'Roboto';

font-size:36px;

font-weight:100;

overflow:hidden;

animation:bg 5s linear infinite;

}

.dropping-texts {

display: inline-block;

width: 180px;

text-align: left;

height: 36px;

vertical-align: -2px;

}

.dropping-texts > div {

font-size:0px;

opacity:0;

margin-left:-30px;

position:absolute;

font-weight:300;

box-shadow: 0px 60px 25px -20px rgba(0,0,0,0.5);

}

.dropping-texts > div:nth-child(1) {

animation: roll 5s linear infinite 0s;

}

.dropping-texts > div:nth-child(2) {

animation: roll 5s linear infinite 1s;

}

.dropping-texts > div:nth-child(3) {

animation: roll 5s linear infinite 2s;

}

.dropping-texts > div:nth-child(4) {

animation: roll2 5s linear infinite 3s;

}

@keyframes roll {

0% {

font-size:0px;

opacity:0;

margin-left:-30px;

margin-top:0px;

transform: rotate(-25deg);

}

3% {

opacity:1;

transform: rotate(0deg);

}

5% {

font-size:inherit;

opacity:1;

margin-left:0px;

margin-top:0px;

}

20% {

font-size:inherit;

opacity:1;

margin-left:0px;

margin-top:0px;

transform: rotate(0deg);

}

27% {

font-size:0px;

opacity:0.5;

margin-left:20px;

margin-top:100px;

}

100% {

font-size:0px;

opacity:0;

margin-left:-30px;

margin-top:0px;

transform: rotate(15deg);

}

@keyframes roll2 {

0% {

font-size:0px;

opacity:0;

margin-left:-30px;

margin-top:0px;

transform: rotate(-25deg);

}

3% {

opacity:1;

transform: rotate(0deg);

}

5% {

font-size:inherit;

opacity:1;

margin-left:0px;

margin-top:0px;

}

30% {

font-size:inherit;

opacity:1;

margin-left:0px;

margin-top:0px;

transform: rotate(0deg);

}

37% {

font-size:1500px;

opacity:0;

margin-left:-1000px;

margin-top:-800px;

}

100% {

font-size:0px;

opacity:0;

margin-left:-30px;

margin-top:0px;

transform: rotate(15deg);

}

@keyframes bg {

0% {background: #ff0075;}

3% {background: #0094ff;}

20% {background: #0094ff;}

23% {background: #b200ff;}

40% {background: #b200ff;}

43% {background: #8BC34A;}

60% {background: #8BC34A;}

63% {background: #F44336;}

80% {background: #F44336;}

83% {background: #F44336;}

100% {background: #F44336;}

}

</style>

</head>

<body>

INFORMATIKA MAN KAPUAS

<div>Developers</div>

<div>Designers</div>

<div>Coders</div>

<div>EVERYONE!</div>

</div>

</body>

</html>

0 komentar:

Animasi teks flip

<!DOCTYPE html>

<head>

<title>Latihan Koding Informatika MAN Kapuas</title>

<styl>

@import url('https://fonts.googleapis.com/css?family=Roboto:700');

body {

margin: 0;

font-family: 'Roboto', sans-serif;

text-align: center;

}

#container {

color: #999;

text-transform: uppercase;

font-size: 36px;

font-weight: bold;

padding-top: 200px;

position: fixed;

width: 100%;

bottom: 45%;

display: block;

}

#flip {

height: 50px;

overflow: hidden;

}

#flip > div > div {

color: #fff;

padding: 4px 12px;

height: 45px;

margin-bottom: 45px;

display: inline-block;

}

#flip div:first-child {

animation: show 10s linear infinite;

}

#flip div div {

background: red;

}

#flip div:nth-child(2) div {

background: orange;

}

#flip div:first-child div {

background: green;

}

#flip div:last-child div {

background: blue;

}

@keyframes show {

0% { margin-top: -270px; }

5% { margin-top: -180px; }

33% { margin-top: -180px; }

38% { margin-top: -90px; }

66% { margin-top: -90px; }

71% { margin-top: 0px; }

99.99% { margin-top: 0px; }

100% { margin-top: -270px; }

}

p {

position: fixed;

width: 100%;

bottom: 30px;

font-size: 12px;

color: #999;

margin-top: 200px;

}

</style>

</head>

<body>

MAN KAPUAS plus Keterampilan

<div><div>SEKOLAH ADIWIYATA</div></div>

<div><div>SEKOLAH SIAGA KEPENDUDUKAN</div></div>

<div><div>SEKOLAH SEHAT</div></div>

</div>

#MANKAPUASBERIMAN

</div>

<p>mankapuas.sch.id</p>

</body>

</html>

0 komentar:

Pesan sistem

<!DOCTYPE html>

<html>

<head>

<title>Belajar Koding Informatika MAN Kapuas</title>

<styl>body {

margin: 0;

background-color: #000;

color: #0f0;

font-family: monospace;

font-size: 1.5rem;

padding: 5rem 2rem;

box-sizing: border-box;

}

#text {

transition: all ease 0.12s;

white-space: pre-wrap;

letter-spacing: 2px;

text-shadow: 0px 0px 10px #42fd424f, 0px 0px 20px #4bf34b8c,

0px 0px 30px #94ef9482;

}

</style>

</head>

<body>

Saya berada dalam sistem komputermu...

Saya sangat senang berada disini...

Mari Pak, belajar koding bersama...`;

const textDiv = document.getElementById("text");

let idx = 0;

let it;

setText = _ => {

if (idx === textString.length) {

clearInterval(it);

setTimeout(_ => {

idx = 0;

textDiv.textContent = "";

it = setInterval(setText, 90);

}, 1000);

} else {

textDiv.textContent += textString[idx];

idx++;

}

};

it = setInterval(setText, 90);

</scrip>

</body>

</html>

0 komentar:

Buat Frequently Asked Questions

<!DOCTYPE html>

<html>

<head>

<title>Latihan Koding Informatika MAN Kapuas</title>

<styl>

body {

margin: 0;

padding: 0;

font-family: 'arial', sans-serif;

}

.faq-list {

list-style: none;

padding: 0;

}

.faq-list li {

margin: 30px 0;

border: 1px solid rgb(205, 205, 205);

padding: 27px 30px;

margin: 0px auto 30px;

text-align: left;

width: 550px;

position: relative;

}

.faq-list .faq-heading::before {

content: '+';

font-size: 40px;

display: block;

position: absolute;

right: 0;

top: -8px;

color: #c2c2c2;

}

.faq-list .the-active .faq-heading::before {

content: '-';

}

.faq-heading {

position: relative;

cursor: pointer;

font-size: 18px;

font-weight: 400;

margin: 0;

}

.faq-heading:hover {

color: var(--theme-color);

}

.faq-text {

display: none;

}

.container {

width: 1200px;

margin: auto;

}

.art-box svg {

width: 100%;

}

.row {

display: flex;

}

.row .col {

flex-basis: 50%;

}

.read {

color: rgb(100, 100, 100);

font-size: 16px;

line-height: 1.5;

margin-top: 25px;

}

</style>

</head>

<body>

<li>

<h4 class="faq-heading">Apa itu situs fotografer?</h4>

Situs fotografer adalah platform online yang memungkinkan fotografer untuk memamerkan dan menjual karya mereka, serta berinteraksi dengan calon klien dan penggemar fotografi.

</p>

</li>

<li>

<h4 class="faq-heading">Apa manfaat memiliki situs fotografer?</h4>

Portofolio Digital: Menampilkan karya fotografer secara profesional.<br>

Akses Lebih Luas: Menjangkau calon klien dari berbagai lokasi.<br>

Pemasaran: Meningkatkan visibilitas dan brand fotografer.<br>

Penghasilan Tambahan: Menjual foto secara online.

</p>

</li>

<li>

<h4 class="faq-heading">Bagaimana cara membuat situs fotografer?</h4>

Pilih Platform: Gunakan platform seperti WordPress, Squarespace, atau website builder lainnya.<br>

Desain: Buat desain yang menarik dan sesuai dengan gaya fotografi.<br>

Konten: Unggah foto, tulisan, dan informasi kontak.<br>

Optimalkan SEO: Pastikan situs mudah ditemukan oleh mesin pencari.

</p>

</li>

<li>

<h4 class="faq-heading">Apa yang perlu dipertimbangkan saat membuat situs fotografer?</h4>

Kualitas Gambar: Pastikan foto berkualitas tinggi.<br>

Navigasi: Desain yang mudah digunakan dan navigasi yang jelas.<br>

Konten: Tulisan, blog, dan informasi tentang layanan yang ditawarkan.<br>

Kontak: Informasi kontak yang mudah diakses.

</p>

</li>

<li>

<h4 class="faq-heading">Bagaimana cara mempromosikan situs fotografer?</h4>

Media Sosial: Gunakan platform seperti Instagram, Facebook, dan Twitter untuk mempromosikan karya.<br>

SEO: Optimalkan konten untuk mesin pencari.<br>

Kolaborasi: Bekerja sama dengan brand atau influencer.<br>

Konten berkualitas: Buat konten yang menarik dan relevan dengan audiens.

</p>

</li>

</ul>

</div>

</section>

$('.faq-heading').click(function () {

$(this).parent('li').toggleClass('the-active').find('.faq-text').slideToggle();

});

</script>

</body>

</html>

Belajar Informatika

Game Dino

0 komentar:

Intro web

0 komentar:

Balon Terbang

0 komentar:

Game Mobil 1

0 komentar:

Tumbuh

0 komentar:

Animasi Koneksi Bintang

0 komentar:

Game Batawakan

0 komentar:

Game jalan hidup

0 komentar:

Alat Hitung 3

0 komentar:

Animasi garis

0 komentar:

Fullscreen with JavaScript

0 komentar:

Jam Digital Basic

0 komentar:

Responsive Images

0 komentar:

Jam Digital 2

0 komentar:

Kalender Informatika

0 komentar:

Game Pantul

0 komentar:

Animasi gelombang teks

0 komentar:

Animasi teks slide in

0 komentar:

Animasi drop teks

0 komentar:

Animasi teks flip

0 komentar:

Pesan sistem

0 komentar:

Buat Frequently Asked Questions

0 komentar:

Pages - Menu

Online

Translate

Labels

Archive

Popular Posts

LINK

Powered by IT Komputer MAN Kapuas