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

frame interactive states

This commit is contained in:
TreetopFlyer 2021-09-01 16:25:37 -04:00
parent 581da60029
commit f0e63330ce
1 changed files with 18 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

29
pad.html
View File

@ -123,8 +123,9 @@
box-sizing: border-box;
width:33.3%;
text-align:center;
cursor:pointer;
}
.frame__button[data-frame-active='false']:hover::before
.frame__button:hover::before
{
content: " ";
display: block;
@ -132,21 +133,32 @@
height: 7px;
background: black;
position: absolute;
top: -27px;
top: -12px;
left: 50%;
transform: translateX(-5px) rotate(45deg);
transition: top 0.4s, bottom 0.4s;
}
.frame__button[data-frame-index="0"]:hover::before, .frame__button[data-frame-index="1"]:hover::before, .frame__button[data-frame-index="2"]:hover::before
.frame__button--upper:hover::before
{
top:auto;
bottom:-23px;
bottom:-9px;
}
.frame__button[data-frame-active='true']:hover::before
{
bottom:auto;
top: -30px;
}
.frame__button--upper[data-frame-active='true']:hover::before
{
bottom: -26px;
top:auto;
}
</style>
<div class="frame">
<div class="frame__image">
<img style="display:block; width:100%; height:auto;" src="https://via.placeholder.com/1024x512.png"/>
</div>
<div class="frame__button">Cover</div><div class="frame__button">Back </div><div class="frame__button">Spine</div>
<div class="frame__button frame__button--upper">Cover</div><div class="frame__button frame__button--upper">Back </div><div class="frame__button frame__button--upper">Spine</div>
<div class="frame__bar"><span></span></div>
<div class="frame__bracket"></div>
@ -161,8 +173,6 @@
var bar = inFrame.querySelector(".frame__bar");
var active = false;
function activate(inButton)
{
var index = parseInt(inButton.getAttribute("data-frame-index"));
@ -170,16 +180,13 @@
var classY = index > 2 ? "frame__bar--down" : "frame__bar--up";
bar.setAttribute("class", "frame__bar " + classX + " " + classY);
if(active)
{
active.setAttribute("data-frame-active", "false");
}
active = inButton;
inButton.setAttribute("data-frame-active", "true");
}
function hover(inButton)
{
}
for(var i=0; i<buttons.length; i++)
{