0
動作しない、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.何私が欲しいのは、ほぼ30pxでフォントで語句全体を見ることができるようにするために、幅を設定する機能です。問題は、最初のアニメーションは8vminでフォントを設定できますが、2番目のアニメーションは12vminになり、フレーズを1つの文字列として取得できます。私がそれを大きくすると、それはより多くの弦に壊れたり、フレーズをカットしたりします。幅を設定しようとしています。私はアニメーションが私のhtmlにスパンを注入するのを見ました、そして、彼らは幅が300ですが、私はほぼ700の幅が必要です。私はオンラインでも、結果を私のCSSを変更しようとしました。私はまた、スパンインジェクションをキャッチしてそれを大きくしようとしましたが、運賃を助けませんでした。それでも解決策を見つけようと思っています。誰かがどのように知っていたら、私に感謝してください。