Responsive Animated Selection Frame

In this example below you will see how to do a Responsive Animated Selection Frame with some HTML / CSS and Javascript

Thumbnail
This awesome code was written by embrilliant, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright embrilliant ©

Technologies

  • HTML
  • CSS
  • JavaScript
<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  <title>Responsive Animated Selection Frame</title>
  
  
  <link rel='stylesheet prefetch' href='http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css'>

      <link rel="stylesheet" href="css/style.css">

  
</head>

<body>

  <div id="container" class="container">
   <div id="head-bar" class="">Purchase a Role</div>
      <form>

            <div id="product" class="row">
               <div id="product-list">

               </div>
                
            </div>
         
      </form>
   </div>
  <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script src='http://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.2/jquery-ui.min.js'></script>

  

    <script  src="js/index.js"></script>




</body>

</html>

/*Downloaded from https://www.codeseek.co/embrilliant/responsive-animated-selection-frame-JdOYJo */
body {
	font-family: Arial, Helvetica, sans-serif;
}

img {
	width: 100%;
	height: 360px;
	margin: 0;
}
h4 {
	font-size: 1.4em;
	color: white;
	text-shadow: 1px 1px 2px rgba(60, 60, 60, 0.5) ;
}
.container {
	background-color: rgba(255, 32, 148, 0.5);
	padding: 0;
}

#head-bar {
	font-size: 1.3em;
	font-weight: 500;
	color: white;
	height: 1.8em;
	vertical-align: middle;
	margin: 0;
	padding-top: 0.2em;
	background: linear-gradient(to bottom, #000000 0%,#45484d 100%); /* W3C */
}

#product-list > div {
	text-align: center;
	background: linear-gradient(to bottom, #e5e5e5 1%,#ffffff 20%,#ffffff 83%,#e5e5e5 100%);
	text-align: center;
	padding-bottom: 10px;
	margin: 0;
}

#product-list > div:hover {
	background: linear-gradient(to bottom, #C6C6C6 1%,#ffffff 20%,#ffffff 83%,#C6C6C6 100%);
}

#product-list #selected-border {
	border: 10px solid rgba(255, 255, 255, 0.85);
	z-index: 10;
	position: absolute;
	background: none;
	border-radius: 2px;
	box-shadow: inset 0px 0px 25px 0px rgba(70, 70, 70, 0.5),
				0px 0px 10px 0px rgba( 100, 100, 100, 0.5);
}

.price {
	width: 100%;
	font-size: 1.2em;
	padding-top: 0.75em;
	display: block;
}

/*Downloaded from https://www.codeseek.co/embrilliant/responsive-animated-selection-frame-JdOYJo */
var roles = 
[
	{
		type: "Programmer",
		price: 666666000000.00,
		description: "The most powerful type.",
		canPurchase: true,
		soldOut: false,
		select: 1,
		image: "http://digitaleverything.net/demos/angular/images/product-images/marketer.png",
		messages: [
						{
							"message": "Awesome!",
							"who": "Magician"
						}
					]
	},
	{
		type: "Marketer",
		price: 9999900.99,
		description: "The persuasive type.",
		canPurchase: true,
		soldOut: false,
		select: 2,
		image: "http://digitaleverything.net/demos/angular/images/product-images/programmer.png",
		messages: [
				]
	},
	{
		type: "Business Person",
		price: 77777000.00,
		description: "The one who is good at administrative tasks",
		canPurchase: true,
		soldOut: false,
		select: 3,
		image: "http://digitaleverything.net/demos/angular/images/product-images/b-p.png",
		message: [
				]
	},
	{
		type: "Artist",
		price: 88888000.00,
		description: "The one who does whatever.",
		canPurchase: true,
		soldOut: false,
		select: 4,
		image: "http://digitaleverything.net/demos/angular/images/product-images/artist.png",
		messages: [
				]
	}
];
$(function() {

	for (var i = 0; i < roles.length; i++) {
		$("#product-list").append("<div id='product-list-item"+ (i+1) +"' class='col-sm-6 col-md-3'><h4>"+roles[i].type+"</h4><img src='"+roles[i].image+"'/><strong class='price'>"+ roles[i].price +" XRP</strong><input type='radio' name='role' value='"+ (i+1)+ "'></div>");	
	}
	// JavaScript
	var borderEl = document.createElement("div");
		borderEl.id = "selected-border";
	// convert to jQuery
	var $borderEl = $(borderEl);
	
	$borderEl.hide();

	var borderT = $("#product-list-item1").position().top,
		borderL = $("#product-list-item1").position().left,
		borderW = $("#product-list-item1").outerWidth(),
		borderH = $("#product-list-item1").outerHeight();

	$("#product-list").append($borderEl);
	$borderEl.css({top: borderT, left: borderL, width: borderW, height: borderH });

	function borderPost(item) {
		borderT = $("#"+item).position().top;
		borderL = $("#"+item).position().left;
		borderW = $("#"+item).outerWidth();
		borderH = $("#"+item).outerHeight();
	}

	$("#product-list").on("click", function(e) {

		var $item = $(e.target).closest("div"),
			itemId = $item.attr("id"),
			input = $item.children("input");

		$borderEl.show();
		borderPost(itemId);

		$borderEl.animate({ top: borderT, left: borderL, width: borderW, height: borderH }, 
		400, "easeOutQuart");
		
		input.prop('checked', true);

		$(window).on("resize", function() {
			borderPost(itemId);
			$borderEl.css({ top: borderT, left: borderL, width: borderW, height: borderH });
		});
	});

});

Comments