Как привязать элемент к низу экрана при его масштабировании по высоте с помощью Js?

Question

[nikabekish]

У меня есть баннер, который имеет статичную ширину и должен быть адаптивным по высоте. Т.к баннер создавался в Adobe Animate , использование Css НЕ ПОДХОДИТ.
В Animate двум нижним элементам баннера было присвоено имя экземпляра second и нужно эти элементы привязать к нижнему краю баннера и чтобы они оставались всегда там вне зависимости от высоты баннера (т.е при масштабировании)
На этом фото показано, что девушка и белая фигура с текстом "прижаты" к нижнему краю баннера, но при масштабе на весь экран или наоборот уменьшении появляются либо отступ между элементами и фоном, либо эти элементы "съедаются" соответсовенно ( 2 и 3 фото)


Как сделать так, чтобы элементы экземпляра second были всегда привязаны к нижнему краю баннера и не съедались при уменьшении масштаба?

Мой код :

// stage content:
(lib.kuf300100p = function(mode,startPosition,loop) {
	this.initialize(mode,startPosition,loop,{});

	// timeline functions:
	this.frame_0 = function() {


			canvas.style.cursor = "pointer";
		canvas.addEventListener("click", function() {
		    window.callClick();
		});

		
		//var _fon = this.fon;
		//var _main = this.main;
		//var _green = this.green;
		var _second = this.second;

		this.addEventListener("tick", res.bind(this));
		function res() {
				
		_second.y =  window.innerHeight/2 + 120;
		//_green.y = window.innerHeight/2  ;}
		

		
	}

	// actions tween:
	this.timeline.addTween(cjs.Tween.get(this).call(this.frame_0).wait(1));

Я буду безумно благодарна, если посмотрите архив с баннером
https://www.dropbox.com/sh/b4w6kk9wm8mbo6s/AADcXGB...

Comments

[ArtGenSky]

а где архив с баннером?

[nikabekish]

ArtGenSky, не показывает ссылку по какой-то причине
https://www.dropbox.com/sh/b4w6kk9wm8mbo6s/AADcXGB...

Answer 1

[ArtGenSky]

Готово
https://yadi.sk/d/NdOpi2TZ3VUHKG

Comments

[nikabekish]

Я даже не думала, что так быстро ответят ,да еще и архивом .
Большое вам человеческое спасибо,вы мне очень помогли) И хорошего вам дня)

[nikabekish]

Подскажите только еще пожалуйста, что вы изменили в коде помимо строки _second.y = window.innerHeight;
А то не могу найти

[ArtGenSky]

nikabekish,

// Слой_1
	this.instance = new lib.text();
	this.instance.parent = this;
	this.instance.setTransform(209,50,1,1,0,0,0,121,160.5);

	this.instance_1 = new lib.Слой5();
	this.instance_1.setTransform(120,-40,1,1,0,0,0,121,160.5);
	this.instance_1.parent = this;

Вот здесь еще изменил значения трансформаций относительно изначального позиционирования.

Этот баннер сейчас хорошо отображается, когда один на странице и растянут от верхнего края окна до нижнего. Но если он будет помещен в какой-нибудь блок на каком-либо сайте, то возможно что-то поедет, т.к. для позиционирования слоя по оси Y у вас в коде используется привязка к окну браузера:

_second.y = window.innerHeight;

[ArtGenSky]

nikabekish, а нельзя было создать баннер с помощью html и css без canvas? Делов тут на полчаса-час, имея под рукой картинки.

[nikabekish]

ArtGenSky, никогда с нуля не верстала сама,я дизайнер, и баннер делался для выставления через adfox, у которого есть список программ, в которых рекомендовано делать.
Поэтому и делала таким образом, в Adobe Animate.
А по какому принципу были выбраны значения трансформаций в этой строке?
this.instance_1.setTransform(120,-40,1,1,0,0,0,121,160.5);

[ArtGenSky]

nikabekish, были выбраны на глаз :) . Просто скопировал трансформации из соседнего блока с текстом и подкорректировал по оси х и у.

[ArtGenSky]

nikabekish, если вам нужно будет переверстать этот баннер без canvas, то обращайтесь, мне это быстро и легко сделать. Ник в телеграмм такой же как и тут.