動態調整div的高度，同時調整大小

我一直在試圖弄清楚這個網站如何產生以下效果，我無法找到答案。動態調整div的高度，同時調整大小

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

來源

2017-08-15 Mustafa Najjar

瞭解CSS媒體查詢 – 2017-08-15 19:51:20

您是否考慮過使用viewport units？

設置div到height:50vw;

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

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

來源

2017-08-15 19:51:14 jayms

它的工作原理！但如何使用JavaScript做到這一點？以及如何處理paralax效應？任何想法都會有所幫助 –

將窗口的寬度乘以0.5的比率，並且不要忘記添加單位，例如'+「px」'。可以使用[background-position]完成paralax效果（https://www.w3schools.com/cssref/pr_background-position.asp） – jayms

好的，謝謝你的幫助。如果我有問題，我認爲問題已解決，並會與您聯繫。 –

動態調整div的高度，同時調整大小

回答

相關問題