0
我想在我的網站中使用progressbar.js，但以其他方式。如果它可以代表我在少數領域的技能，那將是非常棒的。 我的主要想法是加載指定量的百分比的動畫圓進度條，但jquery .onscroll（）事件真的非優化，使頁面真的滯後... 是否有任何可能的方式來優化它？或者甚至有其他方法可以做得更好？ My website < - 這是在網站上當元素可見時執行javascript函數
var html , css , php , javascript , cpp , mysql ,csh, java;
$(document).ready(function(){
Dynamic_load();
});
$(window).scroll(function(){
$('#skills_event').inViewport(function(px){
if (px) {
html.animate(0.99);
css.animate(0.85);
javascript.animate(0.75);
php.animate(0.59);
cpp.animate(0.89);
mysql.animate(0.75);
java.animate(0.45);
csh.animate(0.32);
}else {
css.animate(0);
javascript.animate(0);
php.animate(0);
cpp.animate(0);
mysql.animate(0);
java.animate(0);
csh.animate(0);
}
});
});
function Dynamic_load()
{
html = new ProgressBar.Circle("#knowlage_html", {
color: '#aaa',
// This has to be the same size as the maximum width to
// prevent clipping
strokeWidth: 6,
trailWidth: 1,
easing: 'easeInOut',
duration: 1400,
text: {
autoStyleContainer: true
},
from: { color: '#aaa', width: 1 },
to: { color: '#880e4f', width: 6 },
// Set default step function for all animate calls
step: function(state, circle) {
circle.path.setAttribute('stroke', state.color);
circle.path.setAttribute('stroke-width', state.width);
var value = Math.round(circle.value() * 100);
if (value === 0) {
circle.setText('');
} else {
circle.setText(value + " % <br> HTML");
}
}
});
html.text.style.fontFamily = '"Raleway", Helvetica, sans-serif';
html.text.style.fontSize = '1rem';
html.animate(0);
css = new ProgressBar.Circle("#knowlage_css", {
color: '#aaa',
// This has to be the same size as the maximum width to
// prevent clipping
strokeWidth: 6,
trailWidth: 1,
easing: 'easeInOut',
duration: 1400,
text: {
autoStyleContainer: true
},
from: { color: '#aaa', width: 1 },
to: { color: '#880e4f', width: 6 },
// Set default step function for all animate calls
step: function(state, circle) {
circle.path.setAttribute('stroke', state.color);
circle.path.setAttribute('stroke-width', state.width);
var value = Math.round(circle.value() * 100);
if (value === 0) {
circle.setText('');
} else {
circle.setText(value + " % <br> CSS3.0");
}
}
});
css.text.style.fontFamily = '"Raleway", Helvetica, sans-serif';
css.text.style.fontSize = '1rem';
css.animate(0);
javascript = new ProgressBar.Circle("#knowlage_javascript", {
color: '#aaa',
// This has to be the same size as the maximum width to
// prevent clipping
strokeWidth: 6,
trailWidth: 1,
easing: 'easeInOut',
duration: 1400,
text: {
autoStyleContainer: true
},
from: { color: '#aaa', width: 1 },
to: { color: '#880e4f', width: 6 },
// Set default step function for all animate calls
step: function(state, circle) {
circle.path.setAttribute('stroke', state.color);
circle.path.setAttribute('stroke-width', state.width);
var value = Math.round(circle.value() * 100);
if (value === 0) {
circle.setText('');
} else {
circle.setText(value + " % <br> JavaScript");
}
}
});
javascript.text.style.fontFamily = '"Raleway", Helvetica, sans-serif';
javascript.text.style.fontSize = '1rem';
javascript.animate(0);
php = new ProgressBar.Circle("#knowlage_php", {
color: '#aaa',
// This has to be the same size as the maximum width to
// prevent clipping
strokeWidth: 6,
trailWidth: 1,
easing: 'easeInOut',
duration: 1400,
text: {
autoStyleContainer: true
},
from: { color: '#aaa', width: 1 },
to: { color: '#880e4f', width: 6 },
// Set default step function for all animate calls
step: function(state, circle) {
circle.path.setAttribute('stroke', state.color);
circle.path.setAttribute('stroke-width', state.width);
var value = Math.round(circle.value() * 100);
if (value === 0) {
circle.setText('');
} else {
circle.setText(value + " % <br> PHP");
}
}
});
php.text.style.fontFamily = '"Raleway", Helvetica, sans-serif';
php.text.style.fontSize = '1rem';
php.animate(0);
cpp = new ProgressBar.Circle("#knowlage_cpp", {
color: '#aaa',
// This has to be the same size as the maximum width to
// prevent clipping
strokeWidth: 6,
trailWidth: 1,
easing: 'easeInOut',
duration: 1400,
text: {
autoStyleContainer: true
},
from: { color: '#aaa', width: 1 },
to: { color: '#880e4f', width: 6 },
// Set default step function for all animate calls
step: function(state, circle) {
circle.path.setAttribute('stroke', state.color);
circle.path.setAttribute('stroke-width', state.width);
var value = Math.round(circle.value() * 100);
if (value === 0) {
circle.setText('');
} else {
circle.setText(value + " % <br> C++");
}
}
});
cpp.text.style.fontFamily = '"Raleway", Helvetica, sans-serif';
cpp.text.style.fontSize = '1rem';
cpp.animate(0);
mysql = new ProgressBar.Circle("#knowlage_mysql", {
color: '#aaa',
// This has to be the same size as the maximum width to
// prevent clipping
strokeWidth: 6,
trailWidth: 1,
easing: 'easeInOut',
duration: 1400,
text: {
autoStyleContainer: true
},
from: { color: '#aaa', width: 1 },
to: { color: '#880e4f', width: 6 },
// Set default step function for all animate calls
step: function(state, circle) {
circle.path.setAttribute('stroke', state.color);
circle.path.setAttribute('stroke-width', state.width);
var value = Math.round(circle.value() * 100);
if (value === 0) {
circle.setText('');
} else {
circle.setText(value + " % <br> MySQL");
}
}
});
mysql.text.style.fontFamily = '"Raleway", Helvetica, sans-serif';
mysql.text.style.fontSize = '1rem';
mysql.animate(0);
java = new ProgressBar.Circle("#knowlage_java", {
color: '#aaa',
// This has to be the same size as the maximum width to
// prevent clipping
strokeWidth: 6,
trailWidth: 1,
easing: 'easeInOut',
duration: 1400,
text: {
autoStyleContainer: true
},
from: { color: '#aaa', width: 1 },
to: { color: '#880e4f', width: 6 },
// Set default step function for all animate calls
step: function(state, circle) {
circle.path.setAttribute('stroke', state.color);
circle.path.setAttribute('stroke-width', state.width);
var value = Math.round(circle.value() * 100);
if (value === 0) {
circle.setText('');
} else {
circle.setText(value + " % <br> Java");
}
}
});
java.text.style.fontFamily = '"Raleway", Helvetica, sans-serif';
java.text.style.fontSize = '1rem';
java.animate(0);
csh = new ProgressBar.Circle("#knowlage_Csharp", {
color: '#aaa',
// This has to be the same size as the maximum width to
// prevent clipping
strokeWidth: 6,
trailWidth: 1,
easing: 'easeInOut',
duration: 1400,
text: {
autoStyleContainer: true
},
from: { color: '#aaa', width: 1 },
to: { color: '#880e4f', width: 6 },
// Set default step function for all animate calls
step: function(state, circle) {
circle.path.setAttribute('stroke', state.color);
circle.path.setAttribute('stroke-width', state.width);
var value = Math.round(circle.value() * 100);
if (value === 0) {
circle.setText('');
} else {
circle.setText(value + " % <br> C#");
}
}
});
csh.text.style.fontFamily = '"Raleway", Helvetica, sans-serif';
csh.text.style.fontSize = '1rem';
csh.animate(0);
}.bigdiv{
min-height:300px;
background-color:blue;
}
.col{
max-width: 150px;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://mojastronadotestow.ugu.pl/js/viewpoint.js"></script>
<script src="http://mojastronadotestow.ugu.pl/js/progressbar.min.js"></script>
<div class="bigdiv"></div>
<div id="skills_event" class="row">
<div class="col s3">
<div id="knowlage_html" style="text-algin: center; vertival-algin:center; position:relative;"></div>
</div>
<div class="col s3">
<div id="knowlage_css" style="text-algin: center; vertival-algin:center; position:relative;"></div>
</div>
<div class="col s3">
<div id="knowlage_javascript" style="text-algin: center; vertival-algin:center; position:relative;"></div>
</div>
<div class="col s3">
<div id="knowlage_php" style="text-algin: center; vertival-algin:center; position:relative;"></div>
</div>
<div class="col s3">
<div id="knowlage_cpp" style="text-algin: center; vertival-algin:center; position:relative;"></div>
</div>
<div class="col s3">
<div id="knowlage_java" style="text-algin: center; vertival-algin:center; position:relative;"></div>
</div>
<div class="col s3">
<div id="knowlage_mysql" style="text-algin: center; vertival-algin:center; position:relative;"></div>
</div>
<div class="col s3">
<div id="knowlage_Csharp" style="text-algin: center; vertival-algin:center; position:relative;"></div>
</div>
</div>
向我們展示你的代碼，所以我們可以更好地瞭解 – casraf
我甚至可以顯示網站 –