Здесь вы пытаетесь решить две проблемы:
- Размещение текста в соответствующих местах
- Заставить их исчезнуть
Шаг первый
Первая проблема может быть решена с помощью простого CSS. Начните с контейнера:
#container {
position:relative;
width:150px;
height:150px;
}
<div id="container"></div>
Ширина и высота могут быть любыми, но вы должны сказать это что-то . Мы собираемся поместить наш текст в этот контейнер, но затем используем position:absolute. Это выведет их из нормального потока документов и свернет контейнер, если мы укажем ему явную высоту.
Следующим шагом является текст. Вам понадобится четыре элемента div с текстом внутри абзацев:
<div class="text" id="text1">
<p>text 1</p>
<p>text 2</p>
<p>text 3</p>
</div>
Сделайте это для каждого из четырех блоков текста, которые вы хотите иметь. Используйте одно и то же имя класса для каждого, но присвойте каждому свой уникальный идентификатор (text2, text3 и т. Д.).
Наконец, просто используйте (как я уже говорил ранее) абсолютное позиционирование, чтобы разместить их там, где вы хотите:
.text { position:absolute; }
#text1 { top:0; left:0; }
#text2 { top:0; right:0; }
... и так далее. Когда вы закончите, у вас должно получиться что-то вроде этого:
Шаг второй
Затухающие элементы требуют анимации. У вас вроде есть базовая функция анимации, но я предлагаю вам прочитать статью Роберта Пеннера о анимации и анимации. Он был написан для ActionScript, но применяются те же принципы.
На данный момент, есть хороший универсальный метод JavaScript, который будет принимать элемент и постепенно его увеличивать:
function fadeIn(totalTime, elem, after) {
var cos = Math.cos,
PI = Math.PI,
startTime = +new Date(),
endTime = startTime + totalTime,
timer;
elem.style.opacity = 0;
elem.style.filter = 'alpha(opacity=0)';
timer = setInterval(function () {
var currentTime = +new Date();
currentTime = currentTime > endTime ? 1 : (currentTime - startTime) / totalTime;
var distance = (1 - cos(currentTime * PI)) / 2;
elem.style.opacity = distance;
elem.style.filter = 'alpha(opacity=' + distance * 100 + ')';
if (currentTime === 1) {
clearInterval(timer);
if (after) {
after();
}
}
}, 40);
}
Вы указываете этой функции, как долго вы хотите, чтобы анимация длилась (в миллисекундах ), и вы также можете дать ей функцию, которая будет выполняться, когда затухание закончено (если вы хотите; это не нужно) .
Если я правильно понял ваш вопрос, вы хотите, чтобы все тексты начинались невидимыми, а затем постепенно появлялись, по одному, по часовой стрелке сверху. Мы можем сделать их невидимыми с помощью CSS, но если пользователь отключил JS, страница будет пустой. Поэтому вам нужно сначала «получить» все элементы (либо с какой-то функцией getByClass, либо с четырьмя различными вызовами getElementById) и установить их непрозрачность равной 0.
Таким образом, вы можете создать первую группу текстов, выполнив следующие действия:
var text1 = document.getElementById('text1');
fadeIn(1000, text1);
Проблема в том, что, делая это, невозможно определить, когда начинать следующую анимацию. Поэтому нам нужно создать функцию с помощью замыканий, чтобы отслеживать вещи (это предполагает, что вы уже получили элементы в JS и сделали их невидимыми):
var tracker = (function () {
var texts = [text1, text2, text3, text4],
i = 0;
return function () {
var text = texts[i];
if (text) {
fadeIn(1000, text, tracker);
i += 1;
}
};
}());
Эта функция циклически перебирает каждый элемент и добавляет его к концу, когда предыдущий элемент сделан. (Это нормально, если код не имеет большого смысла; замыкания - это сложные вещи.)
Вот окончательный результат в JSFiddle. Удачи.