1

このウェブサイト: http://www.twosides.co/のメイン ページを数秒間見ていると、テキストが非常にクールな効果で変化し続けます。これを行うアイデアはありますか？

方法がまったくわからないので、stackoverflow コミュニティに助けを求めに来ました!

答えてくれてありがとう！

4

4 に答える 4

4

このようなものはメッセージを変更します：

<script src="http://code.jquery.com/jquery-1.7.min.js"></script>
<script>
$(function () {
    var messages = [],
        index = 0;

    messages.push('Message 1');
    messages.push('Message 2');
    messages.push('Message 3');

    function cycle() {
        $('#some-id').html(messages[index]);
        index++;

        if (index === messages.length) {
            index = 0;
        }

        setTimeout(cycle, 3000);
    }

    cycle();
});
</script>
<div id="some-id"></div>

アニメーション コードを追加するだけです。

于 2012-09-16T20:20:15.700 に答える
0

ソース コードから、Masonryを使用しているようです。一般に、これはanimate 関数を使用して jQuery でかなり簡単に実行できます。

これは、アニメーションを使用したサンプル実装です。tmp 要素を使用してテキスト幅を決定します。

<script src="http://code.jquery.com/jquery-1.7.min.js"></script>
<script>
$(function () {
    var messages = [],
        index = 0;

    messages.push('I am short.');
    messages.push('Longer messages are nice.');
    messages.push('And short again.');

    var tmp = $('#tmp');
    var el = $('#el');
    function cycle() {
        var i = index%message.length;
        tmp.html(messages[i]);
        el.html('').animate({width: tmp.width()+1}, function() {
            el.html(messages[i]);
            index++;
            setTimeout(cycle, 3000);
        });
    }
    cycle();
});
</script>
<style>
#tmp {
    visibility: hidden;
}
</style>
I am a text. <span id="el"></span> Me too.
<span id='tmp'>foo<span>
于 2012-09-16T20:22:10.463 に答える
-1

テキストを x 秒ごとに変更するには、delay(x); を使用する必要があります。

そう：

$("#yourElem").delay(1000).text("Text changed");

そして、このコードをループ内に配置する必要があります...

于 2012-09-16T20:25:43.323 に答える
-1

アップデート：

twoSides のコードの作業バージョンについては、コメントを参照してください。

バニラJSといくつかのCSSを使用して、個人サイトにこのようなものを実装しました。これらの目的に合わせて、そのコードを修正したバージョンを次に示します。

var seconds = 5;
var madlibs = {
  'a': ['eat pie', 'jump rope', 'write code', 'do things'],
  'b': ['a fork', 'your friends', 'the quickness', 'other things']
};
var madlibA = document.getElementById('a');
var madlibB = document.getElementById('b');

function rand(x) {
  return Math.floor(Math.random() * x);
}

function change() {
  var txtA = madlibs['a'][rand(madlibs['a'].length)];
  var txtB = madlibs['b'][rand(madlibs['b'].length)];
  madlibA.innerHTML = txtA;
  madlibB.innerHTML = txtB;
  madlibA.classList.remove('flip');
  madlibB.classList.remove('flip');
}

function reveal() {
  madlibA.classList.add('flip');
  madlibB.classList.add('flip');
  setTimeout(change, 500); // half-second like in CSS
}
setInterval(reveal, seconds * 1000);
.madlib {
  transition: all 0.5s linear;
  font-size:1rem;
  color:black;
}
.flip {
  font-size:0px;
  color:transparent;
}
<p>
  we make it easy to <span id="a" class="madlib">do things</span> with <span id="b" class="madlib">other things.</span>
</p>

css3でslideDown効果を行う良い方法を見つけていないため、トランジションはまったく同じではありません（要素に設定overflowするinline-blockとテキストがずれます）

JS で秒を設定すると、アニメーションの出入りに 0.5 秒かかるため、表示される秒数よりも 1 秒短くなるので、それに応じて計画してください。

元の答え:

setInterval関数を定期的に呼び出したりsetTimeout、しばらくしてから関数を呼び出したりするために使用できます。

あなたができるように

function changeText(){
    // code to change the text
}
setInterval(changeText,500);

また

function changeText(){
    // code to change text
    setTimeout(changeText,500);
}
changeText();

