HTML изменить цвет текста на свитке

Question

Я знаю, что название вводит в заблуждение, но у меня не было лучшего способа добавления заголовка на мой вопрос:

Я наткнулся на пару сайтов в настоящее время, с помощью HTML 5 и CSS 3.0 в горизонтальной макет страницы с одним параллаксом, с надписью над изображением, скажем, черным на белом фоне, а когда вы прокручиваете вправо, черный текст постепенно становится легче, чтобы приспособить новый фон, скажем, белый текст на черном фоне.

Это, кажется, растущая тенденция, особенно в приложении Windows Store, и я пытаюсь воспроизвести что-то подобное для веб-сайта.

Что я до сих пор использую jQuery для жесткого кодирования возможных координат текста, и когда положение прокрутки достигает примерно 25% позиции, чтобы начать правое изменение цвета с помощью SVG, но это кажется сложным.

Есть ли примеры в Интернете? Я пробовал поиск HTML/CSS-текста в режиме постепенного исчезновения, но на самом деле это не возвращает ничего конкретного?

Answer 1

Возможно, вы прочитаете Fancy Scrolling Sites на CSS-Tricks.

В прошлом году или около того было достаточно сайтов, которые приходят в голову, когда вы прокручиваете вниз, что это своего рода тенденция. Я думал, что буду писать в блоге, знаете ли, ради истории.

Вот как вы могли наблюдать за свитки и делать вещи с JQuery:

$(window).scroll(function(eventObject) { 
    // do stuff! You can find out about how far 
    // the window has scrolled via the eventObject. 
}); 

Используя положение прокрутки, вы можете изменить цвет, делать все, что вы можете сделать с JQuery. :)