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 Regular Member

    Joined:
    Apr 19, 2012
    Messages:
    467
    Likes Received:
    285
    Gender:
    Male
    Occupation:
    Professional Digital Marketer
    Location:
    United States
    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,833
    Likes Received:
    55,431
    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:
    188
    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 Junior Member

    Joined:
    May 30, 2012
    Messages:
    197
    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:
    443
    Likes Received:
    365
    Occupation:
    IT Director
    Location:
    New York
    Home Page:
    This is the plugin:

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