diff --git a/config.yaml b/config.yaml index 77f5835c..9ead03f6 100644 --- a/config.yaml +++ b/config.yaml @@ -107,7 +107,7 @@ demos: - slug: flying-tweets title: 'Flying Tweets' - legend: 'Watch automatically-updated tweets fly onto your screen and fly off again. Great as a screensaver replacement or at conferences with boring speakers. When the page is not visible, animation stops to save precious CPU cycles.' + legend: 'Watch automatically-updated tweets fly onto your screen and fly off again. Great as a screensaver replacement or on displays at events. When the page is not visible, animation stops to save precious CPU cycles. Based on Visible Tweets by @themaninblue.' tags: [css3] support: [cssanimations, csstransforms, fullscreen, pagevisibility] diff --git a/demos/flying-tweets/index.html b/demos/flying-tweets/index.html index c0a9d7cf..3fadb916 100644 --- a/demos/flying-tweets/index.html +++ b/demos/flying-tweets/index.html @@ -7,7 +7,7 @@ - +
-
+
diff --git a/demos/flying-tweets/scripts/script.js b/demos/flying-tweets/scripts/script.js index 670bd49e..14b7e4ae 100644 --- a/demos/flying-tweets/scripts/script.js +++ b/demos/flying-tweets/scripts/script.js @@ -1,8 +1,10 @@ window.addEventListener('DOMContentLoaded', function() { + 'use strict'; + /* * Configuration */ - var query = '#css'; // The initial search term + var query = '#css3'; // The initial search term var updateTime = 2; // The time between updates in minutes /* @@ -10,6 +12,7 @@ window.addEventListener('DOMContentLoaded', function() { */ // Set some global variables var container = document.getElementById('container'); + var content = document.getElementById('content'); var frm_search = document.getElementById('frm_search'); var txt_search = document.getElementById('txt_search'); var btn_search = document.getElementById('btn_search'); @@ -24,18 +27,19 @@ window.addEventListener('DOMContentLoaded', function() { var text = tweetData.text; var user = tweetData.user; var result = ''; - for (var i = 0, len = text.length; i < len; i++) { + for (var i = 0, lenText = text.length; i < lenText; i++) { result += '' + text[i] + ''; } result += '
'; user = '@' + user; - for (var j = 0, len = user.length; j < len; j++) { + for (var j = 0, lenUser = user.length; j < lenUser; j++) { result += '' + user[j] + ''; } result += '
'; return result; } + // Submit search for tweets frm_search.onsubmit = function(event) { event.preventDefault(); count = 0; @@ -46,6 +50,7 @@ window.addEventListener('DOMContentLoaded', function() { return false; }; + // Loop through and show individual tweets function doAnimationIteration() { if (count >= (tweets.length - 1)) { count = 0; @@ -55,11 +60,13 @@ window.addEventListener('DOMContentLoaded', function() { showTweet(count); } + // Listen for the end of each animation cycle img.addEventListener('webkitAnimationIteration', doAnimationIteration, false); img.addEventListener('MSAnimationIteration', doAnimationIteration, false); img.addEventListener('oanimationiteration', doAnimationIteration, false); img.addEventListener('animationiteration', doAnimationIteration, false); + // Get tweets and append JSON result to body function getTweets(query, callback) { var url = 'http://search.twitter.com/search.json?q=' + encodeURIComponent(query) + '&callback=' + callback; // Remove any script tag we've used before @@ -74,11 +81,7 @@ window.addEventListener('DOMContentLoaded', function() { document.body.appendChild(jsonScript); } - this.setTweets = function(data) { - updateTweets(data); - showTweet(0); - }; - + // Update tweets array with latest data this.updateTweets = function(data) { tweets = []; var results = data.results; @@ -95,6 +98,12 @@ window.addEventListener('DOMContentLoaded', function() { count = 0; }; + // High-level function to update & show tweets + this.setTweets = function(data) { + updateTweets(data); + showTweet(0); + }; + // Do this at the end of every animation iteration function showTweet(num) { var tweetData = tweets[num]; @@ -117,7 +126,11 @@ window.addEventListener('DOMContentLoaded', function() { // Page Visibility API: http://www.w3.org/TR/page-visibility/ // Stop the animation when the tab is not visible document.addEventListener("visibilitychange", function(event) { - document.body.classList.toggle('animate'); + if (document.hidden) { + content.classList.remove('animate'); + } else { + content.classList.add('animate'); + } }, false); // Fullscreen API: http://www.w3.org/TR/fullscreen/ diff --git a/demos/flying-tweets/styles/screen.css b/demos/flying-tweets/styles/screen.css index 81cee168..38389580 100644 --- a/demos/flying-tweets/styles/screen.css +++ b/demos/flying-tweets/styles/screen.css @@ -16,8 +16,6 @@ body { } a { color:#33c; -} -a:hover, a:focus { text-decoration:none; } @@ -105,6 +103,10 @@ header { -moz-transition-duration:0.3s; -o-transition-duration:0.3s; transition-duration:0.3s; + -webkit-transition-property:opacity; + -moz-transition-property:opacity; + -o-transition-property:opacity; + transition-property:opacity; } #txt_search:focus, #txt_search:hover, #btn_search:focus, #btn_search:hover, #btn_resize:focus, #btn_resize:hover { opacity:1; @@ -135,13 +137,11 @@ header { overflow:hidden; padding:0 8%; vertical-align:middle; + white-space:pre-wrap; /* Needed to keep space in empty spans */ } #tweet span, #tweet img { + display:inline-block; position:relative; - -webkit-transform:rotate(-360deg); - -moz-transform:rotate(-360deg); - -o-transform:rotate(-360deg); - transform:rotate(-360deg); } .animate #tweet span, .animate #tweet img { -webkit-animation:char 10s infinite;