Skip to content

Instantly share code, notes, and snippets.

@asararai

asararai/index.html

Created March 29, 2022 10:04
Show Gist options
  • Save asararai/17322534a745a60f6a8e2844e8f0bbdc to your computer and use it in GitHub Desktop.
Save asararai/17322534a745a60f6a8e2844e8f0bbdc to your computer and use it in GitHub Desktop.
Download ZIP
One Page Animated Website
Raw
index.html
<html>
<head>
<title>animation effect</title>
</head>
<body>
<div class="menu">
<ul>
<li>
<span onmouseenter="hoverEnter(0)">
<i class="fa fa-home"></i>
</span>
</li>
<li>
<span onmouseenter="hoverEnter(1)">
<i class="fa fa-edit"></i>
</span>
</li>
<li>
<span onmouseenter="hoverEnter(2)">
<i class="fa fa-laptop"></i>
</span>
</li>
<li>
<span onmouseenter="hoverEnter(3)">
<i class="fa fa-tag"></i>
</span>
</li>
<span class="goo-index" id="goo-index"></span>
</ul>
</div>
<div class="content-wrapper">
<div id="screen_0" class="screen visible">
<h2>keep calm and happy</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<div class="image" style="background-image:url(https://images.unsplash.com/photo-1516483638261-f4dbaf036963?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=333&q=80)"></div>
</div>
<div id="screen_1" class="screen">
<h2>keep travelling</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<div class="image" style="background-image:url(https://images.unsplash.com/photo-1506773090264-ac0b07293a64?ixlib=rb-1.2.1&auto=format&fit=crop&w=376&q=80)"></div>
</div>
<div id="screen_2" class="screen">
<h2>World in 30 Days</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<div class="image" style="background-image:url(https://images.unsplash.com/photo-1514282401047-d79a71a590e8?ixlib=rb-1.2.1&auto=format&fit=crop&w=401&q=80)"></div>
</div>
<div id="screen_3" class="screen">
<h2>Help Other To Get The Same</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<div class="image" style="background-image:url(https://images.unsplash.com/photo-1467269204594-9661b134dd2b?ixlib=rb-1.2.1&auto=format&fit=crop&w=750&q=80)"></div>
</div>
</div>
</body>
</html>
Raw
one-page-animated-website.markdown
Raw
script.js
let gooIndex = document.getElementById('goo-index');
let hoverEnter = index =>{
gooIndex.style.top = 100*index+'px';
let allScreens = document.querySelectorAll('.screen');
allScreens.forEach(e=>{
e.classList.remove('visible')
})
let nowVisible = document.getElementById('screen_'+index);
nowVisible.classList.add('visible');
}
Raw
scripts
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
Raw
style.css
*,*:before,*:after{
box-sizing:border-box;
margin:0;
padding:0;
}
html,body{
width:100%;
height:100%;
font-family:tahoma;
}
.menu{
position:fixed;
left:0;
top:0;
width:100px;
background:#1fc058;
height:100%;
display:flex;
justify-content:center;
align-items:center;
overflow:hidden;
}
.menu ul{
list-style:none;
margin:0px;
width:100%;
position:relative;
padding:0px;
filter:url(#goo);
z-index:1;
}
.menu ul li{
width:100%;
margin:0;
padding:0;
display:flex;
justify-content:center;
align-items:center;
}
.menu ul span{
background:white;
border-radius:50px;
font-size:25pt;
width:80px;
height:80px;
margin:10px 0;
display:flex;
justify-content:center;
align-items:center;
z-index:1;
cursor:pointer;
transition:all 0.5s ease;
color:#333;
}
.menu ul .goo-index{
width:160px;
height:80px;
background:white;
position:absolute;
left:10px;
top:0;
z-index:-1;
border-radius:100px 0 0 100px;
transition:all 1s ease;
}
.menu ul .goo-index:before{
content:'';
position:absolute;
width:30px;
height:20px;
border-radius:20px 0 0 20px;
background-image:radial-gradient(circle at 10px 0, transparent 0 , transparent 20px , white 20px);
top:-20px;
left:60px;
}
.menu ul .goo-index:after{
content:'';
position:absolute;
width:30px;
height:20px;
border-radius:20px 0 0 20px;
background-image:radial-gradient(circle at 10px 20px, transparent 0 , transparent 20px , white 20px);
bottom:-20px;
left:60px;
}
.content-wrapper{
width:calc(100% - 100px);
position:relative;
left:100px;
height:100%;
overflow:hidden;
padding:50px;
display:flex;
justify-content:center;
}
.screen{
width:calc(100% - 100px);
max-width:800px;
height:100%;
position:absolute;
top:-100%;
background:white;
opacity:0;
display:grid;
grid-template-rows:50px auto auto;
grid-template-columns:100%;
grid-template-areas:'heading' 'text' 'image';
transition:all 1s ease;
transition-delay:0s;
}
.screen.visible{
top:50px;
opacity:1;
transition:all 1.5s ease;
transition-delay:0.8s ease;
}
.screen h2{
grid-area :heading;
}
.screen p{
margin-top:40px;
grid-area:text;
text-align:center;
justify-content:center;
align-items:center;
display:flex;
}
.image{
width:100%;
height:200px;
border-radius:10px;
background-size:cover;
background-position:center center;
}
h2{
font-size:25px;
position:relative;
text-align:center;
}
h2:after{
content:'';
position:absolute;
width:70px;
height:5px;
background:#1fc058;
left:calc(50% - 35px);
bottom:-15px;
}
Raw
styles
<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment