i using plugin called 'circliful' animate semi circles based on percentage. animation works fine. want trigger animation after scroll down screen point of animation. html code tried shown below:
<!doctype html> <html lang="en"> <head> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <script src="js/jquery.circliful.js"></script> <style> .one {background:black; height:300px; color:white;} .two {background:green; height:300px; color:white;} </style> </head> <body> <div class="one">300px height</div> <div class="two">300px height</div> <div class="one">300px height</div> <div id="mystathalf1" data-dimension="250" data-width="30" data-fontsize="38" data-percent="95" data-fgcolor="#fab702" data-bgcolor="#eee" data-type="half" data-icon="fa-task"></div> <div id="mystathalf2" data-dimension="250" data-width="30" data-fontsize="38" data-percent="90" data-fgcolor="#fab702" data-bgcolor="#eee" data-type="half" data-icon="fa-task"></div> <script> $(document).ready (function (){ $(window).scroll(function(){ var y=$(this).scrolltop(); if(y>=100) { $('#mystathalf1').circliful(); $('#mystathalf2').circliful(); } }); }) </script> </body> </html> the code of plugin looks this:
"use strict"; (function ($) { $.fn.circliful = function (options, callback) { var settings = $.extend({ // these defaults. startdegree: 0, fgcolor: "#000000", bgcolor: "#eee", fill: false, width: 15, dimension: 200, fontsize: 15, percent: 50, animationstep: 0.5, iconsize: '20px', iconcolor: '#999', border: 'default', complete: null, bordersize: 10 }, options); return this.each(function () { var customsettings = ["fgcolor", "bgcolor", "fill", "width", "dimension", "fontsize", "animationstep", "endpercent", "icon", "iconcolor", "iconsize", "border", "startdegree", "bordersize"]; var customsettingsobj = {}; var icon = ''; var percent; var endpercent = 0; var obj = $(this); var fill = false; var text, info; obj.addclass('circliful'); checkdataattributes(obj); if (obj.data('type') != undefined) { type = $(this).data('type'); if (type == 'half') { addcircletext(obj, 'circle-text-half', (customsettingsobj.dimension / 1.45)); } } if ($(this).data("percent") != undefined) { percent = $(this).data("percent") / 100; endpercent = $(this).data("percent"); } else { percent = settings.percent / 100; } var size = customsettingsobj.dimension, canvas = $('<canvas></canvas>').attr({ width: size, height: size }).appendto($(this)).get(0); var context = canvas.getcontext('2d'); var container = $(canvas).parent(); var x = size / 2; var y = size / 2; var degrees = customsettingsobj.percent * 360.0; var radians = degrees * (math.pi / 180); var radius = size / 2.5; var startangle = 2.3 * math.pi; var endangle = 0; var counterclockwise = true; var curperc = customsettingsobj.animationstep === 0.0 ? endpercent : 0.0; var curstep = math.max(customsettingsobj.animationstep, 0.0); var circ = math.pi * 2; var quart = math.pi / 2; var type = ''; var firecallback = true; if ($(this).data('type') != undefined) { type = $(this).data('type'); if (type == 'half') { startangle = 2.0 * math.pi; endangle = 3.13; circ = math.pi; quart = math.pi / 0.996; } } /** * adds text circle * * @param obj * @param cssclass * @param lineheight */ function addcircletext(obj, cssclass, lineheight) { $("<span></span>") .appendto(obj) .addclass(cssclass) .html(text) .prepend(icon) .css({ 'line-height': lineheight + 'px', 'font-size': customsettingsobj.fontsize + 'px' }); } /** * checks data attributes defined * @param obj */ function checkdataattributes(obj) { $.each(customsettings, function (index, attribute) { if (obj.data(attribute) != undefined) { customsettingsobj[attribute] = obj.data(attribute); } else { customsettingsobj[attribute] = $(settings).attr(attribute); } if (attribute == 'fill' && obj.data('fill') != undefined) { fill = true; } }); } /** * animate foreground circle * @param current */ function animate(current) { context.clearrect(0, 0, canvas.width, canvas.height); context.beginpath(); context.arc(x, y, radius, endangle, startangle, false); context.linewidth = customsettingsobj.width + 1; context.strokestyle = customsettingsobj.bgcolor; context.stroke(); context.beginpath(); context.arc(x, y, radius, -(quart), ((circ) * current) - quart, false); context.strokestyle = customsettingsobj.fgcolor; context.stroke(); if (curperc < endpercent) { curperc += curstep; requestanimationframe(function () { animate(math.min(curperc, endpercent) / 100); }, obj); } } animate(curperc / 100); }); }; }(jquery)); this makes infinite kind of loop keeps looping till scroll , understand reason that. have tried other ways changing code of plugin nothing seems work.
i want grey background color of semi circle appear default , foreground color (orange) animation start after scroll pixels , reach point. can me please?
all right.
so think can add simple boolean flag, name of hascreatedobjects, set false time right, set true , use boolean not add further circliful() objects.
jsfiddle of can found here , javascript, follows:
$(document).ready(function () { var hascreatedobjects = false; $(window).scroll(function () { var y = $(this).scrolltop(); if (y >= 100) { if (!hascreatedobjects) { hascreatedobjects = true; $('#mystathalf1').circliful(); $('#mystathalf2').circliful(); } } }); }); 
Comments
Post a Comment