rsp2k/honeycomb-background-with-bees.markdown

## honeycomb-background-with-bees.markdown

      
    Raw
  

              honeycomb-background-with-bees.markdown
            
          
    Honeycomb background with bees

Responsive honeycomb background with blinking eye bees
A Pen by thedoctor46super on CodePen.
License.

  
## index.html
<html>

<body>
  <menu>
    <input id="beeNumber" type="number" onchange="beeNumChange()" max="50" min="0" value="2" />
    <span>Number of bees:&nbsp;</span>

    <div class="clearRight"></div>

    <input id="beePeriod" type="number" max="50" min="1" value="5" />
    <span>Period (sec):&nbsp;</span>

  </menu>
  <div id="beeContainer"></div>
</body>

</html>

## script.js
        var beeSel = '.bee';

        var rowOffset = 80,
          columnOffset = 48;
        var oddRowTopInit = 29,
          oddRowLeftInit = 29;
        var evenRowTopInit = 69,
          evenRowLeftInit = 5;

        var numOfRows, numOfColumns;

        $(function() {
          initialize();
        });

        $(window).resize(function() {
          defineGrid();
        });

        function initialize() {
          defineGrid();
          createBees();

          $.each($(beeSel), function(index, value) {
            $(value).blink();
          });
        }

        function defineGrid() {
          numOfRows = parseInt($(window).height() / (rowOffset / 2));
          numOfColumns = parseInt($(window).width() / columnOffset);
        }

        function createBees() {
          $('#beeContainer').empty();

          var beeNumber = $('#beeNumber').val();

          if (beeNumber > 50) {
            beeNumber = 50;
            $('#beeNumber').val(50);
          } else if (beeNumber < 0) {
            beeNumber = 0;
            $('#beeNumber').val(0);
          }

          for (var i = 0; i < beeNumber; i++) {
            var newElem = $('<div>').addClass('bee').append(
              $('<div>').addClass('head').append(
                $('<div>').addClass('right-eye').append(
                  $('<div>').addClass('no-border right-eye-pupil')
                ).append(
                  $('<div>').addClass('no-border body eyelid-top')
                ).append(
                  $('<div>').addClass('no-border body eyelid-bottom')
                )
              ).append(
                $('<div>').addClass('left-eye').append(
                  $('<div>').addClass('no-border left-eye-pupil')
                ).append(
                  $('<div>').addClass('no-border body eyelid-top')
                ).append(
                  $('<div>').addClass('no-border body eyelid-bottom')
                )
              )
            );

            $('#beeContainer').append(newElem);
          }
        }

        function beeNumChange() {
          initialize();
        }

        $.fn.blink = function() {
          this.css('top', oddRowTopInit + 'px');
          this.css('left', oddRowLeftInit + 'px');

          this.blinkAway();
        }

        $.fn.blinkAway = function() {
          var jqElem = this;

          jqElem.fadeOut('slow', function() {
            var left, top;

            var beePeriod = $('#beePeriod').val() * 1000;

            if (beePeriod > 50000) {
              beePeriod = 50000;
              $('#beePeriod').val(50);
            } else if (beePeriod < 1000) {
              beePeriod = 1000;
              $('#beePeriod').val(1);
            }

            var randRow = Math.floor((Math.random() * numOfRows) + 1);
            var randCol = Math.floor((Math.random() * numOfColumns) - 1);
            randCol = randCol <= 0 ? 1 : randCol;

            var newColumnOffset = randCol * columnOffset;

            //console.log(randRow + ', ' + randCol);

            if (randRow % 2 == 0) {
              //even rows
              top = evenRowTopInit + (((randRow - 2) / 2) * rowOffset);
              left = evenRowLeftInit + newColumnOffset;
            } else {
              //odd rows
              top = oddRowTopInit + (((randRow - 1) / 2) * rowOffset);
              left = oddRowLeftInit + newColumnOffset;
            }

            jqElem.css('top', top + 'px');
            jqElem.css('left', left + 'px');

            jqElem.fadeIn('slow', function() {
              setTimeout(function() {
                jqElem.blinkAway();
              }, beePeriod);
            });
          });
        }

## scripts
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>

## style.css
html,
body {
  margin: 0;
  padding: 0;
  overflow: hidden;
}

body {
  background-image: url('data:image/jpeg;base64,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');
}

