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:
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
No comments:
Post a Comment