Embedded Files
Dette site viser kortest animation i form af billeder samt koden og billederne bruget bag den.
Dette er HTML koden til kort animation:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<link type="text/css" rel="stylesheet" href="style.css">
</head>
<body>
<div id="wrapper">
<div id="boat"></div>
<div id="penguin"></div>
<div id="background"></div>
</div>
</body>
</html>
Dette link er til bus billedet: https://vikingbus.com
Dette link er til færge billedet: https://www.soefart.dk/article/view/592998/damen_skal_designe_elfaerger_til_canada?rel=related
Dette er CSS koden til kort animation:
html {
scroll-timeline: --page-scroll block;
}
body {
background-color: #414141;
}
#wrapper {
width: 1000px;
height: 3000px;
margin: auto;
background-color: whitesmoke;
margin-top: 500px;
}
#background {
margin: auto;
width: 720px;
height: 760px;
background-image: url(kort.jpg);
}
#penguin {
margin: auto;
position: fixed;
right: 750px; top: 0px;
width: 167px; height:100px;
background-image: url(bus.png);
background-size: cover;
animation: penguinanimation auto linear;
animation-timeline: --page-scroll;
}
@keyframes penguinanimation {
0% {
background-image: url(bus.png);
transform: scale(0.0);
left: 570px; top: 0px;
}
17.5% {
background-image: url(bus.png);
transform: scale(0.0);
left: 570px; top: 0px;
}
17.6% {
background-image: url(bus.png);
transform: scale(0.5);
left: 570px; top: 0px;
}
20% {
background-image: url(bus.png);
transform: scale(0.5);
left: 540px; top: 0px;
}
22% {
background-image: url(bus.png);
transform: scale(0.5);
left: 510px; top: 0px;
}
23% {
background-image: url(bus.png);
transform: scale(0.5);
left: 510px; top: 0px;
}
23.1% {
background-image: url(boatt.png);
transform: scale(0.5);
left: 510px; top: 0px;
}
25.2% {
background-image: url(boatt.png);
transform: scale(0.5);
left: 528px; top: 0px;
}
25.3% {
background-image: url(bus.png);
transform: scale(0.5);
left: 540px; top: 0px;
}
30% {
background-image: url(bus.png);
transform: scale(0.5);
left: 610px; top: 0px;
}
33% {
background-image: url(bus.png);
transform: scale(0.5);
left: 650px; top: 0px;
}
33.5% {
background-image: url(bus.png);
transform: scale(0.5);
left: 690px; top: 0px;
}
34% {
background-image: url(bus.png);
transform: scale(0.5);
left: 730px; top: 0px;
}
35% {
background-image: url(bus.png);
transform: scale(0.5);
left: 720px; top: 0px;
}
35.1% {
background-image: url(bus.png);
transform: scale(0.5);
left: 710px; top: 0px;
}
37% {
background-image: url(bus.png);
transform: scale(0.5);
left: 730px; top: 0px;
}
38.4% {
background-image: url(bus.png);
transform: scale(0.5);
left: 735px; top: 0px;
}
40% {
background-image: url(bus.png);
transform: scale(0.5);
left: 726px; top: 0px;
}
41% {
background-image: url(bus.png);
transform: scale(0.5);
left: 725px; top: 0px;
}
41.1% {
background-image: url(bus.png);
transform: scale(0.0);
left: 725px; top: 0px;
}
100% {
background-image: url(bus.png);
transform: scale(0.0);
left: 725px; top: 0px;
}
}
Page updated
Google Sites
Report abuse