Как скрыть анимацию JavaScript за пределами определенных границ? - PullRequest
0 голосов
/ 17 августа 2011

Я новичок в мире javascript / jquery, но у меня была эта фантастическая идея для эффекта для моей веб-страницы.Позвольте мне объяснить расположение abit.

Мой веб-сайт содержится в div-обертке, который гарантирует, что мой контент остается на 1000 пикселей и центрирован на экране независимо от ширины монитора (при условии, что монитор больше 1000 пикселей),Этот контент содержит изображение заголовка, которое в настоящее время используется для отображения красочного изображения (1000x400px), отображающего название сайта / компании / и т. Д.Таким образом, это изображение является шириной контейнера содержимого.

Я подумал, что было бы неплохо вместо названия компании установить на изображении прокрутить его слева направо, справа налево на изображении.Это можно сделать с помощью jquery и функции animate () (или близкой к ней функции).Проблема заключается в том, что после того, как заголовок веб-сайта прокручен до крайности веб-страницы, он будет перетекать из изображения размером 1000x400 пикселей и за пределы контейнера содержимого - таким образом, в область оболочки, которая является просто серым фоном.

Моя проблема в том, что я не могу концептуализировать способ скрытия прокручиваемого текста (который будет представлен очень высоким z-индексом) за фоновой оболочкой (которая является простым фоном, поэтому самый низкий индексвозможный).Я хочу, чтобы был виден только фрагмент прокручиваемого текста над контейнером содержимого шириной 1000 пикселей.Кто-нибудь знает, как скрыть то, что находится за фоном оболочки?Я подумал, может быть, воссоздать фон обертки с некоторыми элементами div, ограниченными наличием контейнера содержимого;этот div будет иметь максимально возможный z-индекс, поэтому он будет скрывать все, что накладывает.Есть ли лучший / более простой способ реализовать это?

Дайте мне знать, если я не имею смысла:)

Пэт

1 Ответ

0 голосов
/ 17 августа 2011

Может быть, я что-то здесь упускаю, но;

Если текст прокрутки является дочерним из div-оболочки , то все, что нужно сделать, это применить стиль overflow: hidden; к Оболочка div .

...