clip-pathを使ってdivの外部にアニメーションをクリップする方法は？

これは私が昨日尋ねた質問のフォローアップの質問です。clip-pathを使ってdivの外部にアニメーションをクリップする方法は？

私の目標は、グラフィックが移動して、あなただけのボックスにあったグラフィックの部分を見るであろうように、ボックスを作成し、ボックスでSVGグラフィックをスライドすることで、箱の外側の部分は次のようになります隠されたここではその作品を作ったコードだ：

HTML：

<!DOCTYPE html> 
<html> 
    <head> 
    </head> 
<body> 
    <br><br><br> 
    <div id="mydiv"> 
    <br><br><br> 
    <a id="swipe1";><img src="https://www.benngrant.com/html5/shape1.svg" /></a> 
    <br><br><br><br> 
    </div> 
</body>

CSS：隠されたとポジション：

body {background: #ffffff url("https://www.benngrant.com/wp-content/themes/Abstract_Dark1/images/Bottom_texture.jpg") no-repeat center center fixed; background-size:cover;} 
a#swipe1 {transition-timing-function:linear; position:relative; opacity:.62; top:10px; animation: mymove 7.85s forwards;} 
@keyframes mymove{from {left:-100%;} to {left:150%;}} 
#mydiv {text-align:center; background:black; opacity:.5; max-width:50%; position:relative; margin-left:auto; margin-right:auto; display:block; overflow: hidden; border:1px solid black}

は基本的に、私がしなければならなかったすべては、オーバーフローを追加した相対それを動作させるために#mydivに指摘されました。（私はなぜオーバーフローする必要があります：隠されているが、位置：相対的ですがまだ混乱しているが、まあまあ）。

これは私が求めているこれは何ですか： path cssプロパティを使用して、移動中のグラフィックのうち矩形内にない部分を隠す矩形を定義しますか？実際には、クリップパスは、イメージがキーフレームに沿って動き回るときに、ブラウザがその中にあるイメージの一部の部分を描画することが許可されている場所を定義するために使用されますか？理論的には私にとっては合理的だと思われますが、そのように実装する方法はわかりません。

どのような考えですか？ HTMLとCSSだけを使用しますが、JavaScriptは使用しませんか？それはこれと同じ結果を生み出しますか？たぶん

https://jsfiddle.net/91p21odc/

出典

2017-12-31 Sindyr

このような何か：

body { 
 
    background: #ffffff url("https://www.benngrant.com/wp-content/themes/Abstract_Dark1/images/Bottom_texture.jpg") no-repeat center center fixed; 
 
    background-size: cover; 
 
} 
 

 
#mydiv { 
 
    margin: 50px 0; 
 
    padding: 40px 0; 
 
} 
 

 
#swipe1 { 
 
    transition-timing-function: linear; 
 
    opacity: .62; 
 
    display: inline-block; 
 
    position: relative; 
 
    animation: mymove 7.85s forwards; 
 
} 
 

 
.clip { 
 
    clip-path: polygon(40% 0%, 60% 0%, 60% 100%, 40% 100%); 
 
} 
 

 
@keyframes mymove { 
 
    from { 
 
    left: -100%; 
 
    } 
 
    to { 
 
    left: 150%; 
 
    } 
 
} 
 

 
#mydiv { 
 
    text-align: center; 
 
    background: black; 
 
    opacity: .5; 
 
    max-width: 50%; 
 
    position: relative; 
 
    margin-left: auto; 
 
    margin-right: auto; 
 
    display: block; 
 
    overflow: hidden; 
 
    border: 1px solid black 
 
}

<div id="mydiv"> 
 
    <div class="clip"> 
 
    <div id="swipe1"> 
 

 
     <img src="https://www.benngrant.com/html5/shape1.svg" /> 
 
    </div> 
 
    </div> 
 
</div>

出典

2017-12-31 08:09:42

興味深いです。私は、SVGが半減していることに気付きました。私は少しあなたのコードを再生し、後で返信します - ありがとう！ :) – Sindyr

@Sindyrは半分ではなく、exaclt 100px;）..私はあなたが必要なものを明確に理解していないので、これを作ったので、私はあなたがSVGの一部だけをコンテナ内に表示しアニメーション化したいと思っていました。 –

AhhアニメーションSVGが表示される矩形を設定するためにクリップパスを使用するために、/ divがアニメーションをカットする必要はありません。最初に実行すると、画像全体が見えるようになり、最初に残すと、鼻がクリップパス矩形の端に当たって消え、残りが消えます。クリップパスの長方形がアニメーションが移動するにつれて静止しているかのように - 意味がありますか？ – Sindyr

clip-pathを使ってdivの外部にアニメーションをクリップする方法は？

答えて

関連する問題