I'm wanting to write my own image zoom JS code (similar to http://www.elevateweb.co.uk/image-zoom/examples#inner-zoom) but the issue with this and all the other plugins is that it's relying on img tags whereas I want to use background images to give the same effect.
I have created a jsFiddle of where I am up to but I'm having issues trying to re-create the mouse movement. I thought, when you hover, it could scale the background image (or replace the url src via JS with a larger image) but I can't work out how to follow the edges of the image/container rather than the image follow the pointer.
https://jsfiddle.net/x69tk48s/
$('.inner').mousemove(function(e) {
$('.each-image .bg').offset({
left: e.pageX,
top: e.pageY
});
});
$('.inner').on('mouseleave', function() {
$('.each-image .bg').css({
left: 0,
top: 0
});
});
Any thoughts?
The math isn't quite right (yet) but here is a rough idea of how you can accomplish it: https://jsfiddle.net/3cebzudv/2/ (start by mousing-in in the top left corner to get the rough idea).
Basically, just scale the background image up on mouseenter and then reposition it with the backgroundPosition property on mousemove.
Related
I am currently working on a use case where I set a map as background to canvas and draw over it with zoom option also integrated to it. I am using scale to zoom in and after zoom left and top of the image is getting cropped which is eventually visible after zoom out.
I am loading canvas into a DIV with scroll and the expectation is to avoid image from getting cropped after scale in and scroll should dynamically increase during scale in.
Below is the sample snippet which I have written in plain HTML and JS. In case if anyone has the solution or workaround for the same, please help . Thanks in Advance
NOTE: Even if there is any plugin available in Angular, please comment, as I am using Angular real time and I have created a simple project to test the functionality
<html>
<head>
<style>
#canvasId{
background-image:url('https://www.hauteresidence.com/wp-content/uploads/2013/04/1049-Fifth-Avenue-PH3-floor-plan-high-res-e1366734485238-1024x792.jpg');
width: 1300px;
height:1300px;
background-repeat:no-repeat;
overflow : auto;
}
</style>
<script>
function myFunction(eventObj) {
var scale =document.getElementById("canvasId").getAttribute("scl");
if(scale==undefined)
scale = 0;
else
scale = parseInt(scale);
scale += eventObj.deltaY * -0.01;
scale = Math.min(Math.max(.125,scale),5);
document.getElementById("canvasId").setAttribute("scl",scale);
var check =document.getElementById("canvasId").getAttribute("scl");
if(scale>=1)
document.getElementById("canvasId").style.transform = "scale("+scale+","+scale+")";
}
</script>
<body>
<div style="width:700px;height:400px;overflow:scroll">
<canvas id ="canvasId" onWheel="myFunction(event)">
</canvas>
</div>
</body>
</html>
Temani's suggestion of transform-origin is exactly what i needed to solve the 'cropping' behavior.
By default, the transform-origin value is set to '50% 50% 0', or 'center center'. This means that the scaling or Zoom effect we apply emanates from the center of the target(image) and 'bleeds' over the left side of the div more and more.. it becomes unreachable by scrolling and seems 'cropped'.
Setting the transform-origin to:
transform-origin: 0% 0% 0px;
or transform-origin: top left 0px;
changes the anchor point from where the transform/scaling begins, so that it always scales from the left to right and the entire image remains viewable with scrolling.
i made a fiddle showing my result here...
https://jsfiddle.net/trentHarlem/hc5gs3nx/31/
and these were helpful with visualizing whats happening
https://www.w3schools.com/cssref/trycss3_transform-origin_3d_inuse.htm
https://css-tricks.com/almanac/properties/t/transform-origin/
I'm trying to implement script to have a div block follow my mouse, then animate it when hovering over certain links. The problem is when transforming it on hover of any objects, it starts to flash and become finicky.
Codepen: https://codepen.io/grayghostvisuals/pen/kepDb/
var $circle = $('.circle');
function moveCircle(e) {
TweenLite.to($circle, 0.7, {
css: {
left: e.pageX,
top: e.pageY
}
});
}
$(window).on('mousemove', moveCircle);
Any ideas?
It seems to be a z-index issue. Hover will try to check if your mouse is above your element, but it will be hovering the circle following your mouse. This pen shows how it works if you use a negative z-index for the circle, too.
You can however make your browser ignore the pointer events for the circle, removing the problem all together. I changed your pen to add the solution.
.element {
pointer-events: none;
}
I want to create custom cursor image, but it is limited to 32x32, while I need about 300x300 image. So it seems that I need to hide cursor cursor: none and create custom large div or image, that will be moving with invisible mouse.
The simplest implementation could be:
$(document).on('mousemove', function(e){
$('#custom-cursor').css({
left: e.pageX,
top: e.pageY
});
});
but I have some problems:
Performance (how should I implement moving div not with left-top properties)
Text selection jsfiddle cannot select text properly
Can anyone help me with this?
On modern browsers, you need to use pointer-event CSS property set to none:
--DEMO--
$(document).on('mousemove', function (e) {
$('#custom-cursor').css({
left: e.pageX,
top: e.pageY,
pointerEvents: 'none'
});
});
If Cursor and Text are in the same Color, add z-index: -1 to the cursor. So the cursor is behind the text and lets you select it.
But if the color is not equal the user will see, that the cursor is behind the text.
I have an image, the full image size is 1920x1080. When displayed on screen in one place it's 128x128, and you can move it to another part of the screen and it resizes to 50% using jQuery's .animate() function, then calls $(el).resizable(), but the resizable region is 1920x1080 so you have to scroll down, way past the image to get to the resize handles.
I created a custom function to animate the upscaling of the image and 'destroy' the resize, then after upscaling the image it recalls resize and still the handles are 1920x1080 regardless of how big the image is on the screen. I have even tried, after calling resizable on the image, to directly manipulate the CSS of the ui-wrapper to match the size of the image, but it always resets to 1920x1080. Below is a snippet of code that I'm using trying to directly manipulate the wrapper... unsuccessfully.
Anyone has any ideas how I can get resizable() to put the handles at the edge of the image regardless how big or small the image is, instead of placing them at the edges of the full sized image. Thank you!
el.resizable('destroy');
var myHeight = el.height(),
myWidth = el.width();
el.resizable({
aspectRatio: that.calculateAR(el)
})
el.parent('.ui-wrapper').css({
width: myWidth + "px",
height: myHeight + "px"
})
take a look at the first panel (in red) on the homepage.
http://www.boomtown.co.za/
I'd like to do something like this with an invisible image and only reveal parts of it as the mouse tracks over. Is this possible without using Flash?
This can be done quite easily using some css and background positioning with javascript. Here's 2 examples : http://jsbin.com/ococal/3
The source code is quite easy to understand and you can start working out with this.
You could do it by using a transparent png image that was a radial fade from transparent in the centre to semi-transparent at the edges and making it follow the mouse.
document.onmousemove=mousefollower
function mousefollower(e){
x = (!document.all)? e.pageX : event.x+document.body.scrollLeft;
y = (!document.all)? e.pageY : event.y+document.body.scrollTop;
document.getElementById('myImage').style.left = x + 'px';
document.getElementById('myImage').style.top = y + 'px';
}
Obviously you can use jQuery for this too, and set the mousemove function to occur only over a specific div. Also make sure the image you use is large enough (at least twice the size) so that the edges don't show up when you move to the far sides of the div (this means that for large areas you will need a huge image so it may get a big laggy). Put the image in the div and set overflow to none to clip anything that falls outside of the area.
It is possible yes, but only in modern browsers (chrome, safari, firefox, opera).
You would need to have two <div>'s
like so..
<div class="container">
<div class="revealer"></div>
</div>
and CSS like so
.container {
position: relative;
background: url("images/your-background.jpg");
}
.revealer {
position: absolute;
//set the mask size to be the size of the container
top: 0;
left: 0;
bottom: 0;
right: 0;
z-index: 1;
background: url("images/your-background-over-state.jpg");
//css3 image masks, this is not cross browser, see the demo for
// cross browser syntax
mask: url("images/mask-shape.png") no-repeat;
//make sure the mask is off screen at first, by setting the mask position
//to minus the width and height of your mask image
mask-position: -300px -300px
}
And the JS
window.addEventListener('load',function(){
var background = document.querySelector('.container'),
revealer = document.querySelector('.revealer');
background.addEventListener('mousemove', function(e){
//the minus represents the half the width/height of your mask image
// to make the reveal centred to the mouse.
var x = e.offsetX - 150,
y = e.offsetY - 150;
// move the position of the mask to match the mouse offsets
revealer.style.maskPosition = x+'px '+y+'px';
return false;
});
});
Because of the way this works you need to ensure that any other content in the .container has a higher z-index than the mask to ensure the content is not masked. To do this add relative positioning to the elements in the container
like so
.container *:not(.revealer) {
position: relative;
z-index: 2;
}
Images used in masks are images where the solid colours create the visible or fill area, and the transparent areas are the mask or cut out.
Demo with cross browser code