ページが読み込まれると、見出し(Word Welcome)が表示されます(onload=""
)。
フィドル 以下のコードが機能しない場合。
function animate() {
document.getElementById("mainText").style.width = "100%";
}
#mainText {
margin: 0px;
display: inline-block;
font-size: 100px;
width: 0%;
transition: width 2s;
white-space: nowrap;
overflow: hidden;
text-overflow: clip;
}
<body onload="animate()">
<h1 id="mainText">Welcome</h1>
</body>
CSSとプレーンJSは正常に機能しますが、「ようこそ」という単語を最初に右側に表示してから、それに沿って移動することを望んでいます。
私が試してみました text align: right;
、しかしこれは何も変更しません。
ソリューションがJSソリューションである場合、jQueryを使用したくありません。
トランジションの途中の望ましい外観の例:
はい、トランジションとポジションを使用して可能です:
window.onload = function () {
document.querySelector("h1").classList.add("active");
};
h1 {
overflow: hidden;
display: inline-block;
position: relative;
}
h1 .mask {
position: absolute;
transition: all 0.5s linear;
left: 0;
top: 0;
bottom: 0;
right: 0;
background-color: #fff;
}
h1.active .mask {
right: 100%;
}
<h1><span class="mask"></span>Welcome</h1>
私はこれについての記事を書いたばかりです CSSトランジション&アニメーションエントリエフェクト用のJavaScript 。お役に立てれば幸いです... :)
clip-path プロパティを使用して、要素の一部をクリップして表示されないようにすることができます。このプロパティは、アニメーションでforwards
キーワードを使用して再度要素を表示するようにアニメーション化することもできます。これにより、要素は「表示」された最終状態のままになります。
inset
には、from-top、from-right、from-bottom、from-leftの順に値が入ります。
#text {
margin: 0;
font-size: 100px;
animation: reveal 2s forwards;
}
@keyframes reveal {
from {
clip-path: inset(0 0 0 100%);
}
to {
clip-path: inset(0 0 0 0);
}
}
<h1 id="text">Welcome</h1>
1つのオプションはtransform: translate
疑似要素があり、追加の要素は必要ありません。
function animate() {
document.getElementById("mainText").classList.add('show');
}
#mainText {
position: relative;
margin: 0px;
display: inline-block;
font-size: 100px;
white-space: nowrap;
text-overflow: clip;
overflow: hidden;
}
#mainText::after {
content: '';
position: absolute;
left: 0; top: 0;
width: 100%; height: 100%;
background: white;
transition: transform 2s;
}
#mainText.show::after {
transform: translateX(-100%);
}
<body onload="animate()">
<h1 id="mainText">Welcome</h1>
</body>
direction
およびleft
/width
で疑似を使用する別のオプション、より優れたソリューション。
これは同じように機能しますclip-path
は、テキストを味わうマスクを持つのとは対照的に、背景に対して完全に透明で、ブラウザのサポートが大幅に向上しています。
function animate() {
document.getElementById("mainText").classList.add('show');
}
body {
background: black;
}
#mainText {
position: relative;
margin: 0px;
display: inline-block;
font-size: 100px;
white-space: nowrap;
color: rgba(0, 0, 0, 0);
}
#mainText::before {
content: attr(data-text);
position: absolute;
left: 100%;
top: 0;
width: 0;
height: 100%;
color: white;
direction: rtl;
overflow: hidden;
transition: left 2s, width 2s;
}
#mainText.show::before {
left: 0;
width: 100%;
}
<body onload="animate()">
<h1 id="mainText" data-text="Welcome">Welcome</h1>
</body>
このようなもの
function animate() {
document.getElementById("overlay").style.width = "0%";
}
#mainText {
margin: 0px;
display: inline-block;
font-size: 100px;
width: 100%;
white-space: nowrap;
overflow: hidden;
text-overflow: clip;
}
#overlay{
width: 100%;
position:absolute;
top:0;
left:0;
background:#fff;
transition: width 2s;
height:100%;
}
<body onload="animate()">
<h1 id="mainText">Welcome</h1>
<div id="overlay"></div>
</body>
私が使う Transform: translateX
目的の効果を実現します。
slidesテキストを横向きにするか、またはhorizontally X軸上で。
.message {
color: darkred;
font-size: 30px;
display: inline-block;
font-weight: 100;
font-family: sans-serif;
}
.sliding-text-1,
.sliding-text-2,
.sliding-text-3 {
animation-name: slide;
animation-duration: 1s;
animation-timing-function: ease-out;
animation-iteration-count: 1;
animation-fill-mode: forwards;
opacity: 0;
}
.sliding-text-2 {
animation-delay: 2s;
color: darkblue;
}
.sliding-text-3 {
animation-delay: 4s;
color: darkgreen;
}
@keyframes slide {
from {
transform: translateX(200px);
}
to {
transform: translateX(0px);
opacity: 1;
}
}
<h1 class="message sliding-text-1">Hello!</h1>
<h1 class="message sliding-text-2">Thanks for visiting!</h1>
<h1 class="message sliding-text-3">Have a Nice day!</h1>
これには、マスクとして機能する見出しの上に背景がある疑似要素が必要です。インラインスタイルを変更する代わりに、is-active
クラスを追加するだけです。したがって、関連するすべてのスタイルは、CSSを介してスタイル設定できます。
function animate() {
document.getElementById("mainText").className = "is-active";
}
#mainText {
margin: 0px;
display: inline-block;
position: relative;
font-size: 100px;
white-space: nowrap;
overflow: hidden;
text-overflow: clip;
}
#mainText:before {
content: '';
position: absolute;
top: 0;
left: 0;
bottom: 0;
width: 100%;
background: #FFF;
transition: width 2s;
}
#mainText.is-active:before {
width: 0%;
}
<body onload="animate()">
<h1 id="mainText">Welcome</h1>
</body>