I have to implement the rotation of an image even on mobile devices. Currently if we place the mouse on the image simulates a 3D rotation but on mobile devices nothing happens.
I saw that I have to add:
if (window.DeviceMotion) {// Do something}
But I do not understand how to implement it.
Does anyone have any ideas?
Thank you
use strict';
$(document).on('mousemove', function (e) {
$('.light').css({
left: e.pageX - 300,
top: e.pageY - 300
});
});
var el = $('.js-tilt-container');
el.on('mousemove', function (e) {
var _$$offset = $(this).offset();
var left = _$$offset.left;
var top = _$$offset.top;
var cursPosX = e.pageX - left;
var cursPosY = e.pageY - top;
var cursFromCenterX = $(this).width() / 2 - cursPosX;
var cursFromCenterY = $(this).height() / 2 - cursPosY;
$(this).css('transform', 'perspective(500px) rotateX(' + cursFromCenterY / -40 + 'deg) rotateY(' + -(cursFromCenterX / -40) + 'deg) translateZ(-45px)');
var invertedX = Math.sign(cursFromCenterX) > 0 ? -Math.abs(cursFromCenterX) : Math.abs(cursFromCenterX);
//Parallax transform on image
$(this).find('.js-perspective-neg').css('transform', 'translateY(' + cursFromCenterY / 10 + 'px) translateX(' + -(invertedX / 10) + 'px) scale(1.15)');
$(this).removeClass('leave');
});
el.on('mouseleave', function () {
$(this).addClass('leave');
});
OK thanks. I've tried setting the "deviceorientation" code in various ways but it does not work. I used these variables. How could I integrate them in my code? thank you
if (!('ondeviceorientation' in window)) {
document.getElementById('do-unsupported').classList.remove('hidden');
} else {
document.getElementById('do-info').classList.remove('hidden');
window.addEventListener('deviceorientation', function(event) {
document.getElementById('cube').style.webkitTransform =
document.getElementById('cube').style.transform =
'rotateX(' + event.beta + 'deg) ' +
'rotateY(' + event.gamma + 'deg) ' +
'rotateZ(' + event.alpha + 'deg)';
document.getElementById('beta').innerHTML = Math.round(event.beta);
document.getElementById('gamma').innerHTML = Math.round(event.gamma);
document.getElementById('alpha').innerHTML = Math.round(event.alpha);
document.getElementById('is-absolute').innerHTML = event.absolute ? "true" : "false";
});
}
On mobile, you need to listen for the touchmove or pointermove events. See caniuse for the corresponding browser support: Touch events, Pointer events
By the way, from a user experience perspective you might want to try rotating based on device orientation (the deviceorientation event), rather than touch.
Related
I want to translateX() an element when the user pans it using Hammer.js. When the user drags the content left, I want to translate the content left. The same for right.
Current code:
var manager = new Hammer.Manager(elem);
var panner = new Hammer.Pan({ direction: Hammer.DIRECTION_HORIZONTAL, threshold: 0 });
manager.add(panner);
manager.on("panleft", function(e) {
elem.style.transform = "translateX(" + (e.distance * -1) + "px)";
});
manager.on("panright", function(e) {
elem.style.transform = "translateX(" + e.distance + "px)";
});
It works except if the user pans left then goes back right, it glitches and goes negative. How can I make it work?
I solved it by binding to the panmove event and using the e.deltaX property:
manager.on("panmove", function(e) {
elem.style.transform = "translateX(" + e.deltaX + "px)";
});
I'm trying to get a click to register on my image tag to get the coordinates of the image click to position an svg element on top of it. As far as I understand, the way I have my code should account for bubbling events, but I'm not 100% certain. Can someone help me understand what I'm doing wrong, information I might be missing from it? As of now, nothing runs.
$(".playing-field").on("click", "#picture", function(e) {
var offset = $("#picture").offset();
var relativeX = (e.pageX - offset.left);
var relativeY = (e.pageY - offset.top);
console.log(relativeX, relativeY);
});
I forgot to add HTML before...
<div class="playing-field">
<img id="picture" src="assets/images/image.jpg">
<svg class="speechbubbles" width="100%" height="100%" preserveAspectRatio="xMinYMin meet">
</div>
I tried the code in Jsfiddle without my CSS, and it works, but when I do add the CSS, it doesn't. I'm not that familiar with CSS rules, so can someone tell me why it would interfere with the clicking of the image?
.playing-field {
position: relative;
height: 500px;
width: 100%;
}
#picture{
position: absolute;
}
.speechbubbles{
position: absolute;
}
You code runs very well.
Try This https://jsfiddle.net/2bm4zjdz/1
$(".playing-field").on("click", "#picture", function(e) {
var offset = $("#picture").offset();
var relativeX = (e.pageX - offset.left);
var relativeY = (e.pageY - offset.top);
alert( 'x : ' + relativeX + ' y :' + relativeY);
});
Looking around it seems that offset doesn't work in chrome so you will need to use position like so
$(function () {
$('#picture').click(function (e) {
var offset = $(this).position();
var relativeX = (e.pageX - offset.left);
var relativeY = (e.pageY - offset.top);
alert('x :' + relativeX + ' y :' + relativeY);;
});
});
I've found a simple example about zooming a HTML image on mouse wheel. Unfortunately in my case I cannot use CSS "transform/translate" and "transformOrigin" because image's position top/left stays the same, but it has to be changed (for example, when the image becomes large enough and reaches left screen side - 'left' position must be "0", not "500px" as in my example).
My code:
<!doctype html>
<html lang="en">
<head>
<script src="http://code.jquery.com/jquery-2.1.4.min.js"></script>
<script type="text/javascript">
window.onload = function() {
scale = 1; // scale of the image
xLast = 0; // last x location on the screen
yLast = 0; // last y location on the screen
xImage = 0; // last x location on the image
yImage = 0; // last y location on the image
var mousewheelevt=(/Firefox/i.test(navigator.userAgent))? "DOMMouseScroll" : "mousewheel" //FF doesn't recognize mousewheel as of FF3.x
if (document.attachEvent) //if IE (and Opera depending on user setting)
document.attachEvent("on"+mousewheelevt, zoomImg)
else if (document.addEventListener) //WC3 browsers
document.addEventListener(mousewheelevt, zoomImg, false)
}
function zoomImg(e){
var evt = window.event || e // equalize event object
var delta = evt.detail? evt.detail*(-120) : evt.wheelDelta // check for detail first so Opera uses that instead of wheelDelta
var imgg = document.getElementById('imgg');
// find current location on screen
var xScreen = e.pageX - imgg.offsetLeft;
var yScreen = e.pageY - imgg.offsetTop;
// find current location on the image at the current scale
xImage = xImage + ((xScreen - xLast) / scale);
yImage = yImage + ((yScreen - yLast) / scale);
// determine the new scale
if (delta > 0)
{
if (scale < 5)
scale += 0.1;
}
else
{
if (scale > 1)
scale -= 0.1;
}
// determine the location on the screen at the new scale
var xNew = (xScreen - xImage) / scale;
var yNew = (yScreen - yImage) / scale;
// save the current screen location
xLast = xScreen;
yLast = yScreen;
imgg.style.transform = 'scale(' + scale + ')' + 'translate(' + xNew + 'px, ' + yNew + 'px' + ')';
imgg.style.transformOrigin = xImage + 'px ' + yImage + 'px';
}
</script>
</head>
<body>
<img id="imgg" src="http://www.baytrail.org/vtour/map4/access/CyteHils/Bayview_Tr_Grn_Hills.JPG" style="position:absolute; top:300px; left:500px;">
</body>
</html>
In my opinion all coefficients are known and I just need to replace these 2 lines to affect position, but I cannot find the right way:
imgg.style.transform = 'scale(' + scale + ')' + 'translate(' + xNew + 'px, ' + yNew + 'px' + ')';
imgg.style.transformOrigin = xImage + 'px ' + yImage + 'px';
How can I do that? If possible, please show an example with CSS "scale" and "zoom" functions.
I'm using a JS script to change div background colors depending of my mouse position.
$(document).mousemove(function(e){
var $width = ($(document).width())/(252 - 23);
var $height = ($(document).height())/(253 - 2);
var $pageX = 253 - parseInt(e.pageX / $width,10);
var $pageY = 200 - parseInt(e.pageY / $height,10) + 2;
$("body").css("background-color", "rgb("+$pageY+","+$pageY+","+$pageY+")");
});
it works perfectly fine.
what I'm trying to do now is to apply the same color changes to my links when hover and when active.
when trying this code, the color changes on hover, depending of the mouse position, but when mouseout the changed color belongs :
$(document).mousemove(function(e){
var $width = ($(document).width())/(252 - 23);
var $height = ($(document).height())/(253 - 2);
var $pageX = 253 - parseInt(e.pageX / $width,10);
var $pageY = 200 - parseInt(e.pageY / $height,10) + 2;
$("a:hover").css("color", "rgb("+$pageX+","+$pageY+","+$pageX+")");
$("a:hover").css("border-bottom", "1px dotted rgb("+$pageX+","+$pageY+","+$pageX+")");
$("a:active").css("color", "rgb("+$pageX+","+$pageY+","+$pageX+")");
$("a:active").css("border-bottom", "1px dotted rgb("+$pageX+","+$pageY+","+$pageX+")");
});
I think I need to add a mouseover and mouseout function but I don't know how to do this...
anyone know how I can do this ?
here is a jsfiddle : http://jsfiddle.net/BrZjJ/36/
thanks a lot for your help
You better use mouseleave instead of mouseout
$('a').mouseleave(function(e){
$('a').css({'color':'#000', 'border':'none'});
});
Because of some signifcant changes in the fiddle, I'll answer here instead of leaving it as a comment. If I understand you right, you want the color of the link to change depending on where you move over it and having the link keep that color when you click on it (or activate it).
In this jsFiddle it does just that:
CSS
a.active {
border-bottom: 1px dotted;
}
a:visted {
color:blue;
}
a {
color: blue;
text-decoration: none;
}
a:hover {
border-bottom: 1px dotted;
}
JavaScript
var pageX, pageY;
$(document).mousemove(function (e) {
var $width = ($(document).width()) / (252 - 23);
var $height = ($(document).height()) / (253 - 2);
var $pageX = 253 - parseInt(e.pageX / $width, 10);
var $pageY = 200 - parseInt(e.pageY / $height, 10) + 2;
$("body").css("background-color", "rgb(" + $pageY + "," + $pageY + "," + $pageY + ")");
});
$(document).mousemove(function (e) {
var $width = ($(document).width()) / (252 - 23);
var $height = ($(document).height()) / (253 - 2);
pageX = 253 - parseInt(e.pageX / $width, 10);
pageY = 200 - parseInt(e.pageY / $height, 10) + 2;
$("a").on("mousemove", function () {
$(this).css("color", "rgb(" + pageX + "," + pageY + "," + pageX + ")");
}).on("mouseleave", function () {
if (!$(this).hasClass("active")) $(this).removeAttr("style");
});
$("a.active").css("color", "rgb(" + pageX + "," + pageY + "," + pageX + ")");
});
$("a").on("click", function () {
$("a").removeAttr("style").removeClass("active");
$(this).addClass("active").css("color", "rgb(" + pageX + "," + pageY + "," + pageX + ")");
});
Edit: updated to change color of active link on moving mouse.
Ok, so I am trying to use jQuery to get the innerWidth() of an element #preview. I want to create a conditional that says IF x offset LEFT + #preview width is greater than page width, give it style right: z where z = #preview width + xOffset.
I apologize my code below is a mess and the syntax for .css ("right", (rightFloat + xOffset) + "px") (line 125) is off, but that's part of my problem.
<script>
$(document).ready(function(){
//append "gallery" class to all items with "popup" class
imagePreview();
$(".popup").addClass("gallery");
});
//The overlay or pop-up effect
this.imagePreview = function() { /* CONFIG */
xOffset = 40;
yOffset = 40;
// these 2 variable determine popup's distance from the cursor
// you might want to adjust to get the right result
/* END CONFIG */
$("a.preview").click(function(e) {
return false;
});
$("a.preview").hover(function(e) {
this.t = this.title;
this.title = "";
var c = (this.t != "") ? "<br/>" + this.t : "";
var rightFloat = e.pageX + ("#preview").innerWidth;
$("body").append("<p id='preview'><img src='" + this.href + "' alt='Image preview' />" + c + "</p>");
$("#preview").hide().css("top", (e.pageY - yOffset) + "px").css("left", (e.pageX + xOffset) + "px").fadeIn("2000");
while ((left + 400) > window.innerWidth) {.css("right", (rightFloat + xOffset) + "px")
}
}, function() {
this.title = this.t;
$("#preview").remove();
});
$("a.preview").mousemove(function(e) {
var top = e.pageY - yOffset;
var left = e.pageX + xOffset;
var rightFloat = e.pageX + ("#preview").innerWidth;
//flips the image if it gets too close to the right side
while ((left + 400) > window.innerWidth) {.css("right", +(rightFlaot + xOffset) + "px")
}
$("#preview").css("top", top + "px").css("left", left + "px");
});
};
</script>
Try using http://api.jquery.com/offset/
if($('#preview').offset().right<0){
var right = parseInt($(window).width()) - e.pageX + xOffset;
$("#preview").css("top", top + "px").css("right", right + "px");
}else{
var left = e.pageX + xOffset;
$("#preview").css("top", top + "px").css("left", left + "px");
}
I made these fixes because I couldn't get your code to work in jsfiddle:
var xOffset = 40;
var yOffset = 40;
$("a.preview").bind('mouseover',function(e){
var rightFloat = parseFloat(e.pageX)+$("#preview").innerWidth();
var ptop = parseFloat(e.pageY) - yOffset;
var pleft = parseFloat(e.pageX) + xOffset;
$("#preview").css({"top":ptop + "px","left":pleft + "px"});
});
There's the fixes for the top half but I have no idea what you're trying to do with the bottom part (with the while loop). Can you explain what functionality you want?