Shop Categories

X

Logo Animations

Home Forums Agama Pro Logo Animations

Topic Resolution: Resolved
  • This topic has 5 replies, 2 voices, and was last updated 5 years ago by Zex.
Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • #6502
    alibi2017
    Participant

    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!

    #6513
    Zex
    Moderator

    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

    #6622
    alibi2017
    Participant

    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 :)!

    #6631
    Zex
    Moderator

    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

    #6693
    alibi2017
    Participant

    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

    #6713
    Zex
    Moderator

    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

Viewing 6 posts - 1 through 6 (of 6 total)
  • You must be logged in to reply to this topic.