HTML
Blub Bla<br><br> <a class="link2">Hier ein Link mit Animation zum Test</a> <br><br> <div class="wrapper"><a class="link2">Hier ein Link mit Animation zum Test</a></div> <br><br> <a class="link2"><span class="glyphicon glyphicon-chevron-left"></span>Hier ein Link mit Animation zum Test</a> <br><br> <a class="link2">Hier ein Link <span class="hidden1">mit</span> Animation zum Test</a> <br><br> <a class="link2">Hier ein Link <span class="hidden2">mit</span> Animation zum Test</a> <br><br> <a class="link2"><img src="https://cdn3.iconfinder.com/data/icons/popular-services-brands/512/youtube-128.png" class="icon"> Hier ein Link <img src="https://cdn3.iconfinder.com/data/icons/popular-services-brands/512/youtube-128.png" class="icon"> mit Animation zum Test <img src="https://cdn3.iconfinder.com/data/icons/popular-services-brands/512/youtube-128.png" class="icon"></a> <br><br> <div class="menucont"> <a class="link2 menu">Produkte</a><a class="link2 menu">So geht Altersvorsorge</a><a class="link2 menu">Blog</a><a class="link2 menu">Über uns</a><a class="link2 menu">Faq</a> </div> <br><br> <a class="link2 btn">Jetzt Angebot berechnen »</a>
SCSS
body { font-family: verdana; color: black; background: white; } .wrapper { display: inline-block; width: 100px; } a { cursor: pointer; color: #000; } .link2 .glow { text-decoration: underline; } .glyphicon:before { content: "‹"; display: inline-block; margin-right: 10px; } .hidden1 { display: none; } .hidden2 { opacity: .5; } .icon { width: 20px; height: 20px; } .menucont { } .menu { display: inline-block; padding: 30px; margin: 20px; } .btn { text-decoration: none; border: 1px solid #39a11b; color: #ffffff; text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25); background-color: #39a11b; background-image: -webkit-linear-gradient(top, #6ccf49 0%, #39a11b 100%); background-image: linear-gradient(to bottom, #6ccf49 0%, #39a11b 100%); background-repeat: repeat-x; filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff6ccf49', endColorstr='#ff39a11b', GradientType=0); cursor: pointer; padding: 10px 16px; font-size: 20px; line-height: 1.33; border-radius: 6px; } .btn:hover { color: #ffffff; border-color: #318b17; background-color: #318b17; background-image: -webkit-linear-gradient(top, #5cc935 0%, #318b17 100%); background-image: linear-gradient(to bottom, #5cc935 0%, #318b17 100%); background-repeat: repeat-x; filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff5cc935', endColorstr='#ff318b17', GradientType=0); }
Script
$('.link2').each(function() { $(this) .mouseenter(out) .mouseleave(over) .trigger('mouseleave'); }); function over() { if ($(this).data('hover')) return; $(this).data('hover', true); setTimeout(function($l) { animateLink($l, true, true); }, 0, $(this)); } function out() { if (!$(this).data('hover')) return; $(this).data('hover', false); setTimeout(function($l) { animateLink($l, true, false); }, 0, $(this)); } function animateLink($l, init, forward, $glow, $text, steps, gt, tt) { if (init) { $l.data('direction', forward); if (forward) { if ($l.find('.text').length) { // deinit $l.html($l.data('backup')); } $l.data('backup', $l.html()); $glow = $('<span class="glow" />'); $text = $('<span class="text" />').html($l.html()); $l.html(''); $l.append($glow); $l.append($text); } else { $glow = $l.find('>.glow'); $text = $l.find('>.text'); } steps = $l.data('backup').replace(/<(\\w+)[^>]*>.*?<\/\1>/g, '-').replace(/<[^>]+>/g, '-').length; gt = $glow.html(); tt = $text.html(); } else { var direction = $l.data('direction'); // cancel animation if (direction != forward) return; } if (forward) { var nextChar = getChar(tt, 1); gt += nextChar; tt = tt.substr(nextChar.length); } else { var lastChar = getChar(gt, -1); tt = lastChar + tt; gt = gt.substr(0, gt.length - lastChar.length); } $text.html(tt); $glow.html(gt); if (forward && tt.length || !forward && gt.length) setTimeout(animateLink, 100 / steps, $l, false, forward, $glow, $text, steps, gt, tt); else if (!forward) $l.html($l.data('backup')); } function getChar(str, position) { switch (position) { case 1: // first char if (str[0] == '<') { var strTag = str.substr(1, 2).toLowerCase(); if (strTag == 'br' || strTag == 'hr' || strTag == 'im') { // singleton elements return str.substr(0, str.indexOf('>') + 1); } else { return (/<([a-z]+)[^>]*>(.*?)<\/\1>/i).exec(str)[0]; } } else { return str[0]; } break; case -1: // last char var l = str.length; if (str[l - 1] == '>') { var searchFor = false, searchForL, searchForPattern, inStr = false; for (var i = l - 1; i >= 0; i--) { if (searchFor === false) { if (str[i] == '\'' || str[i] == '"') { inStr = !inStr; } else if (!inStr) { if (str[i] == '<') { // singleton element return str.substr(i); } else if (str[i] == '/') { // close tag searchFor = str.substring(i + 1, l - 1); searchForL = searchFor.length; searchForPattern = new RegExp('^<'+searchFor+'(\\s|>)$', 'i'); } } } else if (str[i] == '<' && searchForPattern.test(str.substr(i, searchForL + 2))) { return str.substr(i); } } return str; // error } else { return str[l - 1]; } break; } }