オブジェクトを下にスクロールするにはどうすればよいですか？

Question

私はロビー・レオナルディのウェブサイトを見つけました。そして、キャラクターが風船で跳ねるウェブサイトの終わりになったら、私は興味をそそられました。私は下にスクロールしながらウェブページが上昇しているように見えるようにする方法を理解できません。私はテスト目的のためだけにその種のことをどうやって行うのか全部を見てきましたが、私の人生のためにチュートリアルやそれに関する情報を見つけることはできません。あなたがチュートリアルを知っている場合、または私が一般的な方向で私を指し示すことができれば、それは非常に高く評価されるでしょう。

http://www.rleonardi.com/interactive-resume/

Answer 1

基本的な考え方は、ウィンドウの幅と高さで固定された位置でのコンテナのdivを使用することです。移動する必要があるものはすべてコンテナdivに含まれています。その下には、ページをスクロールできるように、「世界」の幅と高さになる別のdivを持つことができます。 javascriptを使用すると、スクロールイベントに応答してコンテナ内の要素の位置を変更できます。非常に初歩的なデモは次のようになります。

https://codepen.io/thebrengun/pen/jaOQOj

HTML：

<div id="container"> 
    <div id="balloon"></div> 
    <div id="sky"></div> 
</div> 
<div id="spacer"></div> 

JS：

document.addEventListener("DOMContentLoaded", function(event) { 
    var sky = document.getElementById('sky'); 
    var spacer = document.getElementById('spacer') 
    drawClouds(sky); 
    sky.style.top = -1 * sky.offsetHeight + window.innerHeight + 'px'; 
    spacer.style.height = sky.offsetHeight + 'px'; 
    document.addEventListener('scroll', handleScroll(sky)); 
}); 

function handleScroll(sky) { 
    return function(e) { 
    var scrolled = document.documentElement.scrollTop; 
    sky.style.top = -1 * sky.offsetHeight + window.innerHeight + scrolled + 'px'; 
    }; 
} 

function drawClouds(canvas) { 
    const cloudFactory = (x, y) => { 
     var cloud = document.createElement('div'); 
     cloud.className = 'cloud'; 
     cloud.setAttribute('style', `left: ${x}px; top: ${y}px`); 
     return cloud; 
    }; 

    for(let i = 0; i < 20; i++) { 
     canvas.append(cloudFactory(i % 2 === 0 ? 45 : 450, 0)); 
    } 
} 

CSS：

body {margin: 0; padding: 0;} 

#container { 
    background: blue; 
    width: 100vw; 
    height: 100vh; 
    overflow: hidden; 
    position: fixed; 
} 

#sky { 
    position: relative; 
} 

.cloud { 
    position: relative; 
    width: 292px; 
    height: 184px; 
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='292' height='184'><path fill='#ffffff' d=' M 79.72 49.60 C 86.00 37.29 98.57 29.01 111.96 26.42 C 124.27 24.11 137.53 26.15 148.18 32.90 C 158.08 38.78 165.39 48.87 167.65 60.20 C 176.20 57.90 185.14 56.01 194.00 57.73 C 206.08 59.59 217.92 66.01 224.37 76.66 C 227.51 81.54 228.85 87.33 229.23 93.06 C 237.59 93.33 246.22 95.10 253.04 100.19 C 256.69 103.13 259.87 107.67 258.91 112.59 C 257.95 118.43 252.78 122.38 247.78 124.82 C 235.27 130.43 220.23 130.09 207.98 123.93 C 199.33 127.88 189.76 129.43 180.30 128.57 C 173.70 139.92 161.70 147.65 148.86 149.93 C 133.10 153.26 116.06 148.15 104.42 137.08 C 92.98 143.04 78.96 143.87 66.97 139.04 C 57.75 135.41 49.70 128.00 46.60 118.43 C 43.87 109.95 45.81 100.29 51.30 93.32 C 57.38 85.18 67.10 80.44 76.99 78.89 C 74.38 69.20 74.87 58.52 79.72 49.60 Z'/></svg>"); 
/* 
Cloud svg from (I removed the blue bg): https://upload.wikimedia.org/wikipedia/commons/d/d4/Cloud%2C_blue_background.svg 
*/ 
} 

#balloon { 
    position: relative; 
    top: 50%; 
    left: 50%; 
    width: 100px; 
    height: 100px; 
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='100' height='100' viewBox='0 0 64 64' enable-background='new 0 0 64 64'><path d='m52 22.5c0 11.3-8.8 24.4-19.8 24.4-10.9 0-19.8-13-19.8-24.4.1-11.3 8.9-20.5 19.8-20.5 11 0 19.8 9.2 19.8 20.5' fill='#ed4c5c'/><g fill='#94989b'><path d='m31.5 49.1c0 0 0-.1 0-.1 0 0 0 .1 0 .1'/><path d='m31.6 49.2c-.1 0-.1-.1 0 0'/></g><path d='m33 49.2h-1.5c0 1.8-.4 3.9-1.9 5.2-2.1 1.8-4.9.7-7.4.6-3-.1-5.6 1.2-7.7 3.2-.8.7-1.6 1.7-2.3 2.5-.8.9.3 1.9 1.1 1 1.5-1.8 2.6-3.1 4.6-4.3 2.6-1.5 5-.7 7.8-.6 3.2.2 6.1-1.4 7-4.7.2-.7.3-2 .3-2.9' fill='#b2c1c0'/><path d='m31.5 49c0-.1 0 0 0 0' fill='#94989b'/><path d='m30.8 48c1 0 1.9 0 2.9 0 .9 0 .9-1.3 0-1.3-1 0-1.9 0-2.9 0-.9.1-.9 1.3 0 1.3' fill='#b2c1c0'/><path d='m30.1 50c1.4 0 2.9 0 4.3 0 1.4 0 1.4-1.9 0-1.9-1.4 0-2.9 0-4.3 0-1.4-.1-1.4 1.9 0 1.9' fill='#ed4c5c'/></svg>"); 
/* 
https://upload.wikimedia.org/wikipedia/commons/d/dc/Emojione_1F388.svg 
*/ 
}