Sponsored Link
html
<p>あいうえお</p>
<p>かきくけこ</p>
<p>さしすせそ</p>
例えば上のように段落がありますが、これを最初は非表示にし、順番にフェードインさせたいときってありますよね。
cssとjavascript(要jQuery)に以下のように記述することで簡単にできます。
css
p {
opacity: 0;
}
javascript
$(function(){
var delaySpeed = 1000; // 1秒ずつ遅らせる
var fadeSpeed = 1000; // 1秒かける
$(window).on('load', function() {
$('p').each(function(i){
$(this).delay(i*(delaySpeed)).animate({
'opacity' : '1'
},fadeSpeed);
});
});
});
これを一文字ずつ行いたい場合は、一文字ずつspanなどで囲ってしまうのが楽です。
ただ手書きで一文字ずつ囲うのはあまりに非効率。
そんな作業はjsにやってもらいましょう。
変更点はjsのみです。
javascript
$(function(){
$("p").children().addBack().contents().each(function(){
if (this.nodeType == 3) {
var $this = $(this);
$this.replaceWith($this.text().replace(/(\S)/g, "<span>$&</span>"));
}
});
var delaySpeed = 1000; // 1秒ずつ遅らせる
var fadeSpeed = 1000; // 1秒かける
$(window).on('load', function() {
$('p').each(function(i){
$(this).delay(i*(delaySpeed)).animate({
'opacity' : '1'
},fadeSpeed);
});
});
});
簡単ですね。