0
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 5 years have passed since last update.

knockout.jsでAdventCalendarを作ってみた

Last updated at Posted at 2015-11-29

AdventCalendar.png


こういう1個1個の引き出しに、お菓子入ってるのあるよね

knockout.js Advent Calendar 2015もよろしくね!

code

html
<span>数字をクリックしてね</span>

<h1>Advent Calendar</h1>
<div class="cupboard">
    <div class="backpanel"></div>
    <table>
        <tbody data-bind="template:{foreach: weeks,as:'week'}">
            <tr data-bind="foreach:week">
                <td>
                    <div class="cell">
                        <div class="box {{done?'done':'active'}}">
                            <div class="front"><span data-bind="on.click:done=true">{{date.format('{d}')}}</span></div>
                            <div class="back"></div>
                            <div class="left"></div>
                            <div class="right" data-bind="style:{'background-position':($index()*20)+'% '+($parentContext.$index()*20)+'%'}"></div>
                            <div class="bottom"><span>{{note}}</span></div>
                        </div>
                    </div>
                </td>
            </tr>
        </tbody>
    </table>
</div>
javascript
function Day(date){
    this.note = '';
    this.done = false;
    this.date = date;
    ko.track(this);
}
function AdventCalendar(){
    var calendar = this;
    calendar.date = new Date();
    calendar.days = Date
        .range("12/1","12/25")
        .every('date')
        .map(function(date){
        	return new Day(date);
    	});
    calendar.weeks = Number
        .range(0,24)
        .every(5)
        .map(function(day){
        	return calendar.days.from(day).first(5)
    	});
    calendar.days
        .filter(function(day){
        	return day.date.isBefore(calendar.date)
    	})
    	.forEach(function(day){
        	day.done = true;
    	});
    
    ko.track(calendar);
}
var calendar = new AdventCalendar();
ko.punches.enableAll();
ko.applyBindings(calendar);
less
*{
    user-select:none;
}
h1{
    font-family: 'Fredericka the Great', cursive;
    margin: 0;
    margin-top:1em;
    width: 300px;
    text-align: center;
    color: green;
    text-shadow: 2px 2px gray;
}
.cupboard{
    position:absolute;
    left:10px;
    width: 300px;
    transform-style: preserve-3d;
    perspective: 1500px;
    perspective-origin: 50% 0;
    transform: rotateX(0deg);
    .backpanel{
        position:absolute;
        height:100%;
        width:100%;
        left:0;right:0;
        top:0;bottom:0;
        transform: translateZ(-51px);
        background: #664444;
    }
    .cell{
        
    } 
    th,td{
        border:solid 2px darkslategrey;
    }
}

.box{
    width: 50px;
    height: 50px;
    top: 0px;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
    transform-style: preserve-3d;
    transform: translateZ(100px);
    transform-origin: 25px 0px -25px;
    transition: transform ease-out 500ms;
    
    //animation: rotateY 5s linear infinite;
    transform: rotateY(180deg)
    &.active{
        transform: rotateY(0deg)
        //animation: pull-push 5s ease-in infinite;
    }
    &.done{
        animation: pull-push 3s ease-in 1;
        transform: rotateY(-90deg);
    }
    
    .front,
    .back,
    .left,
    .right,
    .bottom{
        width: 50px;
        height: 50px;
        position: absolute;
        top: 0px;
        bottom: 0;
        left: 0;
        right: 0;
        margin: auto;
        text-align: center;
        line-height: 50px;
        opacity: 0.8;
        border: solid 1px brown;
        background: url(https://yabumi.cc/15142c3178cd66b98092f9a6.png);
        &>span{
            display:block;
        }
    }
    .front{
        transform: translateZ(0px);
        &>span{
            background:rgba(red,0.75);
            cursor:pointer;
            color: white;
            font-size:30px;
            font-family: 'Fredericka the Great', cursive;
            font-weight:bold;
        }
    }
    .back{
        transform: translateZ(-50px);
    }
    .left{
        transform: rotatey(-90deg) translateZ(25px) translateX(-25px);
    }
    .right{
        transform: rotatey(90deg) translateZ(25px) translateX(25px);
        background: url(https://yabumi.cc/1514f980720f6480291db5c1.png);
        background-position: 0% 0%;
        background-size: 300px;
    }
    .bottom{
        width:50px;
        height:50px;
        background: url(https://yabumi.cc/15142c179f53b489f5fb929d.png);
        transform: rotateX(90deg) translateZ(-12.5px) translateY(-25px);
    }
}


@keyframes pull-push {
    0% {transform: translateZ(0px) rotateX(0deg)}
    10% {transform: translateZ(50px) rotateX(0deg)}
    30% {transform: translateZ(75px) translateY(25px) rotateX(-45deg)}
    60% {transform: translateZ(75px) translateY(25px) rotateX(-45deg) rotateY(0deg)}
    80% {transform: translateZ(50px) rotateX(0deg) rotateY(-90deg) }
    100% {transform: translateZ(0px) rotateX(0deg) rotateY(-90deg) }
}

Demo

0
1
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
0
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?