Попытка создать анимированные динамические поля в веб-дизайнере Google с помощью пользовательского JavaScript
Я нашел этот JavaScript, и он отлично анимирует текст, однако, как мне назначить динамическое поле в веб-дизайнере Google для этого скрипта?
Ниже приведена ссылка на 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, я учусь на ходу. Спасибо!!
2 ответа
В Google Web Designer вы можете создать пользовательское событие для вызова функции аэропорта.
На панели событий добавьте новое событие. Вы можете прикрепить событие к событию Ad Loaded или к определенному поведению пользователя. В качестве действия выберите "Пользовательский". Добавьте новое пользовательское действие. Здесь вы можете определить пользовательскую функцию, а внутри функции добавить код, который вы хотите вызвать.
Помните, что каждая глобальная переменная доступна через document.variable_name
Вот динамическое решение вашего первоначального вопроса без материала Google Web Designer. (Честно говоря, я бы порекомендовал новому человеку, занимающемуся веб-сайтами, начать с простого учебника и использовать что-то вроде atom.io для своего инструмента html/js/css. Найдите приличную книгу или учебник, возможно, что-то вроде этого.)
Вот обновленный jsfiddle (Важное примечание: в левом поле страницы jsfiddle выберите Фреймворки и расширения 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) - это инструмент графического дизайна для создания баннеров и рекламных объявлений HTML5/CSS3/Javascript с использованием анимации и 3D-преобразований. Используя их графические инструменты, такие как рисование, текст и трехмерные объекты, вы можете анимировать эти объекты и события на временной шкале, используя ключевые кадры. GWD явно предназначен не для создания полноценных приложений или целых веб-сайтов, а скорее для баннеров, всплывающих окон, боковых панелей, даже анимированных кнопок, с особым акцентом на проектах для кампаний Doubleclick и AdWords.
Так что да, вы можете добавить пользовательский JavaScript к этим элементам, но вам, вероятно, сначала будет удобно с JS. Есть много файлов JS, сгенерированных в дополнение к элементу, упомянутому выше.