Yes, there are flying Unicorns in SharePoint sites

Yes, vacations are coming, sun, family time and relax everything we should be doing after so many months...
For final article before turn off everything and go for vacations, here is a funny article like flying Unicorns in your SharePoint Site, yes you can make some funny things with some CSS, jquery, html and following Jquery Plugin Circulate.
http://css-tricks.com/examples/Circulate/

Here the following output:

Here the video:

How to implement this solution:

Include the following files in SharePoint Asset Library:

• jquery.min.js
• jquery.easing.1.2.js
• jquery.circulate.js
• style.css
• Unicorn.jpg image :)

Add a Script Editor Web Part in the SharePoint Page and include the following HTML:

PS: This example was made without MDS Feature activated

<script src="/SiteAssets/jquery-1.11.1.min.js"></script>

<script src="/SiteAssets/jquery.easing.1.2.js"></script>

<script src="/SiteAssets/jquery.circulate.js"></script>

<link rel="stylesheet" type="text/css" href="/SiteAssets/style.css">

<script>

$(window).load(function() {

$("#DeltaPlaceHolderMain").before('<img src="/SiteAssets/unicorn.png" id="unicorn">');

$("#unicorn").css("left", $("#unicorn").position().left).circulate({

            sizeAdjustment: 160,

            speed: 2000,

            width: -920,

            height: 50,

            loop: true,

            zIndexValues: [0, 50, 50, 0]

    });

 });

</script>

The key for the implementation is the Div id="DeltaPlaceHolderMain " where should be implemented,  for this example has to be added before DeltaPlaceHolderMain then should be call the following method "circulate(.....)". 

Here a video of the Implementation

Well that is everything for today, 

Have a nice vacations to you all, 

Hope you enjoy this article,

Kind regards, 

André Lage