tsc-vfl/hugo-page
3
0
Fork 1
Code Issues 6 Pull Requests Actions Packages Projects 1 Releases 2 Wiki Activity

Enable animation correctly and randomly

Browse Source
This commit is contained in:
Christian Wolf 2024-01-07 16:53:53 +01:00
parent 314261bba5
commit f63e1f951f
3 changed files with 34 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
themes/tsc_vfl/assets/css/main.scss
View File

@ -79,7 +79,10 @@ h1 {
position: absolute; position: absolute;
z-index: 0; z-index: 0;
opacity: 1; opacity: 1;
&.animated {
transition: opacity 2.5s ease-in-out; transition: opacity 2.5s ease-in-out;
}
&.hidden { &.hidden {
opacity: 0; opacity: 0;

2
themes/tsc_vfl/layouts/partials/page/header.html
View File

@ -9,7 +9,7 @@
</div> </div>
<div class="slider"> <div class="slider">
<img src="{{ relURL "img/banner/Banner-RENOTE.jpg" }}" class="placeholder"> <img src="{{ relURL "img/banner/Banner-RENOTE.jpg" }}" class="placeholder">
<img src="{{ relURL "img/banner/Banner-RENOTE.jpg" }}" class="slider-img"> <img src="{{ relURL "img/banner/Banner-RENOTE.jpg" }}" class="hidden slider-img">
<img src="{{ relURL "img/banner/Banner-Show2016.jpg" }}" class="hidden slider-img"> <img src="{{ relURL "img/banner/Banner-Show2016.jpg" }}" class="hidden slider-img">
<img src="{{ relURL "img/banner/Banner2019.jpg" }}" class="hidden slider-img"> <img src="{{ relURL "img/banner/Banner2019.jpg" }}" class="hidden slider-img">
<img src="{{ relURL "img/banner/Fotobanner2.jpg" }}" class="hidden slider-img"> <img src="{{ relURL "img/banner/Fotobanner2.jpg" }}" class="hidden slider-img">

35
themes/tsc_vfl/static/js/slider.js
View File

@ -1,16 +1,31 @@
$(function () { $(function () {
var index = 0 var index = 0
const maxIndex = 5 const maxIndex = 5
const delay = 7000 const delay = 6000
function showImage(idx) { const shuffeledIndices = []
// console.log("switching to index", idx)
for(let i=0; i<=maxIndex; i++){
shuffeledIndices.push(i)
}
// Shuffle by Fisher-Yates algorithm
for(let i=maxIndex; i>= 0; i--) {
const j = Math.floor(Math.random() * (i+1))
const tmp = shuffeledIndices[j]
shuffeledIndices[j] = shuffeledIndices[i]
shuffeledIndices[i] = tmp
}
function showImage(idxidx) {
const idx = shuffeledIndices[idxidx]
console.log("switching to index", idx, ' using idxidx ', idxidx)
const imgs = $('#header .slider .slider-img') const imgs = $('#header .slider .slider-img')
imgs.eq(idx).removeClass('hidden') imgs.eq(idx).removeClass('hidden')
imgs.filter((i, e) => {return i != idx}).addClass('hidden') imgs.filter((i, e) => {return i != idx}).addClass('hidden')
const dots = $('#header .slider .dots .dot') const dots = $('#header .slider .dots .dot')
dots.removeClass('active') dots.removeClass('active')
dots.eq(idx).addClass('active') dots.eq(idxidx).addClass('active')
index = idx index = idxidx
} }
function getNextIndex() { function getNextIndex() {
const ret = index + 1 const ret = index + 1
@ -25,7 +40,15 @@ $(function () {
showImage(newIdx) showImage(newIdx)
setTimeout(nextImage, delay) setTimeout(nextImage, delay)
} }
// setTimeout(nextImage, delay)
showImage(0)
// Start the animaions delayed to allow for showing the first image directly
setTimeout(() => {
$('#header .slider .slider-img').addClass('animated')
}, 150)
setTimeout(nextImage, delay)
$('#header .slider .dots .dot').click(function (evt) { $('#header .slider .dots .dot').click(function (evt) {
// console.log(evt) // console.log(evt)
const newIdx = $(evt.target).data('index') const newIdx = $(evt.target).data('index')