103 lines
1.9 KiB
HTML
103 lines
1.9 KiB
HTML
<style>
|
|
|
|
.window
|
|
{
|
|
position:relative;
|
|
width:500px;
|
|
padding:20px;
|
|
border-bottom: none;
|
|
box-sizing:border-box;
|
|
}
|
|
|
|
|
|
.bar
|
|
{
|
|
position:relative;
|
|
bottom:0;
|
|
left:0;
|
|
width:100%;
|
|
height:44px;
|
|
overflow:hidden;
|
|
}
|
|
.bar span
|
|
{
|
|
display: block;
|
|
position: absolute;
|
|
top: -10.5px;
|
|
left: 50%;
|
|
width: 20px;
|
|
height: 20px;
|
|
border: 5px solid #000;
|
|
border-right-color: transparent;
|
|
border-bottom-color: transparent;
|
|
transform: translate(-50%, 20px) rotate(45deg);
|
|
transition: left 0.4s;
|
|
}
|
|
.bar span::before, .bar span::after
|
|
{
|
|
content: " ";
|
|
display: block;
|
|
position: absolute;
|
|
width: 1000px;
|
|
height:0px;
|
|
border-top: 5px solid black;
|
|
transform:rotate(-45deg);
|
|
}
|
|
.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
|
|
{
|
|
left:50%;
|
|
}
|
|
.bar--3-3 span
|
|
{
|
|
left:83%;
|
|
}
|
|
|
|
|
|
button
|
|
{
|
|
display:inline-block;
|
|
padding:5px 0px 5px 0px;
|
|
box-sizing: border-box;
|
|
width:33%;
|
|
}
|
|
</style>
|
|
<div class="window">
|
|
<img style="display:block; width:100%; height:auto;" src="https://via.placeholder.com/1024x512.png"/>
|
|
<button onclick="BarPos(1)">Front</button><button onclick="BarPos(2)">Spine</button><button onclick="BarPos(3)">Back</button>
|
|
<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>
|
|
|
|
<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>
|