XF 2.0 Auto-size header logo

[FedericoS]

Hello everyone!
I have a little question: How can i add this effect on my header logo?

To view this content we will need your consent to set third party cookies.
For more detailed information, see our cookies page.

Accept third party cookies

Thanks a lot in advance

 

[hemant_bhardwaj]

it's can be done with CSS
replace the .zoomeffect class with your LOGO class

.zoomeffect {
 width:200px;
 height:200px;
 margin:40px auto;

 -webkit-animation-name: zoom-in-out;
 -webkit-animation-duration: 2s;
 -webkit-animation-timing-function: linear;
 -webkit-animation-delay: 0s;
 -webkit-animation-iteration-count: infinite;
 -webkit-animation-direction: normal;
 -webkit-animation-fill-mode: none;

 animation-name: zoom-in-out;
 animation-duration: 2s;
 animation-timing-function: linear;
 animation-delay: 0s;
 animation-iteration-count: infinite;
 animation-direction: normal;
 animation-fill-mode: none;

}

@-webkit-keyframes zoom-in-out {
  0%{
    -webkit-transform: scale(1);
    transform: scale(1);
  }
  50%{
    -webkit-transform: scale(1.2);
    transform: scale(1.2);
  }
  100%{
    -webkit-transform: scale(1);
    transform: scale(1);
  }
}

@keyframes zoom-in-out {
  0%{
    -ms-transform: scale(1);
    transform: scale(1);
  }
  50%{
    -ms-transform: scale(1.2);
    transform: scale(1.2);
  }
  100%{
    -ms-transform: scale(1);
    transform: scale(1);
  }
}

 

[FedericoS]

Works well!
Thanks a lot

 

[whassell20]

@FedericoGB25 Could I see this on your site? And what size did you use?

 

[Jordyn]

@FedericoGB25 Could I see this on your site? And what size did you use?

You can really use any size logo. As a test, I removed from the code these lines to use default logo size.

 width:200px;
 height:200px;
 margin:40px auto;

So it looks like this:

.p-header-logo {
 -webkit-animation-name: zoom-in-out;
 -webkit-animation-duration: 2s;
 -webkit-animation-timing-function: linear;
 -webkit-animation-delay: 0s;
 -webkit-animation-iteration-count: infinite;
 -webkit-animation-direction: normal;
 -webkit-animation-fill-mode: none;

 animation-name: zoom-in-out;
 animation-duration: 2s;
 animation-timing-function: linear;
 animation-delay: 0s;
 animation-iteration-count: infinite;
 animation-direction: normal;
 animation-fill-mode: none;
}

@-webkit-keyframes zoom-in-out {
  0%{
    -webkit-transform: scale(1);
    transform: scale(1);
  }
  50%{
    -webkit-transform: scale(1.2);
    transform: scale(1.2);
  }
  100%{
    -webkit-transform: scale(1);
    transform: scale(1);
  }
}
@keyframes zoom-in-out {
  0%{
    -ms-transform: scale(1);
    transform: scale(1);
  }
  50%{
    -ms-transform: scale(1.2);
    transform: scale(1.2);
  }
  100%{
    -ms-transform: scale(1);
    transform: scale(1);
  }
}