menu {
  margin: 0;
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  border-radius: 4px;
  background-color: #333;
  border: 2px solid #FFF;
  box-shadow: 0 0 2px 2px #333;
  padding: 5px;
  display: inline-block;
  position: fixed;
  top: 5px;
  right: 5px;
  font-size: 10px;
  font-family: 'Segoe UI', Tahoma, Verdana;
  z-index: 999;
  opacity: 0.8;
  color: #FFF;
  text-align: right;
}

menu:hover {
  opacity: 1;
}

menu input {
  width: 35px;
  float: right;
}

menu span {
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  cursor: default;
  float: right;
  margin-top: 3px;
}

.bee * {
  position: absolute;
  box-sizing: content-box;
  -moz-box-sizing: content-box;
}

.clearRight {
  clear: right;
}

.bee {
  position: absolute;
  display: none;
}

.bee .head * {
  border: 1px solid #110b00;
}

.bee .head .no-border {
  border: none;
}

.bee .head .body {
  background: #fbd800;
}

.bee .head .eyelid {
  top: 55px;
  left: 63px;
  width: 10px;
  height: 10px;
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  border-radius: 50%;
}

.bee .head .right-eye {
  height: 18px;
  left: 18px;
  overflow: hidden;
  width: 18px;
  -moz-border-radius: 50%;
  -webkit-border-radius: 50%;
  border-radius: 50%;
  background: #ffffff;
}

.bee .head .right-eye .right-eye-pupil {
  top: 7px;
  left: 5px;
  width: 4px;
  height: 4px;
  -moz-border-radius: 50%;
  -webkit-border-radius: 50%;
  border-radius: 50%;
  background: #110b00;
}

.bee .head .right-eye .eyelid-top {
  top: -18px;
  left: 0px;
  width: 30px;
  height: 17px;
  border-bottom: 1px solid #110b00;
  border-radius: 50% 50% 0 0;
  -webkit-animation-name: beerighteyelidtop;
  -webkit-animation-duration: 8s;
  -webkit-animation-timing-function: linear;
  -webkit-animation-delay: 2.5s;
  -webkit-animation-iteration-count: infinite;
  -webkit-animation-play-state: running;
  animation-name: beerighteyelidtop;
  animation-duration: 8s;
  animation-timing-function: linear;
  animation-delay: 2.5s;
  animation-iteration-count: infinite;
  animation-play-state: running;
}

.bee .head .right-eye .eyelid-bottom {
  bottom: -11px;
  left: 0px;
  width: 30px;
  height: 10px;
  border-top: 1px solid #110b00;
  border-radius: 0 0 50% 50%;
  -webkit-animation-name: beerighteyelidbottom;
  -webkit-animation-duration: 8s;
  -webkit-animation-timing-function: linear;
  -webkit-animation-delay: 2.5s;
  -webkit-animation-iteration-count: infinite;
  -webkit-animation-play-state: running;
  animation-name: beerighteyelidbottom;
  animation-duration: 8s;
  animation-timing-function: linear;
  animation-delay: 2.5s;
  animation-iteration-count: infinite;
  animation-play-state: running;
}

@-webkit-keyframes beerighteyelidtop {
  0% {
    top: -18px;
  }
  2% {
    top: 0px;
  }
  4% {
    top: -18px;
  }
  100% {
    top: -18px;
  }
}

@keyframes beerighteyelidtop {
  0% {
    top: -18px;
  }
  2% {
    top: 0px;
  }
  4% {
    top: -18px;
  }
  100% {
    top: -18px;
  }
}

@-webkit-keyframes beerighteyelidbottom {
  0% {
    bottom: -11px;
  }
  2% {
    bottom: 0px;
  }
  4% {
    bottom: -11px;
  }
  100% {
    bottom: -11px;
  }
}

@keyframes beerighteyelidbottom {
  0% {
    bottom: -11px;
  }
  2% {
    bottom: 0px;
  }
  4% {
    bottom: -11px;
  }
  100% {
    bottom: -11px;
  }
}

.bee .head .left-eye {
  height: 20px;
  overflow: hidden;
  width: 20px;
  -moz-border-radius: 50%;
  -webkit-border-radius: 50%;
  border-radius: 50%;
  background: #ffffff;
}

.bee .head .left-eye .left-eye-pupil {
  height: 4px;
  left: 5px;
  top: 8px;
  width: 4px;
  -moz-border-radius: 50%;
  -webkit-border-radius: 50%;
  border-radius: 50%;
  background: #110b00;
}

