Requirements:
The week will start with Sunday and user
can see 3 days in the view the current day, next day and yesterday. So here it
will be like Saturday, Sunday, Monday and when user drag mouse scroll towards
down the day should change to next set of days like Sunday, Monday , Tuesday
and then Monday,Tuesday,Wednesday etc.. And finally when it reaches the last
day of the week it should start from the first day again. The same thing should
happen in the upward scroll also.
Solution:
HTML:
<div class="wheelNav">
<div class="shadow prev"></div>
<div class="shadow next"></div>
<div id="prev" class="wheelNav-item first prev">Saturday</div>
<div id="active" class="wheelNav-item active">Sunday</div>
<div id="next" class="wheelNav-item next">Monday</div>
</div>
JavaScript :
wheelNav = {
scrolling: false,
menu: document.getElementsByClassName("wheelNav")[0],
items: document.getElementsByClassName("wheelNav-item"),
next: function(prev,cur,next) {
document.getElementById("active").innerHTML =cur;
document.getElementById("next").innerHTML =next;
document.getElementById("prev").innerHTML =prev;
},
initialize: function() {
var itemArray=['Sunday','Monday','Tuesday','Wednesday','Thursday','Friday','Saturday'];
var maxIterationSize=itemArray.length-1;
var currentArrayIndex=0;
wheelNav.menu.addEventListener("wheel", function(event) {
var e = event;
clearTimeout(wheelNav.scrolling);
wheelNav.scrolling = setTimeout(function() {
e.defaultPrevented;
var direction = e.deltaY;
if (direction < 0)
{
if(currentArrayIndex===1){
currentArrayIndex=currentArrayIndex-1;
wheelNav.next(itemArray[maxIterationSize],itemArray[currentArrayIndex],itemArray[1]);
}
else if(currentArrayIndex===0)
{
wheelNav.next(itemArray[maxIterationSize-1],itemArray[maxIterationSize],itemArray[0]);
currentArrayIndex=maxIterationSize;
}
else
{
currentArrayIndex=currentArrayIndex-1;
wheelNav.next(itemArray[currentArrayIndex-1],itemArray[currentArrayIndex],itemArray[currentArrayIndex+1]);
}
}
if (direction > 0)
{
if(currentArrayIndex===maxIterationSize-1){
currentArrayIndex=currentArrayIndex+1;
wheelNav.next(itemArray[maxIterationSize-1],itemArray[currentArrayIndex],itemArray[0]);
}
else if(currentArrayIndex===maxIterationSize)
{
wheelNav.next(itemArray[maxIterationSize],itemArray[0],itemArray[1]);
currentArrayIndex=0;
}
else
{
currentArrayIndex=currentArrayIndex+1;
wheelNav.next(itemArray[currentArrayIndex-1],itemArray[currentArrayIndex],itemArray[currentArrayIndex+1]);
}
}
}, 20);
});
}
}
wheelNav.initialize();
CSS :
.wheelNav {
position: relative;
cursor: ns-resize;
width: 134px;
height: 192px;
overflow: hidden;
background: #ccc;
border: 2px solid black;
}
.wheelNav-item {
width: 134px;
height: 64px;
display: none;
background: white;
box-sizing: border-box;
text-align: center;
font-size: 24px;
padding: 16px;
}
.wheelNav-item.active {
display: block;
}
.wheelNav-item.prev, .wheelNav-item.next {
display: block;
-webkit-filter: blur(1px);
}
.wheelNav-item.last, .wheelNav-item.first {
background: #ccc;
}
.wheelNav .shadow.prev {
position: absolute;
z-index: 2;
top: 0;
left: 0;
width: 134px;
height: 64px;
background: linear-gradient(to bottom, rgba(0,0,0,0.3) 0%,rgba(0,0,0,0) 100%);
}
.wheelNav .shadow.next {
position: absolute;
z-index: 2;
bottom: 0;
left: 0;
width: 134px;
height: 64px;
background: linear-gradient(to top, rgba(0,0,0,0.3) 0%,rgba(0,0,0,0) 100%);
}
.wheelNav-item.up {
animation-name: up;
animation-duration: 0.5s;
}
.wheelNav-item.down {
animation-name: down;
animation-duration: 0.5s;
}
@keyframes up {
from {margin-top: -5px;}
to {margin-top: 0px;}
}
@keyframes down {
from {margin-top: 5px;}
to {margin-top: 0px;}
}
You can find the working example here
No comments:
Post a Comment