リサイズ中にdivの高さが動的に変化する

Question

私はこのウェブサイトがどのように次のような効果をもたらしたのか解明しようとしています。

https://www.dezeynne.com/

ブラウザウィンドウのサイズを変更しながら、メインのdivは、高さを変更することにより、動的にしてもリサイズようです。

私はまた数学では悪いので、この素晴らしい効果の背後にあるアイデアを理解するのを手伝ってください。 視差がどのように働いているのか理解してもらえます。ブラウザウィンドウのサイズを変更しながらCSS/javascriptで背景の位置を変更するにはどうすればいいですか？

$(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 1

viewport unitsとお考えですか？

は設定しdiv

#main { 
 
background:#daa; 
 
height:50vw; 
 
color:#400; 
 
font-size:10vw; 
 
text-align:center; 
 
line-height:50vw; 
 
}

<div id="main">Hello</div