Интерактивное масштабирование видео слоев в LayerSlider - PullRequest
Новая
       39

Интерактивное масштабирование видео слоев в LayerSlider

0 голосов
/ 03 марта 2019

Я создаю интерактивный модуль в LayerSlider от Kreatura.У меня есть три видеослоя, которые я хотел бы изменить scaleX или scaleY в зависимости от пользовательского ввода.

Вот что мой код делает до сих пор.Пользователь вводит три значения, которые находятся в допустимых пределах.Оповещение срабатывает, если вводятся недопустимые значения.

Пользователь нажимает Установить значение, чтобы загрузить свои данные в уравнение, которое дает результат, и преобразовать его в десятичное значение.

Что мне нужночтобы сделать следующее - применить это десятичное значение к атрибутам ScaleX или ScaleY отдельных слоев видео.Я хочу, чтобы шкалы X и Y переходили с течением времени, поэтому я попытался использовать CSS, потому что переходы в LayerSlider, похоже, работают только во время событий Slide Transition.

Из исследования того, как я мог бы создать эту функциональность, я думаю, что должен быть способ заставить ее работать с CSS, или запуск перехода LayerSlider при обновлении атрибута Scale X или Y.

Как мне заставить это работать?

Спасибо!Вот код: 

<html>
<head>
<style> 
.h2o { 
	-webkit-transition: scaleY 2s;
	-moz-transition: scaleY 2s;
	-o-transition: scaleY 2s;
	transition: scaleY 2s;
}
.h2o2 {
	-webkit-transition: scaleX 2s;
	-moz-transition: scaleX 2s;
	-o-transition: scaleX 2s;
	transition: scaleX 2s;
}
</style>
<script>
var domIn2, intIn2, attr2, wLevel, in01Width, in02Width, info;

//wLevel = parseFloat(document.getElementById("tankWater").value);

function set(){
	var domIn = parseInt(document.getElementById("input01").value);
	var intIn = parseInt(document.getElementById("input02").value);
	var attr = parseFloat(document.getElementById("output01").value);
	if (domIn < 1){
	    window.alert("Input must be between 1 and 1,000.");
	} else if (intIn < 1){
	    window.alert("Input must be between 1 and 1,000.");
	} else if (attr < .05){
	    window.alert("Output must be between 0.05 and 0.5.");
	} else if (attr > .5){
	    window.alert("Output must be between 0.05 and 0.5.");
	} else {
	    info = [domIn, intIn, attr]
	return info;
	}
}

function waterLevel(){
	var level;
	var range;
	var percent;
	domIn2 = info[0];
        intIn2 = info[1];
        attr2 = info[2];
	level = (domIn2+intIn2)/attr2;
	if (level > 10000){
	    percent = 1;
	}else{
	    range = 10000 - 10;
        percent = (level - 10) / range;
	}
	//alert(percent);
	h2o.style.scaleY = percent;
	h2o2.style.scaleX = percent;
}

</script>
</head>
<body>
<form>
  Input 01:<br>
  <input type="text" id="input01" required><br>
  Input 02:<br>
  <input type="text" id="input02" required><br>
  Output 01:<br>
  <input type="text" id="output01" required><br>
  <button type="button" onClick="set()">Set Values</button>
  <button type="button" onClick="waterLevel()">Go</button>
</form>
</body>
</html>
...