Question

Codepen

http://codepen.io/tconroy/pen/RPzxgz

基本设置：

我正在尝试创建一个在中心容器内部有2列结构的页面，最大宽度为1600px。

左栏包含页面内容。右列包含广告单元（例如，640x480像素宽）。

在768px或更低的介质断点处，2列应该堆叠（以便内容位于顶部，广告位于其下方）。

问题

当页面加载时，应该有一个400x400px画布元素，在屏幕中央包含一个白色圆圈（绝对中心 - 垂直和水平）。

圆圈动画到左栏内容正后方的位置。

在此之后，圆圈应该＆＃34;展开＆＃34;填充整个用户的视口，而不覆盖内容或导致滚动条出现。

如下面的小提琴所示，我已经获得了初始的圆/动画动画，但是我遇到了试图找出展开部分的问题。我需要圆圈显示增长/展开，直到它覆盖整个视口，但不应遮挡所有文本内容/广告单元，并且动画不应显示任何滚动条。

我对帆布非常不熟悉，所以如果有人可以在没有打破初始动画的情况下给我一只手，我将非常感激。：）

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']);


})();

使用“画布”设置圆形动画 - 如何展开以填充整个视口？

0 个答案: