70 lines
2.1 KiB
JavaScript
70 lines
2.1 KiB
JavaScript
|
|
||
|
|
const banner_show_time = 600 * 1000.0
|
||
|
|
const banner_animated_style = "opacity 0.8s linear, transform 0.1s linear"
|
||
|
|
|
||
|
|
var banner_current_src = localStorage.getItem('main_banner_img')
|
||
|
|
|
||
|
|
function getBannerTime() {
|
||
|
|
return (new Date()).getTime() / banner_show_time
|
||
|
|
}
|
||
|
|
function getBannerSrc() {
|
||
|
|
return "/static/banner/" + Math.floor(getBannerTime() + 1000/banner_show_time) % 2 + ".png"
|
||
|
|
}
|
||
|
|
function update_banner_top(banner, banner_container) {
|
||
|
|
const banner_top_max = 0
|
||
|
|
const banner_top_min = -banner.clientHeight + banner_container.clientHeight
|
||
|
|
|
||
|
|
const banner_top = (1-(getBannerTime()%1)) * banner_top_min
|
||
|
|
banner.style.transform = "translateY(" + banner_top + 'px' + ")"
|
||
|
|
}
|
||
|
|
|
||
|
|
let banner_update_src = banner_current_src
|
||
|
|
function update_banner(banner, banner_container) {
|
||
|
|
|
||
|
|
image_select = getBannerSrc()
|
||
|
|
|
||
|
|
update_banner_top(banner, banner_container)
|
||
|
|
|
||
|
|
if(image_select != banner_update_src) {
|
||
|
|
banner.style.opacity = 0
|
||
|
|
|
||
|
|
setTimeout(() => {
|
||
|
|
banner.src = image_select
|
||
|
|
}, 1000)
|
||
|
|
|
||
|
|
banner_update_src = image_select
|
||
|
|
localStorage.setItem('main_banner_img', image_select)
|
||
|
|
|
||
|
|
document.getElementById("main_banner_img_link").href = "/gallery/test"
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
const banner_container = document.getElementById("main_header")
|
||
|
|
const banner = document.getElementById("main_banner_img")
|
||
|
|
|
||
|
|
|
||
|
|
banner.addEventListener('load', () => {
|
||
|
|
update_banner_top(banner, banner_container)
|
||
|
|
|
||
|
|
const next_banner_src = getBannerSrc()
|
||
|
|
|
||
|
|
if(banner_current_src != next_banner_src) {
|
||
|
|
banner.style.transition = banner_animated_style
|
||
|
|
setTimeout(() => banner.style.opacity = 0.3, 1000)
|
||
|
|
}
|
||
|
|
else {
|
||
|
|
banner.style.opacity = 0.3
|
||
|
|
setTimeout(() => banner.style.transition = banner_animated_style, 0)
|
||
|
|
}
|
||
|
|
|
||
|
|
banner_current_src = next_banner_src
|
||
|
|
})
|
||
|
|
|
||
|
|
document.addEventListener("DOMContentLoaded", function () {
|
||
|
|
banner.src = getBannerSrc()
|
||
|
|
document.getElementById("main_banner_img_link").href = "/gallery/test"
|
||
|
|
})
|
||
|
|
|
||
|
|
setInterval(() => update_banner(banner, banner_container), 100)
|
||
|
|
addEventListener("resize", () => update_banner(banner, banner_container));
|