1. This site uses cookies. By continuing to use this site, you are agreeing to our use of cookies. Learn More.

[Question] - How do they create animation over a link link this?

Discussion in 'Black Hat SEO' started by SolidTactics, Jun 11, 2014.

  1. SolidTactics

    SolidTactics Power Member

    Joined:
    Apr 19, 2012
    Messages:
    577
    Likes Received:
    307
    Gender:
    Male
    Occupation:
    Lead Generation
    Home Page:
    So I'm not a coder or developer at all. I'm curious to know how they managed to create the animation when you hover over the word "moz" in the first paragraph in the link below? I use wordpress primarily, if anyone knows of a plugin that can do this it would be appreciated, thanks!

    Here is the site, hover over the word "moz" to see the animation: http://www.webdesignerdepot.com/2013/07/free-90-days-of-mozs-pro-seo-tools/
     
  2. WizGizmo

    WizGizmo Super Moderator Staff Member Premium Member

    Joined:
    Mar 28, 2008
    Messages:
    3,965
    Likes Received:
    55,608
    Looks like javascript to me.

    "Wiz"
     
  3. Cool2BeBlue

    Cool2BeBlue Newbie

    Joined:
    Jun 10, 2014
    Messages:
    4
    Likes Received:
    5
    Occupation:
    Web & mobile apps developer
    Home Page:
    Nope, thats pure css3. It looks good but it isnt that interesting... I know nothing about wordprss, but if you can edit your css/html I could give you a few lines to insert? No plug-ins Im afraid, lol.
     
    Last edited: Jun 11, 2014
  4. MaxReformation

    MaxReformation Junior Member

    Joined:
    Apr 4, 2012
    Messages:
    190
    Likes Received:
    41
    Looks like CSS3. I actually don't know how that's done. I've made simple fading buttons before tho :p.
     
  5. Nolimitt

    Nolimitt Regular Member

    Joined:
    May 30, 2012
    Messages:
    204
    Likes Received:
    21
    Occupation:
    WEBMASTER
    Location:
    Space Station
    Yep Javascript ive seen a plugin for wordpress to do other things like that.
     
  6. mainceaft

    mainceaft Regular Member

    Joined:
    Apr 10, 2013
    Messages:
    373
    Likes Received:
    39
    its' css3 and js

    Code:
    /* ROLL LINKS */
    .roll-link {
        display: inline-block;
        overflow: hidden;
    
        vertical-align: top;
    
        -webkit-perspective: 600px;
           -moz-perspective: 600px;
           -ms-perspective: 600px;
           perspective: 600px;
    
        -webkit-perspective-origin: 50% 50%;
           -moz-perspective-origin: 50% 50%;
           -ms-perspective-origin: 50% 50%;
           perspective-origin: 50% 50%;
           
    }
    
    .roll-link:hover {text-decoration:none;}
    
    .roll-link span {
        display: block;
        position: relative;
        padding: 0 2px;
    
        -webkit-transition: all 400ms ease;
           -moz-transition: all 400ms ease;
           -ms-transition: all 400ms ease;
           transition: all 400ms ease;
        
        -webkit-transform-origin: 50% 0%;
           -moz-transform-origin: 50% 0%;
           -ms-transform-origin: 50% 0%;
           transform-origin: 50% 0%;
        
        -webkit-transform-style: preserve-3d;
           -moz-transform-style: preserve-3d;
           -ms-transform-style: preserve-3d;
           transform-style: preserve-3d;
    }
    .roll-link:hover span {
            background: #e93a30;
             
    
            -webkit-transform: translate3d( 0px, 0px, -30px ) rotateX( 90deg );
               -moz-transform: translate3d( 0px, 0px, -30px ) rotateX( 90deg );
               -ms-transform: translate3d( 0px, 0px, -30px ) rotateX( 90deg );
               transform: translate3d( 0px, 0px, -30px ) rotateX( 90deg );
    }
    
    .roll-link span:after {
        content: attr(data-title);
    
        display: block;
        position: absolute;
        left: 0;
        top: 0;
        padding: 0 2px;
    
        color: #fff;
        background: #e93a30;
    
        -webkit-transform-origin: 50% 0%;
           -moz-transform-origin: 50% 0%;
           -ms-transform-origin: 50% 0%;
           transform-origin: 50% 0%;
    
        -webkit-transform: translate3d( 0px, 105%, 0px ) rotateX( -90deg );
           -moz-transform: translate3d( 0px, 105%, 0px ) rotateX( -90deg );
           -ms-transform: translate3d( 0px, 105%, 0px ) rotateX( -90deg );
           transform: translate3d( 0px, 105%, 0px ) rotateX( -90deg );
    }
     
  7. nikiobicata

    nikiobicata Regular Member

    Joined:
    Mar 4, 2011
    Messages:
    450
    Likes Received:
    375
    Occupation:
    IT Director
    Location:
    New York
    Home Page:
    This is the plugin:

    Code:
    http://codecanyon.net/item/roll-link-wordpress-plugin/5262045