Skip to content

Instantly share code, notes, and snippets.

@behnamazimi

behnamazimi/ellipsis-html-sample.html

Last active August 22, 2020 10:17
Show Gist options
  • Save behnamazimi/333d4cf109e0b429886e174e0fe33184 to your computer and use it in GitHub Desktop.
Save behnamazimi/333d4cf109e0b429886e174e0fe33184 to your computer and use it in GitHub Desktop.
Download ZIP
ellipsis-html Sample with avatars
Raw
ellipsis-html-sample.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>ellipsis-html Sample with avatars</title>
<!-- adding library -->
<script src="http://unpkg.com/ellipsis-html/lib/ellipsis-html.min.js"></script>
<style>
body {
background-color: #efefef;
font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
margin-top: 5rem;
}
.title {
position: absolute;
left: 50%;
transform: translateX(-50%);
text-align: center;
}
.title h1 {
margin-bottom: 0;
}
.title p {
font-size: 16px;
opacity: 0.7;
margin-top: 0.5rem;
}
#avatars {
width: 80%;
margin: 0 auto;
height: 80px;
max-width: 700px;
}
#avatars img {
width: 80px;
height: 80px;
border-radius: 50%;
box-shadow: 1px 1px 7px 4px rgb(0 0 0 / 0.16);
}
</style>
</head>
<body>
<div class="title">
<h1>My Friends</h1>
<p>with ellipsis-html</p>
</div>
<div id="avatars">
<img src="https://randomuser.me/api/portraits/women/2.jpg" />
<img src="https://randomuser.me/api/portraits/men/6.jpg" />
<img src="https://randomuser.me/api/portraits/women/12.jpg" />
<img src="https://randomuser.me/api/portraits/women/5.jpg" />
<img src="https://randomuser.me/api/portraits/women/60.jpg" />
<img src="https://randomuser.me/api/portraits/men/11.jpg" />
<img src="https://randomuser.me/api/portraits/women/50.jpg" />
</div>
<script>
const elm = document.getElementById("avatars");
const options = {
type: "equal",
size: 0.5,
reflection: 1.5,
rotateY: 157,
reverse: true,
shiftX: 0,
shiftY: 0
};
const htmlArc = new EllipsisHTML(elm, options);
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment