Scaling a transformation based on window size
Question
I have an element that scales using transform when hovered over. This is great but scaling it on a static number isn't very useful if I want the website to be viewable on a variety of browser/screen sizes. The code looks like this right now:
<!DOCTYPE html>
<html>
<head>
<script>
{
const w = window.innerWidth/200;
const h = window.innerHeight/200;
}
</script>
<style>
.botright
{
width: 100px;
height: 100px;
top: 50%;
left: 50%;
position: absolute;
background: pink;
transition: transform 500ms ease-in-out;
transform-origin: left top;
display: flex;
align-items: center;
justify-content: center;
font-family: sans-serif;
}
.botright:hover
{
transform: scaleX(w) scaleY(h);
font-size: 0;
}
The notable bits are at the top and bottom of the code (the js and the :hover ). I'm unable to use the w or h constants created in the javascript anywhere else in the css and the js doesn't work inside or encompassing the :hover so I'm sort of at a loss on how to make the element expand to a size relative to the length and width of the view window.
A static number in the scale() would work if the element itself was scaled to the window size instead but that resulted in some other problems and more importantly, isn't what I'm looking to do.
The current functional version does use a simple number to scale the element by but because the element is always 100px x 100px (and I am intentionally using pixels because I always want the element to be a square when not hovered over no matter what), scaling just makes a bigger square.
I am looking for a way to scale the square so that when hovered over, it will always go exactly to the very edge of the available window space.
2 answers
solution1
2 2020-07-12 17:34:24
I think you can do it like this:
.box { background: #05273D; border-radius: 5px; height: 100px; width: 100px; margin: 100px; transition: transform 1s; }.box:hover { transform: scale(2); }
<div class='box'></div>
You can learn more from here: https://www.w3schools.com/css/css3_2dtransforms.asp
solution2
0 ACCPTED 2020-07-16 12:26:01
You cannot pass Javascript variables to a style tag like this. A solution would be to create the style tag with javascript and concatenate the calculated values.
<script> const w = window.innerWidth/200; const h = window.innerHeight/200; var styleTag = document.createElement("style"); styleTag.innerHTML = '.botright:hover { transform: scaleX(' + w + ') scaleY(' + h + '); font-size: 0; }'; document.head.appendChild(styleTag); </script> <style>.botright { width: 100px; height: 100px; top: 50%; left: 50%; position: absolute; background: pink; transition: transform 500ms ease-in-out; transform-origin: left top; display: flex; align-items: center; justify-content: center; font-family: sans-serif; } </style> <div class="botright">TEST</div>
However note that this will not be updated on window's resize. If you need so, you can put the js code in a function that you bind to window resize event. However if you so, your function should give an id to the style tag, and remove it if it exists before adding it again.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.