http://zurassic.com/ann/Recent content in Ann on zurassicHugoen-usSun, 27 Nov 2016 00:00:00 +0000http://zurassic.com/ann/abc/Sun, 27 Nov 2016 00:00:00 +0000http://zurassic.com/ann/abc/<script src="https://cdnjs.cloudflare.com/ajax/libs/howler/2.2.4/howler.min.js"></script> <script> const ALPHABET = 'abcdefghijklmnopqrstuvwxyz'.split(''); const EFFECTS = [ 'hvr-buzz', 'hvr-pulse', 'hvr-wobble-horizontal', 'hvr-wobble-to-bottom-right', 'hvr-wobble-to-top-right', 'hvr-wobble-top', 'hvr-wobble-bottom', 'hvr-wobble-skew' ]; let capital = false; const objects = {}; function createButton(char) { const btn = document.createElement('button'); btn.id = 'sound-' + char; btn.className = 'column ui voice button ' + EFFECTS[Math.floor(Math.random() * EFFECTS.length)]; btn.textContent = char; btn.addEventListener('click', () => { objects[char].sound.play(); }); return btn; } function createSound(char) { return new Howl({ src: ['https://s3-us-west-1.amazonaws.com/blog.zurassic.com/abc/' + char + '.m4a'], html5: true, preload: false, onplay() { objects[char].button.classList.add('playing'); }, onend() { objects[char].button.classList.remove('playing'); } }); } function shuffle(arr) { for (let i = arr.length - 1; i > 0; i--) { const j = Math.floor(Math.random() * (i + 1)); [arr[i], arr[j]] = [arr[j], arr[i]]; } return arr; } document.addEventListener('DOMContentLoaded', () => { const board = document.getElementById('board'); ALPHABET.forEach(char => { objects[char] = { sound: createSound(char), button: createButton(char) }; board.appendChild(objects[char].button); }); document.addEventListener('keydown', e => { if (e.repeat) return; const char = e.key.toLowerCase(); if (objects[char]) objects[char].button.click(); }); document.getElementById('toggle').addEventListener('click', () => { capital = !capital; ALPHABET.forEach(char => { objects[char].button.textContent = capital ? char.toUpperCase() : char; }); }); document.getElementById('random').addEventListener('click', () => { board.append(...shuffle(Array.from(board.children))); }); }); </script> <style> #board { margin-top: 1em; } .voice.button { margin: 10px; font-size: 4em; } @media (max-width: 480px) { .voice.button { font-size: 1.6em; margin: 4px; } } @keyframes hvr-buzz { 50% { transform: translateX(3px) rotate(2deg); } 100% { transform: translateX(-3px) rotate(-2deg); } } .hvr-buzz { display: inline-block; vertical-align: middle; } .hvr-buzz.playing { animation: hvr-buzz 0.15s linear infinite; } @keyframes hvr-pulse { 25% { transform: scale(1.1); } 75% { transform: scale(0.9); } } .hvr-pulse { display: inline-block; vertical-align: middle; } .hvr-pulse.playing { animation: hvr-pulse 1s linear infinite; } @keyframes hvr-wobble-horizontal { 16.65% { transform: translateX(8px); } 33.3% { transform: translateX(-6px); } 49.95% { transform: translateX(4px); } 66.6% { transform: translateX(-2px); } 83.25% { transform: translateX(1px); } 100% { transform: translateX(0); } } .hvr-wobble-horizontal { display: inline-block; vertical-align: middle; } .hvr-wobble-horizontal.playing { animation: hvr-wobble-horizontal 1s ease-in-out 1; } .hvr-wobble-to-bottom-right, .hvr-wobble-to-top-right, .hvr-wobble-top, .hvr-wobble-bottom, .hvr-wobble-skew { display: inline-block; vertical-align: middle; } </style> <div class="center aligned ui header"> <h1>Bella's ABC</h1> <div class="sub header"><time datetime="2016-11-27">2016-11-27</time></div> </div> <blockquote> <p>I remember several years ago when I was doing Windows development I read about <a href="http://www.hanselman.com/" target="_blank">Scott Hanselman</a>'s WPF project <a href="http://www.hanselman.com/blog/IntroducingBabySmashAWPFExperiment.aspx" target="_blank">Baby Smash</a> for his kids.</p>http://zurassic.com/ann/vote-2015/Mon, 01 Jan 0001 00:00:00 +0000http://zurassic.com/ann/vote-2015/<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/nanogallery/5.10.3/css/themes/light/nanogallery_light.min.css"> <script src="https://cdnjs.cloudflare.com/ajax/libs/nanogallery/5.10.3/jquery.nanogallery.min.js"></script> <script> $(document).ready(function () { var items = []; function getPictures(items, prefix, title) { for(var i = 1; i <= 12; i++) { items.push({ src: prefix + i +'.jpg', srct: prefix + i + '-thumbnail.jpg', title: title + i }); } } getPictures(items, 'G', "Mom's choice "); getPictures(items, 'Z', "Dad's choice "); $("#nanoGallery3").nanoGallery({ itemsBaseURL: 'https://s3-us-west-1.amazonaws.com/blog.zurassic.com/ann/vote-2015', items: items, colorScheme: 'none', theme: 'light', thumbnailWidth: 'auto', thumbnailHeight: 200, thumbnailHoverEffect: 'borderLighter,imageScaleIn80', thumbnailGutterWidth: 0, thumbnailGutterHeight: 0, thumbnailLabel: { display: false }, viewerToolbar: { autoMinimize: 1920 } }); }); </script> <div class="ann"> <img class="ui fluid image" src="https://s3-us-west-1.amazonaws.com/blog.zurassic.com/ann/vote-2015/header-bg.jpg"> <h1 class="ui header vote-header">2015年度最佳新人影像奖</h1> <div class="center-text section"> <p>各位亲, 又到了一年一度的颁奖时刻!</p>http://zurassic.com/ann/origami/Mon, 01 Jan 0001 00:00:00 +0000http://zurassic.com/ann/origami/<script src="https://oxism.com/oriDomi/oridomi.min.js"></script> <style type="text/css"> .origami { z-index: 100; } p.slide-hint { z-index: 1; position: absolute; top: 50%; right: 50%; animation: slide 2s infinite alternate; } @keyframes slide { 0% { transform: translate3d(50px, 0, 0); animation-timing-function: ease-in; } 50% { transform: translate3d(30px, 0, 0); animation-timing-function: ease-out; } 100% { transform: translate3d(10px, 0, 0); } } </style> <script> document.addEventListener('DOMContentLoaded', function () { var origami = new OriDomi('.origami', { vPanels: [5, 5, 5, 5, 10, 10, 10, 10, 5, 5, 5, 5, 20] }); origami.stairs(75, 'right'); }); </script> <div> <div class="origami"> <img class="ui fluid image" src="https://s3-us-west-1.amazonaws.com/blog.zurassic.com/ann/origami/origami.png"> </div> <p class="center-text slide-hint"> <i class="angle double left icon"></i> Slide left for more </p>