108 lines
2.0 KiB
HTML
108 lines
2.0 KiB
HTML
<html>
|
|
<head><title>Animation</title>
|
|
<link rel="stylesheet" href="style.css"/>
|
|
</head>
|
|
<body>
|
|
<p>
|
|
This should be animating:
|
|
<hr/>
|
|
<div>
|
|
<div class="selectedBlock" id="0"></div>
|
|
<div class="block" id="1"></div>
|
|
<div class="block" id="2"></div>
|
|
<div class="block" id="3"></div>
|
|
<div class="block" id="4"></div>
|
|
<div class="block" id="5"></div>
|
|
<div class="block" id="6"></div>
|
|
<div class="block" id="7"></div>
|
|
<div class="block" id="8"></div>
|
|
<div class="block" id="9"></div>
|
|
</div>
|
|
|
|
<hr/>
|
|
|
|
The program for this is:
|
|
<blockquote>
|
|
<pre>
|
|
#lang whalesong
|
|
|
|
(require whalesong/resource
|
|
whalesong/web-world)
|
|
|
|
(define-resource index.html)
|
|
(define-resource style.css)
|
|
|
|
(define (tick w v)
|
|
(modulo (add1 w) 10))
|
|
|
|
|
|
;; pick-block: world view -> view
|
|
;; Focus the view on block i.
|
|
(define (pick-block v i)
|
|
(view-focus v (format "~a" i)))
|
|
|
|
|
|
(define (draw w v)
|
|
(define v1 (update-view-attr
|
|
(pick-block v w)
|
|
"class"
|
|
"selectedBlock"))
|
|
(define v2 (update-view-attr
|
|
(pick-block v1 (modulo (sub1 w) 10))
|
|
"class"
|
|
"offsetBlock"))
|
|
(define v3 (update-view-attr
|
|
(pick-block v2 (modulo (add1 w) 10))
|
|
"class"
|
|
"offsetBlock"))
|
|
(define v4 (update-view-attr
|
|
(pick-block v3 (modulo (- w 2) 10))
|
|
"class"
|
|
"block"))
|
|
(define v5 (update-view-attr
|
|
(pick-block v4 (modulo (+ w 2) 10))
|
|
"class"
|
|
"block"))
|
|
v5)
|
|
|
|
|
|
(big-bang 0
|
|
(initial-view index.html)
|
|
(on-tick tick)
|
|
(to-draw draw))
|
|
</pre>
|
|
</blockquote>
|
|
|
|
|
|
with <tt>style.css</tt>:
|
|
<blockquote>
|
|
<pre>
|
|
.block {
|
|
width : 80px;
|
|
height : 10px;
|
|
background-color : blue;
|
|
display: inline-block;
|
|
}
|
|
|
|
.selectedBlock {
|
|
width : 80px;
|
|
height : 10px;
|
|
background-color: navy;
|
|
display: inline-block;
|
|
}
|
|
|
|
.offsetBlock {
|
|
width : 80px;
|
|
height : 10px;
|
|
background-color: teal;
|
|
display: inline-block;
|
|
}
|
|
</pre>
|
|
</blockquote>
|
|
|
|
|
|
|
|
</p>
|
|
</body>
|
|
</html>
|