Skip to content

Instantly share code, notes, and snippets.

@annibal
Last active October 25, 2024 20:55
Show Gist options
  • Save annibal/2faa1a7b172205744dd890c56f2e4898 to your computer and use it in GitHub Desktop.
Save annibal/2faa1a7b172205744dd890c56f2e4898 to your computer and use it in GitHub Desktop.
Every 5 ~ 30 seconds, randomly, shows an JEQUITI image fullscreen covering the web page, for a few seconds, then hides and deletes it
const commonStyles = "display: block; position: fixed; z-index: 9999999; transition: opacity 100ms ease; left 100ms ease; top: 100ms ease; right: 100ms ease; bottom: 100ms ease; width: 100ms ease; height: 100ms ease;"
const jequitiSettings = {
min: 5000,
max: 30000,
duration: 500,
waitLoad: 1000,
waitRemove: 200,
tid: null,
src: "https://fraguru.com/mdimg/dizajneri/o.1954.jpg",
id: "jequiti-overlay",
styleShow: commonStyles + " opacity: 1; top: 0px; right: 0px; bottom: 0px; left: 0px; width: calc(100vw - 100px); height: calc(100vh - 50px);",
styleHide: commonStyles + " opacity: 0; top: 50vw; right: 50vw; bottom: 50vw; left: 50vw; width: 0px; height: 0px;"
}
window["Jequiti"] = jequitiSettings
function getJQTi() {
const config = window["Jequiti"];
if (!config) return jequitiSettings;
return window["Jequiti"];
}
function setJQTi(prop, val) {
let config = window["Jequiti"];
if (!config) config = jequitiSettings;
config[prop] = val
}
function blinkJequiti() {
console.debug('Jequiti :: BEGIN BLINK');
const prevJequitiImg = document.getElementById(getJQTi().id);
if (prevJequitiImg) {
console.debug('Jequiti :: REMOVE PREV');
prevJequitiImg.remove();
}
const jequimg = document.createElement('img');
jequimg.setAttribute('id', getJQTi().id);
jequimg.setAttribute('src', getJQTi().src);
jequimg.setAttribute('style', getJQTi().styleHide);
document.body.prepend(jequimg);
console.debug('Jequiti :: CREATED');
setTimeout(() => {
jequimg.setAttribute('style', getJQTi().styleShow);
console.debug('Jequiti :: SHOW STYLES APPLIED');
}, getJQTi().waitLoad);
setTimeout(() => {
jequimg.setAttribute('style', getJQTi().styleHide);
console.debug('Jequiti :: HIDE STYLES APPLIED');
}, getJQTi().waitLoad + getJQTi().duration);
setTimeout(() => {
jequimg.remove()
}, getJQTi().waitLoad + getJQTi().duration + getJQTi().waitRemove);
}
function prepareNextJequitiBlink() {
console.debug('Jequiti :: PREPARING NEXT BLINK');
if (getJQTi().tid) {
console.debug('Jequiti :: CLEAR TIMEOUT');
clearTimeout(getJQTi().tid);
setJQTi("tid", null)
}
const nextBlinkSecs = Math.floor(Math.random() * (getJQTi().max - getJQTi().min) + getJQTi().min)
+ getJQTi().waitLoad
+ getJQTi().duration
;
console.debug('Jequiti :: NEXT BLINK IN ' + (nextBlinkSecs / 1000) + ' SECS');
const tid = setTimeout(() => {
blinkJequiti();
prepareNextJequitiBlink();
}, nextBlinkSecs);
setJQTi("tid", tid);
}
prepareNextJequitiBlink()
@tuliocll
Copy link

Awesome!
I am using this at https://tuliocalil.com.br/

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment