Sveskejuice
/
deprived-main-website
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Plane 3d is now visible

This commit is contained in:
BOTAlex 2024-01-06 02:55:59 +01:00
parent d3d71fab2d
commit 8f08919363
2 changed files with 33 additions and 51 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

40
src/App.svelte
View File

@ -28,6 +28,12 @@
<Parallax sections={10} config={{stiffness: 0.2, damping: 0.3}}>
<ParallaxLayer rate={0} span={3} style="background-color: #242424;" />
<StickyLayer offset={{ top: 0, bottom: 10 }} class="no-interact">
<div>
{scrollPos}
</div>
</StickyLayer>
<StickyLayer class="align-center" offset={{ top: 1, bottom: 6.5 }}>
<div class="horizontal" style="padding: 200px;">
<ZSpacer/>
@ -35,47 +41,19 @@
</div>
</StickyLayer>
<StickyLayer class="align-center" offset={{ top: 0, bottom: 6.5 }}>
<StickyLayer class="align-center no-interact" offset={{ top: 0, bottom: 6.5 }}>
<WeAreText/>
</StickyLayer>
<StickyLayer offset={{ top: 0, bottom: 10 }}>
<div>
{scrollPos}
</div>
</StickyLayer>
<StickyLayer offset={{ top: 5.4, bottom: 10 }} style="background-color: #242424;">
<StickyLayer class="no-interact" offset={{ top: 5.4, bottom: 10 }} style="background-color: #242424;">
<div class="align-center" style="font-size: 100px; padding-top: 200px;">
The deprived devs
</div>
</StickyLayer>
</Parallax>
<!--
<ScrollTextComponent />
<Parallax sections={3} config={{stiffness: 0.2, damping: 0.3}}>
<ParallaxLayer rate={0} span={3} style="background-color: orange;" />
<ParallaxLayer rate={-0.5}>
<img src={StartVideo} alt="Start video on main screen"/>
</ParallaxLayer>
<ParallaxLayer rate={1} offset={1.75}>
<img src='bird.jpg' alt='a bird'>
</ParallaxLayer>
<StickyLayer offset={{ top: 0.5, bottom: 2 }}>
<p>A description of a horse and a bird.</p>
</StickyLayer>
<ParallaxLayer rate={2} offset={2} style="background-color: lightblue;" />
</Parallax>
-->
</main>
<style>
</style>

44
src/lib/Cube3D.svelte
View File

@ -78,22 +78,27 @@
--cube-color: rgba(125, 125, 125, 1);
}
#plane3D {
--plane-size: 2500px;
#planeHolder {
width: 100%;
height: 100%;
position: absolute;
transform-style: preserve-3d;
}
width: var(--plane-size);
height: var(--plane-size);
#plane3D {
--plane-size: 2500px;
position: absolute;
width: var(--plane-size);
height: var(--plane-size);
transform:
rotateX( -90deg )
translateZ(calc(var(--plane-size) * 2))
translateX(calc(var(--plane-size) * -0.45));
-moz-transform:
rotateX( -90deg )
translateZ(calc(var(--plane-size) * 2))
translateX(calc(var(--plane-size) * -0.45));
transform:
rotateX( -90deg )
translateZ(calc(var(--plane-size) * -0.25))
translateX(calc(var(--plane-size) * -0.45));
-moz-transform:
rotateX( -90deg )
translateZ(calc(var(--plane-size) * -0.25))
translateX(calc(var(--plane-size) * -0.45));
}
.image {
@ -170,7 +175,12 @@
</style>
<div id="cube-3d-container">
<div id="cube3d" style="transform: rotateX({cubeRotY - cubeRotX}deg)">
<!-- Empty div for origin of plane object -->
<div id="planeHolder" style="transform: rotateX({cubeRotX}deg);">
<img id="plane3D" src={planeImg} alt="3D ground plane"/>
</div>
<div id="cube3d" style="transform: rotateX({cubeRotY + cubeRotX}deg)">
<div id="front" class="cube-sides">
<img src="{cubeSideImg}" class="image" style="width: 100%; position: absolute;" alt="cube side texture"/>
<p class="text" style="position: relative;">
@ -212,10 +222,4 @@
</div>
<!-- Empty div for origin of plane object -->
<div style="transform: rotateX(5deg);">
<img id="plane3D" src={planeImg} alt="3D ground plane"/>
</div>
</div>