У меня есть неупорядоченный список с несколькими элементами списка.
#tags {
width: 300px;
height: 300px;
position: relative;
border: 1px solid red;
list-style: none none;
}
#tags li {
position: absolute;
background: gray;
}
Я также начал писать плагин jQuery для анимации элементов списка. Пока что я произвольно помещаю элементы списка в родительский контейнер и выбираю произвольный размер шрифта для текста.
Мой следующий шаг (на котором я немного застрял) - анимировать элементы списка ... по сути, я хочу, чтобы элементы списка делали что-то вроде этого
- Скользите слева направо, немного увеличиваясь до середины, а затем уменьшаясь в размере до нормального, когда он достигает правой границы.
- Затем он должен сделать то же самое в обратном порядке, однако он также должен установить отрицательный 'z-index' и, возможно, немного потерять прозрачность.
Первый момент, на котором я действительно застрял, это то, как определить, находится ли элемент ближе к середине, таким образом, чтобы я мог иметь значение, которое начинается с 0,1 в крайнем левом размере и равно 1 в середине а затем вернуться к 0,1 на крайнем правом размере.
По сути, я хочу, чтобы они выглядели так, как будто они движутся по искусственному трехмерному кругу на странице.
Тогда я мог бы сделать что-то вроде этого
$(this).css({
fontSize: percentageTowardsMiddle * 14,
});
Вы знаете, как я мог это сделать?
Спасибо