Skip to content

Instantly share code, notes, and snippets.

@bozzin

bozzin/all-side-scroll.markdown

Created December 3, 2019 20:00
Show Gist options
  • Save bozzin/975fe67478152b180bbf7e7ff522efbb to your computer and use it in GitHub Desktop.
Save bozzin/975fe67478152b180bbf7e7ff522efbb to your computer and use it in GitHub Desktop.
Download ZIP
ALL SIDE SCROLL
Raw
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no,minimum-scale=1">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<title>Aman Agarwal</title>
<!-- Font Awesome -->
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.3/css/all.css">
<!-- Bootstrap core CSS -->
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.2.1/css/bootstrap.min.css" rel="stylesheet">
<!-- Material Design Bootstrap -->
<link href="https://cdnjs.cloudflare.com/ajax/libs/mdbootstrap/4.7.0/css/mdb.min.css" rel="stylesheet">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.0/css/all.css" integrity="sha384-lZN37f5QGtY3VHgisS14W3ExzMWZxybE1SJSEsQp9S+oqd12jhcu+A56Ebc1zFSJ" crossorigin="anonymous">
</head>
<body style="overflow:hidden;">
<div style="overflow: hidden; ">
<div id="middlediv">
<div id="bottom" class="animated pulse infinite "><i class="fas fa-angle-double-down"></i></div>
<div id="left" class="animated pulse infinite delay-1s"><i class="fas fa-angle-double-left"></i></div>
<div id="top" class="animated pulse infinite delay-2s"><i class="fas fa-angle-double-up"></i></div>
<div id="right" class="animated pulse infinite delay-3s"><i class="fas fa-angle-double-right"></i></div>
</div>
<div id="topdiv">
<div id="topcenter" class="animated pulse infinite "><i class="fas fa-angle-double-down"></i></div>
</div>
<div id="bottomdiv">
<div id="bottomcenter" class="animated pulse infinite "><i class="fas fa-angle-double-up"></i></div>
</div>
<div id="rightdiv">
<div id="rightcenter" class="animated pulse infinite "><i class="fas fa-angle-double-left"></i></div>
</div>
<div id="leftdiv">
<div id="center" class="animated pulse infinite "><i class="fas fa-angle-double-right"></i></div>
</div>
</div>
<!-- JQuery -->
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!-- Bootstrap tooltips -->
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.4/umd/popper.min.js"></script>
<!-- Bootstrap core JavaScript -->
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.2.1/js/bootstrap.min.js"></script>
<!-- MDB core JavaScript -->
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/mdbootstrap/4.7.0/js/mdb.min.js"></script>
</body>
</html>
Raw
script.js
$('#left').click(function(){
$('#leftdiv').animate({
position:"absolute",
right:"0px"
})
$('#middlediv').animate({
position:"absolute",
left:"100%"
})
});
$('#center').click(function(){
$('#leftdiv').animate({
position:"absolute",
right:"100%"
})
$('#middlediv').animate({
position:"absolute",
left:"0"
})
});
$('#top').click(function(){
$('#topdiv').animate({
position:"absolute",
bottom:"0px"
})
$('#middlediv').animate({
position:"absolute",
top:"100%"
})
});
$('#topcenter').click(function(){
$('#topdiv').animate({
position:"absolute",
bottom:"100%"
})
$('#middlediv').animate({
position:"absolute",
top:"0",
bottom:"0"
})
});
$('#bottom').click(function(){
$('#middlediv').animate({
position:"absolute",
bottom:"100%",
top:"-100%"
})
$('#bottomdiv').animate({
position:"absolute",
top:"0"
})
});
$('#bottomcenter').click(function(){
$('#middlediv').animate({
position:"absolute",
top:"0",
bottom:"0"
})
$('#bottomdiv').animate({
position:"absolute",
top:"100%"
})
});
$('#right').click(function(){
$('#rightdiv').animate({
position:"absolute",
left:"0px",
})
$('#middlediv').animate({
position:"absolute",
right:"100%",
left:"-100%"
})
});
$('#rightcenter').click(function(){
$('#middlediv').animate({
position:"absolute",
right:"0",
left:"0"
})
$('#rightdiv').animate({
position:"absolute",
left:"100%"
})
});
Raw
style.css
html,body{
overflow: hidden !important;
}
#middlediv{
height: 100%;
width: 100%;
background: black;
background-image: linear-gradient(to top, #16222A 0%, #3A6073 100%);
position: absolute;
}
#topdiv{
height: 100%;
width: 100%;
background: red;
background-image: linear-gradient(to top, #9be15d 0%, #00e3ae 100%);
position: absolute;
bottom: 100%;
}
#bottomdiv{
height: 100%;
width: 100%;
background-image: linear-gradient(60deg, #64b3f4 0%, #c2e59c 100%);
position: absolute;
top: 100%;
}
#rightdiv{
height: 100%;
width: 100%;
background: blue;
background-image: linear-gradient(-60deg, #16a085 0%, #f4d03f 100%);
position: absolute;
left: 100%;
}
#leftdiv{
height: 100%;
width: 100%;
background: blue;
background-image: linear-gradient(to right, #92fe9d 0%, #00c9ff 100%);
position: absolute;
right: 100%;
}
#bottom{
color: white;
position: absolute;
bottom: 0px;
left: 50%;
font-size: 2em;
z-index: 111;
cursor: pointer;
}
#left{
color: white;
position: absolute;
bottom: 50%;
left: 10px;
font-size: 2em;
z-index: 111;
cursor: pointer;
}
#top{
color: white;
position: absolute;
left: 50%;
top: 10px;
font-size: 2em;
z-index: 111;
cursor: pointer;
}
#right{
color: white;
position: absolute;
right:0px;
bottom: 50%;
font-size: 2em;
z-index: 111;
cursor: pointer;
}
#topcenter{
color: white;
position: absolute;
bottom: 0px;
left: 50%;
font-size: 2em;
z-index: 111;
cursor: pointer;
}
#bottomcenter{
color: white;
position: absolute;
left: 50%;
top: 10px;
font-size: 2em;
z-index: 111;
cursor: pointer;
}
#rightcenter{
color: white;
position: absolute;
bottom: 50%;
left: 10px;
font-size: 2em;
z-index: 111;
cursor: pointer;
}
#center{
color: white;
position: absolute;
right:10px;
bottom: 50%;
font-size: 2em;
z-index: 111;
cursor: pointer;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment