ich eine Animation funktioniert bekam von hier: http://codepen.io/jschr/pen/GaJCiVersuchte die Breite eines texttilate Jquery geladen Animation zu setzen, nicht
ich es in meinem Projekt verwende.
#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.Was ich will, ist die Fähigkeit, die Breite zu setzen, bei 30px die ganze Phrase mit der Schrift sehen fast zu können. Das Problem ist, die erste Animation, die ich in der Lage bin, die Schriftart auf 8vmin zu setzen, während die zweite Animation ich 12vmin komme, um die Phrasen als eine Zeichenkette zu erhalten. Wenn ich es größer mache, wird es zu mehr Saiten zerbrechen oder sogar die Phrase schneiden, hängt davon ab, ob ich versuche, die Breite einzustellen. Ich sah, dass die Animation Spannen in meine html injiziert und sie sind Breite 300, während ich fast Breite 700 brauche. Ich habe versucht, online zu finden auch versucht, meine CSS ohne Ergebnis zu ändern. Ich habe auch versucht, die Spanne Injektion zu fangen und es größer zu machen, aber nicht so geholfen. Ich hoffe immer noch, eine Lösung dafür zu finden. Wenn jemand weiß wie, bitte zeig es mir, danke.