A Pen by Saransh Sinha

Developer
Saransh Sinha
Size
3,797 Kb
Views
22,264
  1. A Pen by Saransh Sinha Previews
  2. A Pen by Saransh Sinha HTML Codes
  3. A Pen by Saransh Sinha CSS Codes
  4. A Pen by Saransh Sinha JS Codes

How do I make an a pen by saransh sinha?

What is a a pen by saransh sinha? How do you make a a pen by saransh sinha? This script and codes were developed by Saransh Sinha on 13 September 2022, Tuesday.

A Pen by Saransh Sinha Previews
IQ Test

A Pen by Saransh Sinha - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>A Pen by Saransh Sinha</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css"> <style> /* NOTE: The styles were added inline because Prefixfree needs access to your styles and they must be inlined if they are on local disk! */ body, html { height: 100%;
}
body { display: flex; justify-content: center; align-items: center; background: #F8FBFB;
}
body #box { width: 500px; height: 500px; background: black; box-shadow: 0 40px 70px -20px rgba(42, 59, 70, 0.43);
} </style> <script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
</head>
<body> <div id='box'></div> <script src="js/index.js"></script>
</body>
</html>

A Pen by Saransh Sinha - Script Codes CSS Codes

body, html { height: 100%;
}
body { display: flex; justify-content: center; align-items: center; background: #F8FBFB;
}
body #box { width: 500px; height: 500px; background: black; box-shadow: 0 40px 70px -20px rgba(42, 59, 70, 0.43);
}

A Pen by Saransh Sinha - Script Codes JS Codes

// target to give background to
var $div = document.getElementById("box");
function hex2rgb( colour ) {
var r,g,b;
if ( colour.charAt(0) == '#' ) {
colour = colour.substr(1);
}
r = colour.charAt(0) + '' + colour.charAt(1);
g = colour.charAt(2) + '' + colour.charAt(3);
b = colour.charAt(4) + '' + colour.charAt(5);
r = parseInt( r,16 );
g = parseInt( g,16 );
b = parseInt( b ,16);
return [r, g, b];
}
// rgb vals of the gradients
var gradients = [
{ stop: hex2rgb('#021F56'), start: hex2rgb('#0C0621') },
{ stop: hex2rgb('#1043A7'), start: hex2rgb('#4A1360') },
{ stop: hex2rgb('#4E52C9'), start: hex2rgb('#B92A83') },
{ stop: hex2rgb('#776AF0'), start: hex2rgb('#EC589D') },
{ stop: hex2rgb('#BC97F0'), start: hex2rgb('#EEBDB6') },
{ stop: hex2rgb('#9AA6F4'), start: hex2rgb('#DFA6A6') },
{ stop: hex2rgb('#9CC2EC'), start: hex2rgb('#CBBFB0') },
{ stop: hex2rgb('#AFEAF6'), start: hex2rgb('#D9D9BD') },
{ stop: hex2rgb('#B7FEF7'), start: hex2rgb('#E0EDBB') },
{ stop: hex2rgb('#CDFFFA'), start: hex2rgb('#E9F3CB') },
{ stop: hex2rgb('#FFFFFF'), start: hex2rgb('#FFFFFF') }
];
// how long for each transition
var transition_time = 0.5;
// how many frames per second
var fps = 60;
// interal type vars
var timer; // for the setInterval
var interval_time = Math.round(1000/fps); // how often to interval
var currentIndex = 0; // where we are in the gradients array
var nextIndex = 1; // what index of the gradients array is next
var steps_count = 0; // steps counter
var steps_total = Math.round(transition_time*fps); // total amount of steps
var rgb_steps = {
start: [0,0,0],
stop: [0,0,0]
}; // how much to alter each rgb value
var rgb_values = {
start: [0,0,0],
stop: [0,0,0]
}; // the current rgb values, gets altered by rgb steps on each interval
var prefixes = ["-webkit-","-moz-","-o-","-ms-",""]; // for looping through adding styles
var div_style = $div.style; // short cut to actually adding styles
var gradients_tested = false;
var color1, color2;
// sets next current and next index of gradients array
function set_next(num) {
return (num + 1 < gradients.length) ? num + 1 : 0;
}
// work out how big each rgb step is
function calc_step_size(a,b) {
return (a - b) / steps_total;
}
// populate the rgb_values and rgb_steps objects
function calc_steps() {
for (var key in rgb_values) {
if (rgb_values.hasOwnProperty(key)) {
for(var i = 0; i < 3; i++) {
rgb_values[key][i] = gradients[currentIndex][key][i];
rgb_steps[key][i] = calc_step_size(gradients[nextIndex][key][i],rgb_values[key][i]);
}
}
}
}
// update current rgb vals, update DOM element with new CSS background
function updateGradient(){
// update the current rgb vals
for (var key in rgb_values) {
if (rgb_values.hasOwnProperty(key)) {
for(var i = 0; i < 3; i++) {
rgb_values[key][i] += rgb_steps[key][i];
}
}
}
// generate CSS rgb values
var t_color1 = "rgb("+(rgb_values.start[0] | 0)+","+(rgb_values.start[1] | 0)+","+(rgb_values.start[2] | 0)+")";
var t_color2 = "rgb("+(rgb_values.stop[0] | 0)+","+(rgb_values.stop[1] | 0)+","+(rgb_values.stop[2] | 0)+")";
// has anything changed on this interation
if (t_color1 != color1 || t_color2 != color2) {
// update cols strings
color1 = t_color1;
color2 = t_color2;
// update DOM element style attribute
div_style.backgroundImage = "-webkit-gradient(linear, top, bottom, from("+color1+"), to("+color2+"))";
for (var i = 0; i < 4; i++) {
div_style.backgroundImage = prefixes[i]+"linear-gradient(90deg, "+color1+", "+color2+")";
}
}
// test if the browser can do CSS gradients
if (div_style.backgroundImage.indexOf("gradient") == -1 && !gradients_tested) {
// if not, kill the timer
clearTimeout(timer);
}
gradients_tested = true;
// we did another step
steps_count++;
// did we do too many steps?
if (steps_count > steps_total) {
// reset steps count
steps_count = 0;
// set new indexs
currentIndex = set_next(currentIndex);
nextIndex = set_next(nextIndex);
// calc steps
calc_steps();
}
}
// initial step calc
calc_steps();
// go go go!
timer = setInterval(updateGradient,interval_time);
A Pen by Saransh Sinha - Script Codes
A Pen by Saransh Sinha - Script Codes
Home Page Home
Developer Saransh Sinha
Username saransh
Uploaded September 13, 2022
Rating 3
Size 3,797 Kb
Views 22,264
Do you need developer help for A Pen by Saransh Sinha?

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!

Saransh Sinha (saransh) Script Codes
Name
404 Page
Parallax Star background in CSS
Avatar Aang SVG Animated
Readr for Reddit
House Of Cards Animated Logo
Flat Notifications - FlatNotify.js v0.1
Gravity Animated Poster
COSMOS Title Card CSS3
New Pen
SERIAL Logo - single element
Create amazing love letters 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!