A Pen by Dzulfikar Adi Putra

Developer
Dzulfikar Adi Putra
Size
8,016 Kb
Views
26,312
  1. A Pen by Dzulfikar Adi Putra Previews
  2. A Pen by Dzulfikar Adi Putra HTML Codes
  3. A Pen by Dzulfikar Adi Putra CSS Codes
  4. A Pen by Dzulfikar Adi Putra JS Codes

How do I make an a pen by dzulfikar adi putra?

What is a a pen by dzulfikar adi putra? How do you make a a pen by dzulfikar adi putra? This script and codes were developed by Dzulfikar Adi Putra on 06 September 2022, Tuesday.

A Pen by Dzulfikar Adi Putra Previews
IQ Test

A Pen by Dzulfikar Adi Putra - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>A Pen by Dzulfikar Adi Putra</title> <link rel='stylesheet prefetch' href='http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css'>
<link rel='stylesheet prefetch' href='http://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.1.0/css/font-awesome.min.css'> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div class="container"> <div class="row"> <h3 class="text-center">SVG Element Animation Follow Path - d3js</h3> <div class="text-center"><small>by <a href="https://twitter.com/superpikar" target="_blank">@superpikar (Putra)</a></small></div> <hr/> <div class="col-sm-6 col-xs-8 control"> <menu> <label><input type='checkbox' id='showPath'>Show SVG Path</label> <br> <div class='walkerController'> <div class="player"> <button type="button" id="button_play" class="btn" onclick='buttonPlayPress()'> <i class="fa fa-play"></i> </button> <button type="button" id="button_stop" class="btn" onclick='buttonStopPress()'> <i class="fa fa-stop"></i> </button> </div> <!--<input class='speed' type='number'>--> </div> </menu> </div> <div class="col-sm-6 col-xs-4"> <ul> <li>SVG walker generated by JSON data using d3js</li> <li>Based on this <a href="http://dropthebit.com/592/pathanimator-moving-along-an-svg-path/" target="_blank">source code</a>, but modify some part.</li> <li>Pause and Play based on this <a href="https://codepen.io/superpikar/pen/zJsgH" target="_blank">script</a></li> </ul> </div> <hr/> <div class='maze-container col-sm-12 col-xs-12'> <div class="maze"> <svg></svg> </div> </div> </div>
</div> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script src='https://d3js.org/d3.v3.min.js'></script>
<script src='http://dropthebit.com/demos/pathAnimator/js/pathAnimator.js'></script> <script src="js/index.js"></script>
</body>
</html>

A Pen by Dzulfikar Adi Putra - Script Codes CSS Codes

