great code

main
victor 3 months ago
commit ace9a8e4da

@ -0,0 +1,44 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="sources/style.css">
<script src="https://issue.xpub.nl/23/quilt/quilt.js" data-cutFileName="false" data-cutFileName="false"></script>
<link rel="stylesheet" type="text/css" href="https://issue.xpub.nl/23/quilt/quilt.css">
</head>
<body>
<div class="landing">
<div class="skrift">
<h1 id="stiligtekst" class="tekst">Victor´s &nbsp;Userpage</h1>
<script src="sources/textanimation.js"></script>
<hr>
<p class="bio">
Welcome to my userpage. <br>
If you are more interested in me <br>
please check out my website: <br>
<a href="https://vus.netlify.app">Victor Utne Stiberg</a>
</p>
</div>
</div>
<div class="stable">
<audio id="audio1" controls src="sources/hesten.mp3" loop style="display: none;"></audio>
<script src="sources/animatehorse.js"></script>
<div class="enclosure">
<input onchange="horse(this.checked)" id="test" class="sjekk" type="checkbox" style="display: none;">
<label for="test">
<img id="hest1" src="sources/hest.svg" alt="">
</label>
</div>
</div>
</body>
</html>

Binary file not shown.

@ -0,0 +1,33 @@
function horse(input){
let a1 = document.getElementById("audio1");
if (input){
a1.play();
} else {a1.pause();}
}
var round = 1;
/*
function moveHorse() {
window.setTimeout(function() {
console.log("halo");
addclass()
moveHorse()
}, 3900);
}
function addclass(elem){
let list = document.getElementById('hest1');
console.log(list.classList);
if(round%2===0){
list.classList.remove('moved');
} else{
list.classList.add('moved');
console.log("halo");
} round++;
console.log("halo");
}
moveHorse ();
*/

@ -0,0 +1,10 @@
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 24.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 841.9 595.3" style="enable-background:new 0 0 841.9 595.3;" xml:space="preserve">
<path d="M155.9,58.5c0,0-127,110.5-102.6,131.8c62.3,54.6,100.3-52.5,146-40.7c41.5,10.8,58.7-49.4,63.8,15.4
c8.5,106.2-77.7,174.6-104.6,295c-4.4,19.5,53.4,40.3,63.1,30c27.7-29.6,31.5-80.4,39.2-83.5c7.7-3.1-0.8,89.6,26.9,88.8
c27.7-0.8,55.4-3.8,60-20c4.6-16.2-46.9-148.7-3.7-176.4c27.1-17.3,79.9,46,156-9.4c36.9-26.9,104.6,2.7,60.8,77.3
s-43.1,120-38.5,128.5c4.6,8.5,55.4,20.8,63.1,15.4c7.7-5.4,26.6-126.9,45.4-126.9c15.4,0,10,129.6,30,128.2
c20-1.3,57.7,2.5,49.2-33.6s48.4-269.9-48.5-313.5c-61.5-27.7-256.9,36.9-322.4-66.2C290.1,21.6,165.7,8.1,155.9,58.5z"/>
</svg>

After

Width:  |  Height:  |  Size: 926 B

Binary file not shown.

@ -0,0 +1,139 @@
@font-face {
font-family: 'Old London';
src: url('Olondon.otf');
}
:root{
--tekstfarge: #027bff;
}
a{
color: var(--tekstfarge);
}
.landing{
height: 100vh;
background-color: lightblue;
}
.skrift{
position: absolute;
top: 0%;
margin-left: auto;
margin-right: auto;
left: 0;
right: 0;
height: 80vh;
max-width: 800px;
font-family: 'Old London';
font-size: clamp(1.5rem, 1rem + 9vw, 5rem);
color: var(--tekstfarge);
text-align: center;
}
span{
opacity: 50;
transform: translateY(250px);
transition: all 1.5s;
display: inline-block;
}
.tekst span:nth-child(even){
transform: translateY(200px);
rotate: 50deg;
}
.tekst span:nth-child(2n+3){
transform: translateX(-120px);
rotate: -30deg;
}
.tekst span:nth-child(3n+2){
transform: translateX(120px);
}
.tekst span.stilig{
opacity: 100;
transform: translateY(0px);
rotate: 0deg;
}
.bio{
font-size: 1.5rem;
}
.stable{
width: 100vw;
height: 100vh;
}
#hest1{
margin-top: 2em;
margin-left: 4em;
display: inline-block;
width: 300px;
transform: scaleX(-1);
animation: hest1 10s infinite;
}
.moved{
animation: hest1 4s infinite;
}
@keyframes hest1 {
0%{
translate: 0 0;
rotate: 0deg;
}
10%{
translate: 400px 150px;
rotate: -80deg;
}
20%{
translate: 500px 450px;
rotate: 20deg;
}
30%{
translate: 180px 150px;
rotate: 20deg;
}
40%{
translate: 80px 30px;
rotate: 20deg;
}
50%{
translate: 0 0;
rotate: 0deg;
}
60%{
translate: 0 0;
rotate: 0deg;
}
70%{
translate: 0 0;
rotate: 0deg;
}
80%{
translate: 0 0;
rotate: 0deg;
}
90%{
translate: 0 0;
rotate: 0deg;
}
100%{
translate: 0 0;
rotate: 0deg;
}
}
.sjekk:checked~label>#hest1{
filter: invert(88%) sepia(89%) saturate(3221%) hue-rotate(-134deg) brightness(99%) contrast(101%);
}

@ -0,0 +1,25 @@
const tekst = document.getElementById("stiligtekst");
const tekstStr = tekst.textContent;
const splitta = tekstStr.split("");
tekst.textContent ="";
for (let i =0; i < splitta.length; i++) {
tekst.innerHTML +="<span>" + splitta[i] + "</span>";
}
let char = 0;
let timer = setInterval(onTick, 100);
function onTick(){
const span = tekst.querySelectorAll('span')[char];
span.classList.add('stilig');
char++;
if(char === splitta.length) {
complete();
return;
}
function complete(){
clearInterval(timer);
timer = null;
}
}
Loading…
Cancel
Save