dodo moh dodo moh - 2 years ago 62
Javascript Question

css animation full page with current view location

i have created an two animation with css html an css

<img onclick="show(this);" src="">

@keyframes shadow {
0% { opacity: 0;height: 0; transform : scale(0.1);}
100% { opacity: 1; height: 100%;transform : scale(1);}
@keyframes show {
0% { opacity: 0;margin: 20% auto;width: 20%;height: 20%;}
100% { opacity: 1;margin: 0; width: 100%;height: 100%;}
#show {
position: absolute;
left: 0;
bottom: 0;
text-align: center;
background-color: rgba(0, 0, 0, 0.76);
animation-name: show;
animation-duration: 2s;
animation-fill-mode: forwards;
z-index: 5;

position: relative;
margin: 0 auto;
animation-name: shadow;
animation-duration: 3s;
animation-fill-mode: forwards;
opacity: 0;
padding-top: 40px;
#show-item img{
border: 4px solid black;

position: relative;
float: right;
text-decoration: none;
color: #C8C8C8;
padding: 6px 10px;
background: rgba(0, 0, 0, 0.9);
border-radius: 26px;
height: 18px;
position: relative;
top: 25px;
left: 10px;
border: 2px solid #e0e0e0;
box-shadow: 0 0 2px black;

the problem is when user scroll the view is changed and div with position absolute stays up and box of showdow doesn't show on portion of the page down

Answer Source

Try position: fixed; for #show.


Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download