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

frame interactive states

Browse Source
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; box-sizing: border-box;
width:33.3%; width:33.3%;
text-align:center; text-align:center;
cursor:pointer;
} }
.frame__button[data-frame-active='false']:hover::before .frame__button:hover::before
{ {
content: " "; content: " ";
display: block; display: block;
@ -132,21 +133,32 @@
height: 7px; height: 7px;
background: black; background: black;
position: absolute; position: absolute;
top: -27px; top: -12px;
left: 50%; left: 50%;
transform: translateX(-5px) rotate(45deg); 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; 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> </style>
<div class="frame"> <div class="frame">
<div class="frame__image"> <div class="frame__image">
<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"/>
</div> </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__bar"><span></span></div>
<div class="frame__bracket"></div> <div class="frame__bracket"></div>
@ -161,8 +173,6 @@
var bar = inFrame.querySelector(".frame__bar"); var bar = inFrame.querySelector(".frame__bar");
var active = false; var active = false;
function activate(inButton) function activate(inButton)
{ {
var index = parseInt(inButton.getAttribute("data-frame-index")); var index = parseInt(inButton.getAttribute("data-frame-index"));
@ -170,16 +180,13 @@
var classY = index > 2 ? "frame__bar--down" : "frame__bar--up"; var classY = index > 2 ? "frame__bar--down" : "frame__bar--up";
bar.setAttribute("class", "frame__bar " + classX + " " + classY); bar.setAttribute("class", "frame__bar " + classX + " " + classY);
if(active) if(active)
{ {
active.setAttribute("data-frame-active", "false"); active.setAttribute("data-frame-active", "false");
} }
active = inButton; active = inButton;
inButton.setAttribute("data-frame-active", "true"); inButton.setAttribute("data-frame-active", "true");
}
function hover(inButton)
{
} }
for(var i=0; i<buttons.length; i++) for(var i=0; i<buttons.length; i++)
{ {