내가 여기에서 애니메이션을 가지고

작동하지 않습니다하는 texttilate의 JQuery와로드 애니메이션의 폭을 설정했습니다. 내가 여기에서 애니메이션을 가지고

#content { 
 
    position: relative; 
 
    margin-left: auto; 
 
    margin-right: auto; 
 
    width: 1000px; 
 
    height: 700px; 
 
} 
 

 
#animation { 
 
\t position: absolute; 
 
\t z-index: 20; 
 
\t width: 1000px; 
 
\t height:50px; 
 
\t top: 600px; 
 
\t left: 350px; 
 
} 
 

 
#animation2 { 
 
\t position: absolute; 
 
\t z-index: 20; 
 
\t width: 1000px; 
 
\t height:50px; 
 
\t top: -25px; 
 
\t left: 340px; 
 
} 
 

 
Inside the animation.css: 
 

 
h1 { 
 
    position: absolute; 
 
    font: 12vmin/12vmin 'Special Elite', cursive; 
 
    left: 0; 
 
    top: 30%; 
 
    margin-top: -4vmin; 
 
    width: 100%; 
 
    text-align: center; 
 
    padding: 2vmin 0; 
 
    text-shadow: 0.15vmin 0.15vmin rgba(0, 0, 0, 0.5); 
 
}

In the main html: 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script> 
 
<div id="content"> 
 
<div id="animation"></div> 
 
<script> 
 
     $("#animation").html('<object data="./animation/animation.htm">'); 
 
</script> 
 
<div id="animation2"></div> 
 
<script> 
 
     $("#animation2").html('<object data="./animation/animation2.htm">'); 
 
</script> 
 
</div> 
 
And the animations witch i load into te main html: 
 

 
<head> 
 
    \t \t <link href="https://fonts.googleapis.com/css?family=Special+Elite" rel="stylesheet"> 
 
    \t \t <link rel="stylesheet" href="animate.css" charset="utf-8" /> 
 
    \t \t <link rel="stylesheet" href="animation.css" charset="utf-8" /> 
 
    \t \t <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script> 
 
    \t \t <script src="jquery.lettering.js"></script> 
 
    \t \t <script src="jquery.fittext.js"></script> 
 
    \t \t <script src="jquery.textillate.js"></script> 
 
    \t \t 
 
    \t \t 
 
</head> 
 
    \t 
 
<body> 
 
<h1 class="tlt">Hello to my website and welcome</h1> 
 
<script> 
 
$('.tlt').textillate({ 
 
    in: { effect: 'splat' }, 
 
    out: { effect:'hinge', sync: true }, 
 
    loop: true 
 
}); 
 
</script> 
 
</body> 
 

 
The second animation looks almost same.

는 내가 원하는 거의 30 픽셀의 글꼴과 전체 문구를 볼 수 있도록 폭을 설정하는 기능입니다. 문제는 첫 번째 애니메이션은 8vmin에서 글꼴을 설정할 수 있고 두 번째 애니메이션은 12vmin으로되어 하나의 문자열로 구를 얻을 수 있다는 것입니다. 만약 내가 그것을 더 크게 만들면, 그것은 더 많은 줄을 끊거나 심지어 문구를자를 것입니다. 나는 폭을 설정하려고 노력했습니다. 나는 애니메이션이 내 HTML에 스팬을 주입하는 것을 보았습니다. 그리고 폭이 300인데 반해 거의 700 번이 필요합니다. 온라인에서도 내 CSS를 변경하려고 시도했지만 아무런 결과도 얻지 못했습니다. 나는 또한 스팬 주입을 잡아서 더 크게 만들려고했으나 운임을 도왔다. 이 문제에 대한 해결책을 찾고자합니다. 누군가가 어떻게 알고 있다면, 나에게 보여줘, 고마워.

출처

2016-07-16 mac4best

I found out, i can this: 
 

 
<script> 
 
     $("#animation").html('<object data="./animation/animation.htm">'); 
 
</script> 
 

 
simply to this: 
 

 
<script> 
 
     $("#animation").html('<object width="600px" data="./animation/animation.htm">'); 
 
</script> 
 

 
And this is how it worked for me, it increased the width inside the loaded object data, thanks anyway.

출처

2016-07-25 08:54:39 mac4best

내가 여기에서 애니메이션을 가지고

답변

관련 문제