label { cursor: pointer;
}
input[type=checkbox] { margin: -1px 5px 0 0; vertical-align: text-top;
}
.walkerController { background: #EEE; padding: 6px; margin: 8px 0 100px; width: 282px; border-left: 8px solid green;
}
.walkerController input[type=checkbox] { display: none;
}
menu button { cursor: pointer; margin: 0 0 5px 0; font-size: inherit;
}
.walkerController input[type=range] { width: 230px;
}
.walkerController input[type=range] + span { float: right; line-height: 2;
}
.walkerController input:checked +
.walkerController input:checked + .reverse::after { content: 'Go Forward';
}
menu > div:first-of-type .delete { display: none;
}
menu select option:first-child { border-bottom: 1px solid #CCC; font-weight: bold;
}
menu .delete { background: #FFF; border: 1px solid #CCC; border-radius: 30px; color: #666; float: right; font-size: 20px; height: 20px; line-height: 8px; padding: 0 0 1px; width: 20px;
}
menu .delete:hover { background: #666; color: #fff; border-color: transparent;
}
.walkerController input { padding: 4px; margin-right: 6px; width: 70px; vertical-align: middle;
}
menu #addWalker { padding: 5px 20px;
}
header { background: #333; width: 100%; height: 40px; line-height: 36px; position: fixed; top: 0; left: 0; font-size: 14px;
}
a.git, a.by { position: absolute; top: 2px; right: 5px; opacity: 0.3; -webkit-transition: 0.3s cubic-bezier(0.055, 0.6, 0.2, 1); transition: 0.3s cubic-bezier(0.055, 0.6, 0.2, 1);
}
a.git { -webkit-transform: scale(0.6); transform: scale(0.6); -webkit-transform-origin: 100% 0 0; transform-origin: 100% 0 0;
}
a.git:hover, a.by:hover { opacity: 1;
}
a.by { text-transform: capitalize; right: auto; left: 5px; font-weight: bold; color: #FFF; text-decoration: none; font-family: 'Fjalla One', sans-serif; -webkit-transform-origin: 0%; transform-origin: 0%;
}
.social { position: absolute; top: -15px; left: 5px; -webkit-filter: blur(20px); opacity: 0; -webkit-transition: 1s ease-out; transition: .6s ease-out;
}
.social.show { top: 5px; opacity: 1; -webkit-filter: none;
}
.fbLike { height: 21px; width: 100px; border: none;
}
.social > * { opacity: .5; -webkit-transition: .2s ease-out; transition: .2s ease-out;
}
.social > *:hover { opacity: 1;
}
/* graphics */
.maze { background: url("http://dropthebit.com/wp-content/uploads/2013/03/maze.png"); height: 537px; width: 536px; display: inline-block; vertical-align: middle; position: relative; background-position: -37px 78px; background-repeat: no-repeat; overflow: visible;
}
/* Walker */
.walker { background: green; fill: green; position: absolute; z-index: 1; font-size: 25px; color: deeppink; height: 25px; width: 25px; text-align: center; line-height: 25px; border-radius: 25px; margin: -93px 0 0 28px; text-shadow: -6px 0px 2px rgba(0, 0, 0, 0.3), 7px 0;
}
#svgPath { opacity: 0; margin: -80px 0 0 39px; -webkit-transition: 0.2s; transition: 0.2s; stroke: #000; stroke-width: 2px; stroke-dasharray: 10 5; fill: none;
}
#svgPath.show { opacity: 0.5;
}

A Pen by Dzulfikar Adi Putra - Script Codes JS Codes

