センターからフェードアウトするサークルレイヤーjQuery/GSOP

Question

私は2つのレイヤーdivを作成しました.1つは背景イメージで、もう1つはフェードアウトしている黒いレイヤーで作成されていますが、要件は少し異なります。フェードアウトレイヤーは

これは私が作成したものである代わりにその、JSfiddle Demo

誰もがその円のタイプを中心とフェードアウトを達成取得する方法を提案してくださいすることができ、以下の例のとおり、中央（円）からスタート私が作成したもの？私は私のプロジェクトでgreensockを使用しました。

$(document).ready(function() { 
 
    var videoFade = $(".fade-layer"); 
 
    TweenMax.to(videoFade, 14, { x:0 , opacity:0 , ease:Power1.easeInOut ,repeat:-1 }); 
 
});

.layer-one{ 
 
    background:url(https://i.imgsafe.org/90203acca5.jpg); 
 
    background-size:cover; 
 
    background-position:center; 
 
    position:absolute; 
 
    left:0; 
 
    top:0; 
 
    width:100%; 
 
    height:100%; 
 
    z-index:1; 
 
} 
 
.fade-layer{ 
 
    background:rgba(0,0,0,1); 
 
    position:absolute; 
 
    left:0; 
 
    top:0; 
 
    width:100%; 
 
    height:100%; 
 
    z-index:2; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.19.1/TweenMax.min.js"></script> 
 
<div class="layer-one"></div> 
 
<div class="fade-layer"></div>

Answer 1

はそうradial-gradient()を、およびCSSアニメーションは、オーバーレイをフェードアウトする：このフィドルをチェックしてください。

デモがあります。この上

div, div:after { 
 
    position: absolute; 
 
    top: 0; left: 0; right: 0; bottom: 0; 
 
} 
 
div { 
 
    background: url(https://i.imgsafe.org/90203acca5.jpg); 
 
    background-size: cover; 
 
    background-position: center; 
 
} 
 
div:after { 
 
    content: ''; 
 
    background: radial-gradient(ellipse at center, rgba(0,0,0,0.8) 0%, black 100%); 
 
    animation: fadeOut 10s forwards; 
 
} 
 
@keyframes fadeOut { 
 
    to { 
 
    opacity: 0; 
 
    } 
 
}

<div></div>

Answer 2

を提案してください、私は本当にGASPで働いていませんでしたが、私はあなたがbox-shadowで何をすべきか、迅速デモを作成することができました。あなたはそれで何をしようとしているのかを達成することができます。オーバーレイサークルを作成するには、あなたが背景、黒のオーバーレイの疑似要素のための単一の要素を使用することができますようにhttps://jsfiddle.net/1uzj2v5L/4/

$(document).ready(function() { 
var videoFade = $(".fade-layer"); 
    TweenMax.to(videoFade, 5, { x:0 , opacity:0.5 , ease:Power1.easeInOut ,repeat:-1, 
    boxShadow:"0px 0px 0px 0px rgb(0,0,0) inset;"}); 

    });