changing height of a div dynamically while resizing

Question

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());
   });
});

Learn about CSS Media Queries

user2182102
– user2182102

2017-08-15 19:51:20 +00:00
Commented Aug 15, 2017 at 19:51 — user2182102
– user2182102, Commented Aug 15, 2017 at 19:51

jayms · Accepted Answer · 2017-08-15 19:51:14Z

1

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

answered Aug 15, 2017 at 19:51

jayms

4,0282 gold badges13 silver badges18 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Mustafa Najjar Over a year ago

It works! but how can do this with javascript? and how can handle the paralax effect? Any idea would be helpful

jayms Over a year ago

Multiply the window's width with a ratio like maybe 0.5 and don't forget to add the unit, like +"px". The paralax effect could be done using background-position

Mustafa Najjar Over a year ago

ok thank you for your help. I'mark the question as solved and will be in touch if I have questions.

Collectives™ on Stack Overflow

changing height of a div dynamically while resizing

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related