Experiment #6: Ghost Messages
Speed:
Text:
Text:
Source
-
Warning (2) : file_get_contents(/home/phanto41/public_html/phantomwatson/src/templates/element/Experiments/ghost_messages.php): Failed to open stream: No such file or directory [in /home/phanto41/public_html/phantomwatson/templates/Experiments/ghost_messages.php, line 23]
-
var ghostMessages = { init: function () { $('#start').click(function () { ghostMessages.addInput(); ghostMessages.disableInput(); // 50ms delay helps ensure that fade-in transition is shown setTimeout(function () { ghostMessages.cycle(); }, 50); }); $('#speed').change(function () { ghostMessages.updateSpeed(); }); this.enableInput(); this.updateSpeed(); }, addInput: function () { var list = $('#ghost-messages'); var input = $('#input').val(); var words = input.split(' '); for (var i = 0; i < words.length; i++) { if (words[i] != '') { list.append('<li>' + words[i] + '</li>'); } } $('#input').val(''); }, enableInput: function () { $('#start').html("Get ghosty").prop('disabled', false); }, disableInput: function () { $('#start').html("Ghostin'...").prop('disabled', true); }, cycle: function () { var inTransitionLength = this.getFadeInDuration(); var outTransitionLength = this.getFadeOutDuration(); if ($('#ghost-messages li').length === 0) { this.enableInput(); return; } this.showWord(); setTimeout(function () { ghostMessages.hideWord(); setTimeout(function () { ghostMessages.removeWord(); // 50ms delay helps ensure that fade-in transition is shown setTimeout(function () { ghostMessages.cycle(); }, 50); }, outTransitionLength); }, inTransitionLength); }, showWord: function () { $('#ghost-messages li:first-child').addClass('fade-in'); }, hideWord: function () { $('#ghost-messages li:first-child').removeClass('fade-in').addClass('fade-out'); }, removeWord: function () { $('#ghost-messages li:first-child').remove(); }, getFadeOutDuration: function () { var totalDuration = this.getTotalTransitionDuration(); return Math.round(totalDuration / 4); }, getFadeInDuration: function () { var totalDuration = this.getTotalTransitionDuration(); return Math.round(totalDuration * (3 / 4)); }, getSpeed: function () { var speeds = [ 'speed-absurdly-slow', 'speed-very-slow', 'speed-slow', 'speed-normal', 'speed-fast', 'speed-very-fast', 'speed-hyperspeed' ]; for (var i = 0; i < speeds.length; i++) { if ($('#ghost-messages').hasClass(speeds[i])) { return speeds[i]; } } return false; }, getTotalTransitionDuration: function () { var speed = this.getSpeed(); switch (speed) { case 'speed-absurdly-slow': return 32000; case 'speed-very-slow': return 16000; case 'speed-slow': return 8000; case 'speed-normal': return 4000; case 'speed-fast': return 2000; case 'speed-very-fast': return 1000; case 'speed-hyperspeed': return 500; } return 0; }, updateSpeed: function () { var currentSpeed = this.getSpeed(); $('#ghost-messages') .removeClass(currentSpeed) .addClass('speed-' + $('#speed').val()); } }; -
@ghostColor: #ddd; @ghostSize: 100px; @normalSpeed: 4000ms; #ghost-messages { max-width: 100%; min-height: @ghostSize; overflow: hidden; padding: 0; li { color: transparent; display: none; font-size: @ghostSize; left: 0; list-style-type: none; position: absolute; right: 0; text-align: center; text-shadow: 0 0 1000px #fff; transition-property: all; transition-timing-function: cubic-bezier(0.075, 0.82, 0.165, 1); &:nth-child(1) { display: block; } &.fade-in { font-size: @ghostSize; text-shadow: 0 0 0 #fff; span { transform: scale(1); } } &.fade-out { font-size: @ghostSize; text-shadow: 0 0 10px #fff; opacity: 0; span { transform: scale(1.1); } } span { transform: scale(1.1); } } .speed(@multiplier) { li { transition-duration: @normalSpeed * (3 / 4) * @multiplier; &.fade-out { transition-duration: (@normalSpeed / 4) * @multiplier; } } } &.speed-absurdly-slow { .speed(8); } &.speed-very-slow { .speed(4); } &.speed-slow { .speed(2); } &.speed-normal { .speed(1); } &.speed-fast { .speed(0.5); } &.speed-very-fast { .speed(0.25); } &.speed-hyperspeed { .speed(0.125); } }