forked from tsc-vfl/hugo-page
Enable animation correctly and randomly
This commit is contained in:
parent
314261bba5
commit
f63e1f951f
@ -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;
|
||||||
|
@ -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">
|
||||||
|
@ -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')
|
||||||
|
Loading…
Reference in New Issue
Block a user