objList = { 1:{ ST:[ { caseId:[ { id:'walker-2', case:'case1', speed:10, color:'#24A9A8'}, { id:'walker-3', case:'case2', speed:5, color:'#24A9A8'}, { id:'walker-4', case:'case3', speed:15, color:'#24A9A8'}, ] } ] }
};
var walkers = [];
var state = 'stop';
console.log(state);
var svg = d3.select('svg') .attr('width',596) .attr('height',660);
var container = svg.append('g').attr('class','container');
var defs = svg.append('defs');
var path = container.append('path') .attr('id', 'svgPath') //.attr('transform', 'translate(38,-78)') .attr('d', "M6.426,79.957c0,11.458,1.996,19,14.175,19s14.513,3.233,14.513,13.992 c0,6.656-0.397,14.008-13.284,14.008c-9.987,0-15.716,7.74-15.716,13.369c0,21.011,0,61.556,0,82.832 c0,5.765,4.383,13.8,15.54,13.8c8.249,0,18.337,0,26.498,0c7.93,0,14.962,6.735,14.962,13.752c0,21.643,0,63.35,0,84.411 c0,6.236,6.625,12.837,13.29,12.837c26.493,0,85.584,0,111.78,0c8.115,0,12.93-6.952,12.93-13.364c0-21.212,0-62.342,0-83.445 c0-8.199,3.521-13.191,13.918-13.191c10.265,0,14.082,6.601,14.082,13.103c0,26.36,0,85.56,0,112.314 c0,5.3-3.583,13.583-12.941,13.583c-21.146,0-62.868,0-84.055,0c-5.23,0-13.004,4.118-13.004,12.652 c0,8.372,3.064,16.348,13.18,16.348c8.367,0,19.188,0,27.726,0c8.527,0,14.095,4.659,14.095,11.292 c0,7.924,5.049,13.708,14.07,13.708c31.402,0,106.853,0,137.575,0c9.209,0,13.355,8.605,13.355,13.932c0,26.855,0,85.454,0,111.787 c0,7.003,5.738,13.281,15.16,13.281c27.004,0,83.071,0,109.484,0c8.844,0,14.355,6.448,14.355,14.589 c0,10.933-5.415,16.411-13.775,16.411c-8.578,0-14.225,5.688-14.225,10.997c-1,21.253,16.501,34.67,39.834,32.67 s59.72-19.334,63.333-77.334s-38.419-58.724-2.876-143.362c35.543-84.637-31.851-132.554-23.66-194.708 c9.375-71.142,49.203-73.929,66.536-149.263c0-54.333-59.469-55.664-95.734-48.665s-48.265-18.999-91.599-20s-30,31-99.667,31 s-44.05-26.665-103.191-31c-59.142-4.335-38.976,40.167-121.642,41.832c-23.568,0-54.487-17.882-63.333-10.333 C12.211,47.827,7.582,70.632,6.53,77.041C6.376,77.978,6.426,79.895,6.426,79.957z");
/*----------------------------------------------------------	Page Configuration
-----------------------------------------------------------*/
// handles whatever moves along the path
function AnimateWalker(args){	this.pathAnimator = new PathAnimator( args.path.attr('d') );	this.walker = args.walker;	this.reverse = false;	this.speed = args.speed;	this.easing = '';	this.startOffset = null;	this.color = 'deeppink'; // visually separate different walkers easily
}
AnimateWalker.prototype = {	start : function(){	//this.walker.style.cssText = "";	this.startOffset = (this.reverse || this.speed < 0) ? 100 : 0; // if in reversed mode, then animation should start from the end, I.E 100%	this.pathAnimator.context = this; // just a hack to pass the context of every Walker inside it's pathAnimator	this.pathAnimator.start( this.speed, this.step, this.reverse, this.startOffset, this.finish, this.easing);	},	// Execute every "frame"	step : function(point, angle){ console.log(point); this.walker.attr('data-name',point.x+'-'+point.y); this.walker.attr('transform',function(){ return 'translate('+[point.x, point.y]+')'; });	},	// Restart animation once it was finished	finish : function(){	this.start();	},	// Resume animation from the last completed percentage (also updates the animation with new settings' values)	resume : function(){	this.pathAnimator.start( this.speed, this.step, this.reverse, this.pathAnimator.percent, this.finish, this.easing);	}
}
function generateWalker(args){ var newAnimatedWalker = new AnimateWalker( {walker: args.walker, path: args.path, speed:args.speed} ); console.log(newAnimatedWalker); walkers.push(newAnimatedWalker); console.log(walkers); return newAnimatedWalker;
}
function buttonStopPress(){ state = 'stop'; var button = d3.select("#button_play").classed('btn-success', false); button.select('i').attr('class', "fa fa-play"); d3.selectAll('g.container circle').remove(); walkers=[]; console.log("button stop invoked. state");
}
function buttonPlayPress(){ if(state=='stop'){ state='play'; var button = d3.select("#button_play").classed('btn-success', true); button.select("i").attr('class', "fa fa-pause"); /* generate circle */ for(var time in objList){ //console.log(data[time].ST); console.log('time:' + time) var ST = objList[time].ST; for(var time2 in ST ){ //console.log(ST[time2]); caseId = ST[time2].caseId; for(var event in caseId){ var theEvent = caseId[event]; console.log(theEvent.id); var elem = d3.select('svg g.container').append('circle') .attr('id', theEvent.id) .attr('class', 'walker') .attr('fill',theEvent.color) .attr('cx',0) .attr('cy',0) .attr('r', 10) .attr('transform', 'translate(0,-20)'); var newWalker = d3.select('#'+theEvent.id+'.walker'); //console.log(newWalker); generateWalker({walker:newWalker, path:path, speed:caseId[event].speed}).start(); } } } } else if(state=='play' || state=='resume'){ state = 'pause'; d3.select("#button_play i").attr('class', "fa fa-play"); walkers.forEach(function(d,i){ if(d.pathAnimator.running ){ d.pathAnimator.stop() } }); } else if(state=='pause'){ state = 'resume'; d3.select("#button_play i").attr('class', "fa fa-pause"); walkers.forEach(function(d,i){ if(!d.pathAnimator.running ){ d.resume.apply(d); } }); } console.log("playButton pressed play, state = "+state);
}
function changeSpeed(){ console.log('change speed! '+d3.select(this).attr('value')); walkers.forEach(function(d,i){ //d.speed = this.value; console.log('speed:'+d.speed+'- add:'+$('.speed').value); });
}
/*-----------------------------------------------------------	User Controls
------------------------------------------------------------*/
$('#showPath').on('change', function(){ if(d3.select('#svgPath').attr('class')=='show'){ d3.select('#svgPath').classed('show', false); } else{ d3.select('#svgPath').classed('show', true); }
})
//$('.speed').on('change', changeSpeed);
//$('.speed').trigger('change');	/*$('#showPath').on('change', togglePath);	$('#addWalker').on('click', addWalker);	$('menu')	.on('click', '.delete', removeInstance)	.on('click', '.stopPlay', stopPlay)	.on('click', '.reverse', switchDirection)	.on('change', '.speed', changeSpeed)	.on('change', 'select', changeEasing);	$('.speed').trigger('change');	// show / hide the path of the animated object	function togglePath(){	$('#svgPath').toggleClass('show');	}	// add a new instance Walker and his controller box	function addWalker(){	var newWalker = firstWalkerObj.cloneNode(true),	controllerTemplate = $('menu > div:last'),	controllerClone = controllerTemplate.clone(),	newAnimatedWalker = generateWalker({walker:newWalker, path:path, speed:30}),	color = '#'+(Math.random()*0xFFFFFF<<0).toString(16);	resetController( controllerClone );	controllerTemplate.after( controllerClone.css('borderColor', color) );	$(firstWalkerObj).after(newWalker);	controllerClone.data('walker', newAnimatedWalker); // keep track which controller controls which walker	newAnimatedWalker.color = color;	newAnimatedWalker.start();	}	// reset the controller box for new "walker" instances	function resetController(obj){	var speed = 30;	obj.find('.speed').val(speed).next().text(speed + 's');	obj.find(':checkbox').removeAttr('checked');	}	// pause or place the animated object along the path	function stopPlay(){	var thisAnimatedWalker = $(this.parentNode.parentNode).data('walker');	thisAnimatedWalker.pathAnimator.running ? thisAnimatedWalker.pathAnimator.stop() : thisAnimatedWalker.resume.apply(thisAnimatedWalker);	}	// switch direction of the animated object	function switchDirection(){	var thisAnimatedWalker = $(this.parentNode.parentNode).data('walker');	thisAnimatedWalker.reverse = (thisAnimatedWalker.reverse == true) ? false : true;	if( thisAnimatedWalker.pathAnimator.running )	thisAnimatedWalker.resume.apply(thisAnimatedWalker);	}	function changeSpeed(){	var thisAnimatedWalker = $(this.parentNode).data('walker');	thisAnimatedWalker.speed = this.value;	this.nextElementSibling.innerHTML = this.value + 's';	thisAnimatedWalker.resume.apply(thisAnimatedWalker);	}	function removeInstance(){	var parent = $(this.parentNode),	thisAnimatedWalker = parent.data('walker');	// make sure at least one Walker stays	if( walkers.length > 1 ){	parent.remove();	thisAnimatedWalker.pathAnimator.stop();	$(thisAnimatedWalker.walker).remove();	walkers.splice(walkers.indexOf(thisAnimatedWalker), 1);	}	}	function changeEasing(){	var thisAnimatedWalker = $(this.parentNode).data('walker'),	easingFunc = '';	if( this.value ){	var formula = this.value;	easingFunc = function(t){ return eval(formula) };	}	thisAnimatedWalker.easing = easingFunc;	thisAnimatedWalker.resume.apply(thisAnimatedWalker);	}	// reset checkboxes	$(':checkbox').removeAttr('checked');	$('select').prop('selectedIndex', 0);
*/
A Pen by Dzulfikar Adi Putra - Script Codes
A Pen by Dzulfikar Adi Putra - Script Codes
Home Page Home
Developer Dzulfikar Adi Putra
Username superpikar
Uploaded September 06, 2022
Rating 3
Size 8,016 Kb
Views 26,312
Do you need developer help for A Pen by Dzulfikar Adi Putra?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Dzulfikar Adi Putra (superpikar) Script Codes
Name
Force Layout JSON Directed Graph using Dot Engine 2, nodes using array of object
Centering Image and Icon in Semantic-UI card
D3js animation along path
Image Map
Force Layout Directed Graph using dot engine dagre-d3js library, data from JSON
Ionic tabs in the middle of the screen
SVG Animation Follow Path - d3js
Ionic Alphabetical List
Vue v1 Search and Pagination
JS Tree Example JSON Data
Create amazing captions with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!