6
Codepen用Canvas動畫圈 - 如何擴展以填充整個視口？
http://codepen.io/tconroy/pen/RPzxgz
基本設置：
我想創建一個網頁的結構與2列居中容器內，最大1600像素寬。
左列包含頁面內容。右欄包含一個廣告單元（例如，640x480像素寬）。
在768px或更低的媒體斷點處，應該堆疊2列（以便內容在最上面，而廣告在下面）。
問題
頁面加載，應該有含有在屏幕的中心的白圈（絕對中心 - 垂直和水平）一400x400px畫布元件。
圓圈動畫到直接位於左列內容後面的位置。
之後，圓圈應該「展開」以填充整個用戶的視口，而不會覆蓋內容或導致滾動條出現。
如我在下面的小提琴中所示，我已經獲得了最初的圓/動畫動畫，但是我遇到了試圖找出擴展部分的問題。我需要這個圓圈出現擴大/擴大，直到它覆蓋整個視口，但所有文字內容/廣告單元都不應該被遮擋，並且不應該出現作爲動畫結果的滾動條。
我對畫布非常不熟悉，所以如果任何人都可以在不破壞最初的動畫的情況下給我一個手，這將是非常感謝。 :)
http://codepen.io/tconroy/pen/RPzxgz
HTML：
<div class="container">
<div class="navigation row">
<h1 style="float:right;"><a href="#">Continue</a></h1>
</div>
<div class="content row">
<div class="circle-wrap">
<canvas class="circle" width="400" height="400"></canvas>
<div class="template-output">
<h1 class="title">
<span class="upper">Title TopLine</span>
<span class="lower">Title Bottom</span>
</h1>
<div class="body">
<p class="description">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolorum distinctio nesciunt nostrum magni neque. Iusto et delectus iure distinctio cupiditate, a sint doloremque ratione saepe sunt quisquam assumenda, eaque velit?</p>
<p class="byline">- Author Name</p>
</div>
</div>
</div>
</div>
<div class="ads row">
<figure class="ad">
<figcaption>Advertisement</figcaption>
<div id="welcome"></div>
</figure>
</div>
</div>
</div>
CSS：
/* BASE STYLES */
* {
box-sizing: border-box;
padding: 0;
margin: 0;
}
html, body {
width: 100%;
height: 100%;
background: gray;
overflow: hidden;
}
/* END BASE STYLES */
/* LAYOUT */
.container {
width: 100%;
height: 100%;
max-width: 1600px;
margin: 0 auto;
outline: 1px solid black;
}
.row {
width: 50%;
height: 100%;
float: left;
display: block;
}
.row.content {
border: 1px solid blue;
}
.row.ads {
border: 1px solid red;
}
.row.navigation {
width: 100%;
height: auto;
}
@media screen and (max-width: 768px) {
.row {
width: 100%;
height: auto;
}
}
/* END LAYOUT STYLES */
/* ADVERTISEMENT */
.ad {
display: table;
margin: 0 auto;
}
.ad figcaption {
text-align: center;
margin: 0 auto;
}
.ad #welcome {
outline: 1px solid black;
background: darkgray;
width: 640px;
height: 480px;
margin: 0 auto;
}
/* END ADVERTISEMENT STYLES */
/* CONTENT */
.content {
min-height: 400px;
}
.content .template-output {
width: 400px;
position: relative;
}
.content .template-output .title {
font-size: 4em;
}
.content .template-output .title span {
display: block;
text-transform: uppercase;
}
.content .template-output .title .upper {
text-align: left;
}
.content .template-output .title .lower {
text-align: right;
}
.content .template-output .body {
position: relative;
}
.content .circle-wrap {
position: relative;
width: 100%;
height: 100%;
margin: 0 auto;
}
.content .circle-wrap .circle {
width: 400px;
height: 400px;
outline: 1px solid black;
position: absolute;
left: 0;
top: 0;
transform: translate(0%, 0%);
}
.content .circle-2 {
position: absolute;
width: 100%;
height: 100%;
left: 0;
top: 0;
}
/* END CONTENT STYLES */
JAVASCRIPT（包括：jQuery和GSAP TweenMax庫）
/*
I have successfully created the canvas element in the center
of the screen and animate it to the left column. Now, I want the circle to "expand" behind the content, and fill the entire viewport.
It should not cause scrollbars to appear or cover the text content.
*/
(function() {
var tl = new TimelineMax();
var $canvas = $('.circle'),
$canvas_wrap = $('.circle-wrap'),
canvas = $canvas[0],
context = canvas.getContext('2d'),
canvas_width = canvas.width,
canvas_height = canvas.height;
context.globalCompositeOperation='destination-over';
draw(context);
/* TIMELINE STUFF */
var canvas_opts = {
'center-to-destination': {
xPercent: -50,
yPercent: -50,
top: '50%',
left: '100%',
delay: 1.5
}
};
tl.from(canvas, 1, canvas_opts['center-to-destination']);
})();
你希望整個'canvas'反對伸展並覆蓋整個視口還是要內'circle'你已經吸引到去做？兩個不同的東西imho。另外，無論選擇哪個對象進行動畫設置，將它們設置在所有內容的後面都意味着不僅會使用'canvas'對象的'z-index' CSS屬性，還會播放其他應該出現的對象在它的上面。我認爲你的HTML結構需要改變很多。當然，我可能是錯的。 –
是** [this]（http://codepen.io/tah_med/full/mJZXvB/）**您在尋找什麼？ –
後面是我正在做的事（用內圈填充視口） – Prefix