I've made a tiny example below showcasing the behavior I currently get and the behavior I want.
// Rotated div
rotated.style.left = "50px";
rotated.style.top = "100px";
// Original "untouched" div
original.style.left = "50px";
original.style.top = "100px";
// Where the rotated div *should* be
expected.style.left = "-10px";
expected.style.top = "160px";
div {
position: absolute;
height: 80px;
width: 200px;
opacity: 0.5;
mix-blend-mode: overlay;
}
#rotated {
transform: rotateZ(90deg);
background: blue;
}
#original {
background: red;
}
#expected {
transform: rotateZ(90deg);
background: green;
}
<div id="rotated"></div>
<div id="original"></div>
<div id="expected"></div>
The red div is the "original" div that I have not applied any transformations to. The blue div is rotated by 90 degrees. The red and blue div are both shifted by the same values, but clearly their corners don't line up. The green div is the expected (desired) position of the blue div.
As you can see, the left and top is not really working as desired. I understand why it isn't, but I'm looking for some solutions or workarounds. I have searched online and found the transform-origin property but I've got some problems using it. This is because the elements I'm looking to move are created dynamically. They have unknown widths and heights, and on top of that, the widths and heights will change later on!
I know for this static example I can just add transform-origin: 40px 40px; to (which is just the height / 2 twice) div#rotated and it'll work, but in my project that means I'd have to set this property on every element and update it every time I update the element's dimensions.
I just don't think this is that great and I'm looking for one of two possible solutions:
A pure CSS solution that somehow gets the height of the selected element and uses that as the transform-origin (or just any pure CSS solution that works)
Using JavaScript to calculate the corrected position (in this static example, I should be able to get -10, 160 as the position of the element) every time I want to move an element.
--- update ---
This problem is further complicated because if the rotation is 180deg or 270deg then the transform-origin of 40px 40px no longer works. I'd have to compute a new transform-origin every time I want to move an element... This is something I'd really like to avoid...
You could add a translate in your expected transform
.wrapper {
position: relative;
margin: 200px 0 0 200px;
width: 200px;
height: 200px;
border: 1px solid black;
}
div {
position: absolute;
height: 80px;
width: 200px;
opacity: 0.5;
mix-blend-mode: overlay;
}
#rotated {
transform: rotateZ(90deg);
background: blue;
}
#original {
background: red;
}
#expected {
transform: rotateZ(90deg) translateY(-100%);
background: green;
transform-origin: 0 0;
}
<div class="wrapper">
<div id="rotated"></div>
<div id="original"></div>
<div id="expected"></div>
</div>
I put all in a wrapper with a border. Transform origin is from bounding box
second snippet with several transform rotated + translate
if I still didn't understand exactly the exact rotation you need, you can play with parameters translate:
translateY
translateX
translate with 2 values
always check the wrapper around it's the bounding box: 0 0 refers to top left
.wrapper1 {
position: relative;
top: 100px;
left: 100px;
width: 200px;
height: 200px;
border: 1px solid black;
}
.wrapper2 {
position: relative;
top: 250px;
left: 100px;
width: 200px;
height: 200px;
border: 1px solid black;
}
.wrapper3 {
position: relative;
top: 400px;
left: 100px;
width: 200px;
height: 200px;
border: 1px solid black;
}
.wrapper4 {
position: relative;
top: 550px;
left: 100px;
width: 200px;
height: 200px;
border: 1px solid black;
}
div {
position: absolute;
height: 80px;
width: 200px;
opacity: 0.5;
mix-blend-mode: overlay;
}
.rotated1 {
transform: rotateZ(90deg);
background: blue;
}
.rotated2 {
transform: rotateZ(90deg) translateY(-100%);
transform-origin: 0 0;
background: blue;
}
.rotated3 {
transform: rotateZ(90deg) translateY(-50%);
transform-origin: 0 0;
background: blue;
}
.rotated4 {
transform: rotateZ(90deg) translate(-50%, -50%);
transform-origin: 0 0;
background: blue;
}
.original {
background: red;
}
<div class="wrapper1">
<div class="rotated1"></div>
<div class="original"></div>
</div>
<div class="wrapper2">
<div class="rotated2"></div>
<div class="original"></div>
</div>
<div class="wrapper3">
<div class="rotated3"></div>
<div class="original"></div>
</div>
<div class="wrapper4">
<div class="rotated4"></div>
<div class="original"></div>
</div>
For now, I've solved this by computing the correct transform-origin from the angle of rotation (which is always 0, 90, 180, or 270). The code is in TypeScript:
export function computeTransformOrigin(element: HTMLElement) {
const { width, height, transform } = getComputedStyle(element);
if (transform && transform !== "none") {
const values = transform.match(/^matrix\((.+)\)$/)?.[1].split(", ");
if (values) {
element.style.translate = "";
const [a, b] = values.map(Number);
const angle = (Math.round(Math.atan2(b, a) * (180 / Math.PI)) + 360) % 360;
if (angle === 0 || angle === 90) return parseFloat(height) / 2 + "px " + parseFloat(height) / 2 + "px";
if (angle === 180) return "center";
element.style.translate = "0 " + (parseFloat(width) - parseFloat(height)) + "px";
return parseFloat(height) / 2 + "px " + parseFloat(height) / 2 + "px";
}
}
return "center";
}
For no rotation or 90 degrees, we can get the transform origin as the height of the element divided by 2 (40px 40px). With 180 degree rotation, we use center, and if it's 270, we have to do some extra magic. The transform origin is the same as 90 degrees but we also have to translate the element down by the width minus the height.
Then when I update the angle for an element, I only need to update the transform origin at the end:
set angle(v: number) {
this.#angle = v % 360;
this.element.style.transform = `rotateZ(${v}deg)`;
if (v === 180) {
this.name.style.transform = `rotateZ(${v}deg)`;
} else {
this.name.style.transform = "";
}
this.element.style.transformOrigin = computeTransformOrigin(this.element);
}
Related
I have a project where I want a div to appear as a large box and three more to appear underneath as smaller boxes and when you click a smaller box, it switches sizes and places with the large box using css transitions to make the movement and size change smooth. Right now I'm attempting to use jQuery and the positioning is not working at all. Here's an example of what I have so far:
https://jsfiddle.net/v3pmhawj/1/
$(function () {
let { left: x1, top: y1 } = $('.full-size-card').offset()
$('.inactive-sheets .card').on('click', function() {
let { left: x2, top: y2 } = $(this).offset()
let curr = $('.full-size-card')
let diffX = x2 - x1
let diffY = y2 - y1
$(this).css({
left: -diffX,
top: -diffY
})
$(this).addClass('full-size-card')
curr.css({
left: diffX,
top: diffY
})
curr.removeClass('full-size-card')
})
})
If anyone has suggestions on ways that involve other libraries or other techniques, I'm all ears. I'd like to be able to move the divs around in the DOM as well but as far as I can tell, you can't css-transition them if you do that since the only way (I know of) is to delete and re-add a copy of the element where you want it in the DOM.
You can create animation effect using transitions only. To achieve this you will have to define width and height of your containers as well as top and left position of bottom elements.
On click, you just have to exchange classes of element that will become small and of element that will become large.
Here is fiddle of an example:
https://jsfiddle.net/fkd3ybwx/210/
HTML
<div class="card-container">
<div class="card large">A</div>
<div class="card small">B</div>
<div class="card small">C</div>
<div class="card small">D</div>
</div>
CSS
.card-container {
position: relative;
}
.card {
transition: all ease 1s;
position: absolute;
font-size: 24px;
border: white 4px solid;
box-sizing: border-box;
cursor: pointer;
}
.small {
width: 100px;
height: 100px;
background: blue;
left: 0;
top: 300px;
}
.small ~ .small {
left: 100px;
background: green;
}
.small ~ .small ~ .small {
left: 200px;
background: yellow;
}
.large {
width: 300px;
height: 300px;
background: red;
left: 0px;
top: 0px;
}
JavaScript
const smallCards = document.querySelectorAll('.card');
smallCards.forEach((smallCard) => {
smallCard.addEventListener('click', (event) => {
const largeCard = document.querySelector('.large');
largeCard.className = "card small";
event.target.className = "card large";
});
});
Currently I have the situation as shown below in the snippet.
But now I want a triangle that is the same on every page. No matter how long the page is. So for example if the page is really long, then the triangle will at one point go out of the screen and there will be no more green background. (as shown here)
But the most important thing is that on every page the triangle/angle will be the same. How to do this?
$(document).ready(function() {
function waitForElement(elementPath, callBack) {
window.setTimeout(function() {
if ($(elementPath).length) {
callBack(elementPath, $(elementPath));
} else {
waitForElement(elementPath, callBack);
}
}, 300)
}
waitForElement("#leftdiv", function() {
// Initial background height set to be equal to leftdiv
$('#rightdiv').height($('#leftdiv').height());
// Initial triangle height set to be equal to leftdiv
$('#triangle').css('border-top', $('#leftdiv').height() + 'px solid transparent');
});
// When window resizes
$(window).resize(function() {
// Change height of background
$('#rightdiv').height($('#leftdiv').height());
// Change height of white triangle
$('#triangle').css('border-top', $('#leftdiv').height() + 'px solid transparent');
});
});
.container-general {
float: left;
position: relative;
background-color: black;
height: 500px;
width: 70%;
}
.background-general {
float: right;
position: relative;
/*height is set in javascript*/
width: 30%;
background-color: green;
}
#triangle {
position: absolute;
height: 0;
width: 0;
bottom: 0;
left: -1px;
border-left: 10vw solid white;
border-right: 0px solid transparent;
/*border-top is set in javascript*/
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container-general" id="leftdiv">
</div>
<div class="background-general" id="rightdiv">
<div id="triangle"></div>
</div>
You don't need JavaScript and jQuery at all for this, as long as you are willing to make minor changes to your markup:
Step 1: Update your markup
Wrap both your .container-general and .background-general with a common parent element
Use display: flex; overflow: hidden; on the parent. This has the effect of stretching the shorter background element to full height of .container-general
Step 2: Determine the fixed angle you want and set aspect ratio
Important note: If you want to keep the angle constant, you will need to know what angle you want. That will require one important trick: you want to keep .background-general the same aspect ratio in all cases, so the angle stays constant. Let's say you want it to be 60° (i.e. Math.Pi / 3): with some math, that means that the height of the .background-general should be this ratio relative to the width:
containerHeightRatioToWidth = Math.tan(Math.PI / 3) = 1.732052602783882...
There is a trick to preserve the aspect ratio: you simply set the padding-bottom of the background element. In this case, you want it to be padding-bottom: 173%); (we don't need absolute precision so we can drop the decimal points).
Here's a handy table on the height (in CSS percentages) you can use:
30deg: padding-bottom: 57%:
45deg: padding-bottom: 100%:
60deg: padding-bottom: 173%:
You can also precalculate the percentage in your browser console by pasting this:
var desiredAngleInDegrees = 60;
Math.tan(Math.PI * desiredAngleInDegrees / 180) * 100
The markup is structured as follows:
└─┬.wrapper
├──.container-general
└─┬.background-general
└─┬.background-general__background
├─::before (triangle)
└─::after (remaining fill)
To achieve the triangle effect, you have two approaches:
Step 3A: Use clip-path to trim the background element to look like a triangle
clip-path is very widely supported by modern browsers, with a notable exception for IE11 and Edge :/ This should do the trick: clip-path: polygon(100% 0, 0 0, 100% 100%);
.wrapper {
display: flex;
overflow: hidden;
}
.container-general {
background-color: black;
height: 500px;
width: 70%;
}
.background-general {
position: relative;
width: 30%;
background-color: green;
overflow: hidden;
}
.background-general__background {
position: absolute;
width: 100%;
height: 100%;
display: flex;
flex-direction: column;
}
/* Triangle */
.background-general__background::before {
flex-grow: 0;
content: '';
display: block;
width: 100%;
padding-bottom: 173%;
background-color: white;
clip-path: polygon(0 100%, 0 0, 100% 100%);
}
/* Extra fill */
.background-general__background::after {
flex-grow: 1;
content: '';
display: block;
background-color: white;
/* Needed to fix subpixel rendering */
margin-top: -1px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="wrapper">
<div class="container-general" id="leftdiv">
</div>
<div class="background-general" id="rightdiv">
<div class="background-general__background"></div>
</div>
</div>
Step 3B: Use an inline SVG as background image
For the greater browser compatibility, use an inline encoded SVG and stretch it to 100% width and 100% height of the parent.
We can create a simple 10×10px SVG of the following markup:
<svg xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="none" viewBox="0 0 10 10">
<path fill="green" d="M0,0 L10,0 L10,10 z"></path>
</svg>
Note: The preserveAspectRatio="none" is required so that we can freely stretch the SVG beyond its usual aspect ratio. For more information of how the <path>'s d attribute works, see this article: The SVG path Syntax: An Illustrated Guide
Then, all you need is to stuff this short SVG markup as data:image/svg+xml for the background image of the background container, i.e.:
background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="none" viewBox="0 0 10 10"><path fill="green" d="M0,0 L10,0 L10,10 z"></path></svg>');
See example below:
.wrapper {
display: flex;
overflow: hidden;
}
.container-general {
background-color: black;
height: 500px;
width: 70%;
}
.background-general {
position: relative;
width: 30%;
background-color: green;
overflow: hidden;
}
.background-general__background {
position: absolute;
width: 100%;
height: 100%;
display: flex;
flex-direction: column;
}
/* Triangle */
.background-general__background::before {
content: '';
display: block;
flex-grow: 0;
width: 100%;
padding-bottom: 173%;
background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="none" viewBox="0 0 10 10"><path fill="white" d="M0,0 L0,10 L10,10 z"></path></svg>');
background-size: 100% 100%;
}
/* Extra fill */
.background-general__background::after {
flex-grow: 1;
content: '';
display: block;
background-color: white;
/* Needed to fix subpixel rendering */
margin-top: -1px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="wrapper">
<div class="container-general" id="leftdiv">
</div>
<div class="background-general" id="rightdiv">
<div class="background-general__background"></div>
</div>
</div>
A simple "border triangle" bind to vw units might do:
body {
min-height: 2000px;
}
#triangle {
position: absolute;
top: 0px;
right: 0px;
border-top: 100vw solid #ff0000; /* The height of the triangle */
border-left: 30vw solid transparent; /* The width of the triangle */
}
<div id="triangle"></div>
A fiddle to play with.
I have a somewhat strange behaviour in Chrome and Safari. I have a scaled (transform: scale()) container with a video and other elements inside of it. At some scalings the absolute positioned elements with a high z-index disappears and does not come back again.
How can I fix this?
Note that I cannot give the video element a negative z-index and I need to use overflow: hidden;.
Example
I have made an example that scales the outermost container up and down. At a specifik scale value the element with class .on-top (and text "I should always be on top.") disappears. When scaling down again it suddenly appears.
Link to exmaple: https://jsfiddle.net/iafiawik/Lcox1ecc/
Conclusions
It seems like the size of the element matters. The larger I make it, the larger is the scale value before it disappears.
I have also tested to set transform: scale(1.4) with CSS directly on the element and the behaviour is the same.
The issue does not exist if I:
Replace the video tag with a div
Remove position: absolute; from siblings to .on-top (that is, .below)
Remove overflow: hidden; from .content
If I move .on-top so it is placed after the video tag in the document flow
(But of course none of these workarounds work for me in reality because of project specific reasons. I also cannot give the video element a negative z-index and I need to use overflow: hidden;.)
Suggested workarounds from the community (thanks!)
Give the video tag a negative z-index (can't do this because I sometimes have elements placed behind the video)
Remove overflow: hidden; (I can't remove overflow: hidden;)
Browsers
I have seen this issue in Chrome (Mac) and Safari (Mac).
Update 1
Seems like this bug report pretty much covers my problem. However, it does not provide a fix for it.
Update 2
I've answered my own question by providing my solution to this problem.
Update 3
There are a lot of answers coming in that either modify the z-index of the video or adds translateZ to the .on-top element. Demos have shown that both of those approaches do fix the issue.
However, since my HTML structure is the output from a visual HTML editor (long story ...), I do not know what elements will be there or if they should be in front, below or next to a video. Therefore I am looking for a solution that does not require changes to individual elements that are inside the scaled element.
It looks like a bug in Chrome. Notice that when you scale the image, the element inspector keeps telling you that the size of #scaled is 1024x768:
Where as in Firefox:
Now, apparently, Chrome uses the wrong size to conclude that .on-top is completely outside .content and hides it because of hidden overflow (it should not be doing this but apparently it is trying to optimize away any element that displays above a video). Examples:
Scale: 1.225
Parent width: 1254.40
Child left: 1254.40 - (100 + 90) * 1.225 = 1021.65
Result: less than 1024 (partially inside)
Scale: 1.230
Parent width: 1259.52
Child left: 1259.52 - (100 + 90) * 1.230 = 1025.82
Result: greater than 1024 (completely outside)
Unfortunately I could not find an elegant solution. Ideally you should revise your HTML markup and CSS, perhaps align the top element with left edge. As a last resort, you can move the elements more towards left using transparent border:
var goalScale = 140;
var startScale = 100;
var currentScale = 100;
var shouldScaleUp = true;
var container = document.getElementById("scaled");
var scaleInfo = document.getElementById("scale-info");
function step() {
container.style.transform = "scale(" + (currentScale / 100) + ")";
scaleInfo.innerText = "Scale: " + (currentScale / 100);
if (currentScale === goalScale) {
shouldScaleUp = false;
}
if (currentScale === startScale) {
shouldScaleUp = true;
}
if (shouldScaleUp) {
currentScale += 0.5;
} else {
currentScale -= 0.5;
}
window.requestAnimationFrame(step);
}
window.requestAnimationFrame(step);
.scale-info {
position: fixed;
left: 0;
top: 0;
}
#scaled {
background: #cccccc;
width: 1024px;
height: 768px;
position: fixed;
left: 200px;
top: 200px;
}
.content {
height: 100%;
overflow: hidden;
position: relative;
margin-left: auto;
margin-right: auto;
background: rgba(34, 34, 56, 0.2);
}
.below {
position: absolute;
width: 300px;
height: 300px;
right: 0px;
top: 100px;
background: purple;
z-index: 1;
opacity: 0.8;
}
.below-2 {
z-index: 3;
right: 100px;
}
.below-3 {
z-index: 4;
right: 400px;
}
.on-top {
position: absolute;
width: 50px;
right: 100px;
top: 150px;
background: pink;
z-index: 5;
padding: 20px;
/* a 200px border moves the element towards left */
border-left: 200px solid transparent;
background-clip: padding-box;
}
.on-top h1 {
font-size: 20px;
}
#video {
position: absolute;
z-index: 4;
width: 1024px;
height: 768px;
background: rgba(0, 0, 0, 0.4);
}
<div id="scale-info"></div>
<div id="scaled">
<div class="content">
<h2 class="below below-1"> I have z-index 1</h2>
<div class="on-top">
<h1> I should always be on top.<br> I have z-index 5</h1>
</div>
<h2 class="below below-2"> I have z-index 3</h2> <video id="video" src="https://www.w3schools.com/html/mov_bbb.mp4"></video>
<h2 class="below below-3"> I have z-index 4</h2>
</div>
</div>
Here you go: https://jsfiddle.net/Lcox1ecc/423/
You just need to add -webkit-transform: translateZ(0); to the .on-top class.
Happy Coding!
After spending a lot of time researching this problem and trying a lot of different approaches I've come to the conclusion that no solution fixes my problem. There are solutions that fix the problem if you are able to control the z-indexes of the elements that disappear, but I am unable to do so since the structure of the HTML is not known to be (it is the output of the HTML editor). I was looking for a solution that would not require changes to individual children to the scaled parent, but I have not found any so far.
This bug report pretty much covers my problem but it does not provide a fix for it.
I can confirm that this happens because the element is outside of the scaled containers original width and height:
The element is visible at scale(1.227) (red border indicates the original size of #scaled):
... but not at scale(1.228):
My solution is therefore to add another wrapping element outside the scaled element that is not scaled, but get its width and height properties updated according to its first child scale values. This element has overflow: hidden; and prevents elements from being visible.
This is not a perfect solution as one might experience a small gap between the scaled element and the outermost wrapping element (rounding issues), but it is the best I can do given the circumstances.
var goalScale = 140;
var startScale = 100;
var currentScale = 100;
var shouldScaleUp = true;
var container = document.getElementById("scaled");
var scaledContainer = document.getElementById("resized-container");
var scaleInfo = document.getElementById("scale-info");
function step() {
var contentWidth = 1024;
var contentHeight = 768;
container.style.transform = "scale(" + (currentScale / 100) + ")";
scaledContainer.style.width = contentWidth * ((currentScale / 100)) + "px";
scaledContainer.style.height = contentHeight * ((currentScale / 100)) + "px";
scaleInfo.innerText = "Scale: " + (currentScale / 100);
if (currentScale === goalScale) {
shouldScaleUp = false;
}
if (currentScale === startScale) {
shouldScaleUp = true;
}
if (shouldScaleUp) {
currentScale += 0.5;
} else {
currentScale -= 0.5;
}
window.requestAnimationFrame(step);
}
window.requestAnimationFrame(step);
#resized-container {
position: fixed;
width: 1024px;
height: 768px;
overflow: hidden;
border: 10px solid red;
top: 200px;
left: 200px;
}
#scaled {
background: #cccccc;
width: 1024px;
height: 768px;
position: absolute;
transform-origin: left top;
}
.content {
height: 100%;
position: relative;
margin-left: auto;
margin-right: auto;
background: rgba(34, 34, 56, 0.2);
}
.below {
position: absolute;
width: 300px;
height: 300px;
right: 0px;
top: 100px;
background: purple;
z-index: 1;
opacity: 0.8;
}
.below-2 {
z-index: 3;
right: 100px;
}
.below-3 {
z-index: 4;
right: 400px;
}
.on-top {
position: absolute;
width: 50px;
right: -30px;
top: 150px;
background: pink;
z-index: 5;
padding: 20px;
}
.on-top h1 {
font-size: 20px;
}
#video {
position: absolute;
z-index: 4;
width: 1024px;
height: 768px;
background: rgba(0, 0, 0, 0.4);
}
<div id="resized-container">
<div id="scaled">
<div id="scale-info">
</div>
<div class="content">
<h2 class="below below-1">
I have z-index 1
</h2>
<div class="on-top">
<h1>
I should always be on top.<br /> I have z-index 5
</h1>
</div>
<h2 class="below below-2">
I have z-index 3
</h2>
<video id="video" src="https://www.w3schools.com/html/mov_bbb.mp4"></video>
<h2 class="below below-3">
I have z-index 4
</h2>
</div>
</div>
</div>
One approach, if you can modify a bit your html, is wrap your problematic elements in a container that is the same size as the video and container, with the proper z-index. That way you would have clear layers of the same size and positions, into which you can position more complex elements. Like this for example:
<div id="top-container">
<div class="on-top">
<h1>
I should always be on top.<br /> I have z-index 5
</h1>
</div>
</div>
#top-container {
width: 100%;
height: 100%;
position: absolute;
z-index: 5;
}
https://jsfiddle.net/06oykj8o/4/
I made this workaround by puttingz-index:-1; on video.
https://jsfiddle.net/Lcox1ecc/312/
I really like the answer from Salman A.
The only thing that comes to mind, would be rewriting with position: relative.
But I don't know if that is an option.
I stumbled across something similar to this last week with positioning absolute elements and transforms...
I dunno if this will help you out but here is a link.
CSS transform: translate moves postion:fixed inner Div
In the end I fixed it by using a transform: translateX(none) vs translateX(0).
Super strange behavior for sure, but the link gives some more links to help make things more clear - as in its behaving per spec.
It is happening because of overflow is hidden.Here is working link
https://jsfiddle.net/Lcox1ecc/322/
.content {
overflow:visible;
}
It might be late but just posting in case somebody finds it helpful.
Add an empty div under the parent container element with transform animation and nothing will disappear anymore. The animation does not do anything but it forces the browser to render all the elements using hardware acceleration.
<div class="emptydiv"></div>
.emptydiv{
transform:scale(1);
animation:fix 3s infinite;
}
#keyframes fix{
50%{
transform:scale(1);
}
}
In the following snippet, I am trying to achieve an effect where the div which appears in the middle of the visible scroll section is at full scale scale(1); and the other div's scale falloff towards scale(0); as they approach the edges.
I have drawn a debug box in the middle where the full scale div should appear.
var viewport = {
x: $("#scroll").scrollLeft(),
width: $("#scroll").width(),
}
$("#scroll").scroll(function() {
viewport.x = $("#scroll").scrollLeft();
recalculateScale();
});
recalculateScale();
function recalculateScale() {
$("#example > div").each(function() {
let middleOfThis = ($(this).position().left + ($(this).width() * 0.5)); // calculate from the middle of each div
let scale = Math.sin(middleOfThis / $("content").width());
$(this).css('transform', 'scale(' + scale + ')');
});
}
content {
position: relative;
display: block;
width: 500px;
height: 100px;
}
content::after {
content: '';
position: absolute;
display: block;
width: 20%;
height: 100%;
left: 50%;
top: 0;
transform: translateX(-50%);
box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.5);
}
#scroll {
display: block;
width: 100%;
height: 100%;
overflow-x: scroll;
border: 1px solid #000;
}
#example {
display: block;
width: 200%;
height: 100%;
font-size: 0;
overflow: none;
}
#example>div {
display: inline-block;
width: 10%;
height: 100%;
background-color: #f00;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<content>
<div id="scroll">
<section id="example">
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</section>
</div>
</content>
Currently the scale is spanning from far left to right of #example. I know I need to factor the viewport dimensions into the equation before Math.sin is evaluated, I just can't get it quite right.
Note: no arrow functions because I have to target IE11.
Two issues:
While .position().left returns the rendered position of the element after scaling, .width() returns the element's width without taking the scaling into account. Obviously such different way of measurement will lead to a wrong calculation of the middle point. Use .getBoundingClientRect().width instead: that will take the current scaling into account
When using trigonometric functions, you need to make sure the argument represents an angle expressed in radians. In your code, the value ranges from 0 to 1, while the sine takes its maximum value not at 0.5, but at π/2. So you should perform a multiplication with π to get the desired result.
Here is the adapted code:
var viewport = {
x: $("#scroll").scrollLeft(),
width: $("#scroll").width(),
}
$("#scroll").scroll(function() {
viewport.x = $("#scroll").scrollLeft();
recalculateScale();
});
recalculateScale();
function recalculateScale() {
$("#example > div").each(function() {
// 1. Use different way to read the width: this will give the rendered width
// after scaling, just like the left position will be the actually rendered
// position after scaling:
let middleOfThis = $(this).position().left
+ this.getBoundingClientRect().width * 0.5;
// 2. Convert fraction to a number of radians:
let scale = Math.sin(middleOfThis / $("content").width() * Math.PI);
$(this).css('transform', 'scale(' + scale + ')');
});
}
content {
position: relative;
display: block;
width: 500px;
height: 100px;
}
content::after {
content: '';
position: absolute;
display: block;
width: 20%;
height: 100%;
left: 50%;
top: 0;
transform: translateX(-50%);
box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.5);
}
#scroll {
display: block;
width: 100%;
height: 100%;
overflow-x: scroll;
border: 1px solid #000;
}
#example {
display: block;
width: 200%;
height: 100%;
font-size: 0;
overflow: none;
}
#example>div {
display: inline-block;
width: 10%;
height: 100%;
background-color: #f00;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<content>
<div id="scroll">
<section id="example">
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</section>
</div>
</content>
NB: Because of floating point precision limitations, the calculation of the mid points could slide away with little fractions. This will be so tiny, that it should not make a difference in actual pixel distance, but it would not hurt to pre-calculate the centres of the elements, so that you always use the same value.
I am trying to calculate radius of a circle using javascript. I have following section with css
.circle {
position: absolute;
width: 100px;
height: 100px;
border-radius: 70px;
background: red;
}
<section class="circle"></section>
As the width and height of this circle is 100x100. How can I calculate its radius?
Since the radius is just half of the diameter, this is easy. The diameter is 100px, per width and height. Hence, radius is 100px / 2 = 50px.
While you could set the radius relatively by border-radius: 50%, you could simply divide the width/height of the box by 2 to get the radius.
For instance:
var circle = document.querySelector('.circle'),
radius = circle.offsetWidth / 2;
circle.innerHTML = "Radius: " + radius + "px";
.circle {
position: absolute;
width: 100px;
height: 100px;
border-radius: 50%; /* I don't know if you really need to get the value of this */
background: red;
line-height: 100px;
text-align: center;
}
<section class="circle"></section>
If you just need to set a radius to make a perfect circle, use 50% radius. This way it doesn't depend on width/height and you don't need javascript:
.circle {
position: absolute;
width: 100px;
height: 100px;
border-radius: 50%;
background: red;
}
<section class="circle"></section>