a/diagonal-scroll
1
1
Fork 0
Code Issues Pull requests Packages Projects Releases Wiki Activity

Add comments

Browse source
This commit is contained in:
Anthony Wang 2023-06-22 18:44:11 +00:00
parent 1528a2e740
commit cbdaca7c15
Signed by: a
GPG key ID: 42A5B952E6DD8D38
2 changed files with 7 additions and 4 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

1
flex.html
View file

@ -4,6 +4,7 @@
<meta charset="utf-8"> <meta charset="utf-8">
<title>flexozyme</title> <title>flexozyme</title>
</head> </head>
<!-- The black 180deg in the conic gradient ensures the colorful part of the gradient spans a 90deg arc -->
<body style="height:100vh;margin:0;display:flex"> <body style="height:100vh;margin:0;display:flex">
<div style="flex:2;background-image:conic-gradient(from 270deg at 100% 100%,red,orange,black 180deg)"></div> <div style="flex:2;background-image:conic-gradient(from 270deg at 100% 100%,red,orange,black 180deg)"></div>
<div style="flex:1;display:flex;flex-direction:column"> <div style="flex:1;display:flex;flex-direction:column">

10
index.html
View file

@ -5,14 +5,14 @@
<title>Diagonal Scroll</title> <title>Diagonal Scroll</title>
<style> <style>
div { div {
left: -500px; left: -500px; /* The div is shifted to the left so the left side of the p elements don't get clipped */
top: 0px; top: 0px;
position: fixed; position: fixed; /* Make the div fill the entire screen */
width: 1000px; width: 1000px;
height: 100vh; height: 100vh;
overflow: scroll; overflow: scroll; /* This adds the diagonal scroll bar */
transform-origin: top left; transform-origin: top left;
transform: skewX(45deg); transform: skewX(45deg); /* I originally used a rotate transform, but the math is way easier when using skewX */
font-family: DejaVu Sans, Noto Sans, Sans-Serif; font-family: DejaVu Sans, Noto Sans, Sans-Serif;
} }
p { p {
@ -23,6 +23,8 @@
transform: skewX(-45deg); transform: skewX(-45deg);
} }
span { span {
/* This adds a block of empty space at the bottom of the div */
/* Otherwise, if the screen is taller than its width, the text at the bottom will be to the right of the screen's right edge */
display: inline-block; display: inline-block;
height: calc(100vh - 100vw + 400px); height: calc(100vh - 100vw + 400px);
transform-origin: top left; transform-origin: top left;