A Pen by AaronChuo (小狂)

Developer
AaronChuo (小狂)
Size
3,870 Kb
Views
38,456
  1. A Pen by AaronChuo (小狂) Previews
  2. A Pen by AaronChuo (小狂) HTML Codes
  3. A Pen by AaronChuo (小狂) CSS Codes
  4. A Pen by AaronChuo (小狂) JS Codes

How do I make an a pen by aaronchuo (小狂)?

What is a a pen by aaronchuo (小狂)? How do you make a a pen by aaronchuo (小狂)? This script and codes were developed by AaronChuo (小狂) on 11 September 2022, Sunday.

A Pen by AaronChuo (小狂) Previews
IQ Test

A Pen by AaronChuo (小狂) - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>A Pen by AaronChuo (小狂)</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css"> <link rel='stylesheet prefetch' href='https://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css'> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div id='selectedArea'></div>
<div class='cart fa fa-shopping-cart'></div>
<div class='item-list'> <div class='item'>item 1</div> <div class='item'>item 2</div> <div class='item'>item 3</div> <div class='item'>item 4</div> <div class='item'>item 5</div> <div class='item'>item 6</div> <div class='item'>item 7</div> <div class='item'>item 8</div> <div class='item'>item 9</div> <div class='item'>item 10</div> <div class='item'>item 11</div> <div class='item'>item 12</div> <div class='item'>item 13</div> <div class='item'>item 14</div> <div class='item'>item 15</div> <div class='item'>item 16</div> <div class='item'>item 17</div> <div class='item'>item 18</div> <div class='item'>item 19</div> <div class='item'>item 20</div> <div class='item'>item 21</div> <div class='item'>item 22</div> <div class='item'>item 23</div> <div class='item'>item 24</div>
</div> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

A Pen by AaronChuo (小狂) - Script Codes CSS Codes

body { background-color: #eee; font-size: 16px;
}
.cart { position: fixed; top: 15px; left: 15px; font-size: 2.8em; color: #999; z-index: 1;
}
.item-list { position: absolute; top: 5%; bottom: 0; left: 0; right: 0; margin: auto; display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-box-pack: start; -ms-flex-pack: start; justify-content: flex-start; width: 90vw; height: 90vh;
}
.item-list .item { overflow: hidden; width: 200px; height: 200px; margin: 5px; line-height: 200px; border: 1px solid #fff; background-color: rgba(204, 204, 204, 0.5); box-shadow: 1px 1px 1px #aaa; color: #666; text-align: center; -webkit-transition: all 300ms cubic-bezier(0, 1, 0, 1.5); transition: all 300ms cubic-bezier(0, 1, 0, 1.5);
}
.selected { -webkit-transform: rotateZ(3deg); transform: rotateZ(3deg); -webkit-transform-origin: 50% 0; transform-origin: 50% 0;
}
.pick { -webkit-animation: pickUp 500ms ease forwards; animation: pickUp 500ms ease forwards;
}
@-webkit-keyframes pickUp { 100% { top: -50px; left: -50px; width: 1px; height: 1px; opacity: 0; }
}
@keyframes pickUp { 100% { top: -50px; left: -50px; width: 1px; height: 1px; opacity: 0; }
}
#selectedArea { display: none; position: absolute; width: 1px; height: 1px; border: 1px solid #fff; background-color: rgba(255, 255, 255, 0.2); box-shadow: 0 0 5px #999; z-index: 9;
}

A Pen by AaronChuo (小狂) - Script Codes JS Codes

(function(window, document, $) { 'use strict'; var isDragging = 0, selectedArea = { x1: 0, x2: 0, y1: 0, y2: 0 }; var startRecord = function(event) { $('.selected').removeClass('selected'); isDragging = 1; selectedArea.x1 = event.pageX; selectedArea.y1 = event.pageY; $('#selectedArea') .show() .css({ left: selectedArea.x1 + 'px', top: selectedArea.y1 + 'px', width: '1px', height: '1px' }); }; var stopRecord = function() { isDragging = 0; $('.selected') .each(function(i) { console.log($(this).offset().left) $(this).css({ position: 'absolute', top: $(this).offset().top + 'px', left: $(this).offset().left + 'px' }); }) .addClass('pick'); $('#selectedArea').hide(); selectedArea.x1 = 0; selectedArea.x2 = 0; selectedArea.y1 = 0; selectedArea.y2 = 0; }; var updateSelectedArea = function(event) { selectedArea.x2 = event.pageX; selectedArea.y2 = event.pageY; }; var drawRect = function() { var rect = $('#selectedArea'), width = selectedArea.x2 - selectedArea.x1, height = selectedArea.y2 - selectedArea.y1; if(width < 0) { rect.css({ left: selectedArea.x2 + 'px' }); } if(height < 0) { rect.css({ top: selectedArea.y2 + 'px' }); } rect.css({ width: Math.abs(width) + 'px', height: Math.abs(height) + 'px' }); }; var isInRange = function(element) { var flag = 1, elemRange = { x1: element.offset().left, x2: element.offset().left + element.width(), y1: element.offset().top, y2: element.offset().top + element.height() }; var x1Con = (selectedArea.x1 < elemRange.x1 && selectedArea.x2 < elemRange.x1), x2Con = (selectedArea.x1 > elemRange.x2 && selectedArea.x2 > elemRange.x2), y1Con = (selectedArea.y1 < elemRange.y1 && selectedArea.y2 < elemRange.y1), y2Con = (selectedArea.y1 > elemRange.y2 && selectedArea.y2 > elemRange.y2); if(x1Con || x2Con) { flag = 0; } if(y1Con || y2Con) { flag = 0; } return flag; }; var selectItems = function() { $('.item').each(function() { if(isInRange($(this))) { $(this).addClass('selected'); } else { $(this).removeClass('selected'); } }); }; $(document).on({ 'mousedown': function(event) { startRecord(event); }, 'mouseup': function() { stopRecord(); }, 'mousemove': function(event) { if(isDragging) { updateSelectedArea(event); drawRect(); selectItems(); } } });
})(window, document, jQuery);
A Pen by AaronChuo (小狂) - Script Codes
A Pen by AaronChuo (小狂) - Script Codes
Home Page Home
Developer AaronChuo (小狂)
Username aaronchuo
Uploaded September 11, 2022
Rating 3
Size 3,870 Kb
Views 38,456
Do you need developer help for A Pen by AaronChuo (小狂)?

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!

AaronChuo (小狂) (aaronchuo) Script Codes
Name
Animated Ability Chart
Gradient Circle Spinner
I drink and I know things
Gradient Color Spin
Animated Donut Chart
Radar Scanner
Apple Watch Bubble-like UI
Poached Egg by pure CSS
Happy Birthday to Me
Cool Future-like Interactive Dropdown
Create amazing captions 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!