У меня есть следующий Javascript (чистый):
const style = document.documentElement.style;
**var ranges = {
'tx': [-15, 15, 0], // key = css style property, first value = start range random, second value = end range random, third value = initial vlaue to return to
'ty': [-5, 5, 0],
'scale': [0.5, 1.5, 1],
'opacity': [0.5, 0.9, 0]
};**
function valueChange(prop, value, initial) {
style.setProperty('--' + prop, value);
setTimeout ( function() {
style.setProperty('--' + prop, initial);
}, 150)
}
var timer = null;
window.addEventListener('scroll', function() {
if(timer !== null) {
clearTimeout(timer);
}
timer = setTimeout(function() {
**for (key in ranges) {
valueChange(key, randomBetween(ranges[key][0], ranges[key][1]), ranges[key][2]);
};**
}, 150);
}, false);
function randomBetween(min, max) {
return Math.random() * (max - min) + min;
}
Его задача состоит в том, чтобы задавать свойства CSS случайным образом по окончании прокрутки, а затем автоматически разрешать им возвращаться к исходному значению.
Меня интересует не сам результат, а ошибки, которые я, по-видимому, здесь сделал.Я думаю, что это просто проблема правописания / понимания JS с моей стороны.
Поскольку у меня уже был рабочий код, такой вот:
const style = document.documentElement.style;
function valueChange(prop, value, initial) {
style.setProperty('--' + prop, value);
setTimeout ( function() {
style.setProperty('--' + prop, initial);
}, 150)
}
var timer = null;
window.addEventListener('scroll', function() {
if(timer !== null) {
clearTimeout(timer);
}
timer = setTimeout(function() {
**var newX = randomBetween(-15, 15);
var newY = randomBetween(-5, 5);
var newScale = randomBetween(0.5, 1.5);
var newOpacity = randomBetween(0.5, 0.9);
valueChange('tx', newX + 'vw', 0);
valueChange('ty', newY + 'vw', 0);
valueChange('scale', newScale, 1);
valueChange('opacity', newOpacity, 0);**
}, 150);
}, false);
function randomBetween(min, max) {
return Math.random() * (max - min) + min;
}
Так чего я в основном пытаюсь достичь заменить выделенные жирным шрифтом части кода, чтобы сделать сценарий более профессиональным, менее повторяющимся.
Допустим, я готов поделиться этой идеей с кем-то, но я бы хотелИзбегайте использования «глупого» кода (даже если он работает нормально).
Кто-нибудь, кто мог бы помочь мне с этим?
РЕДАКТИРОВАТЬ:
Поэтому мне пришлось использовать:
var ranges = {
'tx': [-15, 15, 0, 'vw'],
'ty': [-5, 5, 0, 'vw'],
'scale': [0.5, 1.5, 1, ''],
'opacity': [0.5, 0.9, 0, '']
};
и:
for (key in ranges) {
valueChange(key, randomBetween(ranges[key][0], ranges[key][1]) + ranges[key][3], ranges[key][2]);
};