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