Как реализовать «умный» transform: translate?

Question

[Unknown]

Привет!
Не могу понять каким образом можно сделать проверку на выход translate за пределы картинки.
Объяснить лучше на примере.
Вот ссылка, прокрутив чуть ниже можно найти карточки с изображениями, которые перемещаются, если чуть-чуть понаблюдать за перемещением картинки можно заметить, что она по понятным причинам смещается так далеко, что оставляет пустоту - собственно это я и хочу пофиксить.

"use strict";
        var imgArr = document.getElementsByClassName('imgArr');

        [].forEach.call(imgArr, function(item, i, arr) {
            // set variables
            var randValWidth;
            var randValHeight;

            // take the width and height of each image
            var size = {
                'widthImg': arr[i].width,
                'heightImg': arr[i].height
            };

            // set time 
            setInterval(function() {
                // add arguments for tRand() and wRand()
                var randW  = tRand(-size.widthImg/4, size.widthImg/4);
                var randH  = wRand(-size.heightImg/4, size.heightImg/4);
                // start animation
                motionItem();
            }, 2000);

            // find a random value between min and max values
            function tRand(min, max) {
                randValWidth   = Math.floor(Math.random() * (max - min) + min);
            };
            function wRand(min, max) {
                randValHeight  = Math.floor(Math.random() * (max - min) + min);
            };

            // animate elements
            function motionItem() {
                arr[i].style.transform = 'translate3d(' + randValWidth + 'px,' + randValHeight + 'px,' + 0 + ')';
            };
        });

Как решить проблему?

Answer 1

[Павел Корнилов]

Используйте getBoundingClientRect()

Comments

[Unknown]

Пробовал, но у меня не получилось. Не хватает опыта или мозгов. Может быть здесь начинается слишком сложные или не очевидные для меня математические вычисления. Если у вас есть идеи я их с радостью использую

[Павел Корнилов]

Да что может быть проще?
По загрузке страницы получить el1.getBoundingClientRect().right
если он меньше, чем el2.getBoundingClientRect().left - значит el2 ушёл на экране за площадь el1 вправо. И т.д.

[Unknown]

KorniloFF, вот такая проверка сработала

if (startCoords.left < endCoords.left || startCoords.top < endCoords.top) {
                    arr[i].style.transform = 'translate3d(' + 0 + 'px,' + 0 + 'px,' + 0 + ')';
                } else { 
                    arr[i].style.transform = 'translate3d(' + randValWidth + 'px,' + randValHeight + 'px,' + 0 + ')';
                 };

[Павел Корнилов]

Richswitch, все верно.