Home Forums Exoplanet Animate the tagline

This topic contains 6 replies, has 2 voices, and was last updated by  lbeerco-venango-pa-us 9 months, 2 weeks ago.

Viewing 7 posts - 1 through 7 (of 7 total)
  • Author
    Posts
  • #1512

    I would like my tagline to zoom out upon scrolling. I have downloaded AnimateIt! but I find no place to animate the tagline in the header. Is this possible?

     

    #1515

    Andy
    Keymaster

    No need to download AnimateIt! as Exoplanet loads it’s own animation stylesheet.

    Try adding this in Appearance > Customize > Additional CSS

    #masthead.scrolled .site-description {
    	-webkit-animation-name: zoomOut;
    	animation-name: zoomOut;
    	-webkit-animation-duration: 1s;
    	animation-duration: 1s;
    	-webkit-animation-fill-mode: both;
    	animation-fill-mode: both;
    }
    #1522

    Thank you Andy. This worked for me. Is there a way to get it to scroll the whole way across the header. We kind of want it to look like a car peeling out.

    Thanks again for all of your help today.

     

     

     

    #1525

    Andy
    Keymaster

    I think the effect you are looking to achieve would be beyond the scope of minor CSS modifications and beyond our support policy.

    It would require custom coding and testing, and an option would maybe find a reputable freelance coder on Upwork for this kind of custom service.

    #1526

    Okay thank you. One more question. Is there a way to zoomOut the whole way across the header?

     

    #1528

    Andy
    Keymaster

    After thinking about this some more, try this instead:

    #masthead.scrolled .site-description {
    	-webkit-animation-name: lbeercustomzoom;
    	animation-name: lbeercustomzoom;
    	-webkit-animation-duration: 2s;
    	animation-duration: 2s;
    	-webkit-animation-fill-mode: both;
    	animation-fill-mode: both;
    }
    
    @-webkit-keyframes lbeercustomzoom {
      10% {
    	opacity: 1;
    	-webkit-transform: translate3d(0, 0, 0);
    	transform: translate3d(0, 0, 0);
      }
    
      to {
    	opacity: 0;
    	-webkit-transform: translate3d(400%, 0, 0);
    	transform: translate3d(400%, 0, 0);
      }
    }
    
    @keyframes lbeercustomzoom {
      10% {
    	opacity: 1;
    	-webkit-transform: translate3d(0, 0, 0);
    	transform: translate3d(0, 0, 0);
      }
    
      to {
    	opacity: 0;
    	-webkit-transform: translate3d(400%, 0, 0);
    	transform: translate3d(400%, 0, 0);
      }
    }

    Not sure if that’s the effect you’re after, but you can experiment with different values for animation-duration and translate3d

    #1529

    Andy, thank you so much. That is exactly what I was looking for. I really appreciate your help and for going above and beyond.

    Thanks again.

     

Viewing 7 posts - 1 through 7 (of 7 total)

You must be logged in to reply to this topic.