展開圈子導致移動屏幕調整大小

我的圈子出現在視口上的隨機位置並展開，直到它們填滿整個屏幕。動畫在桌面上是完美的，但會導致屏幕在移動和口吃上調整大小，以適應不斷擴大的圈子。如果需要，我希望圈子可以擴展到視口外。展開圈子導致移動屏幕調整大小

鏈接到動畫：https://rimildeyjsr.github.io/spotify-circle-animation/

我試圖消除overflow-x : hidden;和overflow-y : hidden;，但這會導致將視口吃。

任何幫助最受讚賞。

的Jquery：

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

      var posx = (Math.random() * ($(document).width()) - (divsize/2)).toFixed(); 
      var posy = (Math.random() * ($(document).height()) - (divsize/2)).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')},3000);

CSS：

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

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

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

    100%{ 
     -webkit-transform: scale(100.0,100.0); 
     display: none; 
    } 
}

來源

2017-05-03 Rimil Dey

請嘗試添加視口元標記（使佈局響應）並取出1000像素寬度股利。

<meta name="viewport" content="width=device-width, initial-scale=1">

來源

2017-05-03 05:04:08 itacode

展開圈子導致移動屏幕調整大小

回答

相關問題