XF 2.0 Pulsing Logo

[Atmazphere]

I'm using XenForo 2.0.12 and UI.X 2, I'm trying to figure out how to make my header logo, have a pulsing animation. Is this possible?

 

[bzcomputers]

Save the code below as "pulse-image.js".

(function($) {
    jQuery(document).ready(function() {
        window.pulse_image = jQuery('.pulse_image');
        window.pulse_continue_loop = true;
        PulseAnimation();
        jQuery('.pulse_image').mouseover(function() {
            
            
            window.pulse_continue_loop = false;
            window.pulse_image.stop();
            window.pulse_image.css('opacity',1);
            
        }).mouseout(function() {
            // User is hovering over the image.
            window.pulse_continue_loop = true;
            window.pulse_image = jQuery(this);

            PulseAnimation(); // start the loop
        });
    });
})(jQuery);

// #############################################
function PulseAnimation()
{
    var minOpacity = .20;
    var fadeOutDuration = 2000;
    var fadeInDuration = 2000;

    window.pulse_image.animate({
        opacity: minOpacity
    }, fadeOutDuration, function() {
        window.pulse_image.animate({
            opacity: 1
        }, fadeInDuration, function() {
            if(window.pulse_continue_loop) {
                setTimeout("PulseAnimation()",8000);
                //PulseAnimation();
            }
        })
    });
}

Then add reference to the script file you just saved to template "helper_js_global" using this:

<script src="https://path/to/your/pulse-image.js"></script>

Then apply the class "pulse_image" to your header logo.


Adjust the script options to your liking.

 

[Arty]

Or you can do the same with css, which is more efficient:

.p-header-logo {
   -webkit-animation: pulse 1s infinite;
   animation: pulse 1s infinite;
}
@-webkit-keyframes pulse {
  0% { opacity: 1; }
  30% { opacity: 1; }
  50% { opacity: .2; }
  70% { opacity: 1; }
  100% { opacity: 1; }
}
@keyframes pulse {
  0% { opacity: 1; }
  30% { opacity: 1; }
  50% { opacity: .2; }
  70% { opacity: 1; }
  100% { opacity: 1; }
}

Prefixed version is needed for Safari browser.

 

[Atmazphere]

Or you can do the same with css, which is more efficient:

.p-header-logo {
   -webkit-animation: pulse 1s infinite;
   animation: pulse 1s infinite;
}
@-webkit-keyframes pulse {
  0% { opacity: 1; }
  30% { opacity: 1; }
  50% { opacity: .2; }
  70% { opacity: 1; }
  100% { opacity: 1; }
}
@keyframes pulse {
  0% { opacity: 1; }
  30% { opacity: 1; }
  50% { opacity: .2; }
  70% { opacity: 1; }
  100% { opacity: 1; }
}

Prefixed version is needed for Safari browser.

Perfect, such an easier way. Thank you!

Edit: Before someone asks how to implant this, put it in extra.less.