', { class: 'fish' });
44 | var num = getRandom(4) + 1;
45 | $fish.addClass('fish-' + num);
46 | $fish.css('animation-delay', -getRandom(8000) + 'ms');
47 |
48 | // position fish
49 | var $fishAnchor = $('
', { class: 'fish-anchor' });
50 | $fishAnchor.css({
51 | left: getRandom(pondWidth),
52 | top: getRandom(pondHeight)
53 | });
54 | $fishAnchor.append($fish);
55 | $fishAnchors.push($fishAnchor);
56 | }
57 |
58 | // add them all at once to minimize DOM thrashing
59 | $pond.append($fishAnchors);
60 | }
61 |
62 | function getRandom(upper) {
63 | return Math.floor(Math.random() * upper);
64 | }
65 | });
66 |
--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
Animation Workshop
8 |
9 |
10 |
11 |
12 |
13 |
14 |
Animation Workshop
15 |
16 | Demos highlighting different CSS animation techniques and how some perform better than others.
17 |
18 |
19 | Source code is available in the GitHub repo.
20 | Questions? Hit me up @lonekorean.
21 |
22 |
26 |
30 |
34 |
38 |
42 |
43 |
44 |
45 |
--------------------------------------------------------------------------------
/fish-swimming-more/page.js:
--------------------------------------------------------------------------------
1 | var $pond, pondWidth, pondHeight;
2 |
3 | $(function() {
4 | var approach, isStaggered, $pond, pondWidth, pondHeight;
5 | init();
6 |
7 | function init() {
8 | approach = getParam('approach');
9 | isStaggered = getParam('stagger') === 'true';
10 |
11 | // setup pond
12 | $pond = $('.pond');
13 | $pond.addClass(approach + '-approach');
14 | if(getParam('will-change') === 'true') {
15 | $pond.addClass('will-change');
16 | }
17 | determinePondSize();
18 | $(window).on('resize', determinePondSize);
19 |
20 | // display count
21 | var count = getParam('count');
22 | $('h1').text(count + ' fish');
23 |
24 | // dump fish in
25 | for (var i = 0; i < count; i++) {
26 | spawnFish();
27 | }
28 | }
29 |
30 | function getParam(key) {
31 | var matches = location.search.match(new RegExp(key + '=([^&]+)'));
32 | return matches ? matches[1] : undefined;
33 | }
34 |
35 | function determinePondSize() {
36 | pondWidth = $pond.width();
37 | pondHeight = $pond.height();
38 | }
39 |
40 | function spawnFish() {
41 | // setup fish
42 | var $fish = $('
', { class: 'fish' });
43 | var num = getRandom(4) + 1;
44 | $fish.addClass('fish-' + num);
45 | positionFish($fish, -40, pondHeight / 2);
46 |
47 | // let fish go
48 | $pond.append($fish);
49 | var delay = isStaggered ? getRandom(5000) : 0;
50 | setTimeout(moveFish.bind(this, $fish), delay);
51 | }
52 |
53 | function moveFish($fish) {
54 | positionFish($fish, getRandom(pondWidth), getRandom(pondHeight));
55 |
56 | // let fish chill for 2 seconds for non-staggered demo
57 | var delay = isStaggered ? 5000 : 7000;
58 | setTimeout(moveFish.bind(this, $fish), delay);
59 | }
60 |
61 | function positionFish($fish, x, y) {
62 | switch (approach) {
63 | case 'bad':
64 | $fish.css({ 'left': x + 'px', 'top': y + 'px' });
65 | break;
66 | case 'good':
67 | $fish.css('transform', 'translate(' + x + 'px, ' + y + 'px)');
68 | break;
69 | }
70 | }
71 |
72 | function getRandom(upper) {
73 | return Math.floor(Math.random() * upper);
74 | }
75 | });
76 |
--------------------------------------------------------------------------------