Animoitu kehityskuvio -widget Weeblylle

Edistymispalkkeja käytetään taitojen ja muiden tietojen esittelyyn kuvallisessa näkymässä, jotta käyttäjät voivat ymmärtää tiedot nopeasti. Edellisessä artikkelissamme olimme nähneet, kuinka luodaan vaakasuuntaisia ​​edistymispalkkeja, ja tässä opetusohjelmassa tarkastelemme tapaa luoda animoitu edistymispistekaavio -widget Weebly -sivustolle. Monista käytettävissä olevista vaihtoehdoista helppo ympyräkaavio -laajennus on yksi yksinkertaisista tavoista luoda ympyräkaavioita. Widget näyttää seuraavanlaiselta ja voit muokata värejä ja sisältöä tarpeidesi mukaan.

Luo lähdetiedostot ja luo tämä widget sivustollesi.

Widget luodaan muokkaamalla ilmaista jQuery easy pie chart -laajennusta ja lisäämällä siihen mukautettuja komentosarjoja ja CSS -tiedostoja. Siinä on seuraavat ominaisuudet:

• Täysin reagoiva kaikilla laitteilla.
• Määritä edistymisen prosenttiosuus, jos et halua, että % -merkki poistetaan komentosarjatiedostosta.
• Mukauta ympyrän värejä, etenemisen animaatiota ja piikkejä.
• Aseta kaavio mihin tahansa paikkaan, widget animoi vierityksen aikana.

Lataa lähdetiedostot ja lisää widget Weebly -sivustoosi noudattamalla alla olevia vaiheittaisia ​​ohjeita. Zip -lataus sisältää seuraavat tiedostot:

• jquery.min.js – tämä on jQuery -tiedosto, joka tarvitaan vain esittelyn toimimiseksi. Koska Weebly käyttää oletusarvoisesti jQuery -kirjastoa, tätä tiedostoa ei vaadita Weebly -sivustossasi.
• jquery.easypiechart.min.js – tämä on komentosarjatiedosto ja mukautettu komentosarja lisätään myös tämän tiedoston sisälle, jotta se olisi yksi lähde.
• Progress -ympyrädiagrammi.html – tämä demo -HTML -sivu sisältää CSS: n ja HTML -koodin.

Widgetin lisääminen Weeblyyn

Lataa ensin jquery.easypiechart.min.js -tiedosto Weebly -sivustoosi kohdasta "Teema> Muokkaa HTML / CSS > Resurssit". Linkitä komentosarja halutulle sivulle kohdassa "Sivut> Valitse sivu> Lisäasetukset> Otsikkokoodi " lisäämällä alla koodi:

<script src="files/theme/jquery.easypiechart.min.js"></script>

CSS sisältää kolme pääkomponenttia-kontti, yksittäiset ympyrälohkot ja kaavio, jota ohjataan .chart-container, .pr-chart-ctrl ja .pr-chart -luokkien avulla.

Lisää seuraava CSS (saatavana Progress -ympyräkaavion.html kanssa) Sivut> Valitse sivu> SEO -asetukset> Alatunnisteen koodi -osiossa.

<style>
.chart-container .pr-chart-ctrl {
display:block; 
float:left; 
width:25%;
}

.chart-container .pr-chart-ctrl .pr-chart {
display:block;
position:relative; 
width:100%; 
margin:0 0 20px 0; 
text-align:center; 
margin-top: 30px;
}
.chart-container .pr-chart-ctrl .pr-chart canvas {
display:block; 
margin:0 auto; 
padding:0; 
vertical-align:center;
}
.chart-container .pr-chart-ctrl .pr-chart i {
position:absolute; 
top:0; 
left:0; 
width:100%; 
height:200px; 
line-height:200px; 
font-size:48px; 
font-style:normal; 
color: #808080;
}
.chart-container .pr-chart-ctrl p{
margin:0; 
padding:0; 
text-transform:uppercase; 
color:green;
}

@media screen and (max-width:500px) {
.chart-container .pr-chart-ctrl {
width:100%; 
margin-bottom:50px;
} 
}
@media screen and (min-width:501px) and (max-width:900px) {
.chart-container .pr-chart-ctrl {
width:50%; 
margin-bottom:50px;
} 
}
</style>

Viimeinen osa on lisätä alla oleva HTML -koodi " Upota koodi " -elementtiin. Voit korvata nuken prosenttiosuudet ja otsikot omilla.

<ul class="chart-container">
<li class="pr-chart-ctrl">
<div class="pr-chart" data-percent="25"><i></i></div>
<p>WordPress Development</p>
</li>
<li class="pr-chart-ctrl">
<div class="pr-chart" data-percent="50"><i></i></div>
<p>Weebly Development</p>
</li>
<li class="pr-chart-ctrl">
<div class="pr-chart" data-percent="75"><i></i></div>
<p>Search Engine Optimization</p>
</li>
<li class="pr-chart-ctrl">
<div class="pr-chart" data-percent="100"><i></i></div>
<p>Blog Consulting</p>
</li>
</ul>

Widgetin mukauttaminen

Jquery.easypiechart.min.js -tiedosto sisältää alla olevan komentosarjan piirakan etenemisen animaation ohjaamiseksi.

size: 200,
barColor: '#F85656',
trackColor: '#f1f1f1',
scaleColor: 'violet',
scaleLength: 5,
lineWidth: 5,
lineCap: 'square',
onStep: function(from, to, percent) {
$(this.el).find('i').text(Math.round(percent) + '%');

Voit poistaa % poistaa sen kaavionäytöstä ja jäljellä olevien muuttujien hallinta on seuraava:

Täysleveä Parallax -ympyräkaavio

Kun lisäät yllä olevan widgetin upotuskoodin avulla, se näyttää tavalliselta. Voit tehdä kaunis parallaksi ympyräkaaviona käyttäen profiilielementin kuten alla:

Weebly Parallax -kaavio

Luo ympyräkaavio parallaksikuvan taustalla noudattamalla alla olevia ohjeita.

• Vedä ja pudota osion elementti. Napsauta osioelementtiä sisältöalueella ja valitse sitten "Muokkaa taustaa".
• Valitse kuva taustaksi ja aseta vieritystehoste parallaksi. Voit myös asettaa värin taustan, ja videon tausta on vain ammattilaisille.
• Vedä ja pudota upotuskoodi ja lisää HTML -koodi yllä olevan osan mukaisesti.
• Julkaise sivustosi ja katso animoitu ympyräkaavio parallaksikuvalla.