great code
commit
ace9a8e4da
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…
Reference in New Issue