しばらくしてから関数自体を呼び出すようにします。

テキストを変更するには、次のようなオプションの配列を使用できます。

var sentences = ["test 1", "test 2", "test 3"],
    iter = 0,
    changeEl = document.getElementById("change");

function changeText(){
    changeEl.innerHTML = sentences[iter%sentences.length];
    iter++;
    setTimeout(changeText,500);
}
changeText();

アニメーションの場合、この手法を変換して、jQuery や mootools などのライブラリで使用できます。

編集：

私はこれをテストしていませんが、彼らが使用しているコードは次のようです:

html:

    <div id="madlib-sentence">
        <span class="twosides">TwoSides</span> makes it easy to
        <div class="madlibs" style="width:400px;">
            <ul id="madlibs-verbs">
                <li class="madlibs-verb"><span>discuss and debate contentious topics</span></li>
                <li class="madlibs-verb"><span>see every side of an issue</span></li>
                <li class="madlibs-verb"><span>compare your viewpoints</span></li>
            </ul>
        </div> with 
        <div class="madlibs" style="width:100px;">
            <ul id="madlibs-nouns">
                <li class="madlibs-noun"><span>friends.</span></li>
                <li class="madlibs-noun"><span>the world.</span></li>
                <li class="madlibs-noun"><span>co-workers.</span></li>
                <li class="madlibs-noun"><span>family.</span></li>
            </ul>
        </div>
    </div>

CSS:

#primary p .madlibs-verb,#primary p .madlibs-noun {
    font-family:HelveticaNeue,'Helvetica Neue',HelveticaNeueRoman,HelveticaNeue-Roman,'Helvetica Neue Roman',TeXGyreHerosRegular,Helvetica,Arial,sans-serif;
    font-weight:bold;
    font-style:normal;
 }

#primary #madlib-sentence {
    margin-top:20px;
    color:#f1f1f1;
    text-shadow:0 0 2px #000;
    font-size:19px;
    font-style:italic;
}

#primary #madlib-sentence .madlibs {
    display:inline-block;
    position:relative;
    height:19px;
    overflow:hidden;
    padding-bottom:3px;
    margin-bottom:-3px;
}

#primary #madlib-sentence .madlibs ul {
    position:absolute;
    left:0;
    top:0;
    list-style-type:none;
}

#primary #madlib-sentence .madlibs ul .madlibs-verb,#primary #madlib-sentence .madlibs ul .madlibs-noun {
    line-height:24px;
    padding-bottom:30px;
    font-family:HelveticaNeue,'Helvetica Neue',HelveticaNeueRoman,HelveticaNeue-Roman,'Helvetica Neue Roman',TeXGyreHerosRegular,Helvetica,Arial,sans-serif;
    font-weight:bold;
    font-style:normal;
}

#primary #madlib-sentence .madlibs ul .madlibs-verb span,#primary #madlib-sentence .madlibs ul .madlibs-noun span {
    white-space:nowrap;
}

JS:

function animate_madlib(container) {
    if (typeof container.data("index") === "undefined") {
        container.data("index", 0);
    }
    index = container.data("index") + 1;
    if (index == container.children().length) {
        index = 0;
    }
    current_child = container.children().eq(index);
    parent = container.parent();
    new_width = current_child.children("span").outerWidth();
    if (new_width > parent.width()) {
        parent.animate({width: new_width+"px"}, 100, "swing", function() {
            container.animate({top: -(index*current_child.outerHeight())}, 1000, "easeInOutQuint");
        });
    }
    else {
        container.animate({top: -(index*current_child.outerHeight())}, 1000, "easeInOutQuint", function() {
            parent.animate({width: new_width+"px"}, 100, "swing");
        });
    }
    container.data("index", index);
    new_container = (container.attr('id') == 'madlibs-verbs' ? $('#madlibs-nouns') : $('#madlibs-verbs'));
    setTimeout(function(new_container) {animate_madlib(new_container)}, 2500, new_container);
}

$(document).ready( function() {
    // madlib
    $('.madlibs').each(function() {
        $(this).css("width", $(this).find("span:first").outerWidth());
    });
    setTimeout(function(){animate_madlib($('#madlibs-verbs'))}, 1500);
});​
于 2012-09-16T20:27:51.457 に答える