$.fn.skill = function() { mSkill = this; $(window).on('scroll', function() { // las animaciones se dispararan cuando el recuadro este visible en el viewport mSkill.find('.skillBar').each(function() { if( $(this).offset().top <= $(window).scrollTop()+$(window).height()*0.90 &&!$(this).hasClass("sk-fired")) { //una vez que cada skill bar esta en el viewport $(this).addClass('sk-fired'); //agregamos una clase como bandera para evitar que se vuelva a reproducir la animacion var defaultPercentage = "50%"; var color = $(this).attr('skill-color'); var defaultColor = "white"; //animamos el ancho de cada barra if($(this).attr('skill-percentage')) { $(this).width($(this).attr('skill-percentage')); } else { $(this).width(defaultPercentage); } //seteamos el color if(color) { $(this).css('background-color', color); } else { $(this).css('background-color',defaultColor); } //buscamos las imagenes para animarlas $(this).parent().find(".skill-image").each(function() { var imagen = $(this); setInterval(function() { imagen.show().addClass("animated").addClass("bounceIn"); }, 2000); }); } }); } ); return mSkill; } $(document).ready(function() { $(".habilidades").skill(); });
.habilidades_contenedor { width: 100%; } h2{text-align:center;} #codeconSkills { font-size: 12px; height: auto; margin: 0 auto; padding: 10px; width: 80%; } .codeconSkillbar { width: 90%; height: 100px; position: relative; background: rgba(17, 17, 17, .3); margin: 20px auto; } #codeconHTML { width: 100%; animation: Animate-HTML 4s; -webkit-animation: Animate-HTML 4s; -moz-animation: Animate-HTML 4s; -o-animation: Animate-HTML 4s; height: 100px; position: absolute; background-color: #ea8564; } @keyframes Animate-HTML { from { width: 10px; } to { width: 100%} }@-webkit-keyframes Animate-HTML { from { width: 10px; } to { width: 100%} }@-moz-keyframes Animate-HTML { from { width: 10px; } to { width: 100%} }@-o-keyframes Animate-HTML { from { width: 10px; } to { width: 100%} } #codeconCSS { animation: Animate-CSS 5s; -webkit-animation: Animate-CSS 5s; -moz-animation: Animate-CSS 5s; -o-animation: Animate-CSS 5s; width: 70%; height: 100px; position: absolute; background-color: #55a69f; } @keyframes Animate-CSS { from { width: 10px; } to { width: 70%} }@-webkit-keyframes Animate-CSS { from { width: 10px; } to { width: 70%} }@-moz-keyframes Animate-CSS { from { width: 10px; } to { width: 70%} }@-o-keyframes Animate-CSS { from { width: 10px; } to { width: 70%} } #codeconjQuery { animation: Animate-jQuery 5s; -webkit-animation: Animate-jQuery 5s; -moz-animation: Animate-jQuery 5s; -o-animation: Animate-jQuery 5s; width: 50%; height: 100px; position: absolute; background-color: #99856d; } .skillBar { width: 5%; height: 100px; position: absolute; background-color: transparent; transition: 3s; -webkit-transform: translateZ(0); -moz-transform: translateZ(0); -ms-transform: translateZ(0); -o-transform: translateZ(0); transform: translateZ(0); } @keyframes Animate-jQuery { from { width: 10px; } to { width: 50%} } @-webkit-keyframes Animate-jQuery { from { width: 10px; } to { width: 50% } } @-moz-keyframes Animate-jQuery { from { width: 10px; } to { width: 50% } } @-o-keyframes Animate-jQuery { from { width: 10px; } to { width: 50% } } #codeconCakePHP { animation: Animate-CakePHP 5s; /*-webkit-animation: Animate-jQuery 5s; -moz-animation: Animate-jQuery 5s; -o-animation: Animate-jQuery 5s;*/ width: 60%; height: 50px; position: absolute; background-color: #2f96b4; } @keyframes Animate-CakePHP { from { width: 10px; } to { width: 60% } } .codeconSkillArea { z-index: 1; float: left; //position: absolute; margin-top: 15px; margin-left: 15px; text-shadow: none; color: #fff; //font-family: Lato-Regular, sans-serif; font-size: 12px; } .PercentText { z-index: 3; position: relative; padding-right: 15px; margin-top: 15px; float: right; text-shadow: none; color: #fff; //font-family: Lato-Regular, sans-serif; font-size: 12px; }
<section id="habilidades" class="habilidades"> <div class="habilidades_contenedor"> <h2>わたしの非コミュスキル</h2> <div id="codeconSkills"> <div class="codeconSkillbar"> <div id="" class="skillBar" skill-percentage="80%" skill-color="#ccdb38"> <span class="codeconSkillArea ">目を合わさない</span> <span class="PercentText ">80%</span> </div> </div> <div class="codeconSkillbar"> <div id="" class="skillBar" skill-percentage="75%" skill-color="#02a8f3"> <span class="codeconSkillArea">電話に出ない</span> <span class="PercentText">75%</span> </div> </div> <div class="codeconSkillbar"> <div id="" class="skillBar" skill-percentage="90%" skill-color="#fe5621"> <span class="codeconSkillArea ">お店の店員さんに怯える</span> <span class="PercentText">90%</span> </div> </div> <div class="codeconSkillbar"> <div id="" class="skillBar" skill-percentage="60%" skill-color="#785447"> <span class="codeconSkillArea">話すだけで汗がでる</span> <span class="PercentText ">60%</span> </div> </div> <div class="codeconSkillbar"> <div id="" class="skillBar" skill-percentage="50%" skill-color="#e81d62"> <span class="codeconSkillArea">動物相手が楽に感じる</span> <span class="PercentText ">50%</span> </div> </div> <div class="codeconSkillbar"> <div id="" class="skillBar" skill-percentage="85%" skill-color="#5f7c8a"> <span class="codeconSkillArea">少しの人混みでも辛い</span> <span class="PercentText ">85%</span> </div> </div> <div class="codeconSkillbar"> <div id="" class="skillBar" skill-percentage="65%" skill-color="#fec006"> <span class="codeconSkillArea">近所の人と関わらない</span> <span class="PercentText ">65%</span> </div> </div> </div> </div> </section>