html knowhow

Rahmenanimation mit Wortgenerierung

So sieht´s aus

HTML

Quellcode

<html>
<head>

<style type="text/css">
.skill-set-boundary {width: 300px; height: auto; position: relative; transform:translateY(-50%); left: 40%; top: 50px; margin: 10px;}
.skill-set-container {display: block; max-width: 200px; border: 1px solid #000;}
.entry {color: #E34C26; font-size: 3em; text-align: center; line-height: 150px;}
.borders {display: block; position: absolute;}
.top-border, .right-border {top: 0;}
.right-border {right: 0;}
.bottom-border {right: 0; bottom: 0;}
.left-border {left: 0; bottom: 0;}
.top-border, .bottom-border {height: 6px;}
.right-border, .left-border {width: 6px;}
</style>
<head>

<body >
<div class="skill-set-boundary">
<span class="borders top-border"></span>
<span class="borders right-border"></span>
<span class="borders bottom-border"></span>
<span class="borders left-border"></span>
<div class="entry">HTML</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script>
$(document).ready(function() {
var $skillSet = ['HTML', 'Knowhow', 'ist', 'einfach', 'super!!'];
var $skillColors = ['#e34c26', '#1b73ba', '#f8dc3d', '#131b28', '#777bb3'];
var $skillEntry = $('.entry');
// Functions START
var $counter = 0;
function changeSkillSetColours() {
$skillEntry.text($skillSet[$counter]).css('color', $skillColors[$counter]);
var $colors = $skillColors[$counter];
$('.borders').removeAttr('style');
$('.borders').css('backgroundColor', $colors );
$('.top-border').animate({
'width': '300px'
}, 500);
$('.right-border').delay(450).animate({
'height': '150px'
},250);
$('.bottom-border').delay(700).animate({
'width': '300px'
}, 500);
$('.left-border').delay(1150).animate({
'height': '150px'
}, 250);
$counter++;
if($counter == 5) {
$counter = 0;
}
}
// Function END
//Here we are calling the function on the HTML skil
changeSkillSetColours();
//Set Interval to add a delay to each animation loop
setInterval(function(){
changeSkillSetColours();
}, 3000);
});
</script>
</body>

</html>

Kontakt Datenschutz Impressum