Jump to content

Falling leaves for Autumn


Graham Quince
 Share

Recommended Posts

Resurrected from the old forum, here's the code for getting your Fall into your Frog (orginally requested by @emoseley

<style>
.leaves {
 position: absolute;
 left: 5%;
 top: -15px;
 width: 90%;
 overflow: visible;
}
.leaves {
 position: absolute;
 left: 5%;
 top: -15px;
 width: 90%;
 overflow: visible;
}
.leaf {
 position: absolute;
 color: #DF3A01;
 -webkit-animation: falling 4.7s linear 0s infinite;
 -moz-animation: falling 4.7s linear 0s infinite;
 animation: falling 4.7s linear 0s infinite;
}
@-webkit-keyframes falling {
 0% {
 -webkit-transform: translate3d(0, 0, 0) rotate(0deg);
 }
 95% {
 opacity: 0.8;
 }
 100% {
 -webkit-transform: translate3d(0, 0, 0) rotate(360deg);
 }
}
@-moz-keyframes falling {
 0% {
 -moz-transform: translate3d(0, 0, 0) rotate(0deg);
 }
 95% {
 opacity: 0.8;
 }
 100% {
 -moz-transform: translate(0, 0) rotate(360deg);
 }
}
@keyframes falling {
 0% {
 transform: translate3d(0, 0, 0) rotate(0deg);
 }
 95% {
 opacity: 0.8;
 }
 100% {
 transform: translate(0, 0) rotate(360deg);
 }
}
.uk_primary .os-titlebar .navbar-inner {
 background-color: #d62441!important;
 border-bottom: 3px solid #980000 !important}
body.uk_primary .os-titlebar .navbar-search input {
 background-color: #980000 !important;
 border-color: #980000 !important;
}
</style>
<script>
var frogRevealingModule = (function() {
 var keyframeprefix = '',
 domPrefixes = 'Webkit Moz O ms Khtml'.split(' '),
 pfx = '',
 elm = document.createElement('div'),
 autumning = new $.Deferred();
 for( var i = 0; i < domPrefixes.length; i++ ) {
 if( elm.style[ domPrefixes[i] + 'AnimationName' ] !== undefined )
{
 pfx = domPrefixes[ i ];
 keyframeprefix = '-' + pfx.toLowerCase() + '-';
 break;
 }
 }
 var randInt = function(from, to) {
 return Math.floor(Math.random() * (to - from + 1) + from);
 };
 var findKeyframeAnimation = function(a) {
 var ss = document.styleSheets;
 for (var i = ss.length - 1; i >= 0; i--) {
 try {
 var s = ss[i],
 rs = s.cssRules ? s.cssRules :
 s.rules ? s.rules :
 [];
 for (var j = rs.length - 1; j >= 0; j--) {
 if ((rs[j].type ===
window.CSSRule.WEBKIT_KEYFRAMES_RULE ||
 rs[j].type ===
window.CSSRule.MOZ_KEYFRAMES_RULE) && rs[j].name == a) {
 return rs[j];
 }
 }
 // Trying to interrogate a stylesheet from another domain will throw a 
// security error
 } catch(e) {}
 }
 return null;
 };
 $.fn.autumn = function(options) {
 options = options || {};
 var me = this,
 count = options.flakeCount || 20,
 minDiameter = options.minDiameter || 20,
 maxDiameter = options.maxDiameter || 35, minOpacity = options.minOpacity || 50,
 maxOpacity = options.maxOpacity || 100,
 height = this.height(),
 flakes = [],
 keyframes;
 var characters = ['&#x1f341;', '&#x1f340;', '&#x1F342;'];
 if (keyframes = findKeyframeAnimation('falling')) {
 keyframes[(typeof keyframes.insertRule == 'function') ? 'insertRule' : 'appendRule'](
 '100% { ' + keyframeprefix + 'transform: translate3d(0,'
+ height + 'px,0) rotate(360deg); opacity:0; }'
 );
 }
 var i = count, size, css, origin;
 while (i--) {
 size = randInt(minDiameter, maxDiameter);
 origin = size / 2;
 css = {
 left: randInt(0, 100) + '%',
 'font-size': size + 'px',
 height: size + 'px',
 width: size + 'px',
 opacity: randInt(minOpacity, maxOpacity) * 0.01,
 top: (-size - 20) + 'px'
 };
 css[keyframeprefix + 'transform-origin'] = origin + 'px ' +
origin + 'px';
 css[keyframeprefix + 'animation-delay'] = (Math.random() *
10) + 's';
 flakes.push($('<div></div>').html(
 characters[randInt(0, characters.length - 1)]
 ).attr({
 'class': 'leaf'
 }).css(css).appendTo(this));
 }
 this.on('webkitAnimationIteration animationIteration',
function(e) {
 $(e.target).css('left', randInt(0, 100) + '%');
 });
 this.data('autumn', {
 flakes: flakes
 });
 return this;
 };
 function makeItautumn() {
 $('.dashboard-0').autumn({
 flakeCount: 50,
 minDiameter: 10,
 maxDiameter: 80
 });
 };
  return {
 autumn: makeItautumn
 };
})();
setTimeout(function(){
 frogRevealingModule.autumn();
}, 3000);
</script>

 

  • Like 1
Link to comment
Share on other sites

  • 2 weeks later...
  • 10 months later...

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

 Share

×
×
  • Create New...