<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<!DOCTYPE html><!--[if lte IE 9]><html class="old-ie" lang="en"><![endif]-->
<!--[if (gt IE 9)|!(IE)]><!--><html lang="en"><!--<[endif]--><head> <meta charset="utf-8">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head> <meta http-equiv="content-type" content="text/html; charset=utf-8" />
<meta http-equiv="content-language" content="en" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Pure CSS3 Blend Animation Demo Sneaky Stalking Sammy</title>
<meta http-equiv="X-Robots-Tag" content="index, archive, snippet">
<meta http-equiv="Robots" content="*">
<meta http-equiv="Connection" content="keep-alive">
<meta http-equiv="cleartype" content="on">
<meta name="Access-Control-Allow-Origin" content="*">
<meta http-equiv="Access-Control-Allow-Origin" content="*">
<meta http-equiv="Vary" content="accept-encoding">
<meta http-equiv="Pragma" content="no-cache">
<meta http-equiv="Cache-Control" content="no-cache, max-age=0, must-revalidate, no-store">
<meta name="viewport" content="width=device-width,initial-scale=0.98" />
<meta http-equiv="cleartype" content="on">
<meta name="language" content="English, en" />
<meta name="keywords" content="css3, css blend,css animation, ray anthony, rccloud, rayrc,web demo,digital ocean, sammy mascot" />
<meta http-equiv="X-Meta-Description" content="content=Pure CSS animated fish lurking behind window blinds - its Digital Oceans Sammy Mascot!"/>
<meta http-equiv="X-Meta-Generator" content="nano and firenote.info">
<meta http-equiv="X-Meta-Keywords" content="css3, css blend,css animation, ray anthony, rccloud, rayrc,web demo,digital ocean, sammy mascot" />
<link rel="base-href" href="//rccloud.me/">
<link rel="host" href="//rccloud.me/">
<link rel="mount-point" href="//rccloud.me/">
<meta http-equiv="Content-Base" content="https://rccloud.me/">
<!-- bots, crawlers, verifies -->
<meta name="language" content="English, en">
<meta name="google" content="notranslate">
<meta name="iarchiver" content="archive">
<meta name="robots" content="noodp,noydir">
<meta name="robots" content="index,follow">
<meta name="googlebot" content="archive">
<meta name="google-site-verification" content="">
<meta name="google-analytics" content="UA-2167814-1">
<meta name="GOOGLEBOT" content="cache">
<meta name="Slurp" content="cache">
<!-- Dublin Core and other data about data and then things about that too -->
<meta name="author" content="ray anthony">
<meta name="DC.title" content="pure css3 blend animation : sneaky stalking sammy">
<meta name="DC.subject" content="rccloud.me css3 blend animation demo">
<meta name="DC.creator" content="ray anthony">
<!-- Browsers -->
<meta name="application-name" content="sneaky-sammy-stalking"/>
<!-- <meta name="msapplication-config" content="/browserconfig.xml" /> -->
<meta name="msapplication-tooltip" content="css3 blend animation sneaky sammy stalking web demo"/>
<meta name="msapplication-window" content="width=1600;height=1050"/>
<meta name="msapplication-TileImage" content="https://pbs.twimg.com/profile_images/534489356719779840/IhpSWnrI_bigger.jpeg"/>
<meta name="msapplication-TileColor" content="#f3f4f6"/>
<!--
<meta name="msapplication-task" content="name=Music;action-uri=https://clientwindows.com/music;icon-uri=https://pbs.twimg.com/profile_images/534489356719779840/IhpSWnrI_bigger.jpeg"/>
<meta name="msapplication-task" content="name=Help;action-uri=https://clientwindows.com/error.aspx;icon-uri=https://pbs.twimg.com/profile_images/534489356719779840/IhpSWnrI_bigger.jpeg"/>
<meta name="msapplication-task" content="name=Blog;action-uri=https://clientwindows.com/blog;icon-uri=https://pbs.twimg.com/profile_images/534489356719779840/IhpSWnrI_bigger.jpeg"/>
<link rel="icon" type="image/vnd.microsoft.icon" href="/favicon.png">
-->
<link rel="shortcut icon" href="//s3-us-west-2.amazonaws.com/s.cdpn.io/167883/profile/profile-512_3.jpg">
<meta name="author" content="ray@rccloud.me" />
<meta name="application-name" content="sneaky-sammy-stalking">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-title" content="sneaky-sammy-stalkingo">
<meta name="mobile-web-app-capable" content="yes">
<meta name="format-detection" content="telephone=no">
<meta itemprop="name" content="css3 demo sneaky-stalking-sammy">
<meta name="MobileOptimized" content="width" />
<meta name="HandheldFriendly" content="true" />
<link rel="apple-touch-icon" sizes="57x57" href="https://pbs.twimg.com/profile_images/534489356719779840/IhpSWnrI_normal.jpeg">
<link rel="apple-touch-icon" sizes="114x114" href="https://pbs.twimg.com/profile_images/534489356719779840/IhpSWnrI_bigger.jpeg">
<link rel="apple-touch-icon" sizes="72x72" href="https://pbs.twimg.com/profile_images/534489356719779840/IhpSWnrI_normal.jpeg">
<link rel="apple-touch-icon" sizes="144x144" href="https://pbs.twimg.com/profile_images/534489356719779840/IhpSWnrI_normal.jpeg">
<link rel="apple-touch-startup-image" href="https://pbs.twimg.com/profile_images/534489356719779840/IhpSWnrI_normal.jpeg">
<link rel="apple-ipad-icon" sizes="144x144" href="https://pbs.twimg.com/profile_images/534489356719779840/IhpSWnrI_normal.jpeg">
<link rel="icon" sizes="196x196" href="https://pbs.twimg.com/profile_images/534489356719779840/IhpSWnrI_bigger.jpeg">
<link rel="shortcut icon" href="https://pbs.twimg.com/profile_images/534489356719779840/IhpSWnrI_normal.jpeg" >
<link rel="alternate" type="application/rss+xml" href="https://rayrcc.wordpress.com/feed/" />
<!-- This site is not optimized with the totally gay Yoast SEO Super Reach Around Ultimate Plugin Pack v6.8super-alpha - https://codepen.io/rayrc/ -->
<meta name="description" content="Pure CSS animated fish lurking behind window blinds - its Digital Oceans Sammy Mascot!"/>
<meta name="robots" content="noodp"/>
<link rel="canonical" href="https://rayanthony.io/" />
<link rel="publisher" href="https://plus.google.com/+rayanthonyrcc/posts"/>
<meta property="og:locale" content="en_US" />
<meta property="og:type" content="article" />
<meta property="og:title" content="Pure CSS3 Blend Animation Demo Sneaky Stalking Sammy" />
<meta property="og:description" content="Pure CSS animated fish lurking behind window blinds - its Digital Oceans Sammy Mascot!"/>
<meta property="og:url" content="http://rccloud.me/" />
<meta property="og:site_name" content="RCCloud" />
<meta property="article:publisher" content="https://www.twitter.com/rayanthonyrcc" />
<meta property="article:author" content="https://www.twitter.com/rayanthonyrcc" />
<meta property="article:tag" content="CSS3 BLend Animations" />
<meta property="article:tag" content="CSS3" />
<meta property="article:tag" content="digital ocean sammy" />
<meta property="article:tag" content="ray anthony rccloud" />
<meta property="article:tag" content="css animations" />
<meta property="article:section" content="CSS3 design" />
<meta property="article:published_time" content="2015-01-20T22:41:57+00:00" />
<meta property="article:modified_time" content="2015-09-16T13:56:59+00:00" />
<meta property="og:updated_time" content="2015-09-16T13:56:59+00:00" />
<meta property="fb:app_id" content="" />
<meta property="og:image" content="https://pbs.twimg.com/profile_banners/2903100260/1432086427/600x200" />
<meta name="twitter:card" content="summary_large_image"/>
<meta name="twitter:description" content="Pure CSS animated fish lurking behind window blinds - its Digital Oceans Sammy Mascot!"/>
<meta name="twitter:title" content="Pure CSS3 Blend Animation Demo Sneaky Stalking Sammy"/>
<meta name="twitter:site" content="@rayanthonyrcc"/>
<meta name="twitter:image" content="https://pbs.twimg.com/profile_banners/2903100260/1432086427/web_retina"/>
<meta name="twitter:creator" content="@rayanthonyrcc"/>
<meta name="google-site-verification" content="JJatNxkPKLE4xbusOP9au4S3sE-u6iVO-NRfuzoYTjQ" />
<meta name="msvalidate.01" content="">
<meta name="alexaVerifyID" content="">
<meta name="yandex-verification" content="">
<meta name="google-plus" content="https://plus.google.com/101353686174880991386">
<!-- egypt .... -->
<meta name="contributes-to" content="//plus.google.com/?">
<meta name="contributes-to" content="//github.com/?q=rayantony">
<meta name="contributes-to" content="//rayantony.github.io">
<link rel="author" content="ray@rccloud.me" href="https://twitter.com/rayanthonyrcc">
<!-- End Meta Data Block -->
<!-- B.S. Block -->
<!-- <script type="text/javascript">
window.alert = function(){};
var defaultCSS = document.getElementById('bootstrap-css');
function changeCSS(css){
if(css) $('head > link').filter(':first').replaceWith('<link rel="stylesheet" href="'+ css +'" type="text/css" />');
else $('head > link').filter(':first').replaceWith(defaultCSS);
}
$( document ).ready(function() {
var iframe_height = parseInt($('html').height());
window.parent.postMessage( iframe_height, 'http://bootsnipp.com');
});
</script>
-->
<!--End B.S. Block -->
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<style type="text/css">
html{max-height:100%}
body{
margin:0px;
padding:0px;
font-family: 'Typewriter','Courier New',sans;
font-size: 16px;
font-weight:400;
background:
/* top, transparent grey, faked with gradient */
linear-gradient(
rgba(96,96,96,0.4),
rgba(255, 255, 255,0.1),#fff,#f0f0f0,#f6f7f6,#f9f7f0,#fff),url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/167883/sammy-404.gif) no-repeat;
background-attach:cover;
backround-size:100% cover;
flex:1;
color:#444;
z-index: 5;
text-decoration: none;
text-rendering: optimizeLegibility;
/*-webkit-font-feature-settings: "liga"; Currently broken in Chrome >= v22. Falls back to text-rendering. Safari is unaffected. */
-moz-font-feature-settings: "liga=1";
-moz-font-feature-settings: "liga";
-ms-font-feature-settings: "liga" 1;
-o-font-feature-settings: "liga";
font-feature-settings: "liga";
-webkit-font-smoothing: antialiased;
}
#header{
height: 25px;
width: 100%;
}
#main{
position: absolute;
height:auto;
top: 25px; /* Header Height */
bottom: 15px; /* Footer Height */
width: 100%;
}
#footer, .twitter-follow-button{
height: 15px;
width: 100%;
position: absolute;
bottom: 0;
color:#666;
background-color:transparent;
/* background:-webkit-linear-gradient(center 15%,left,transparent 15%,rgba(0,0,0,0.139) 15%,white 15%;white 15%,rgba(0,0,0,0.139) 15%,transparent 15%);
/* background: radial-gradient(center 20px, circle, #616161 0%, #616161 20%, #282828 100%);*/
text-align:center;
}
</style>
<script src="//code.jquery.com/jquery-1.10.2.min.js"></script>
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
</head>
<body >
<article id="container">
<section class="header" id="header">
</section>
<section id="main">
</section>
<section class="footer" id="footer">
<iframe allowtransparency="true" frameborder="0" scrolling="no"
src="//platform.twitter.com/widgets/follow_button.html?screen_name=rayanthonyrcc"
style="width:236px; height:20px;" class="twitter-follow-button twitter-follow-button">
</iframe>
<p class="footer" >copyright 2014,2015 <a href="http://rayanthony.io/">ray anthony </a> © all applicable rights reserved all liabilities waived
open source, free, and made with<i class="fi-heart" alt="made with love icon font ♡ "></i><a href="//codepen.io/rayrc/">@ codepen.io</a> <a href="//github.com/rayantony/">Github</a> <a href="//deadflowers.githhub.io/">gihub.io</a></p>
</section></article>
<script type="text/javascript">
/*
* This bit of code disables user scaling on iOS until the user tries to scale with pinch/zoom.
* http://stackoverflow.com/questions/2557801/how-do-i-reset-the-scale-zoom-of-a-web-app-on-an-orientation-change-on-the-iphon
*/
if (navigator.userAgent.match(/iPhone/i) || navigator.userAgent.match(/iPad/i)) {
var viewportmeta = document.querySelector('meta[name="viewport"]');
if (viewportmeta) {
viewportmeta.content = 'width=device-width, minimum-scale=1.0, maximum-scale=1.0, initial-scale=1.0';
document.addEventListener('gesturestart', function () {
viewportmeta.content = 'width=device-width, minimum-scale=0.25, maximum-scale=10';
}, false);
}
}
</script>
<script type="text/javascript">
$(document).ready(function() {
$(function() {
$.stayInWebApp('a.stay');
});
});
</script>
<script type="text/javascript">(function(f,b){if(!b.__SV){var a,e,i,g;window.mixpanel=b;b._i=[];b.init=function(a,e,d){function f(b,h){var a=h.split(".");2==a.length&&(b=b[a[0]],h=a[1]);b[h]=function(){b.push([h].concat(Array.prototype.slice.call(arguments,0)))}}var c=b;"undefined"!==typeof d?c=b[d]=[]:d="mixpanel";c.people=c.people||[];c.toString=function(b){var a="mixpanel";"mixpanel"!==d&&(a+="."+d);b||(a+=" (stub)");return a};c.people.toString=function(){return c.toString(1)+".people (stub)"};i="disable track track_pageview track_links track_forms register register_once alias unregister identify name_tag set_config people.set people.set_once people.increment people.append people.track_charge people.clear_charges people.delete_user".split(" ");
for(g=0;g<i.length;g++)f(c,i[g]);b._i.push([a,e,d])};b.__SV=1.2;a=f.createElement("script");a.type="text/javascript";a.async=!0;a.src="//cdn.mxpnl.com/libs/mixpanel-2-latest.min.js";e=f.getElementsByTagName("script")[0];e.parentNode.insertBefore(a,e)}})(document,window.mixpanel||[]);
mixpanel.init("bb3563c368000166cbb66cf486541801");</script>
<script type="text/javascript">window.NREUM||(NREUM={});NREUM.info={"beacon":"beacon-1.newrelic.com","errorBeacon":"bam.nr-data.net","licenseKey":"254e41eca72d79fd8f2e155dc3f63eb5776b84df","queueTime":0,"ttGuid":"","agentToken":null,"agent":"js-agent.newrelic.com/nr-476.min.js"}</script>
<!--
<PageMap>
<DataObject type="document">
<Attribute name="title">about Ray Anthony</Attribute>
<Attribute name="author">Ray Anthony</Attribute>
<Attribute name="description">Ray Anthony is an acclaimed entrepreneur and business administrator, an efficiency streamlining consultant, with a background in sales management and training for high risk ad buying commodities and media assets. Always working on the next big project Ray is a self-made, up-from-nothing success story, who only understands hands on. He is most recently authoring a memoir which reportedly details a series of particularly difficult personal and professional calamities are the backdrop to a real-time experience starting a company from the ground up. Amidst impossibly difficult and surprising obstacles, the outcome is anyone's guess, in more ways than one. A Developer, Founder, CEO, Consultant. respected sales trainer, Ray has produced many millions in revenue with zero funding or loans together with his decade long partner Charles. A technology enthusiast, he's authored papers on subjects from polymorphic code in assembler x86 to the cultural significance of the Rolling Stones. A noted open source proponent, fanatical audiophile, critical of U.S. Patent Law, and famously opposed to DMCA and the U.S Dept of Justice after his DVD Region Decoding hack was published and continues with the astoundingly attrocious current AG Holder. Ray is a proud 'world citizen' helping to drive progress forward.</Attribute>
<Attribute name="page_count">1</Attribute>
<Attribute name="rating">5.0</Attribute>
<Attribute name="last_update">11/22/2015</Attribute>
</DataObject>
<DataObject type="thumbnail">
<Attribute name="src" value="//rayanthony.io/raythumbjelly.jpg" />
<Attribute name="width" value="96" />
<Attribute name="height" value="96" />
</DataObject>
</PageMap>
-->
<script type="text/javascript">var _kmq = _kmq || [];
var _kmk = _kmk || '2f9cf5779173e7e8a843d67011c576a6cff51822';
function _kms(u){
setTimeout(function(){
var d = document, f = d.getElementsByTagName('script')[0],
s = d.createElement('script');
s.type = 'text/javascript'; s.async = true; s.src = u;
f.parentNode.insertBefore(s, f);
}, 1);
}
_kms('//i.kissmetrics.com/i.js');
_kms('//doug1izaerwt3.cloudfront.net/' + _kmk + '.1.js');
</script>
<script type="text/javascript" async crossorigin="anonymous">
var _gas = _gas || [];
_gas.push(['_setAccount', '"UA-2167814-1']);
_gas.push(['_setDomainName', '.clientwindows.com']);
_gas.push(['_trackPageview']);
_gas.push(['_gasTrackForms']);
_gas.push(['_gasTrackOutboundLinks']);
_gas.push(['_gasTrackMaxScroll']);
_gas.push(['_gasTrackDownloads']);
_gas.push(['_gasTrackVideo']);
_gas.push(['_gasTrackAudio']);
_gas.push(['_gasTrackYoutube', {force: true}]);
_gas.push(['_gasTrackVimeo', {force: true}]);
_gas.push(['_gasTrackMailto']);
_gas.push(['_gasMeta']);
_gas.push(['_require', 'inpage_linkid',
'//www.google-analytics.com/plugins/ga/inpage_linkid.js']);
ga.setAttribute('data-use-dcjs', 'true');
(function() {
var ga = document.createElement('script');
ga.id = 'gas-script';
ga.setAttribute('data-use-dcjs', 'true');
ga.type = 'text/javascript';
ga.async = true;
ga.src = '//cdnjs.cloudflare.com/ajax/libs/gas/1.11.0/gas.min.js';
var s = document.getElementsByTagName('script')[0];
s.parentNode.insertBefore(ga, s);
})();
</script>
</body></html>
html{max-height:100%}
body{
margin:0px;
padding:0px;
font-family: 'Typewriter','Courier New',sans;
font-size: 16px;
font-weight:400;
background:
/* top, transparent grey, faked with gradient */
linear-gradient(
rgba(96,96,96,0.4),
rgba(255, 255, 255,0.1),#fff,#f0f0f0,#f6f7f6,#f9f7f0,#fff),url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/167883/sammy-404.gif) no-repeat;
background-attach:cover;
backround-size:100% cover;
flex:1;
color:#444;
z-index: 5;
text-decoration: none;
text-rendering: optimizeLegibility;
/*-webkit-font-feature-settings: "liga"; Currently broken in Chrome >= v22. Falls back to text-rendering. Safari is unaffected. */
-moz-font-feature-settings: "liga=1";
-moz-font-feature-settings: "liga";
-ms-font-feature-settings: "liga" 1;
-o-font-feature-settings: "liga";
font-feature-settings: "liga";
-webkit-font-smoothing: antialiased;
}
#header{
height: 25px;
width: 100%;
}
#main{
position: absolute;
height:auto;
top: 25px; /* Header Height */
bottom: 15px; /* Footer Height */
width: 100%;
}
#footer, .twitter-follow-button{
height: 15px;
width: 100%;
position: absolute;
bottom: 0;
color:#666;
background-color:transparent;
/* background:-webkit-linear-gradient(center 15%,left,transparent 15%,rgba(0,0,0,0.139) 15%,white 15%;white 15%,rgba(0,0,0,0.139) 15%,transparent 15%);
/* background: radial-gradient(center 20px, circle, #616161 0%, #616161 20%, #282828 100%);*/
text-align:center;
}
