2014-07-25 2 views
0

나는 방문 페이지를위한 애니메이션 스크롤을 디자인하고 있습니다.framer.js 애니메이션을 html로 삽입하기

나는 framer.js을 사용하는 것을 즐긴다. 그러나 내 웹 페이지에 프레이머 레이어를 배치하고 브라우저 크기에 반응하도록하는 데 어려움이있다. 브라우저 프로토 타입보다 모바일 프로토 타입에 잘 작동하는 것 같습니다.

그런 다음 내 솔루션은 HTML의 div 내에 프레이머 레이어를 배치하고 div가 내 CSS 스타일링에 응답하도록했습니다. 불행히도 나는 이것을 발견 할 수 없다.

내가 jQuery를 사용하여 내 사업부에 레이어를 추가 시도했다 :

는 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를 사용 했습니까? 어떻게 그렇게?

+0

이 문제에 대한 해결책을 찾아 냈습니까? –

+0

절대로 = ( – stecd

답변

0

꽤 오래된 주제,하지만 당신은 여전히 ​​당신의 상단에 .. 다음 프로토 타입을 덮어 쓸 수있는 솔루션을 찾고 있다면 스크립트 같은 추가 :

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; 
    }; 

하지 그것을 할 수있는 최선의 방법을, 그러나 그것은 효과적이다.

관련 문제