Graham Quince Posted October 25, 2016 Share Posted October 25, 2016 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 = ['🍁', '🍀', '🍂']; 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> 1 Link to comment Share on other sites More sharing options...
ADT Posted November 2, 2016 Share Posted November 2, 2016 Unless I'm doing something wrong.... Safari on iPads doesn't like this code!!! Link to comment Share on other sites More sharing options...
Graham Quince Posted November 4, 2016 Author Share Posted November 4, 2016 Works for me on iPad. Where's your code and i'll take a look. Link to comment Share on other sites More sharing options...
paulmitchell1989 Posted September 26, 2017 Share Posted September 26, 2017 @Graham Quince Does this no longer work in Da Vinci? Only seeing glimpses of them under the new frog bar Thanks in advance Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now