#javascript #jquery #jquery-plugins
#javascript #jquery #jquery-плагины
Вопрос:
Я пытаюсь предоставить пользователям возможность выбирать другую домашнюю страницу, щелкая влево или вправо, и при этом появляется совершенно новая страница. Я знаю о нескольких каруселях jQuery, которые выполняют это чисто по оси x или y, но не вращением. В идеале фоновые изображения будут синхронизированы, и общий эффект будет похож на вращение земного шара, с другим набором элементов в другой части земного шара. Элементы в каждой части земного шара по-прежнему должны быть интерактивными и
У кого-нибудь есть какие-нибудь идеи по этому поводу?
Комментарии:
1. У вас есть пример того, что вы ищете? Это что-то вроде скроллера? прокрутка страницы?
2. Вы пытаетесь выполнить диагональную прокрутку по прямой линии или что-то круговое, например, поворачивать диск?
Ответ №1:
используя jQuery, вы должны быть в состоянии сделать это с помощью методов .slideDown и slideUp.
По сути, когда они выполняют действие, которое вы хотите активировать переключателем, вы добавляете slideUp() в «текущий» контейнер и выполняете slideDown() в следующем. Анимации будут выполняться одновременно.
Комментарии:
1. вам пришлось бы добавить некоторую логику, чтобы сделать это «циклическим», но это не слишком сложно. И это будет идти вверх и вниз… не влево, а вправо…
2. Я думаю, что сделать его круговым было бы сложной частью и потребовало бы большего, чем просто «некоторая логика», вам понадобится тригонометрия. Я сомневаюсь, что jQuery хорошо оснащен, чтобы сделать это из коробки. Интересная проблема… Я бы хотел увидеть, как это будет сделано!
3. видите ли, я понимаю, что circular означает что-то другое… Я имею в виду циклическое изменение элементов. Это означает, что после последнего элемента он вернется к первому (мой пример делает нечто подобное, но с неверной анимацией). Наличие точного примера того, чего он пытается достичь, помогло бы этому…
4. gilly3 прав, меня больше интересует поворот всего контейнера на 90 или какое-то произвольное количество градусов, и при этом он по-прежнему зацикливается на 360 градусах. Я никогда не видел точной реализации этого на JS или даже очень близко, это всегда делается во flash.
5. Я сделал кое-что, связанное с анимацией круга, просто для развлечения много лет назад, до того, как появился IE7. Может быть, даже до IE6. Сегодня он почти не работает, работает в режиме quirks. Код немного неудобный по сегодняшним стандартам, но в свое время он был довольно гладким. gilly3.com/coolblocks . По крайней мере, это показывает, что можно анимировать divs по кругу без flash (или jQuery!).
Ответ №2:
Не так много людей здесь напишут вам полное решение, но они будут рады проработать конкретные проблемы.
- Находятся ли эти домашние страницы в разных доменах и / или они находятся под вашим контролем?
- Насколько глобально вы имеете в виду? Своего рода искажение сферы или просто плавное соединение по краям?
- Насколько важна плавность концепции?
С моей точки зрения, вот как я бы (попытался) это сделать:
- Загружайте домашние страницы в отдельных
iframes - Растяните
iframeдо размеров окна - Адаптировать скрипт карусели для анимации
iframesвместоimages - Какие-то элементы управления «предыдущий / следующий», перекрывающие
iframe. Возможно, с помощьюz-index.
Комментарии:
1. Спасибо за ответ, мне не нужно полностью готовое решение, просто кивок в правильном направлении. Что касается страниц, все они находятся под моим контролем, так что это не проблема. Я просто хочу, чтобы они были бесшовными по краям, не нужны сферические искажения. Естественно, чем плавнее, тем лучше.
Ответ №3:
Проверьте landing.js файл на http://thetruth.com (или просто запустите таймер страницы, чтобы посмотреть карусель) В принципе, вы хотите именно этого, но с анимацией вместо того, чтобы вводить / выводить страницу.
Просто добавьте преобразования CSS3 для масштабирования и сдвига вместо постепенного исчезновения при загрузке новой страницы. Полизаполнение добавит возможность преобразования в JS (см. jquery.transform.js, jquery.transition.js by https://github.com/louisremi и модернизация)