Как впечатлить заказчика своим портфолио? Создаём Skill-Bar.
Портфолио - это невероятно важно для работника и для компаний. По нему заказчик может понять, что Вы предлагайте и насколько Вы хорошо это делаете. Без портфолио - никогда и никуда! Но хорошее и обычное портфолио - совершенно разные вещи. Если оно у Вас будет обычное, ничем не примечательное, то в этом нет ничего плохого. Правда, но заказчик не обратит на Вас особого внимания, а чтобы появились заказы и работа, нужно привлекать клиента, нужно чем-то выделяться среди всех. Сегодня, я покажу Вам, как выделиться среди массы посредственных рабочих.
Создаём анимированный Skill-bar для нашего портфолио
Чтобы наше портфолио было отлично от всех, нужно его улучшить, украсить, модернизировать! Для этого мы поместим туда Skill-bar. Это будут анимированные полосы, чем-то напоминающие progress-bar, но не совсем так. Давайте приступим к созданию!
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css" />
<script type="text/javascript" src="jquery-1.12.4.min.js"></script>
</head>
<body>
<div class="skills" data-percent="90%">
<div class="title" style="background: #FF8C00;"><span>HTML</span></div>
<div class="skill-bar" style="background: #FF8C00;"></div>
<div class="skills-percent">90%</div>
</div>
<div class="skills" data-percent="95%">
<div class="title" style="background: #00BFFF;"><span>CSS</span></div>
<div class="skill-bar" style="background: #00BFFF;"></div>
<div class="skills-percent">95%</div>
</div>
<div class="skills" data-percent="80%">
<div class="title" style="background: #FFD700;"><span>JavaScript</span></div>
<div class="skill-bar" style="background: #FFD700;"></div>
<div class="skills-percent">80%</div>
</div>
<div class="skills" data-percent="55%">
<div class="title" style="background: #4682B4;"><span>PHP</span></div>
<div class="skill-bar" style="background: #4682B4;"></div>
<div class="skills-percent">55%</div>
</div>
<script src="script.js"></script>
</body>
</html>
Для начала мы написали наш HTML-код. Получилось что-то совершенно невнятное, но для того, чтобы превратить это в то, что нам нужно, мы должны прописать стили в нашем файле .css
/* Добавляем стили body, выравниваем всё по центру */
body {
font-family: sans-serif;
text-align: center;
}
/* Стили для нашего основного блока */
.skills {
position: relative;
display: block;
margin-bottom: 15px;
width: 100%;
height: 35px;
border-raidus: 3px;
background: #eee;
transition: 0.4s linear;
transition-property: width, background-color;
}
/* Стили блока title от skills */
.title {
position: absolute;
font-size: 13px;
top: 0;
font-weight: bold;
border-top-left-radius: 3px;
border-bottom-left-radius: 3px;
background: #6adcfa;
color: #fff;
}
/* Стили тега span в блоке title */
.title span {
display: block;
background: rgba(0,0,0,0.1);
padding: 0 20px;
height: 35px;
line-height: 35px;
border-top-left-radius: 3px;
border-bottom-left-radius: 3px;
}
/* Стили блока skill-bar от skills */
.skill-bar {
height: 35px;
border-radius: 3px;
width: 0;
background-color: #6adcfa;
}
/* Стили блока skill-percent от skills */
.skills-percent {
position: absolute;
right: 15px;
top: 0;
font-size: 11px;
height: 55px;
line-height: 35px;
color: #444;
color: rgba(0,0,0,0.4);
}
Всё прекрасно, кроме того, что у нас нет анимации, и наши полосы не заполняются на должном уровне. Чтобы исправить это нам потребуется написать небольшой блок кода на JavaScript, а точнее - на jQuery. Вот собственно и код:
$(".skills").each(function(){ // Используем each (циклический метод)
$(this).find(".skill-bar").animate({ // Создаём анимацию
width: $(this).attr("data-percent") // Анимируем ширину
})
})
На этом всё! Результат работы смотрите здесь. Удачи Вам в улучшении своего портфолио, а если статья была интересная, либо полезная для Вас, то оставьте свой комментарий. Также можете сделать замечания, поправки или предложить свою идею написав об этом всё в тех же комментариях!
-
Создано 06.09.2017 08:00:00
-
Михаил Русаков
Комментарии (0):
Для добавления комментариев надо войти в систему.
Если Вы ещё не зарегистрированы на сайте, то сначала зарегистрируйтесь.