A Pen by nobitagit

Developer
Nobitagit
Size
2,965 Kb
Views
8,096
  1. A Pen by nobitagit Previews
  2. A Pen by nobitagit HTML Codes
  3. A Pen by nobitagit CSS Codes
  4. A Pen by nobitagit JS Codes

How do I make an a pen by nobitagit?

What is a a pen by nobitagit? How do you make a a pen by nobitagit? This script and codes were developed by Nobitagit on 05 December 2022, Monday.

A Pen by nobitagit Previews
IQ Test

A Pen by nobitagit - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>A Pen by nobitagit</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! */ *,
*:before,
*:after { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;
}
html, body { min-height: 100%;
}
#box { width: 400px; height: 400px; position: relative; border-radius: 100%; border: 1px solid teal;
}
.dot { position: absolute; border-radius: 100%; width: 40px; height: 40px; left: 50%; top: 50%; margin-left: -20px; margin-top: -20px; background: rebeccapurple;
}
#box img { width: 40px; height: 40px; position: absolute; border-radius: 100%; -webkit-transition: all 1s;
} </style> <script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
</head>
<body> <div id="box"> <div class="dot"></div> <img id="" src="http://lorempixel.com/40/40/"/> <img id="" src="http://lorempixel.com/40/40/"/> <img id="" src="http://lorempixel.com/40/40/"/> <img id="" src="http://lorempixel.com/40/40/"/> <img id="" src="http://lorempixel.com/40/40/"/> <img id="" src="http://lorempixel.com/40/40/"/> <img id="" src="http://lorempixel.com/40/40/"/> <img id="" src="http://lorempixel.com/40/40/"/> <img id="" src="http://lorempixel.com/40/40/"/> <img id="" src="http://lorempixel.com/40/40/"/> <img id="" src="http://lorempixel.com/40/40/"/> <img id="" src="http://lorempixel.com/40/40/"/> <img id="" src="http://lorempixel.com/40/40/"/> <img id="" src="http://lorempixel.com/40/40/"/> <img id="" src="http://lorempixel.com/40/40/"/> <img id="" src="http://lorempixel.com/40/40/"/> <img id="" src="http://lorempixel.com/40/40/"/> <img id="" src="http://lorempixel.com/40/40/"/> <img id="" src="http://lorempixel.com/40/40/"/> <img id="" src="http://lorempixel.com/40/40/"/> <img id="" src="http://lorempixel.com/40/40/"/> <img id="" src="http://lorempixel.com/40/40/"/> </div>
<p>
Interactive version is on github <a href="https://github.com/nobitagit/radial">https://github.com/nobitagit/radial</a>
</p> <script src="js/index.js"></script>
</body>
</html>

A Pen by nobitagit - Script Codes CSS Codes

*,
*:before,
*:after { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;
}
html, body { min-height: 100%;
}
#box { width: 400px; height: 400px; position: relative; border-radius: 100%; border: 1px solid teal;
}
.dot { position: absolute; border-radius: 100%; width: 40px; height: 40px; left: 50%; top: 50%; margin-left: -20px; margin-top: -20px; background: rebeccapurple;
}
#box img { width: 40px; height: 40px; position: absolute; border-radius: 100%; -webkit-transition: all 1s;
}

A Pen by nobitagit - Script Codes JS Codes

 var circle = document.getElementById('box'), imgs = document.getElementsByTagName('img'), total = imgs.length, coords = {}, diam, radius1, radius2, imgW; // get circle diameter // getBoundingClientRect outputs the actual px AFTER transform // using getComputedStyle does the job as we want diam = parseInt( window.getComputedStyle(circle).getPropertyValue('width') ), radius = diam/2, imgW = imgs[0].getBoundingClientRect().width, // get the dimensions of the inner circle we want the images to align to radius2 = radius - imgW var i, alpha = Math.PI / 2, len = imgs.length, corner = 2 * Math.PI / total; for ( i = 0 ; i < total; i++ ){ imgs[i].style.left = parseInt( ( radius - imgW / 2 ) + ( radius2 * Math.cos( alpha ) ) ) + 'px' imgs[i].style.top = parseInt( ( radius - imgW / 2 ) - ( radius2 * Math.sin( alpha ) ) ) + 'px' alpha = alpha - corner; }
A Pen by nobitagit - Script Codes
A Pen by nobitagit - Script Codes
Home Page Home
Developer Nobitagit
Username nobitagit
Uploaded December 05, 2022
Rating 3
Size 2,965 Kb
Views 8,096
Do you need developer help for A Pen by nobitagit?

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!

Nobitagit (nobitagit) Script Codes
Name
CSS Turntable
Svg mobile burger icon
Rebbbound
Angularjs Material floating button directive
Radials
CSS3 Locker
Ripples in water
CSS-only Clock
Prankmarklet
Create amazing blog posts 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!