This sliding demo will show how to scroll all sides. Up, down, left, right scroll effects created using CSS, HTML and JavaScript.
Demo developed by Aman Agarwal and created on January 30, 2019.
Find the demo below
See the Pen ALL SIDE SCROLL by Aman Agarwal (@agarwalamn) on CodePen.
Find the code below
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>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;
}JavaScript
$('#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%"
})
});