SethTrowbridge/devo-book
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

pad shifting

Browse Source
This commit is contained in:
TreetopFlyer 2021-09-01 14:19:29 -04:00
parent 3228c5e9c2
commit 1a78cf7c6c
1 changed files with 56 additions and 26 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

82
pad.html
View File

@ -1,72 +1,102 @@
<style> <style>
.window .window
{ {
position:relative; position:relative;
width:500px; width:500px;
border:5px solid black;
padding:20px; padding:20px;
border-bottom: none; border-bottom: none;
box-sizing:border-box; box-sizing:border-box;
} }
.bar .bar
{ {
position:relative; position:relative;
bottom:0; bottom:0;
left:0; left:0;
width:100%; width:100%;
height:21px; height:44px;
overflow:hidden; overflow:hidden;
} }
.bar.inverted
{
transform: translateY(16px) scaleY(-1);
}
.bar span .bar span
{ {
display: block; display: block;
position: absolute; position: absolute;
bottom: 0; top: -10.5px;
left: 50%; left: 50%;
width: 20px; width: 20px;
height: 21px; height: 20px;
border: 5px solid #000; border: 5px solid #000;
border-right-color: transparent;
border-bottom-color: transparent;
transform: translate(-50%, 20px) rotate(45deg); transform: translate(-50%, 20px) rotate(45deg);
transition: left 0.4s;
} }
.bar span::before, .bar span::after
.bar::before, .bar::after
{ {
content:" "; content: " ";
display: block; display: block;
position:absolute; position: absolute;
bottom:0; width: 1000px;
width:100%; height:0px;
border-top:5px solid black; border-top: 5px solid black;
transform:rotate(-45deg);
} }
.bar::before .bar span::before
{
bottom: -0.5px;
right: 20px;
transform-origin: right bottom;
}
.bar span::after
{
top: -4px;
left: 17px;
transform-origin: left top;
}
.bar--down
{
transform: scaleY(-1);
}
.bar--up
{
transform: scaleY(1);
}
.bar--1-3 span
{
left:16.6%;
}
.bar--2-3 span
{ {
margin-left:11px;
left:50%; left:50%;
} }
.bar::after .bar--3-3 span
{ {
margin-right:11px; left:83%;
right:50%;
} }
button button
{ {
display:inline-block; display:inline-block;
padding:20px 0px 20px 0px; padding:5px 0px 5px 0px;
box-sizing: border-box; box-sizing: border-box;
width:33%; width:33%;
} }
</style> </style>
<div class="window"> <div class="window">
<div class="bar"><span></span></div>
<div class="bar inverted"><span></span></div>
<img style="display:block; width:100%; height:auto;" src="https://via.placeholder.com/1024x512.png"/> <img style="display:block; width:100%; height:auto;" src="https://via.placeholder.com/1024x512.png"/>
<button>Front</button><button>Spine</button><button>Back</button> <button onclick="BarPos(1)">Front</button><button onclick="BarPos(2)">Spine</button><button onclick="BarPos(3)">Back</button>
<button>Intro</button><button>1 & 2</button><button>3 & 4</button>
<div class="bar"><span></span></div> <div class="bar"><span></span></div>
<button onclick="BarPos(4)">Intro</button><button onclick="BarPos(5)">1 & 2</button><button onclick="BarPos(6)">3 & 4</button>
</div> </div>
<script>
function BarPos(index)
{
var classX = "bar--" + (((index-1) % 3)+1) + "-3";
var classY = index > 3 ? "bar--down" : "bar--up";
document.querySelector(".bar").setAttribute("class", "bar " + classX + " " + classY);
}
</script>