Коллеги, есть такой пример:
const image = [
'https://www.prodaman.ru/users/5824/photos/users/91721_big.jpg',
'https://cdn1.kolektado.com/media/cache/profile_photo_thumb/0a/c1/30a031c98ab4ac27fce46377bb70.jpeg',
'http://dlm6.meta.ua/pic/0/33/31/2se9MTgTyR.jpg',
'http://ladyjob.com.ua/application/content/news/5483.jpg',
'https://articles.abilogic.com/data/uploads/0000098000/600/abi_0000098616.thumb.100.jpg',
'https://freelance.boutique/img/avatars/302073.png',
'http://by.badgood.info/photos/avatars/16463/29215eefb9.jpg',
'http://pda.svidanok.net/files/imagecache/thumb/images/users/irishka89_uid36441_00000.jpg',
'http://vseotzyvy.ru/media/cache/a1/ee/a1ee8d99a67b9a355c44b2e9557141b2.jpg',
'https://ц.укр/uploads/users/484396/100_791b00bc996a467.jpg'
];
const layerShadowSlider = document.querySelectorAll('.layer-shadow-slider');
const ticker = document.querySelectorAll('.ticker');
for (var i = 0; i < ticker.length; i++) {
ticker[i].style.backgroundImage = 'url(' + image[i] + ')';
ticker[i].style.transform = 'rotateY(' + (i + 1) * 36 + 'deg) translateZ(430px)';
}
const wrapTicker = document.querySelector('#wrap-ticker')
window.addEventListener('keydown', (event) => {
})
/* изменения в коде */
function MyMatrix() {
}
MyMatrix.prototype.matrix3d = function() {
layerShadowSlider[1].innerHTML = arguments[14];
//console.log('matrix3d', arguments[14]); // Предпоследний аргумент - положение по Z.
}
var MM = new MyMatrix();
function getPoisition() {
for (var i = 0; i < ticker.length; i++) {
var method = document.defaultView.getComputedStyle(ticker[0])["transform"];
// Чуть чуть извращений
eval('MM.' + method);
}
requestAnimationFrame(getPoisition);
}
requestAnimationFrame(getPoisition);
/* изменения в коде */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
html,
body {
overflow: hidden;
width: 100%;
height: 100%;
background: #272727;
border-top: 1px solid transparent;
}
#wrapper {
position: relative;
width: 100%;
height: 100%;
perspective: 1000px;
}
.layer-shadow-slider {
position: absolute;
top: calc(50% - 150px);
left: calc(50% - 250px);
width: 500px;
height: 300px;
box-shadow: inset 50px 0px 100px 50px rgba(39, 39, 39, 1);
}
.layer-shadow-slider:nth-child(2) {
box-shadow: inset -50px 0px 100px 50px rgba(39, 39, 39, 1);
}
#main-wrap-slider {
position: absolute;
top: calc(50% - 150px);
left: calc(50% - 250px);
overflow: hidden;
width: 500px;
height: 300px;
}
#wrap-ticker {
position: absolute;
top: calc(50% - 50px);
left: calc(50% - 50px);
width: 100px;
height: 100px;
background-color: transparent;
transform-style: preserve-3d;
transform-origin: 50% 50%;
animation: rotate 60s linear infinite;
}
.ticker {
position: absolute;
background-size: cover;
backface-visibility: hidden;
border-radius: 50%;
width: 100px;
height: 100%;
text-align: right;
line-height: 3;
font-family: sans-serif;
color: white;
font-size: 2rem;
transform-origin: 50% 50%;
}
@keyframes rotate {
0% {
transform: rotateY(0);
}
100% {
transform: rotateY(360deg);
}
}
Вопрос: Как можно определить положение элемента по оси Z?
После коммента Other попытался так. Смотрите изменения в коде. (устарел)
После ответа Stepan Kasyanenko в третий раз редактирую вопрос. Но или я что-то не делаю или ответ не тот который мне нужен...
Смотрите изменения в коде
Ответ
Можно получить через getComputedStyle значение transform, которое будет являться, в вашем случае, matrix3d, которая в свою очередь описывает трансформацию нашего элемента, включая rotate, scale, translate
Есть статья на хабре (или в спецификации, я не осилил), описывающая значения этой матрицы.
Пример, как получить значение traslateZ из элемента.
const image = [
'https://www.prodaman.ru/users/5824/photos/users/91721_big.jpg',
'https://cdn1.kolektado.com/media/cache/profile_photo_thumb/0a/c1/30a031c98ab4ac27fce46377bb70.jpeg',
'http://dlm6.meta.ua/pic/0/33/31/2se9MTgTyR.jpg',
'http://ladyjob.com.ua/application/content/news/5483.jpg',
]
const ticker = document.querySelectorAll('.ticker');
for (var i = 0; i < ticker.length; i++) {
ticker[i].style.backgroundImage = 'url(' + image[i] + ')';
ticker[i].style.transform = 'translateZ(' + (i + 1) * 10 + 'px) translateX(' + (i + 1) * 10 + 'px)';
}
function MyMatrix() {
}
MyMatrix.prototype.matrix3d = function() {
console.log('traslateZ', arguments[14]); // Предпоследний аргумент - положение по Z.
}
var MM = new MyMatrix();
function getPoisition() {
for (var i = 0; i < ticker.length; i++) {
var method = document.defaultView.getComputedStyle(ticker[i])["transform"];
// Чуть чуть извращений
eval('MM.' + method);
}
}
getPoisition();
shuffle.addEventListener("click", () => {
for (var i = 0; i < ticker.length; i++) {
var random = Math.round(Math.random() * 100);
ticker[i].style.transform = 'translateZ(' + random + 'px) translateX(' + (i + 1) * 10 + 'px)';
}
getPoisition();
});
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.ticker {
position: absolute;
background-size: cover;
backface-visibility: hidden;
border-radius: 50%;
top: 50px;
width: 100px;
height: 100px;
text-align: right;
line-height: 3;
font-family: sans-serif;
color: white;
font-size: 2rem;
}
Пример вычислений угла поворота по оси Y, а именно значения rotateY
const image = [
'https://www.prodaman.ru/users/5824/photos/users/91721_big.jpg',
'https://cdn1.kolektado.com/media/cache/profile_photo_thumb/0a/c1/30a031c98ab4ac27fce46377bb70.jpeg',
'http://dlm6.meta.ua/pic/0/33/31/2se9MTgTyR.jpg',
'http://ladyjob.com.ua/application/content/news/5483.jpg',
]
const ticker = document.querySelectorAll('.ticker');
for (var i = 0; i < ticker.length; i++) {
ticker[i].style.backgroundImage = 'url(' + image[i] + ')';
ticker[i].style.transform = 'rotateY(' + (i + 1) * 10 + 'deg) translateX(' + (i + 1) * 100 + 'px)';
}
function MyMatrix() {
}
MyMatrix.prototype.matrix3d = function() {
console.log('rotateY', this.toDegree(Math.acos(arguments[0]))) // Первый аргумент - косинус угла в радианах. Переводим его в градусы
}
MyMatrix.prototype.toDegree = function(rad) {
return Math.round(rad * 180 / Math.PI);
}
var MM = new MyMatrix();
function getPoisition() {
for (var i = 0; i < ticker.length; i++) {
var method = document.defaultView.getComputedStyle(ticker[i])["transform"];
// Чуть чуть извращений
eval('MM.' + method);
}
}
getPoisition();
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.ticker {
position: absolute;
background-size: cover;
backface-visibility: hidden;
border-radius: 50%;
top: 50px;
width: 100px;
height: 100px;
text-align: right;
line-height: 3;
font-family: sans-serif;
color: white;
font-size: 2rem;
}
Финальный вариант - высчитывание текущего элемента, который показывается на первом плане.
const image = [
'https://www.prodaman.ru/users/5824/photos/users/91721_big.jpg',
'https://cdn1.kolektado.com/media/cache/profile_photo_thumb/0a/c1/30a031c98ab4ac27fce46377bb70.jpeg',
'http://dlm6.meta.ua/pic/0/33/31/2se9MTgTyR.jpg',
'http://ladyjob.com.ua/application/content/news/5483.jpg',
'https://articles.abilogic.com/data/uploads/0000098000/600/abi_0000098616.thumb.100.jpg',
'https://freelance.boutique/img/avatars/302073.png',
'http://by.badgood.info/photos/avatars/16463/29215eefb9.jpg',
'http://pda.svidanok.net/files/imagecache/thumb/images/users/irishka89_uid36441_00000.jpg',
'http://vseotzyvy.ru/media/cache/a1/ee/a1ee8d99a67b9a355c44b2e9557141b2.jpg',
'https://ц.укр/uploads/users/484396/100_791b00bc996a467.jpg'
];
const layerShadowSlider = document.querySelectorAll('.layer-shadow-slider');
const ticker = document.querySelectorAll('.ticker');
for (var i = 0; i < ticker.length; i++) {
ticker[i].style.backgroundImage = 'url(' + image[i] + ')';
ticker[i].style.transform = 'rotateY(' + (i + 1) * 36 + 'deg) translateZ(430px)';
ticker[i].textContent = i;
}
const wrapTicker = document.querySelector('#wrap-ticker')
window.addEventListener('keydown', (event) => {
})
/* изменения в коде */
function MyMatrix() {
}
MyMatrix.prototype.matrix3d = function() {
return [].slice.call(arguments);
}
MyMatrix.prototype.toDegree = function(rad) {
return Math.round(rad * 180 / Math.PI);
}
var MM = new MyMatrix();
function getPoisition() {
var method = document.defaultView.getComputedStyle(document.getElementById('wrap-ticker'))["transform"];
// Чуть чуть извращений
try {
var matrix3d = eval('MM.' + method);
var rotateY = MM.toDegree(Math.acos(matrix3d[0]));
var currentI = Math.round(rotateY / 36);
layerShadowSlider[1].textContent = Math.abs(currentI - 9);
} catch (e) {}
requestAnimationFrame(getPoisition);
}
requestAnimationFrame(getPoisition);
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
html,
body {
overflow: hidden;
width: 100%;
height: 100%;
background: #272727;
border-top: 1px solid transparent;
}
#wrapper {
position: relative;
width: 100%;
height: 100%;
perspective: 1000px;
}
.layer-shadow-slider {
position: absolute;
top: calc(50% - 150px);
left: calc(50% - 250px);
width: 500px;
height: 300px;
box-shadow: inset 50px 0px 100px 50px rgba(39, 39, 39, 1);
}
.layer-shadow-slider:nth-child(2) {
box-shadow: inset -50px 0px 100px 50px rgba(39, 39, 39, 1);
}
#main-wrap-slider {
position: absolute;
top: calc(50% - 150px);
left: calc(50% - 250px);
overflow: hidden;
width: 500px;
height: 300px;
}
#wrap-ticker {
position: absolute;
top: calc(50% - 50px);
left: calc(50% - 50px);
width: 100px;
height: 100px;
background-color: transparent;
transform-style: preserve-3d;
transform-origin: 50% 50%;
animation: rotate 60s linear infinite;
}
.ticker {
position: absolute;
background-size: cover;
backface-visibility: hidden;
border-radius: 50%;
width: 100px;
height: 100%;
text-align: right;
line-height: 3;
font-family: sans-serif;
color: white;
font-size: 2rem;
transform-origin: 50% 50%;
text-align: center;
}
@keyframes rotate {
0% {
transform: rotateY(0);
}
100% {
transform: rotateY(360deg);
}
}
Комментариев нет:
Отправить комментарий