Mustafa Najjar Mustafa Najjar -3 years ago 110
CSS Question

changing height of a div dynamically while resizing

I've been trying to figure out how this website made the following effect and I can't find the answer.

https://www.dezeynne.com/

It seems that while resizing the browser window, the main div resized also with it dynamically by changing the height.

I'm also bad in Math, so please help me to understand the idea behind this awesome effect.
It would be also nice to help me figure out how the parallax is working, I mean how can I change the position of the background in css/javascript while resizing the browser window.

$(document).ready(function() {
var $window = $(window);
var $welcomeElement = $(".welcome");
var defaultHeight = $welcomeElement
console.log($welcomeElement);
$window.resize(function() {
// I'm stuck here at math as you see
$welcomeElement.css("height", ($window.width() - $window.height()) -
$welcomeElement.innerHeight());
console.log("Resized!");
console.log($window.height());
});
});

Answer Source

Have you considered using viewport units?

Set the div to height:50vw;

#main {
background:#daa;
height:50vw;
color:#400;
font-size:10vw;
text-align:center;
line-height:50vw;
}
<div id="main">Hello</div

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download