How to prevent image from "jumping" with JQuery - javascript

I have a school homework where I have this issue: if you start to rotate the image, then move the mouse out of the gray area and back into the area again, but at a different location, the image "jumps": it undergoes a major rotation change. I need to avoid this inconvenience.
function init(JQuery) {
let coordX = JQuery.pageX;
let coordY = JQuery.pageY;
$(".zoneSouris").mousemove(function(event) {
if (event.buttons == 1) {
$(".zoneImage").css({
'-webkit-transform': 'rotateX(' + event.pageY + 'deg) rotateY(' + event.pageX + 'deg)',
'-moz-transform': 'rotateX(' + event.pageY + 'deg) rotateY(' + event.pageX + 'deg)',
});
} else if (event.buttons == 2) {
$(".zoneImage").css({
'-webkit-transform': 'rotate(0)',
'-moz-transform': 'rotate(0)',
});
}
});
$(".zoneSouris").bind("contextmenu", function(e) {
return false;
});
}
init($);
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<main>
<div class="espaceRotation">
<div class="elemEspace zoneImage">
<img src="https://i.imgur.com/eNqPru1.png" />
</div>
<div class="elemEspace zoneSouris">
<span>Manipulez avec la souris !</span>
</div>
</div>
</main>

Related

Click to rotate goes in wrong direction at first

I am trying to have elements in a canvas rotate either clockwise or counter-clockwise depending on which arrow is clicked. The problem is that when you rotate one way and then another, the first click will go in the previously clicked arrow's direction on the first click.
ie. click rotate clockwise and it rotates clockwise. Then click rotate counter-clockwise and the first time you click it, the effected elements rotate clockwise on the then counter-clockwise on the second and each click afterwards. This happens in both directions.
Hope that's clear. Here, there's not much to it. Rotator code at the end:
$(document).ready(function(){
counter = 0;
//draggable
$(".drag").draggable({
helper:'clone',
containment: 'frame',
//first dragged
stop:function(ev, ui) {
var pos=$(ui.helper).offset();
objName = "#clonediv"+counter++
$(objName).css({"left":pos.left,"top":pos.top});
$(objName).removeClass("drag");
//existing dragged
$(objName).draggable({
containment: 'parent',
stop:function(ev, ui) {
var pos=$(ui.helper).offset();
console.log($(this).attr("id"));
console.log(pos.left)
console.log(pos.top)
}
});
}
});
//droppable
$("#frame").droppable({
drop: function(ev, ui) {
if (ui.helper.attr('id').search(/drag[0-9][0-9]/) != -1){
counter++;
var element=$(ui.draggable).clone();
element.addClass("tempclass");
$(this).append(element);
$(".tempclass").attr("id","clonediv"+counter);
$("#clonediv"+counter).removeClass("tempclass");
draggedNumber = ui.helper.attr('id').search(/drag([0-9][0-9])/)
itemDragged = "dragged" + RegExp.$1
console.log(itemDragged)
$("#clonediv"+counter).addClass(itemDragged);
$("ol").append($("div").attr("data-piece") + "<br>" );
}
}
});
//trash can
$("#trash").droppable({
greedy: 'true',
accept: function() { return true; },
drop: function (event, ui) {
tolerance: 'fit', $(ui.draggable).remove();
$("ol").detach();
}
});
//rotator
var angle = 22.5;
$('#spin').click(function() {
$('.drag').css ({
'-webkit-transform': 'rotate(' + angle + 'deg)',
'-moz-transform': 'rotate(' + angle + 'deg)',
'-o-transform': 'rotate(' + angle + 'deg)',
'-ms-transform': 'rotate(' + angle + 'deg)'
});
angle+=22.5;
});
$('#spin2').click(function() {
$('.drag').css ({
'-webkit-transform': 'rotate(' + angle + 'deg)',
'-moz-transform': 'rotate(' + angle + 'deg)',
'-o-transform': 'rotate(' + angle + 'deg)',
'-ms-transform': 'rotate(' + angle + 'deg)'
});
angle+=-22.5;
});
});
Any help is much appreciated!
Try moving the angle += ... lines before the $('.drag').css(...) lines.
Cleaned up a little, and starting at angle = 0:
// rotator
var angle = 0;
function rotateTo(angle) {
var value = 'rotate(' + angle + 'deg)';
$('.drag').css({
'-webkit-transform': value,
'-moz-transform': value,
'-o-transform': value,
'-ms-transform': value,
});
}
$('#spin').click(function() {
angle += 22.5;
rotateTo(angle);
});
$('#spin2').click(function() {
angle -= 22.5;
rotateTo(angle);
});

Center of the div - center point

