Logo Animations

[alibi2017]

Hi Theme Vision!

I was wandering is it possible to have logo animations? What I wanted to do is when i hover with my cursor the logo it changed from the small version to the full version of the logo, or with a fade in/fade out situation or a left to right slide.

Thanks!

[Zex]

Hello, Alibi!

I found this animation interesting…(Resize+Rotate)

Add the code below into Customizing ▸ General ▸ Additional CSS

code:

body.home.page  #masthead .pull-left a:hover {

width: 200px;
height: 200px;

background:url("http://teste1.alibi.pt/wp-content/uploads/2017/09/A-1.png") ;
background-repeat: no-repeat;
background-size: auto 80%;
margin-top: 8px;
    
-ms-transform: rotate(360deg); /* IE 9 */
-webkit-transform: rotate(360deg); /* Safari */
transform: rotate(360deg);

-webkit-transition-duration: 0.8s; /* Safari */
    transition-duration: 0.8s;
}

You can change the width, height, rotate deg and transition-duration value per you need.

P.S.: This is for the main page logo only.

if you want the same effect on other pages, add the code below:

#masthead .logo:hover {

width: auto;
max-height: 200px!important;

    
-ms-transform: rotate(360deg); /* IE 9 */
-webkit-transform: rotate(360deg); /* Safari */
transform: rotate(360deg);

-webkit-transition-duration: 0.8s; /* Safari */
    transition-duration: 0.8s;
}

https://prnt.sc/gyw7kw

Best Regards

[alibi2017]

Hi Zex! Cool animation!

I was wondering is it possible to have this logo on the top

https://image.prntscr.com/image/gecFZbb3TUqlUnA4csbbtw.png

And as I hover over the rest of the logo appears (left to right slide)

https://image.prntscr.com/image/K847xxzERCGpVLwcaD4NWA.png

Thanks in advance :)!

[Zex]

Hello there!

First, make a backup of your custom CSS codes, you currently have in case you don’t like this one.

Then you can try this solution:

Change the logo to this image

and like usual, add this custom CSS code:(replace the code mentioned in the post above )

code:

@media screen and (min-width: 480px) {

.pull-left:hover{
 position: relative;
  }

.pull-left:after{
content:url("https://image.prntscr.com/image/K847xxzERCGpVLwcaD4NWA.png") ;
position:absolute;
top:0;
max-height:87px;
height:80%;
padding-top:2px;
visibility:hidden;
}

.pull-left:hover:after{
visibility:visible;

transform:scale(0.67);
-ms-transform: scale(0.67); /* prefix for IE 9 */
-webkit-transform:scale(0.67); /* prefix for Safari and Chrome */
transition-duration:1s;}
}

https://prnt.sc/h4vlmx

Change the scale value if needed.

PS:
In next 24h we are preparing a theme update that will allow you to set up different logos for each page.

Best Regards

[alibi2017]

Hey Zex!

Awesome animation, there is only one problem, as i change the screen size of the browser the space between the logo and the animation changes as it tramples it in a smaller screen or has a big space between it in bigger!

I would also like to know if it’s possible to remove the logo effect on mobile!

Thanks in advance!

https://prnt.sc/h7t6v7

https://prnt.sc/h7t91a

[Zex]

Hello,

As I wrote you in the previous post, we have released an update for the theme, so you can add your custom (white) logo to the front page, without custom CSS.

You can follow the next steps:

First, if you don’t use the child-theme, make a backup of your custom CSS codes, you currently have.
Next, update your theme to the latest version (1.4.0.1).

1. Edit your front page(Dashboard->Pages->your front page/edit), scroll down to the bottom of the page and upload your custom logo from the Agama options meta box.

https://prnt.sc/h8a1nw

2. Next, remove the custom CSS code for the logo on home-page. https://prnt.sc/h8a3n5

For the question, you asked for,

add this code to Additional CSS (replace existing, old code with this one).https://prnt.sc/h8ac60

@media (min-width: 768px){
.pull-left:after{
content:url("https://image.prntscr.com/image/K847xxzERCGpVLwcaD4NWA.png") ;
position:absolute;
top:0;
max-height:100px;
max-width: 83.5%;
width: 13%;
height:140%;
padding-top:2px;
visibility:hidden;

}

.pull-left:hover:after{
visibility:visible;

transform:scale(0.55);
-ms-transform: scale(0.55); /* prefix for IE 9 */
-webkit-transform:scale(0.55); /* prefix for Safari and Chrome */
transition-duration:0.5s;}

}
@media (max-width:991px) and (min-width:768px) {

.pull-left:after{

margin-left:1px;
}
}

@media (min-width:992px){

.pull-left:after{

margin-left:10px;
}
}

.pull-left img{
padding-right:0px!important;
}

PS. Change the margin-left value to suit your needs.

Regards

[Author]

Posts