HeartPosition

by HYEONGJINKIM

HTML

<script src="//cdnjs.cloudflare.com/ajax/libs/gsap/1.16.1/TweenMax.min.js"></script>
<div id="wrap"></div>
<!--<div id="demo">
    <div class="box green" id="greenBox">0</div>
</div>-->

CSS

HTML  CSS  JS  Result
Edit on 
body {
  background-color:#1d1d1d;
  font-family: "Asap", sans-serif;
  color:#989898;
  margin:10px;
  font-size:16px;
}

#demo {
  height:100%;
  position:relative;
  overflow:hidden;
}
.box {
  width:100px;
  height:100px;
  position:relative;
  border-radius:6px;
  margin-top:4px;
  text-align:center;
  line-height:100px;
  color:black;
  font-size:80px;
}

.green{
  background-color:#6fb936;
}


div {	
	background: red;
	-moz-border-radius: 50px;
	-webkit-border-radius: 50px;
	border-radius: 50px;
}
img{
    -moz-border-radius: 50px;
	-webkit-border-radius: 50px;
	border-radius: 50px;
}

JavaScript

function createParticles() {
    var particles = [];
    var size = 10;
    for (var quantity = 0, len = 200; quantity < len; quantity++) {

        var x, y, steps;

        steps = Math.PI * 2 * quantity / len;

        x = $(window).width() * 0.5 + (16 * Math.pow(Math.sin(quantity), 3)) * size;
        y = $(window).height() * 0.5 - (13 * Math.cos(quantity) - 5 * Math.cos(2 * quantity) - 2 * Math.cos(3 * quantity) - Math.cos(4 * quantity)) * size;


        /*if(quantity%2 && quantity%7 && quantity %3){
            particles.push({
                x: x,
                y: y
            });
        }*/
        particles.push({
            x: x,
            y: y
        });
        
        
    }   
    
    var filtered = particles.filter(function(e, i){
        return !(i % 3);
    });
    
    //draw(particles);
    draw(filtered);
}

function animate(){    
    //TweenMax.staggerTo("div", 1, {x:$(this).data('left'), y:$(this).data('top')}, 0.5);
    
    /*$('div').each(function(){
        $this = this;
        TweenMax.to($this, 1, {left:$this.data('left'), top:$this.data('top')});         
    });
    TweenMax.to(div, 1, {scaleX:1.2, scaleY:1.3, ease:Elastic.easeOut, repeat:-1, repeatDelay:0.2});*/
}


/*var $div = $('<div>').css({
    position: 'absolute',
    width: '1px',
    height: '1px',
    border: '1px solid red'
});*/
/*var imageWidth = this.offsetWidth,
      imageHeight = this.offsetHeight,
      vpWidth = document.documentElement.clientWidth, 
      vpHeight = document.documentElement.clientHeight;
*/

var $div = $('<div>').css({
    position: 'absolute',
    top: (document.documentElement.clientHeight - 3)/2+'px',
    left: (document.documentElement.clientWidth - 3)/2+ window.pageYOffset +'px',
    width: '50px',
    height: '50px',
    borderRadius: '50%'
    //border: '1px solid red'
    //content: '<img src=\"http://lorempixel.com/10/10/person\" />'
});

var $wrap = $('#wrap')
function draw(particles){    
   ...