<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js" ></script>
<script src="scripts.js"></script>
<link rel="stylesheet" href="index.css" type="text/css">
<link href="https://fonts.googleapis.com/css?family=Mukta+Mahee" rel="stylesheet">
</head>
<body >
<div class="main" >
<div id="foto" onclick="myMove()">
<div id="curry" ><img src="curry.jpg" style="width: auto; height: 80vh;"></div>
<div id="westbrook"><img src="westbrook.jpg" style="width: auto; height: 80vh;"></div>
<div id="lebron"><img src="lebron.jpg" style="width: auto; height: 80vh;"></div>
<div id="harden"><img src="harden.jpg" style="width: auto; height: 80vh;"></div>
<div id="kobe"><img src="kobe.jpg" style="width: auto; height: 80vh;"></div>
<div id="wade"><img src="wade.jpg" style="width: auto; height: 80vh;"></div>
</div>
<div onclick="click_menu_button()">
<img src="get_up_left.png" id="menu_click_left">
</div>
<div onclick="click_menu_button()">
<img src="get_up_left.png" id="menu_click_left">
</div>
<div id="stars" >
<div class="best0" > Michael jordan</div>
<div class="best1"> Kobe Bryant</div>
<div class="best2"> Lebron James</div>
<div class="best3"> Stephen Curry</div>
<div class="best4"> Dwyane Wade</div>
<div class="best5"> Kevin Durant</div>
<div class="best6"> Shaquille O'Neal</div>
<div class="best7"> Scottie Pippen</div>
<div class="best8"> Shaquille O'Neal</div>
<div class="best9"> Russell Westbrook</div>
<div class="best10"> Allen Iverson</div>
<div class="best11"> Vince Carter</div>
<div class="best11"> Marcin Gortat </div>
</div>
</body>
</html>
body{
width:100%;
height:100vh;
margin:0;
padding: 0;
overflow: hidden;
}
#foto{
display:none;
position: absolute;
top:10vh;
left:29%;
overflow: hidden;
}
#curry,#westbrook,#lebron,#harden,#kobe,#wade{
float: left;
margin: 0;
padding: 0;
background-size: 100% 100%;
}
#curry{
animation:curry_animation 0.5s;
opacity:1;
margin-top:0;
}
@keyframes curry_animation{
from{opacity: 0;margin-top:-140vh;}
to{opacity:1; margin-top:0;}
}
#westbrook{
animation:westbrook_animation 0.5s;
opacity:1;
margin-top:0;
margin-right: 0.2vh;
}
@keyframes westbrook_animation{
from{opacity: 0;margin-top:200vh; opacity:0;}
to{opacity:1; margin-top:0; opacity:1;}
}
#lebron{
animation:lebron_animation 0.5s;
opacity:1;
margin-top:0;
}
@keyframes lebron_animation{
from{opacity: 0;margin-top:-180vh; opacity:0;}
to{opacity:1; margin-top:0; opacity:1;}
}
#harden{
animation:harden_animation 0.5s;
opacity:1;
margin-top:0;
margin-left:0.3vh;
}
@keyframes harden_animation{
from{opacity: 0;margin-top:200vh; }
to{opacity:1; margin-top:0; }
}
#kobe {
animation:kobe_animation 0.5s;
opacity:1;
margin-top:0vh;
margin-left:0.35vh;
}
@keyframes kobe_animation{
from{opacity:0;margin-top:-200vh; }
to{opacity:1; margin-top:0; }
}
#wade {
animation:wade_animation 0.5s;
opacity:1;
margin-top:0vh;
margin-left:0.35vh;
}
@keyframes wade_animation{
from{opacity:0;margin-top:600vh; }
to{opacity:1; margin-top:0; }
}
#foto{
width: 70%;
height: 100vh;
position: absolute;
background-color: rgb(255, 255, 255);
left: 13%;
top:8vh;
}
@keyframes fotos{
from{top:8vh;}
to{top:100%;}
}
.main{
width: 100%;
height: 100vh;
position: absolute;
background-color: rgb(255, 255, 255);
}
#stars{
width:12%;
height: auto;
z-index: 1;
text-align: center;
line-height:7vh;
position: absolute;
left:100%;
top:3vh;
}
@keyframes star
{
from{left: 120%;}
to{left: 87%;}
}
@keyframes star1{
from{left:87%;}
to{left:120%;}
}
#menu_click_left{
width:5vh;height:5vh;
position: absolute; top:4vh; right:3vh;
}
@keyframes guzik{
from{left:90%; }
to{left:84%;transform:rotate(180deg);}
}
@keyframes guzik1{
from{left:84%;transform:rotate(180deg); }
to{left:90%;}
}
.best0,.best1,.best2,.best3,.best4,.best5,.best6,
.best7,.best8,.best9,.best10,.best11 {
border:0.1vh solid black;
font-size:3vh;
height: 7vh;
border: solid 0.04vh rgb(255, 255, 255);
background-color: rgb(0, 0, 0);
color:white;
}
.best0:hover,.best1:hover,.best2:hover,.best3:hover,.best4:hover,.best5:hover,.best6:hover,
.best7:hover,.best8:hover,.best9:hover,.best10:hover,.best11:hover{
background-color: olivedrab;
}
setTimeout("myFunction()",100);
function myFunction(){
var x = document.getElementById("foto" );
if (x.style.display = "none") {
x.style.display = "block";
}
}
setTimeout("function_animation()",1900);
function function_animation(){
var x = document.getElementById('foto');
if(x.style.display="block"){
x.style.animation="fotos 0.7s forwards";
}
}
function click_menu_button(){
var x=document.getElementById('stars');
var z=document.getElementById('menu_click_left');
if(x.style.left="100%"){
if( x.style.animation="star 0.25s forwards"){
if(z.style.left="90%"){
z.style.animation="guzik 0.2s forwards";
}
}
}
}
Klikam w przycisk i wysuwa się pięknie menu. Nie bardzo na jakiej podstawie mam zrobić pętlę, by się wsuwało i wysuwało menu. Jak to zrobić ?
