Single pharallax depending on mouse position. (without margins) - javascript

So i just saw this [http://jsfiddle.net/X7UwG/][1]. So, when you move mouse to the left, everything is ok, but when you move mouse to the right there are white place. Is there any way not to have that. So just to do single pharallax effect without that white place (margins).
I want full width picture to just move a little depending on mouse position, as in example, but not to have that white place. Is that possible maybe with zooming image or somet

Use percentages for the x-axis and scale the image to 110%
Demo
$('#landing-content').mousemove(function(e){
var amountMovedX = (( e.pageX / window.innerWidth ) * 100) ;
var amountMovedY = (e.pageY * -1 / 6);
$(this).css('background-position', amountMovedX + '% ' + amountMovedY + 'px');
});

Related

Zoom function for an entire page

I am making a website with a multipage google-doc-like user interface and want to allow the user to "zoom" or change the scale of everything on the page with "zoom in" and "zoom out" buttons. At first I tried to achieve this by styling everything using rem units and using this js:
$(document).ready(function() {
var fontSize = parseInt($("html").css("font-size"), 10);
$("#in").on("click", function() {
fontSize += 0.5;
$("html").css("font-size", fontSize + "px");
});
$("#out").on("click", function() {
fontSize -= 0.5;
$("html").css("font-size", fontSize + "px");
});
});
This works, but the problem is that there are many divs on the page (laid out in a single vertical column), so if you are scrolled in the middle of the page and then click the zoom function, causing them all to resize, it produces a scrolling effect as the divs get smaller or bigger and therefore get pushed further up or down on the page. This is disorienting if the content you were viewing before zooming is no longer on the page after the zoom. Here is a codepen demonstrating this.
Next, I tried zooming using the transform scale() css property and adjusting the transform-origin to be centered on the user's scroll position:
var zoom = 1;
$("#in").on("click", function () {
var x = window.innerWidth / 2;
var y = $(window).scrollTop() + $(window).height() / 2;
zoom += 0.2;
$(".container").css({
transformOrigin: x + "px " + y + "px",
transform: "scale(" + zoom + ")",
});
});
$("#out").on("click", function () {
var x = window.innerWidth / 2;
var y = $(window).scrollTop() + $(window).height() / 2;
zoom -= 0.2;
$(".container").css({
transformOrigin: x + "px " + y + "px",
transform: "scale(" + zoom + ")",
});
});
The problem with this is that portions of the pages get cut off when you zoom as the viewport doesn't expand to accommodate the scaled divs. Here is a codepen to demonstrate this approach.
I've searched extensively and can't seem to find a good solution to the problem. I have also considered using the "zoom" css function but from what I understand this is not supported and behaves differently in different browsers.
Any ideas would be much appreciated! Thanks

Find the Points of Intersection of a Circle with a Line in Javascript

I'm trying to animate a given element to go around a pre-defined radius and I'm having trouble getting the position of the element at a Y point given.
I'm trying to find each point with the circle equation, but I can only get one point out of the two possible ones.
In Javascript, I use Math.sqrt( Math.pow(radius, 2) - Math.pow(y, 2) , 2) to get the point. assuming the center of the of the circle is 0,0.
but then I need to translate it to pixels on the screen since there are no negative pixels in positions on the browser.
All the sizing is relative to the window. so the radius, for example, is 80% of the height of the window in my tests.
Also, I'm trying to calculate what the distance of the element between each frame should be for the duration, but I'm not using it yet because I try to fix the issue above first.
This is what I have(a cleaned up version):
let height = window.innerHeight * 0.8,
radius = height / 2,
circumferance = (radius * 2) * Math.PI,
container = document.getElementById('container'),
rotating = document.querySelector('.rotating'),
centerX = radius - (rotating.offsetWidth / 2),
centerY = radius - (rotating.offsetHeight / 2),
duration = 10,
stepDistance = circumferance / 16;
// Setting the dimensions of the container element.
container.style.height = height + 'px';
container.style.width = height + 'px';
// return positive X of any given Y.
function getXOffset(y) {
return Math.sqrt( Math.pow(radius, 2) - Math.pow(y, 2) , 2);
}
// Setting the position of the rotating element to the start.
rotating.style.top = 0 + 'px';
rotating.style.left = centerX + 'px';
setInterval(() => {
let top = parseInt(rotating.style.top),
y = radius - top;
rotating.style.top = (top + 1) + 'px';
rotating.style.left = (centerX + getXOffset(y)) + 'px';
}, 16);
Here is a fiddle with a bit more code for trying to get the right amount of distance between points for a smoother animation(currently needs fixing, but it doesn't bother me yet.)
https://jsfiddle.net/shock/1qcfvr4y/
Last note: I know that there might be other ways to do this with CSS, but I chose to use javascript for learning purposes.
Math.sqrt would only return the positive root. You'll have to account for the negative value based on the application. In this case, you need the positive x value during the 1st half of the cycle and negative during the 2nd half.
To do that, you should implement a method to track the progress and reverse the sign accordingly.
Here is a sample. I modified upon yours.
edit:
Instead of Math.sqrt( Math.pow(radius, 2) - Math.pow(y, 2) , 2) You can use the full formula to get x if you do not want to assume origin as center, which in this case is Math.sqrt( Math.pow(radius, 2) - Math.pow((actualY - centerY), 2) , 2)
explanation:
The original equation (x-a)² + (y'-b)² = r²
becomes x = √(r² - (y'-b)²) + a
Assuming .rotating box have 0 width and height.
The variable equivalents in your code are centerX = a, centerY = b.
By assuming origin as center you're basically doing a pre-calculation so that your y value becomes the equivalent of (y'-b). Hence x = √(r² - y²) + a is valid.
At initial state top = 0
i.e (y'-b) => height - centerY.
In your code y = radius => height/2.
Now (height - centerY) being equal to (height/2) is a side effect of your circle being bound by a square container whose height determines the y value.
In other words, when you use origin as center, you are taking the center offsets outside of circle equation and handling it separately. You could do the same thing by using the whole formula, that is, x = √(r² - (y'-b)²) + a

HTML Body CSS Transform Scaling Up causing content to be removed

I am working on a project where I am using CSS transform to scale up the whole body of a page. After scaling up a bit, content from corners start becoming un-viewable because they are outside visible ranges. Is there a way for the content to still be viewable by scrolling vertically or horizontally using transform scaling?
I am currently using Javascript to scale up the body like so
document.body.style.transform = 'scale(1.5)';
However, this cuts off some content from pages. I need it to work as I continue scaling up from 1.0.
Try adjusting the transform-origin:
document.body.style.transformOrigin = 'top left';
document.body.style.transform = 'scale(' + scaleFactor + ')';
You may also need to adjust the width and height of the body to match the scaling.
var scaleFactor = 1.5;
document.body.style.transformOrigin = 'top left';
document.body.style.transform = 'scale(' + scaleFactor + ')';
document.body.style.width = 100 * scaleFactor + "%";
document.body.style.height = 100 * scaleFactor + "%";
A note concerning transforms. Transforms are imaginary and don't alter physical dimensions including x, y, width and height. So you'll have to manage these physical dimensions manually to match your "transform'd" dimensions in order to keep the scroll bars happy.

How to make the image on hover attach to the mouse correctly?

I'm having a problem where my image previews aren't attaching to the mouse correctly. The preview is way below the mouse when I hover over the image. I need to make it so that the image display must be 15px to the right of the mouse and 15px down below the mouse. How can I achieve that? (Needs to be strictly JavaScript.)
here is the fiddle:
https://jsfiddle.net/pgyt1qpg/3/
here is part of the code:
e.target.addEventListener('mousemove', function(f) {
var x = f.offsetX;
y = f.offsetY;
myElement.style.top = (y + 20) + 'px';
myElement.style.left = (x + 20) + 'px';
});
Preview of what the image is doing and how far away it is from the mouse
Change 26th line of your JS from the linked fiddle from
myElement.style.top = f.offsetY + 5 + 'px';
to
myElement.style.top = f.offsetY - parseInt(window.getComputedStyle(f.target).height) + 5 + 'px';
Why to subtract previewed image's height? Because you place the preview image below the previewed one.
See it working in updated fiddle.

jQuery-UI Resizable: scale all alsoResize elements in proportion with resizable div

I have a resizable div which is positioned over a selection of elements which have been set to alsoResize.
Visually, the resizable element is a bounding box for the alsoResize elements.
I want to be able to resize the alsoResize elements in proportion of the resizable div. UI's default behaviour makes each element have a fixed left and top position when resizing:
http://jsfiddle.net/digitaloutback/SrPhA/2/
But I want to adjust the left and top of each AR element to scale with the bounding box as it's resized.
I first thought this wouldn't be too much hassle by altering the alsoResize plugin. This is what I added to the resize: _alsoResize:
// Get the multipliers
var scaleX = self.size.width / os.width;
var scaleY = self.size.height / os.height;
newElW = ( parseInt(el.css('width')) * scaleX );
newElH = ( parseInt(el.css('height')) * scaleY );
newElL = ( parseInt(el.css('left')) * scaleX );
newElT = ( parseInt(el.css('top')) * scaleY );
el.css({ width: newElW, height: newElH, left: newElL, top: newElT });
As you'll see, the boxes lag somewhat:
http://jsfiddle.net/digitaloutback/SrPhA/4/
Something seems to be ballooning the figures and can't quite figure it out, any suggestions appreciated. Possibly discrepancy of decimal places between scripts & browser?
Maybe you need to rethink the structure..
You could insert the .lyr elements inside the .resizer element and position them inside it with percentage positions .. this way they will automatically resize while their container is changing size. (the plugin does not have to handle them)
demo at http://jsfiddle.net/SrPhA/65/
Update after comment
To de-couple the resizer from the alsoResize elements you will need to take a couple of things into consideration for the calculations.
Firstly, you need to use the starting dimensions/positions and not the current of the elements, so use start.width .height etc..
for the positioning you need to translate the element to the origin (in regards to distance from the resizer) scale the left/top and then re-translate back to where they were..
the final calculations become
newElW = start.width * scaleX;
newElH = start.height * scaleY;
newElL = ((start.left - op.left) * scaleX) + op.left;
newElT = ((start.top - op.top ) * scaleY) + op.top ;
It needs some more tinkering to handle the case were you scale the elements by dragging the top or left side of the resizer..
demo at http://jsfiddle.net/gaby/SrPhA/171/
Latest Update
to handle scaling in all directions use these helpers..
utils: {
west: function(start, op, scale, delta) {return ((start.left - op.left) * scale) + op.left + delta.left},
east: function(start, op, scale, delta) {return ((start.left - op.left) * scale) + op.left;},
south: function(start, op, scale, delta){return ((start.top - op.top ) * scale) + op.top; },
north: function(start, op, scale, delta){return ((start.top - op.top ) * scale) + op.top + delta.top; }
}
Working example with all updates at http://jsfiddle.net/gaby/SrPhA/324/
Did you mean to use + instead of *?
newElW = (parseInt(el.css('width')) + scaleX);
newElH = (parseInt(el.css('height')) + scaleY);
newElL = (parseInt(el.css('left')) + scaleX);
newElT = (parseInt(el.css('top')) + scaleY);
I had a little luck by setting the margin-top and margin-left for positioning and leaving the 'top' and 'left' attributes at default for animation.
http://jsfiddle.net/SrPhA/97/

Categories