.bee .head .left-eye .eyelid-top {
  top: -21px;
  left: 0px;
  width: 30px;
  height: 20px;
  border-bottom: 1px solid #110b00;
  border-radius: 50% 50% 0 0;
  -webkit-animation-name: beelefteyelidtop;
  -webkit-animation-duration: 8s;
  -webkit-animation-timing-function: linear;
  -webkit-animation-delay: 2.5s;
  -webkit-animation-iteration-count: infinite;
  -webkit-animation-play-state: running;
  animation-name: beelefteyelidtop;
  animation-duration: 8s;
  animation-timing-function: linear;
  animation-delay: 2.5s;
  animation-iteration-count: infinite;
  animation-play-state: running;
}

.bee .head .left-eye .eyelid-bottom {
  bottom: -11px;
  left: 0px;
  width: 30px;
  height: 10px;
  border-top: 1px solid #110b00;
  border-radius: 0 0 50% 50%;
  -webkit-animation-name: beelefteyelidbottom;
  -webkit-animation-duration: 8s;
  -webkit-animation-timing-function: linear;
  -webkit-animation-delay: 2.5s;
  -webkit-animation-iteration-count: infinite;
  -webkit-animation-play-state: running;
  animation-name: beelefteyelidbottom;
  animation-duration: 8s;
  animation-timing-function: linear;
  animation-delay: 2.5s;
  animation-iteration-count: infinite;
  animation-play-state: running;
}

@-webkit-keyframes beelefteyelidtop {
  0% {
    top: -21px;
  }
  2% {
    top: 0px;
  }
  4% {
    top: -21px;
  }
  100% {
    top: -21px;
  }
}

@keyframes beelefteyelidtop {
  0% {
    top: -21px;
  }
  2% {
    top: 0px;
  }
  4% {
    top: -21px;
  }
  100% {
    top: -21px;
  }
}

@-webkit-keyframes beelefteyelidbottom {
  0% {
    bottom: -11px;
  }
  2% {
    bottom: 0px;
  }
  4% {
    bottom: -11px;
  }
  100% {
    bottom: -11px;
  }
}

