Need advice or help to specify id

Question

Please suggest how in this code to correctly specify the id, so that when adding several elements with text to a page, everyone has a different id and, accordingly, different settings (shadow color, length and so on). The settings will change in the default configuration and in the shadow, where rgba is indicated. All this will not be manually inserted, but through a program that will assign its id to the existing ones.

(function($) { // jQuery plugin definition $.fn.text3d = function(opts) { // default configuration var config = $.extend({}, { depth: 5, angle: 100, color: "#ddd", lighten: -0.15, shadowDepth: 10, shadowAngle: 80, shadowOpacity: 0.3 }, opts); // to radians config.angle = config.angle * Math.PI / 180; config.shadowAngle = config.shadowAngle * Math.PI / 180; // create text shadow function TextShadow(e) { var s = "", i, f, x, y, c; // 3D effect for (i = 1; i <= config.depth; i++) { x = Math.round(Math.cos(config.angle) * i); y = Math.round(Math.sin(config.angle) * i); c = ColorLuminance(config.color, (i-1)/(config.depth-1)*config.lighten); s += x+"px "+y+"px 0 "+c+","; } // shadow for (f = 1, i = 1; f <= config.shadowDepth; i++) { f = f+i; x = Math.round(Math.cos(config.shadowAngle) * f); y = Math.round(Math.sin(config.shadowAngle) * f); c = config.shadowOpacity - ((config.shadowOpacity - 0.1) * i/config.shadowDepth); s += x+"px "+y+"px "+f+"px rgba(0,0,0,"+c+"),"; } e.style.textShadow = s.substr(0, s.length-1); } // return lighter (+lum) or darker (-lum) color function ColorLuminance(hex, lum) { // validate hex string hex = String(hex).replace(/[^0-9a-f]/gi, ''); if (hex.length < 6) { hex = hex[0]+hex[0]+hex[1]+hex[1]+hex[2]+hex[2]; } lum = lum || 0; // convert to decimal and change luminosity var rgb = "#", c, i; for (i = 0; i < 3; i++) { c = parseInt(hex.substr(i*2,2), 16); c = Math.round(Math.min(Math.max(0, c + (c * lum)), 255)).toString(16); rgb += ("00"+c).substr(c.length); } return rgb; } // initialization this.each(function() { TextShadow(this); }); return this; }; })(jQuery); // initialize all expanding textareas jQuery(function() { jQuery(".text3d").text3d(); });

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="text3d">Test 3D TEXT</div> <div class="text3d">Test 3D TEXT - second</div>

And thanks for the answer, of course, I did it again now, but it worked a little differently.
please also tell me how to make another shadow have independent settings?
s + = x + "px" + y + "px" + f + "px rgba (0,0,0," + c + "),";

Answer 1 · 2019-01-25T16:50:11

 (function($) { // jQuery plugin definition $.fn.text3d = function(opts) { // default configuration var config = $.extend({}, { depth: 5, angle: 100, color: "#ddd", lighten: -0.15, shadowDepth: 10, shadowAngle: 80, shadowOpacity: 0.3 }, opts); // to radians config.angle = config.angle * Math.PI / 180; config.shadowAngle = config.shadowAngle * Math.PI / 180; // create text shadow function TextShadow(e) { var s = "", i, f, x, y, c; // 3D effect for (i = 1; i <= config.depth; i++) { x = Math.round(Math.cos(config.angle) * i); y = Math.round(Math.sin(config.angle) * i); c = ColorLuminance(config.color, (i-1)/(config.depth-1)*config.lighten); s += x+"px "+y+"px 0 "+c+","; } // shadow for (f = 1, i = 1; f <= config.shadowDepth; i++) { f = f+i; x = Math.round(Math.cos(config.shadowAngle) * f); y = Math.round(Math.sin(config.shadowAngle) * f); c = config.shadowOpacity - ((config.shadowOpacity - 0.1) * i/config.shadowDepth); s += x+"px "+y+"px "+f+"px rgba(0,0,0,"+c+"),"; } e.style.textShadow = s.substr(0, s.length-1); } // return lighter (+lum) or darker (-lum) color function ColorLuminance(hex, lum) { // validate hex string hex = String(hex).replace(/[^0-9a-f]/gi, ''); if (hex.length < 6) { hex = hex[0]+hex[0]+hex[1]+hex[1]+hex[2]+hex[2]; } lum = lum || 0; // convert to decimal and change luminosity var rgb = "#", c, i; for (i = 0; i < 3; i++) { c = parseInt(hex.substr(i*2,2), 16); c = Math.round(Math.min(Math.max(0, c + (c * lum)), 255)).toString(16); rgb += ("00"+c).substr(c.length); } return rgb; } // initialization this.each(function() { TextShadow(this); }); return this; }; })(jQuery); // initialize all expanding textareas jQuery(function() { jQuery("#one").text3d(); jQuery("#two").text3d({ color: "#F00" }); jQuery("#three").text3d({ color: "#0F0", depth: 35, angle: 45, lighten: -0.15, shadowDepth: 110, shadowAngle: 10 }); });

 #three { font-size:24px; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="text3d" id="one">Test 3D TEXT</div> <div class="text3d" id="two">Test 3D TEXT - second</div> <br/> <div class="text3d" id="three">Test 3D TEXT - third</div>

Thanks for the answer, but this is a bit not what was needed.
The changes themselves will be in the default configuration block.
The editor program assigns id to elements added to the page.
In html, the following form: <div class = "% id% text3d">% text = "3D Text"% </ div>, where% id% is the identifier that the program will assign.
And in your answer there is no possibility to use different settings for the shadow (angle, depth of the shadow and others) for different text, and the whole question is precisely this.
Still, the request remains, suggest how to make an independent setting and shadows, the line in // shadow.

Need advice or help to specify id

1 answer 1

More articles: