c-ctrl/infoscreens
2
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Tweak the gallery transitions

Browse source
This commit is contained in:
Henri Bergius 2018-12-26 20:34:03 +01:00
parent e989a80917
commit b589e07bae
1 changed files with 14 additions and 13 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

27
35c3-gallery/index.html
View file

@ -5,20 +5,19 @@
<title>c-base photo gallery</title> <title>c-base photo gallery</title>
<link rel="stylesheet" href="../theme/c-base.css"> <link rel="stylesheet" href="../theme/c-base.css">
<style type="text/css"> <style type="text/css">
body {
background-color: #000000;
}
img { img {
position: absolute;
border: none;
display: block; display: block;
min-height: 90%;
min-width: 100%;
text-align: center; text-align: center;
object-fit: cover;
object-position: center center;
width: 100vw; width: 100vw;
height: 90vh; height: 90vh;
position: absolute; transition: opacity 1s ease-in-out;
top: 0px;
left: 0px;
display: flex;
justify-content: center;
align-items: center;
transition: opacity 0.3s ease-in-out;
} }
img#next { img#next {
opacity: 0; opacity: 0;
@ -48,14 +47,16 @@
} }
</style> </style>
</head> </head>
<body class="station"> <body>
<img id="current"> <main>
<img id="next"> <img id="current">
<img id="next">
</main>
<h1 id="screen-title">c-base @ 35C3</h1> <h1 id="screen-title">c-base @ 35C3</h1>
<span id="current-time"></span> <span id="current-time"></span>
<script> <script>
var timeout; var timeout;
var timer = 10000; var timer = 5000;
function getNextImage(images, current) { function getNextImage(images, current) {
const newImage = images[Math.floor(Math.random() * images.length)]; const newImage = images[Math.floor(Math.random() * images.length)];
if (newImage === current && images.length > 1) { if (newImage === current && images.length > 1) {