I tried this:
function getPosition(e) {
var rect = e.target.getBoundingClientRect();
var x = e.clientX - rect.left;
var y = e.clientY - rect.top;
return {
x,
y
}
}
window.addEventListener("click", function(event) {
document.getElementById("info").innerHTML = "ID: " + event.target.id + "<br> X: " + getPosition(event).x + " Y: " + getPosition(event).y;
});
body {
perspective: 400px;
margin: 0;
}
#test {
width: 400px;
height: 400px;
background-color: red;
transform: rotateY(45deg);
position: absolute;
left: 40%;
}
#info {
position: absolute;
right: 0;
top: 0;
box-shadow: 0px 0px 10px black;
width: 200px;
border-radius: 10px;
padding: 5px;
}
<div id="info"></div>
<div style="margin-top: 10%;">
<div id="test">
</div>
</div>
Link to jsfiddle
but it does just work without a 3D Rotation. If I click for example in the bottom right corner of the red div, then it should give me back something arround (because you never hit the corner exact) X: 300px and Y: 300px. But this works just when the element is with no rotation. So how can I get the clicked Position with 3d rotation? (if the rotation changes, then it must work too!)
Related
I want to rotate 2 circles around each other in a circular motion by mouse drag like in this code using jQuery
When I drag the white ball it rotates correctly and makes red ball rotate also and that what I need.
My problem is that when I click on red ball it doesn't rotate and doesn't make as the white ball.
I want to make a red ball like a white ball exactly that when drag red ball the red ball and white ball rotate with mouse like in white-ball case.
https://jsfiddle.net/Sarah_Lotfy/h1ye8Ld3/4/
If there is a code that does the same thing please share it with me
var circle = document.getElementById('circle'),
picker = document.getElementById('picker'),
pickerCircle = picker.firstElementChild,
rect = circle.getBoundingClientRect(),
center = {
x: rect.left + rect.width / 2,
y: rect.top + rect.height / 2
},
transform = (function(){
var prefs = ['t', 'WebkitT', 'MozT', 'msT', 'OT'],
style = document.documentElement.style,
p;
for (var i = 0, len = prefs.length; i < len; i++){
if ( (p = prefs[i] + 'ransform') in style ) return p
}
alert('your browser doesnt support css transforms!')
})(),
rotate = function(x, y){
var deltaX = x - center.x,
deltaY = y - center.y,
angle = Math.atan2(deltaY, deltaX) * 180 / Math.PI
return angle
},
// DRAGSTART
mousedown = function(event){
event.preventDefault()
document.body.style.cursor = 'move'
mousemove(event)
document.addEventListener('mousemove', mousemove)
document.addEventListener('mouseup', mouseup)
},
// DRAG
mousemove = function(event){
picker.style[transform] = 'rotate(' + rotate(event.x, event.y) + 'deg)'
},
// DRAGEND
mouseup = function(){
document.body.style.cursor = null;
document.removeEventListener('mouseup', mouseup)
document.removeEventListener('mousemove', mousemove)
}
// DRAG START
pickerCircle.addEventListener('mousedown', mousedown)
// ENABLE STARTING THE DRAG IN THE BLACK CIRCLE
circle.addEventListener('mousedown', function(event){
if(event.target == this) mousedown(event)
})
#circle{
position: relative;
width: 300px;
height: 300px;
border-radius: 50%;
background: #000;
}
#circle-in{
position: absolute;
top: 35px;
left: 35px;
width: 230px;
height: 230px;
border-radius: 50%;
background: #fff;
}
#picker{
position: absolute;
top: 50%;
left: 50%;
height: 30px;
margin-top: -15px;
width: 50%;
transform-origin: center left;
}
#picker-circle{
width: 30px;
height: 30px;
border-radius: 50%;
background: #fff;
margin: 0 3px 0 auto;
cursor: move;
}
#picker2{
position: absolute;
top: -200%;
left: -100%;
height: 30px;
margin-top: -10px;
width: 50%;
transform-origin: center right ;
}
#picker-circle2{
width: 30px;
height: 30px;
border-radius: 50%;
background: red;
margin: 0 3px 0 auto;
cursor: move;
}
<div id="circle">
<div id="circle-in"></div>
<div id="picker">
<div id="picker-circle"></div>
</div>
<div id="picker2">
<div id="picker-circle2"></div>
</div>
</div>
I am trying to implement a crosshair cursor which will be activated through MouseEnter once the cursor enters the canvas. However, after the cursor has been changed to the crosshair, and even if it leaves the canvas, it still remains as the crosshair. I want the crosshair cursor to only be activated inside the canvas, and for the cursor to revert back to the default cursor once it leaves the canvas.
CSS:
#crosshair-h {
width: 100%;
}
#crosshair-v {
height: 100%;
}
.hair {
position: fixed;
top:0; left:0;
margin-top: -3px;
margin-left: -2px;
background: transparent;
border-top: 1px dotted #000;
border-left: 1px dotted #000;
pointer-events: none;
z-index: 2;
}
#mousepos {
position: absolute;
top:0; left:0;
padding: 10px;
margin: 10px;
font: 14px arial;
color: #fff;
background: rgba(0,0,0,0.5);
border-radius: 24px;
z-index: 1;
}
JavaScript:
$(document).ready(function() {
// Setup our variables
var cH = $('#crosshair-h'),
cV = $('#crosshair-v');
$(this).on('mousemove touchmove', function(e) {
var x = e.pageX - 1;
var y = e.pageY - 1;
cH.css('top', e.pageY);
cV.css('left', e.pageX);
$('#mousepos').css({
top: e.pageY + 'px',
left: e.pageX + 'px'
}, 800);
$('#mousepos').text( "X: " + x + "px, Y: " + y + "px");
e.stopPropagation();
});
// Anchor Hover Effects
$("a").hover(function() {
$(".hair").stop().css({borderColor: "#fff"}, 800)},
function() {
$(".hair").stop().css({borderColor: "black"},800)
});
e.stopPropagation();
});
Any help is appreciated, thank you!
If the default crosshair cursor suffices, you can do this with a simple CSS hover rule:
canvas {
border: 1px solid grey;
height: 50px;
width: 100px;
}
canvas:hover {
cursor: crosshair;
}
<canvas></canvas>
If you really have need for the custom one, you can use a mouseleave or mouseout event on the canvas to remove the css class.
Hey guys I’m trying to make simple point & click game, in background will be some nice landscape which will be moved by arrows on the left and right (same like slider works), I want object to move only within the lower div (#boxMap), I tried to build contructor to main object but together with friend who helps me, we wrote it in way below. The problem is that this object still doesn’t move how it should be, idea is that when game starts, and when I click right arrow, object appears on the left, if I click left arrow object appears on the left side of the div. When I click the mouse, object should moves to position I clicked. I’m kinda desperate as I have ideas how to make It work later but I totally cannot manage this positioning and movement of the object.
I found some nice yt tutorial about moving objects and tried to set statements to move only within the div without getting outside the edge, unfortunately now it moves only on the bottom edge of div.
So I created new object with class .hero inside the boxMap, and set it’s starting position with css properties, then with function getClickPosition I try to manage it’s movement, I try also set that if object is clicked outside the frame of div, it set it’s position on particular value. Unfortunately now it moves only through the bottom edge, right side it doesn’t exceed the edge, left side it does.
Hope I was able to more or less explain what I try to achieve and what I have already done.
Any idea how to set position and some simple movement in much simpler way?
I would be grateful for any tips
HTML
<body>
<div id="emptySpace">
<span class="left"></span>
<span class="right"></span>
</div>
<div id="boxMap">
</div>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"
integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>
<script src="js/app.js"></script>
</body>
CSS
body {
margin: 0;
padding: 0;
background-color: antiquewhite;
#emptySpace {
width: 100%;
height: 70vh;
background-color: azure;
position: relative;
.left {
position: absolute;
left: 10px;
top: 40vh;
border-top: 40px solid transparent;
border-bottom: 40px solid transparent;
border-right:40px solid blue;
//display: none;
}
.right {
position: absolute;
right: 10px;
top: 40vh;
border-top: 40px solid transparent;
border-bottom: 40px solid transparent;
border-left: 40px solid green;
//display: none;
}
}
#boxMap {
width: 100%;
height: 30vh;
border: 1px solid black;
background-color: #d8fffa;
position: relative;
.hero {
position: absolute;
width: 50px;
height: 50px;
display: inline-block;
border: 1px solid black;
border-radius: 50%;
background-color: blue;
transform: translate3d(0px, -45px, 0);
transition: 2s linear;
}
}
}
Javascript
function Game() {
this.hero = new Hero();
this.counter = 0;
var self = this;
this.boxMap = document.querySelector("#boxMap");
// Placing hero on the map
this.showHero = function () {
var heroElement = document.createElement('div');
heroElement.classList.add('hero');
console.log(self, self.boxMap);
self.boxMap.appendChild(heroElement);
$(heroElement).css({top: 130, left: 30})
}
}
var game = new Game();
game.showHero();
var heroMovement = document.querySelector(".hero");
var boxMap = document.querySelector("#boxMap");
boxMap.addEventListener("click", getClickPosition, false);
// Set position on hero and set movement
function getClickPosition(e) {
var xPosition = e.clientX;
var maxWidth = 1350;
var minWidth = -20;
if (xPosition < minWidth) {
xPosition = minWidth;
} else if (xPosition > maxWidth) {
xPosition = maxWidth
} else {
var xPosition = e.clientX - (heroMovement.offsetWidth + 3);
}
var yPosition = e.clientY;
var maxHeight = 60;
var minHeight = -130;
if (yPosition < minHeight) {
yPosition = minHeight;
} else if (yPosition > maxHeight) {
yPosition = maxHeight
} else {
var yPosition = e.clientY - (heroMovement.offsetHeight + 558);
}
console.log(xPosition, yPosition);
var translate3dValue = "translate3d(" + xPosition + "px" + "," + yPosition + "px, 0)";
console.log(translate3dValue);
heroMovement.style.transform = translate3dValue;
}
I have a panel on the left side of my screen that flips out when activated. As you move your mouse around, it slightly alters the rotateY transform for a nice interactive effect. I want to mirror this on the right side of the screen, but every adjustment I make just causes the panel to freak out when you move the mouse.
What adjustments need to be made to the second jquery function to mirror the effect? I tried a lot of things including the current code which is replacing x = x + 15 with x = 360 - (x + 15). It's close, but still not right.
$(document).on('mousemove','#viewport1 .menu',function( event ) {
var x = Math.round(event.pageX / $(this).width() * 10);
x = x + 15;
$(this).css('transform','rotateY(' + x + 'deg)');
});
$(document).on('mousemove','#viewport2 .menu',function( event ) {
var x = Math.round(event.pageX / $(this).width() * 10);
x = 360 - (x + 15); //this is almost but not quite right...
$(this).css('transform','rotateY(' + x + 'deg)');
});
.viewport {
perspective: 1000px;
position: absolute;
top: 0; bottom:0; width: 30%;
padding: 5px;
}
.menu {
text-align: center;
width: 100%;
border: 1px solid black;
display: inline-block;
height: 100%;
}
#viewport1 {
left: 0;
}
#viewport1 .menu {
perspective-origin: left;
transform-origin: left;
transform: rotateY(15deg);
}
#viewport2 {
text-align: right;
right: 0;
}
#viewport2 .menu {
perspective-origin: right;
transform-origin: right;
transform: rotateY(345deg);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="viewport1" class="viewport">
<div class="menu">HOVER ME!</div>
</div>
<div id="viewport2" class="viewport">
<div class="menu">HOVER ME!</div>
</div>
You are using event.pageX, which is the position of the mouse pointer, relative to the left edge of the document, to calculate the rotation of the <div>. You need to substract the left offset: $(this).offset().left. After that you change x+15 to x-15 and you get the mirrored effect.
$(document).on('mousemove','#viewport1 .menu',function( event ) {
var x = Math.round(event.pageX / $(this).width() * 10);
x = x + 15;
$(this).css('transform','rotateY(' + x + 'deg)');
});
$(document).on('mousemove','#viewport2 .menu',function( event ) {
var x = Math.round((event.pageX - $(this).offset().left) / $(this).width() * 10);
x = x - 15;
$(this).css('transform','rotateY(' + x + 'deg)');
});
.viewport {
perspective: 1000px;
position: absolute;
top: 0; bottom:0; width: 30%;
padding: 5px;
}
.menu {
width: 100%;
border: 1px solid black;
display: inline-block;
height: 100%;
}
#viewport1 {
left: 0;
}
#viewport1 .menu {
perspective-origin: left;
transform-origin: left;
transform: rotateY(15deg);
}
#viewport2 {
text-align: right;
right: 0;
}
#viewport2 .menu {
perspective-origin: right;
transform-origin: right;
transform: rotateY(345deg);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="viewport1" class="viewport">
<div class="menu"></div>
</div>
<div id="viewport2" class="viewport">
<div class="menu"></div>
</div>
I would like to have a div that follows the mouse coordinates the opposite direction and within a div .box. When you move your mouse the red box should move slightly to the opposite direction, so it looks like a kind of parallax effect. Now it will move on your mouse speed and that is not what I want. I would like that the box is move slightly, so you will see the box move a little bit to the opposite direction. And I would like to have align the box to the center of the mouse.
I already have code a script that let the red box follow your mouse movement, but doesn't know how to get above work.
$(document).ready(function(){
$('div.container').on('mousemove',function(e){
var x = e.pageX - this.offsetLeft;
var y = e.pageY - this.offsetTop;
$('div.box').css({'left': x, 'top': y});
});
});
http://codepen.io/anon/pen/zBrkGa
Try to change top to bottom and left to right may solve your problem like,
$('div.box').css({'right': x, 'bottom': y});
$(document).ready(function() {
$('div.container').on('mousemove', function(e) {
var x = e.pageX - this.offsetLeft;
var y = e.pageY - this.offsetTop;
$('div.box').css({
'right': x,
'bottom': y
});
});
});
.container {
margin: 0 auto;
width: 300px;
height: 300px;
border: 1px #000 solid;
position: relative;
}
.box {
width: 50px;
height: 50px;
border: 1px #000 solid;
position: absolute;
right: 200px;
background: red
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div class="container">
<div class="box"></div>
</div>
Updated, for fixing the box in 100px range with some delay
$(document).ready(function() {
$('div.container').on('mousemove', function(e) {
var x = (e.pageX - this.offsetLeft);
var y = (e.pageY - this.offsetTop);
if(x<100||x>200||y>200||y<100) return false;
setTimeout(function() {
$('div.box').css({
'right': x,
'bottom': y
}).text(x+','+y);
}, 500);
});
});
.container {
margin: 0 auto;
width: 300px;
height: 300px;
border: 1px #000 solid;
position: relative;
}
.box {
width: 50px;
height: 50px;
border: 1px #000 solid;
position: absolute;
right: 200px;
background: red
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div class="container">
<div class="box"></div>
</div>
$(document).ready(function(){
$('div.container').mousemove(function(e){
let mouseX = e.pageX;
let mouseY = e.pageY;
$(this).children('.box').css({
'transform': 'translate(' + mouseX / -80 + 'px ,' + mouseY / -80 + 'px)
})
});
});
The negative numbers will move the object or div (.box) the opposite way of your mouse movement