web-dev-qa-db-ja.com

アニメーションを使用してdivをズームアウトする方法は？

ページ全体をカバーするDIVがあります（高さと幅は100％です）。 CSS（および場合によってはJavaScript）を使用してズームアウトアニメーション効果を作成しようとしています。これにより、DIVがページの特定のポイント（ページの中央）まで小さくなります（div内のすべて（その子も小さくなります））。そして、特定のwidthとheightに（たとえば、100 * 100pxとしましょう）。

私は次のコードから始めています：

<div id="toBeZoomedOut">
  <div>something</div>
  <div><img src="background.jpg"></div>
</div>

#toBeZoomedOut {
   background-color: black;
   border: 1px solid #AAAAAA;
   color: white;
   width: 300px;
   height: 300px;
   margin-left: auto;
   margin-right: auto;
   -webkit-transition: 1s ease-in-out;
   -moz-transition: 1s ease-in-out;
   transition: 1s ease-in-out;
}

#toBeZoomedOut img {
   height: 250px;
   width: 250px;
}

#toBeZoomedOut:hover {
   zoom: 0.5;
}

このコードの問題は、コンポーネント（親div）をズームアウトし、すぐにその中身をズームアウトしてから、戻ってコンポーネントをズームインすることです。

基本的には少しバグがあります。すべてを一緒にズームアウトするための役立つ修正はありますか？ページ上の特定の場所と特定の幅/高さにすべてを一緒にズームアウトできると便利です（たとえば、すべてを左にズームアウト：100px、上：100px、親divは100px * 100pxにする必要があります）その他はすべて相対的なサイズです）。

これはJavaScriptの方が簡単かもしれないと理解していますか？何か助けはありますか？

最後に、アニメーションが実際にはズームアニメーションを反映していないことに気付いた場合に注意してください。これは追加のプラスになりますが、実際のズームアニメーションは素晴らしいでしょう。

簡単にするためのJSFiddleリンク： http://jsfiddle.net/HU46s/

javascriptjqueryhtmlcsscss3
6
user220755

ユニバーサルセレクターを使用して、親コンテナー内のすべてをターゲットにして、css遷移を適用しています。

次に行ったのは、スケーリングを容易にするために、コンテンツの内側の幅を%に変更することでした。

これがcssです：

#toBeZoomedOut * {
   -webkit-transition: all 1s ease;
   -moz-transition: 1s ease;
   transition: 1s ease;
}

最後に、フィドル： デモ

6
Josh Powell

すべての画像とdivの背景を同時にズームするには、＃zoomer-inside要素にパーセンテージサイズを使用し、特定のフォントサイズを設定する必要があります...

ただし、スムーズではありません。よりスムーズな結果が必要な場合は、jQueryをanimation（）メソッドまたはプラグインと組み合わせて使用​​することをお勧めします。

フィドル：http://jsfiddle.net/HU46s/1/

コード：

#toBeZoomedOut {
   background-color: black;
   border: 1px solid #AAAAAA;
   color: white;
   width: 300px;
   height: 300px;
   margin-left: auto;
   margin-right: auto;
   -webkit-transition: all 1s ease-in-out;
   -moz-transition: all 1s ease-in-out;
   transition: all 1s ease-in-out;
}
#toBeZoomedOut div, #toBeZoomedOut img {
   width: 90%;
   font-size: 20px;
}
#toBeZoomedOut img {
   height: 90%;
   width: 90%;
}

#toBeZoomedOut:hover {
   zoom: 0.5;
}

jQueryによるスムーズ化：

フィドル：http://jsfiddle.net/HU46s/5/

コード：jQuery-よりスムーズなソリューション（CSSはさらに少ない）：

 $('#toBeZoomedOut').hover( /* change the animation speed as you want :) */
     function(){
        $(this).animate({ 'zoom': 0.5}, 400); //animation speed 400=0.4s !
     },
     function(){
        $(this).animate({ 'zoom': 1}, 400); //animation speed 400=0.4s !
     }
 );

...これで必要なCSSは次のとおりです。

#toBeZoomedOut {
   background-color: black;
   border: 1px solid #AAAAAA;
   color: white;
   width: 300px;
   height: 300px;
   margin-left: auto;
   margin-right: auto;
}

#toBeZoomedOut img {
   width: 250px;
}
2
jave.web