Форум

Black_Star · #1 (**permalink**) 08.08.2016, 20:39

Добрый день уважаемые. Возник интерес сделать некий эффект открытки, когда при наведении курсором на див, (в зависимости от его местоположения) идет трансформация этого дива. Сверху объекта водишь- нижний край открытки "надвигаеться", снизу -верхний.
Эффект довольно часто встречал на разных сайтах.

<!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>

Подскажите, пожалуйста, где я допускаю ошибку ?

Manyasha · #2 (**permalink**) 09.08.2016, 15:44

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>

Black_Star · #3 (**permalink**) 09.08.2016, 21:21

Что то по типу вот этого http://jsfiddle.net/webref/rgbf9ne3/

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

Manyasha · #4 (**permalink**) 09.08.2016, 22:49

Ахаха, я что-то совсем запуталась в x и y

На основе Вашего примера вроде вот так:

<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>

рони · #5 (**permalink**) 09.08.2016, 23:26

Manyasha,

Manyasha · #6 (**permalink**) 10.08.2016, 14:47

рони, спасибо!
И все-таки я ошиблась, при дополнении блоков и исходных стилей все криво крутится. Исправляюсь:
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)';
    });
})

Black_Star · #7 (**permalink**) 10.08.2016, 20:46

Manyasha, Спасибо, это интересно вышло. Осталось только разобраться с вот этой строчкой

Сообщение от Manyasha

e.target.style.transform = 'perspective(300px) rotateX(' + degX/1.5 + 'deg) rotateY(' + degY/1.5 + 'deg)';
    });

Если увеличивать размеры .block, то оно трансформация себя начинает вести просто загадочно)
https://jsfiddle.net/BlackStar1991/gk1ka3fo/2/
как выбирается значение свойства perspective(300px) ?

Dilettante_Pro · #8 (**permalink**) 12.08.2016, 14:19

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

Форум

Справочник

Discord чат

Курсы javascript