трансформация объекта/эффект открытки
Добрый день уважаемые. Возник интерес сделать некий эффект открытки, когда при наведении курсором на див, (в зависимости от его местоположения) идет трансформация этого дива. Сверху объекта водишь- нижний край открытки "надвигаеться", снизу -верхний.
Эффект довольно часто встречал на разных сайтах.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
</head>
<style>
.field {
display: block;
position: relative;
background: #0C0C0E no-repeat 50% 50%;
width: 200px;
height: 400px;
margin: 1%;
border-radius: 5px;
box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.2);
font-family: Arial, sans-serif;
font-size: 1.2em;
line-height: 1.5;
}
.field .block {
position: relative;
float: left;
width: 80px;
height: 100px;
margin: 5%;
background-color: gold;
border-radius: 10px;
box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.2);
overflow: hidden;
color: black;
font-size: 1.5em;
text-align: center;
}
</style>
<body>
<div class="field">
<div class="block">1</div>
<div class="block">2</div>
<div class="block">3</div>
<div class="block">4</div>
<div class="block">5</div>
<div class="block">6</div>
</div>
<script>
function BlockShow() {
var $poster = $('.block'),
w = $(window).width(), //window width
h = $(window).height(); //window height
$(window).on('mousemove', function(e) {
var offsetX = 0.5 - e.pageX / w, //cursor position X
offsetY = 0.5 - e.pageY / h, //cursor position Y
dy = e.pageY - h / 2, //@h/2 = center of poster
dx = e.pageX - w / 2, //@w/2 = center of poster
theta = Math.atan2(dy, dx), //angle between cursor and center of poster in RAD
angle = theta * 180 / Math.PI - 90, //convert rad in degrees
offsetPoster = $poster.data('offset'),
transformPoster = translateY('offsetX' + px) rotateX('offsetY' + deg) rotateY('offsetX' + deg); //poster transform
//poster transform
$poster.css('transform', transformPoster);
}BlockShow()
</script>
</body>
</html>
Подскажите, пожалуйста, где я допускаю ошибку ? |
Black_Star,
здравствуйте. Не знаю, что такое эффект открытки :( Может покажите пример? У Вас скобки потеряны и 71-я строка какая-то совсем не правильная... Вот так можно поворачивать:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
</head>
<style>
.field {
display: block;
position: relative;
background: #0C0C0E no-repeat 50% 50%;
width: 200px;
height: 400px;
margin: 1%;
border-radius: 5px;
box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.2);
font-family: Arial, sans-serif;
font-size: 1.2em;
line-height: 1.5;
}
.field .block {
position: relative;
float: left;
width: 80px;
height: 100px;
margin: 5%;
background-color: gold;
border-radius: 10px;
box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.2);
overflow: hidden;
color: black;
font-size: 1.5em;
text-align: center;
}
</style>
<body>
<div class="field">
<div class="block" id = "div">1</div>
<div class="block">2</div>
<div class="block">3</div>
<div class="block">4</div>
<div class="block">5</div>
<div class="block">6</div>
</div>
<script>
$(function (){
w = $(window).width(), //window width
h = $(window).height(); //window height
$('.block').on('mousemove', function(e) {
var coords = e.target.getBoundingClientRect();
tt = e.pageX - coords.left
e.target.style.transform = 'rotate('+tt+'deg)';
});
})
</script>
</body>
</html>
|
Что то по типу вот этого http://jsfiddle.net/webref/rgbf9ne3/
 Надеюсь так понятнее, точками отмечены положения курсора. Двигаешь сверху, задирается нижний край. Двигаешь снизу - верхний |
Ахаха, я что-то совсем запуталась в x и y:blink:
На основе Вашего примера вроде вот так:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<style>
.doors {
display: inline-block;
}
.block {
width: 100px;
height: 150px;
display: inline-block;
background: #e79e6d;
border: 2px solid #333;
transition: transform 1s;
}
</style>
<script>
$(function (){
$('.block').on('mousemove', function(e) {
var coords = e.target.getBoundingClientRect();
degY = e.pageX - (coords.left + coords.width)/2
degX = -e.pageY + (coords.top + coords.height)/2
e.target.style.transform = 'perspective(300px) rotateX(' + degX/1.5 + 'deg) rotateY(' + degY/1.5 + 'deg)';
});
})
</script>
<body onload = "first()">
<div class="doors">
<div class="block">1</div>
</div>
|
Manyasha,
:victory: |
рони, спасибо!
И все-таки я ошиблась, при дополнении блоков и исходных стилей все криво крутится. Исправляюсь: https://jsfiddle.net/gk1ka3fo/1/
$(function (){
var coords = document.querySelector(".block").getBoundingClientRect();
var widthBlock = coords.width;
var heightBlock = coords.height;
$('.block').on('mousemove', function(e) {
coords = e.target.getBoundingClientRect();
leftBlock = coords.left;
topBlock = coords.top;
degY = e.pageX - leftBlock - widthBlock/2
degX = -e.pageY + topBlock + heightBlock/2
e.target.style.transform = 'perspective(300px) rotateX(' + degX/1.5 + 'deg) rotateY(' + degY/1.5 + 'deg)';
});
})
|
Manyasha, Спасибо, это интересно вышло. Осталось только разобраться с вот этой строчкой
Цитата:
https://jsfiddle.net/BlackStar1991/gk1ka3fo/2/ как выбирается значение свойства perspective(300px) ? |
Black_Star,
Дело не в перспективе, а в коэффициенте чувствительности, в примере Manyasha это 1.5 e.target.style.transform = 'perspective(300px) rotateX(' + degX/1.5 + 'deg) rotateY(' + degY/1.5 + 'deg)'; }); Вы увеличили размеры примерно в 10 раз, попробуйте вместо 1.5 применить 15 Перспективу оставьте 300 |
| Часовой пояс GMT +3, время: 05:14. |