将 framer.js 动画嵌入 html答案

【问题标题】：Embedding framer.js animation into html将 framer.js 动画嵌入 html
【发布时间】：2014-07-25 06:48:31
【问题描述】：

我正在为登录页面设计动画滚动。

我喜欢使用framer.js，但在我的网页上放置成帧层并让它们响应浏览器大小时遇到了困难。它似乎比浏览器原型更适用于移动原型。

然后我的解决方案变成了将框架层放置在 html 中的 div 中，并让该 div 响应我的 css 样式。不幸的是，我找不到解决方法。

我尝试使用 jQuery 并将图层附加到我的 div：

app.js

var Container = new Layer({
  backgroundColor: "transparent",
  width: 400,
  height: 400
});

$(Container).appendTo(".vertical_center")

index.html

<body> 
   <div class="vertical_center"></div>
</body>

我已经成功地附加了随机文本，只是为了检查 jQuery 是否正常工作。有没有人使用 framer.js 制作可以嵌入网站的“资产”？怎么样？

【问题讨论】：

有没有找到解决这个问题的办法？

标签： javascript embed prototype framerjs

【解决方案1】：

相当老的话题，但如果您仍在寻找解决方案，那么您可以覆盖原型 .. 在您的脚本顶部添加如下内容：

Layer.prototype.__createRootElement = function() {
        var element;
        element = document.createElement("div");
        element.id = "FramerRoot";

        element.style['-webkit-perspective'] = 1000;
        element.style.position = "absolute";
        element.style.left = 0;
        element.style.top = 0;
        element.style.right = 0;
        element.style.bottom = 0;

        document.getElementById('wrapper').appendChild(element);
        return element;
    };

不是最好的方法，但它确实有效。

【讨论】：