How do I make the center of the div as the center point for the rotation.
I came across this while I was doing some research but I can't seem to fit it in to mine.
This is what the post has suggested. But doesn't work.
$(area).css('-webkit-transform-origin', 'rotate(' + dgR + 'deg)');
function rot(e, area) {
var offset = area.offset();
var ceX = (offset.left) + ($(area).width() /2);
var ceY = (offset.top) + ($(area).height() /2);
var muX = e.pageX;
var muY = e.pageY;
var rdi = Math.atan2(muX-ceX, muY-ceY);
var dgR = (rdi * (180/Math.PI)*-5);
$(area).css('transform', 'rotate(' + dgR + 'deg)');
$(area).css('-webkit-transform', 'rotate(' + dgR + 'deg)');
$(area).css('-o-transform', 'rotate(' + dgR + 'deg)');
$(area).css('-ms-transform', 'rotate(' + dgR+'deg)');
}
You're using the transform-origin incorrect.
$(area).css('-webkit-transform-origin', '50% 50%');
This should place the rotation origin point in the middle of the area
When I got you right, you just want to rotate a div in it's center point, aren't you? Here you have to define the center point with transform-origin: 50% 50%; in your div.
Heres a fiddle to play around (without jscript): http://jsfiddle.net/nub0umft/

Parallax rotating and moving

I am trying to learn how to build a parallax site and I decided to create a little scene with a car and a road. I have the clouds and car along with the background and a few items working well. However, the road has a hill on it and I want to figure out how at a specific spot on the page I can rotate the car and have it move up as it goes up the road then rotate it back down and move it down as it goes down the road. I can't figure out the best way to determine where and when to rotate and move up and then back down. If anyone could help me that would be awesome. I have the code put on a fiddle for you to view. http://jsfiddle.net/xmukh8p8/
and the javascript is here:
$(window).bind('scroll', function(e){
parallaxScroll();
});
function parallaxScroll() {
var scrolled = $(window).scrollTop();
var rotate = 1;
console.log(scrolled);
$('.cloud1').css('background-position', (0-(scrolled*.5)) + 'px 10px');
$('.cloud2').css('background-position', (0-(scrolled*1)) + 'px 10px');
$('.car').css('left', (0+(scrolled*.2)) + 'px');
if (scrolled > 1026 && scrolled < 1396) {
$('.car').css('transform', 'rotate(' + (rotate--)+ 'deg)');
}
}
$.jInvertScroll(['.scroll'], {
height: 6000,
onScroll: function(percent) {
//code
}
});
I've begun to implement what you want, you'll need to fine tune some of the values though to get it perfect. Implementing the height shouldn't be too difficult with this:
EDIT: Improved code and added fiddle link
function parallaxScroll() {
var scrolled = $(window).scrollTop();
console.log(scrolled);
$('.cloud1').css('background-position', (0-(scrolled*.5)) + 'px 10px');
$('.cloud2').css('background-position', (0-(scrolled*1)) + 'px 10px');
$('.car').css('left', (0+(scrolled*.2)) + 'px');
console.log(scrolled);
if (scrolled > 1026 && scrolled < 1396) {
$('.car').css('-webkit-transform', 'rotate(' + ((1026-scrolled)/20)+ 'deg)');
}
else if(scrolled >= 1396 && scrolled < 2000){
$('.car').css('-webkit-transform', 'rotate(' + (((1026-1396)/20)-(1396-scrolled)/20)+ 'deg)');
}
else if(scrolled >= 2000 && scrolled < 2197){
$('.car').css('-webkit-transform', 'rotate(' + (((1026-1396)/20)-((1396-2000)/20)+((2000-scrolled)/20))+ 'deg)');
}
else{
$('.car').css('-webkit-transform', 'rotate(' + 0+ 'deg)');
}
}
Updated Fiddle
EDIT 2:
Added in the translation for good measure. Again some tweaking is needed but the logic is there:
function parallaxScroll() {
var scrolled = $(window).scrollTop();
console.log(scrolled);
$('.cloud1').css('background-position', (0-(scrolled*.5)) + 'px 10px');
$('.cloud2').css('background-position', (0-(scrolled*1)) + 'px 10px');
$('.car').css('left', (0+(scrolled*.2)) + 'px');
console.log(scrolled);
if (scrolled > 1026 && scrolled < 1396) {
$('.car').css('-webkit-transform', 'rotate(' + ((1026-scrolled)/20)+ 'deg) translate(0px,'+(-((scrolled-1026)/3))+'px)');
}
else if(scrolled >= 1396 && scrolled < 2000){
$('.car').css('-webkit-transform', 'rotate(' + (((1026-1396)/20)-(1396-scrolled)/20)+ 'deg) translate(0px,'+(-(1396-1026)/3)+'px)');
}
else if(scrolled >= 2000 && scrolled < 2197){
$('.car').css('-webkit-transform', 'rotate(' + (((1026-1396)/20)-((1396-2000)/20)+((2000-scrolled)/20))+ 'deg) translate(0px,'+(-(1396-1026)/3+((scrolled-2000)/3))+'px)');
}
else{
$('.car').css('-webkit-transform', 'rotate(' + 0+ 'deg)');
}
}
Fiddle with translation and rotation

