I have so many little snippets like this laying around, at first I didn’t remember writing this when I found it the other day… then it slowly came back to me.
Looks like this is another one from the jQuery days:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 | <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8" /> <title></title> <script src="http://code.jquery.com/jquery-latest.min.js"></script> <script> $(function(){ // meaning: http://www.ichingfortune.com/hexagrams.php // starting hex: ䷀ var flash = $('.flash'), syms = $('.syms'), num = $('.num'), start = 0x4DC0, total = 64, tick = 0; for (var i = 0; i < total; i++) { $('<div>', { html: '&#x' + (start + i).toString(16) }).appendTo(syms); } flash.html(syms.html()); flash.find('div').hide().first().show(); setInterval(function() { var index = tick % total, curr = flash.children().eq(index) .show() .siblings().hide(); curr = syms.children().eq(index) .css('color', 'red') .siblings().css('color', 'black'); num.text(index + 1); tick++; }, 600); }); </script> <style> * { font-family: "Helvetica Neue", Helvetica, sans-serif; } .syms div { position: relative; float: left; font-size: 3em; -webkit-transition: color 300ms ease-out; -ms-transition: color 300ms ease-out; -o-transition: color 300ms ease-out; transition: color 300ms ease-out; } .flash { position: relative; height: 6em; } .flash div { position: absolute; left: 0; top: 0; font-size: 6em; color: red; -webkit-transform: rotate(90deg); -ms-transform: rotate(90deg); -o-transform: rotate(90deg); transform: rotate(90deg); } </style> </head> <body> <h2>i ching : <span class="num">1</span></h2> <div class="flash"></div> <div class="syms"></div> </body> </html> |
The i-ching is a Chinese divinatory system - the “hexagrams” just look very cool, when I noticed they were available starting at `0×4DC0` I made this snippet… think ancient magic 8 ball.
wikipedia article:
https://en.wikipedia.org/wiki/I_Ching
It’s pretty fun to play with this online version:
https://www.eclecticenergies.com/iching/virtualcoins