2

この JavaScript を見つけ、テキストを完全にアニメーション化しますが、Google Web Designer で動的フィールドをこのスクリプトに割り当てるにはどうすればよいですか?

以下は、動的テキストがどのようにアニメーション化されるかについての jsfiddle リンクです。

https://jsfiddle.net/MarilynM84/2angj8tL/

function airport(el, array) {

    var self = el;
    var items = array.length;
    var items2 = array.length;
    var chars = ['a', 'b', 'c', 'd', 'e', 'f', 'g', ' ', 'h', 'i', 'j', 'k', 'l', 'm', 'n', 'o', 'p', 'q', 'r', 's', 't', 'u', 'v', 'w', 'x', 'y', 'z', '-', '1', '2', '3', '4', '5', '6', '7', '8', '9', '0','!','¿','?','-','+','.',',',"'",'"','ç','ñ','à','á','è','é','ì','í','ò','ó','ù','ú','À','Á','È','É','Ì','Í','Ò','Ó','Ù','Ú'];
    var longest = 0;
    var opts = {
        transition_speed: 2000,
        fill_space: false,
        longest: 0
    };

    //adds extra spaces to strings in array that are shorter than longest
    function pad(a, b) {
        return a + new Array(b - a.length + 1).join(' ');
    }

    self.innerHTML = '';

    //finds the longest string in array
    while (items--) {
        if(array[items].length > longest) {
            longest = array[items].length;
        }
    }

    //makes all strings in array the same length
    while (items2--) {
        array[items2] = pad(array[items2],longest);
    }

    spans = longest;
    while (spans--) {
        var span = document.createElement('span');
        span.className = 'c' + spans;
        self.insertBefore(span, self.firstChild);
    }

    //a - number of the span element
    //b - for checking char[b] against each letter in array[xx]
    //c - current word in array[c]
    //d - used to track position of each letter in array[xx]
    function init(a, b, c, d) {
        var el = self.querySelector('.c' + a);
        var current_letter = array[c] ? array[c].substring(d, d + 1) : null,
            timer,
            word_len = array[c] ? array[c].trim.length : null,
            prev_word_len = array[c - 1] ? array[c - 1].trim.length : array[0].trim.length;

        if (c >= array.length) { //reset
            timer = setTimeout(function() {
                init(1, 1, 1, 1);
            }, 10);
        }
        else if (d >= longest) { //go to next word

            timer = setTimeout(function() {
                init(0, 0, c + 1, 0);
            }, opts.transition_speed);
            console.log(opts);
        }
        else {
            el.innerHTML = chars[b] === ' ' ? ' ' : chars[b];
            timer = setTimeout(function() {
                if (b > chars.length) {
                    init(a + 1, 0, c, d + 1);
                }
                //go to next letter in chars[] if it doesnt match current letter in array[xx]
                else if (chars[b] !== current_letter.toLowerCase()) {
                    init(a, b + 1, c, d);
                }
                else { //found the letter here
                    el.innerHTML = current_letter === ' ' && opts.fill_space ? ' ' : current_letter;
                    if (word_len < prev_word_len) {
                        if (a > word_len) {
                            for (a; a < prev_word_len; a++) {
                                self.querySelector('.c' + a).innerHTML = '';
                            }
                            d = longest;
                        }
                    }
                    init(a + 1, 0, c, d + 1);
                }
            }, 10);
        }
    }

    init(0, 0, 0, 0);
}

// Call element by selected class or ID
airport(
    document.querySelector('.example'),

    // pass in data to be outputed here
    [ 'Dynamic Content',  ]
);

助けてください。私は JavaScript に関しては非常に初心者であり、学習しながら学んでいます。ありがとうございました！！

4

2 に答える 2

1

Google Web Designer では、カスタム イベントを作成して空港機能を呼び出すことができます。

イベント パネルから、新しいイベントを追加します。このイベントは、Ad Loaded イベントまたは特定のユーザーの行動に関連付けることができます。アクションとして、「カスタム」を選択します。新しいカスタム アクションを追加します。ここでカスタム関数を定義し、呼び出したいコードを関数内に追加できます。

すべてのグローバル変数は document.variable_name 経由で利用できることに注意してください

于 2015-11-28T17:49:35.090 に答える
0

これは、元の質問に対する動的な解決策であり、Google Web Designer のものはありません。(率直に言って、ウェブサイトを始めたばかりの人は、簡単なチュートリアルから始めて、html/js/css ツールに atom.io のようなものを使用することをお勧めします。まともな本やチュートリアル、おそらくこのようなものを見つけてください。 )

更新された jsfiddle は次のとおりです (重要な注意: jsfiddle ページの左側の余白で、 Frameworks and extensions を選択しますno wrap in <body>) 。

https://jsfiddle.net/2angj8tL/2/

上部の html を少し修正:

<body>
    <label for="textValue">New Text:</label>
        <input type="text" id="textValue" value="Place new text here." />
    <button onclick="hello()">Click me</button>
    <div class="example"></div>
</body>

スクリプト部分に次を追加します。

function hello() {
    var textInputVal = document.getElementById('textValue').value;
    console.log(textInputVal);
    // Call element by selected class or ID
    airport(
        document.querySelector('.example'),
        // pass in data to be outputed here
        [textInputVal]
    )
}

どうしても Google Web Designer を使用したい場合は、開発ツールの一番下に移動し、[コード ビュー] のボタンをクリックしてから、javascript の主要な要素を慎重に<script type="text/javascript" id="gwd-init-code">ブロックに追加します。マシンが生成したコードを消去したり変更したりしないように、ここでは十分に注意してください。

おっと..ここで Google Web Designer を更新してください。ことが判明

Google Web Designer (GWD) は、アニメーションと 3D 変換を使用して HTML5/CSS3/Javascript バナーと広告を作成するためのグラフィカル デザイン ツールです。描画、テキスト、3D オブジェクトなどのグラフィカル ツールを使用すると、キーフレームを使用してタイムライン上でこれらのオブジェクトやイベントをアニメーション化できます。GWD は明らかに、本格的なアプリケーションや Web サイト全体を作成するように設計されているわけではなく、Doubleclick および AdWords キャンペーンのプロジェクトに重点を置いて、バナー、ポップアップ広告、サイドバー、アニメーション ボタンなどを作成するように設計されています。

これらの要素にカスタム JavaScript を追加することもできますが、最初は JS に慣れているはずです。上記の要素に加えて、多くの JS ファイルが生成されます。

于 2015-10-27T09:13:11.907 に答える