jquery rotation not working in ie

Hi guys i got some code which is suppose to rotate a div and make it move up. Its working in all browsers apart from IE. Any help would be great.
function rotate(degree) {
$elie.css({
'-webkit-transform': 'rotate(' + degree + 'deg)',
'-moz-transform': 'rotate(' + degree + 'deg)',
'-o-transform': 'rotate(' + degree + 'deg)',
'-ms-transform': 'rotate(' + degree + 'deg)',
'transform': 'rotate(' + degree + 'deg)'
});
console.log(degree);
if (degree < 55) {
timer = setTimeout(function() {
rotate(++degree)
}, 10)
};
};
The code your supplied in the question should work in IE9.
The only reason I can think of for it not working is if your IE9 is actually rendering in IE8-compatibility mode.
This is actually quite a common problem (particularly for developers, as IE defaults to compatibility mode for sites on the local network, which generally includes your development server).
To check, open the dev tools menu (F12), and look at the top right; it should show you the browser mode. If it says anything other than "IE9 Standards", then you need to correct it. This annoying default can be switched off as follows:
Select the "Tools" menu,
Select Compatibility View Settings.
Un-tick the options that activate compatibility mode.
You might also want to add a meta tag to your page to force IE to use standards mode for other users:
<meta http-equiv="X-UA-Compatible" content="IE=Edge"/>
With these measures in place, your page should render in IE9 standards mode, and you should then be able to use the standard CSS rotation.
Hope that helps.
try
if($.browser.msie){
$elie.css({ msTransform: 'rotate(' + degree + 'deg)' });
}else{
$elie.css({
'-webkit-transform': 'rotate(' + degree + 'deg)',
'-moz-transform': 'rotate(' + degree + 'deg)',
'-o-transform': 'rotate(' + degree + 'deg)',
'-ms-transform': 'rotate(' + degree + 'deg)'
});
}
Could you tell what IE browser version you are using ? your code should work fine for IE9,
Try to add this in your css for the other versions of IE :
filter: progid:DXImageTransform.Microsoft.Matrix(sizingMethod='auto expand', M11=0.7071067811865476, M12=-0.7071067811865475, M21=0.7071067811865475, M22=0.7071067811865476); /* IE6,IE7 */
-ms-filter: "progid:DXImageTransform.Microsoft.Matrix(SizingMethod='auto expand', M11=0.7071067811865476, M12=-0.7071067811865475, M21=0.7071067811865475, M22=0.7071067811865476)"; /* IE8 */
so with your code it should be like below:
function rotate(degree) {
$elie.css({
'-webkit-transform': 'rotate(' + degree + 'deg)',
'-moz-transform': 'rotate(' + degree + 'deg)',
'-o-transform': 'rotate(' + degree + 'deg)',
'-ms-transform': 'rotate(' + degree + 'deg)',
'transform': 'rotate(' + degree + 'deg)',
'filter': 'progid:DXImageTransform.Microsoft.Matrix(sizingMethod="auto expand", M11=0.7071067811865476, M12=-0.7071067811865475, M21=0.7071067811865475, M22=0.7071067811865476)', /* IE7 Note this is the code for 45 degree */
'-ms-filter': "progid:DXImageTransform.Microsoft.Matrix(SizingMethod='auto expand', M11=0.7071067811865476, M12=-0.7071067811865475, M21=0.7071067811865475, M22=0.7071067811865476)"; /* IE8 Note this is the code for 45 degree */
});
console.log(degree);
if (degree < 55) {
timer = setTimeout(function() {
rotate(++degree)
}, 10)
};
references :
CSS3 transform: rotate; in IE9
CSS rotate property in IE

jquery rotate function not working

Hi guys at the moment i am trying to figure out how to rotate a div and make it stop at a loctation. I have had some help on this however iam not sure what iam doing wrong. Any help with the code would be great.
Thanks guys for the help
try change your javascript code to be like this:
$(window).load(function(){
var $elie = $("#super");
rotate(1);
function rotate(degree) {
$elie.css({
'-webkit-transform': 'rotate(' + degree + 'deg)',
'-moz-transform': 'rotate(' + degree + 'deg)',
'-o-transform': 'rotate(' + degree + 'deg)',
'-ms-transform': 'rotate(' + degree + 'deg)',
'transform': 'rotate(' + degree + 'deg)'
});
console.log(degree);
if (degree < 100) {
timer = setTimeout(function() {
rotate(++degree)
}, 1);
}}
});
Here the demo: http://jsfiddle.net/ongisnade/mq8Ar/
Look at here http://jsbin.com/uwunaw/4/edit
I'm adding var elie = null; as global var and put elie = $("#super"); in onReady of jQuery.
Like this
$(function () {
elie = $("#super");
rotate(1);
});
It's working now.

Categories

Resources