@keyframes beelefteyelidbottom {
  0% {
    bottom: -11px;
  }
  2% {
    bottom: 0px;
  }
  4% {
    bottom: -11px;
  }
  100% {
    bottom: -11px;
  }
}
	<html>

	<body>
	<menu>
	<input id="beeNumber" type="number" onchange="beeNumChange()" max="50" min="0" value="2" />
	<span>Number of bees: </span>

	<div class="clearRight"></div>

	<input id="beePeriod" type="number" max="50" min="1" value="5" />
	<span>Period (sec): </span>

	</menu>
	<div id="beeContainer"></div>
	</body>

	</html>
	var beeSel = '.bee';

	var rowOffset = 80,
	columnOffset = 48;
	var oddRowTopInit = 29,
	oddRowLeftInit = 29;
	var evenRowTopInit = 69,
	evenRowLeftInit = 5;

	var numOfRows, numOfColumns;

	$(function() {
	initialize();
	});

	$(window).resize(function() {
	defineGrid();
	});

	function initialize() {
	defineGrid();
	createBees();

	$.each($(beeSel), function(index, value) {
	$(value).blink();
	});
	}

	function defineGrid() {
	numOfRows = parseInt($(window).height() / (rowOffset / 2));
	numOfColumns = parseInt($(window).width() / columnOffset);
	}

	function createBees() {
	$('#beeContainer').empty();

	var beeNumber = $('#beeNumber').val();

	if (beeNumber > 50) {
	beeNumber = 50;
	$('#beeNumber').val(50);
	} else if (beeNumber < 0) {
	beeNumber = 0;
	$('#beeNumber').val(0);
	}

	for (var i = 0; i < beeNumber; i++) {
	var newElem = $('<div>').addClass('bee').append(
	$('<div>').addClass('head').append(
	$('<div>').addClass('right-eye').append(
	$('<div>').addClass('no-border right-eye-pupil')
	).append(
	$('<div>').addClass('no-border body eyelid-top')
	).append(
	$('<div>').addClass('no-border body eyelid-bottom')
	)
	).append(
	$('<div>').addClass('left-eye').append(
	$('<div>').addClass('no-border left-eye-pupil')
	).append(
	$('<div>').addClass('no-border body eyelid-top')
	).append(
	$('<div>').addClass('no-border body eyelid-bottom')
	)
	)
	);

	$('#beeContainer').append(newElem);
	}
	}

	function beeNumChange() {
	initialize();
	}

	$.fn.blink = function() {
	this.css('top', oddRowTopInit + 'px');
	this.css('left', oddRowLeftInit + 'px');

	this.blinkAway();
	}

	$.fn.blinkAway = function() {
	var jqElem = this;

	jqElem.fadeOut('slow', function() {
	var left, top;

	var beePeriod = $('#beePeriod').val() * 1000;

	if (beePeriod > 50000) {
	beePeriod = 50000;
	$('#beePeriod').val(50);
	} else if (beePeriod < 1000) {
	beePeriod = 1000;
	$('#beePeriod').val(1);
	}

	var randRow = Math.floor((Math.random() * numOfRows) + 1);
	var randCol = Math.floor((Math.random() * numOfColumns) - 1);
	randCol = randCol <= 0 ? 1 : randCol;

	var newColumnOffset = randCol * columnOffset;

	//console.log(randRow + ', ' + randCol);

	if (randRow % 2 == 0) {
	//even rows
	top = evenRowTopInit + (((randRow - 2) / 2) * rowOffset);
	left = evenRowLeftInit + newColumnOffset;
	} else {
	//odd rows
	top = oddRowTopInit + (((randRow - 1) / 2) * rowOffset);
	left = oddRowLeftInit + newColumnOffset;
	}

	jqElem.css('top', top + 'px');
	jqElem.css('left', left + 'px');

	jqElem.fadeIn('slow', function() {
	setTimeout(function() {
	jqElem.blinkAway();
	}, beePeriod);
	});
	});
	}
	html,
	body {
	margin: 0;
	padding: 0;
	overflow: hidden;
	}

	body {
	background-image: url('data:image/jpeg;base64,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');
	}

	menu {
	margin: 0;
	-webkit-border-radius: 4px;
	-moz-border-radius: 4px;
	border-radius: 4px;
	background-color: #333;
	border: 2px solid #FFF;
	box-shadow: 0 0 2px 2px #333;
	padding: 5px;
	display: inline-block;
	position: fixed;
	top: 5px;
	right: 5px;
	font-size: 10px;
	font-family: 'Segoe UI', Tahoma, Verdana;
	z-index: 999;
	opacity: 0.8;
	color: #FFF;
	text-align: right;
	}

	menu:hover {
	opacity: 1;
	}

	menu input {
	width: 35px;
	float: right;
	}

	menu span {
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	cursor: default;
	float: right;
	margin-top: 3px;
	}

	.bee * {
	position: absolute;
	box-sizing: content-box;
	-moz-box-sizing: content-box;
	}

	.clearRight {
	clear: right;
	}

	.bee {
	position: absolute;
	display: none;
	}

	.bee .head * {
	border: 1px solid #110b00;
	}

	.bee .head .no-border {
	border: none;
	}

	.bee .head .body {
	background: #fbd800;
	}

	.bee .head .eyelid {
	top: 55px;
	left: 63px;
	width: 10px;
	height: 10px;
	-webkit-border-radius: 50%;
	-moz-border-radius: 50%;
	border-radius: 50%;
	}

	.bee .head .right-eye {
	height: 18px;
	left: 18px;
	overflow: hidden;
	width: 18px;
	-moz-border-radius: 50%;
	-webkit-border-radius: 50%;
	border-radius: 50%;
	background: #ffffff;
	}

	.bee .head .right-eye .right-eye-pupil {
	top: 7px;
	left: 5px;
	width: 4px;
	height: 4px;
	-moz-border-radius: 50%;
	-webkit-border-radius: 50%;
	border-radius: 50%;
	background: #110b00;
	}

	.bee .head .right-eye .eyelid-top {
	top: -18px;
	left: 0px;
	width: 30px;
	height: 17px;
	border-bottom: 1px solid #110b00;
	border-radius: 50% 50% 0 0;
	-webkit-animation-name: beerighteyelidtop;
	-webkit-animation-duration: 8s;
	-webkit-animation-timing-function: linear;
	-webkit-animation-delay: 2.5s;
	-webkit-animation-iteration-count: infinite;
	-webkit-animation-play-state: running;
	animation-name: beerighteyelidtop;
	animation-duration: 8s;
	animation-timing-function: linear;
	animation-delay: 2.5s;
	animation-iteration-count: infinite;
	animation-play-state: running;
	}

	.bee .head .right-eye .eyelid-bottom {
	bottom: -11px;
	left: 0px;
	width: 30px;
	height: 10px;
	border-top: 1px solid #110b00;
	border-radius: 0 0 50% 50%;
	-webkit-animation-name: beerighteyelidbottom;
	-webkit-animation-duration: 8s;
	-webkit-animation-timing-function: linear;
	-webkit-animation-delay: 2.5s;
	-webkit-animation-iteration-count: infinite;
	-webkit-animation-play-state: running;
	animation-name: beerighteyelidbottom;
	animation-duration: 8s;
	animation-timing-function: linear;
	animation-delay: 2.5s;
	animation-iteration-count: infinite;
	animation-play-state: running;
	}

	@-webkit-keyframes beerighteyelidtop {
	0% {
	top: -18px;
	}
	2% {
	top: 0px;
	}
	4% {
	top: -18px;
	}
	100% {
	top: -18px;
	}
	}

	@keyframes beerighteyelidtop {
	0% {
	top: -18px;
	}
	2% {
	top: 0px;
	}
	4% {
	top: -18px;
	}
	100% {
	top: -18px;
	}
	}

	@-webkit-keyframes beerighteyelidbottom {
	0% {
	bottom: -11px;
	}
	2% {
	bottom: 0px;
	}
	4% {
	bottom: -11px;
	}
	100% {
	bottom: -11px;
	}
	}

	@keyframes beerighteyelidbottom {
	0% {
	bottom: -11px;
	}
	2% {
	bottom: 0px;
	}
	4% {
	bottom: -11px;
	}
	100% {
	bottom: -11px;
	}
	}

	.bee .head .left-eye {
	height: 20px;
	overflow: hidden;
	width: 20px;
	-moz-border-radius: 50%;
	-webkit-border-radius: 50%;
	border-radius: 50%;
	background: #ffffff;
	}

	.bee .head .left-eye .left-eye-pupil {
	height: 4px;
	left: 5px;
	top: 8px;
	width: 4px;
	-moz-border-radius: 50%;
	-webkit-border-radius: 50%;
	border-radius: 50%;
	background: #110b00;
	}

	.bee .head .left-eye .eyelid-top {
	top: -21px;
	left: 0px;
	width: 30px;
	height: 20px;
	border-bottom: 1px solid #110b00;
	border-radius: 50% 50% 0 0;
	-webkit-animation-name: beelefteyelidtop;
	-webkit-animation-duration: 8s;
	-webkit-animation-timing-function: linear;
	-webkit-animation-delay: 2.5s;
	-webkit-animation-iteration-count: infinite;
	-webkit-animation-play-state: running;
	animation-name: beelefteyelidtop;
	animation-duration: 8s;
	animation-timing-function: linear;
	animation-delay: 2.5s;
	animation-iteration-count: infinite;
	animation-play-state: running;
	}

	.bee .head .left-eye .eyelid-bottom {
	bottom: -11px;
	left: 0px;
	width: 30px;
	height: 10px;
	border-top: 1px solid #110b00;
	border-radius: 0 0 50% 50%;
	-webkit-animation-name: beelefteyelidbottom;
	-webkit-animation-duration: 8s;
	-webkit-animation-timing-function: linear;
	-webkit-animation-delay: 2.5s;
	-webkit-animation-iteration-count: infinite;
	-webkit-animation-play-state: running;
	animation-name: beelefteyelidbottom;
	animation-duration: 8s;
	animation-timing-function: linear;
	animation-delay: 2.5s;
	animation-iteration-count: infinite;
	animation-play-state: running;
	}

	@-webkit-keyframes beelefteyelidtop {
	0% {
	top: -21px;
	}
	2% {
	top: 0px;
	}
	4% {
	top: -21px;
	}
	100% {
	top: -21px;
	}
	}

	@keyframes beelefteyelidtop {
	0% {
	top: -21px;
	}
	2% {
	top: 0px;
	}
	4% {
	top: -21px;
	}
	100% {
	top: -21px;
	}
	}

	@-webkit-keyframes beelefteyelidbottom {
	0% {
	bottom: -11px;
	}
	2% {
	bottom: 0px;
	}
	4% {
	bottom: -11px;
	}
	100% {
	bottom: -11px;
	}
	}

	@keyframes beelefteyelidbottom {
	0% {
	bottom: -11px;
	}
	2% {
	bottom: 0px;
	}
	4% {
	bottom: -11px;
	}
	100% {
	bottom: -11px;
	}
	}