0

I have circles starting at a radius of 10px and expanding up to 100%. The circles appear at random positions all over the viewport. The animation looks fine on mobile but pixelates on larger viewports.

Here's the animation: https://rimildeyjsr.github.io/spotify-circle-animation/

Any ideas how to keep the circles consistent across all viewports?

jQuery

 var animationEnd = 'webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend';
        function makeDiv(colorChoice){
            var divsize = 10;
            var color = colorChoice;
            console.log(color);
            $newdiv = $('<div/>').css({
                'width':divsize+'px',
                'height':divsize+'px',
                'background-color': color
            });

            var posx = (Math.random() * ($(document).width())).toFixed();
            var posy = (Math.random() * ($(document).height())).toFixed();
            $newdiv.css({
                'position':'absolute',
                'left':posx+'px',
                'top':posy+'px',
                'border-radius':'50%',
                'display':'none'
            }).appendTo( 'body' ).addClass('animate').css({'display':'block'}).one(animationEnd,function(){
                $(this).remove();
            });
        };
        var id = setInterval(function(){makeDiv('black')},5000);

CSS

html,body {
    padding : 0;
    margin: 0;
    height: 100%;
    width: 100%;
    overflow-y: hidden;
    overflow-x: hidden;
}

div {
    height: 10px;
    width:10px;
    background-color: black;
    border-radius: 50%;
    top: 250px;
    right: 10px;
    left: 800px;
}

.animate {
    -webkit-animation: expand 60s;
}

@-webkit-keyframes expand {
    0%{
        -webkit-transform: scale(0,0);
    }

    100%{
        -webkit-transform: scale(100.0,100.0);
        display: none;
    }
}
Rimil Dey
  • 827
  • 2
  • 13
  • 33
  • Maybe one of those solutions would be helpfull? http://stackoverflow.com/questions/19882283/pixelated-edge-around-a-css-circle-with-overflow-hidden – jazzgot Jan 13 '17 at 14:32

1 Answers1

1

The pixelated edges are caused by the transform: scale. It stretches the circles, which are 10 by 10 pixels by default, to 100 times it's size.

You'll want to look into making the default size as big as possible and then scale it down at the start.

Link to the updated fiddle:

https://jsfiddle.net/Lreux3rx/2

Rimil Dey
  • 827
  • 2
  • 13
  • 33
Paul van den Dool
  • 3,020
  • 3
  • 20
  • 44
  • the circle is not pixellating but they aren't occurring anymore in random places – Rimil Dey Jan 14 '17 at 12:17
  • Because of the initial size of the circle, it's center is at 500px further from the top and left as the xpos and ypos variables will set it. The 500px is half of the divsize variable which I set to a 1000px. I updated the fiddle to account for that. https://jsfiddle.net/Lreux3rx/2/ – Paul van den Dool Jan 15 '17 at 07:40