Как Google достигает эффекта затухания на главной странице?

Question

Если вы зайдете на google.com, вы заметите, что меню сверху медленно появляется, когда вы наводите курсор мыши на страницу. Мне было интересно, что Google использует для контроля эффекта затухания?

[править], поскольку я не использую jQuery, я не хочу включать его только для использования этой функции

Answer 1

Есть два пути.

Javascript

Работает в большинстве браузеров.

Постепенно изменить атрибут непрозрачности CSS элемента, используя Javascript. Это проще всего с хорошим фреймворком, таким как jQuery , но довольно просто сделать самостоятельно.

function fadeIn() {
    var element = document.getElementById("someID");
    var newOpacity = element.style.opacity + 0.05;
    element.style.opacity = newOpacity;
    if (newOpacity < 1) {
        window.setTimeout(fadeIn, 50);
    }
}

Чистый CSS

На данный момент поддерживается только в Webkit.

#someID {
    opacity:0;
    -webkit-transition: opacity 1s linear;
}
#someID:hover {
    opacity:1;
}

Для примера посмотрите блог Surfin 'Safari .

Answer 2

Вы можете использовать jQuery и добавить обратный вызов onmousemove для тега, который скрывает скрытый div с идентификатором mymenu, что-то вроде:

$("html").one("mousemove", function() {
 $("#mymenu").fadeIn("slow")
});

Предупреждение: это было напечатано здесь, поэтому я не знаю, компилирует ли он ootb.

Answer 3

Я никогда не смотрел на это, но логично предположить, что есть таймер, который запускается во время загрузки страницы, и который регулирует либо альфа для указанного элемента, либо непрозрачность другого элемента, который его накладывает в CSS этого элемента. Каждый тик по таймеру приводит к тому, что цифры немного увеличиваются / уменьшаются, а текст становится более разборчивым. Когда достигается полная видимость, таймер выключается.

JQuery - законченная, готовая к использованию реализация в кроссплатформенном совместимом пакете. Вы просто добавляете, перемешиваете, и все готово.

Если вы решите не принимать советы других ответов, вам придется самостоятельно изучить и реализовать стратегию из моего верхнего абзаца. Удачи!

Answer 4

Демонстрация: PURE CSS http://jsfiddle.net/6QS2a/1/

</div>

CSS:

.item {   
  height:150px;
  width:150px;
  border-radius:100%;
  background:skyblue; 
  -webkit-transition: opacity 1s ease-in-out;
  -moz-transition: opacity 1s ease-in-out;
  -ms-transition: opacity 1s ease-in-out;
  -o-transition: opacity 1s ease-in-out;
  transition: opacity 1s ease-in-out;
    opacity:0.2;
}

.item:hover {
  opacity: 1;
}

Answer 5

@ Георг , этот пример работает и в Firefox 3.5. : -)

Answer 6

Это довольно сложная вещь из-за различий между браузерами. Основы примерно такие:

1. Получить текущую непрозрачность элемента как float.
2. Определите конечную непрозрачность как float.
3. Определите вашу скорость скорости - я не знаю, что это должно быть в натуральном выражении - что-то вроде 0,01 / мс, может быть?
4. Используйте setInterval, чтобы вызвать функцию, которая увеличивает непрозрачность на вашу скорость, где: setInterval(function(){myElement.style.opacity = parseFloat(myElement.style.opacity)+0.01;}, 1); Где-то там, хотя вам нужно проверить, достигли ли вы конечной точки вашей анимации, и отключить интервал.

Answer 7

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

Редактировать: в коде это будет выглядеть примерно так:

var hiddenStuff = document.getElementByClassName("hiddenStuff");

var interval=document.setInterval(function() {
    for (var i=0; i<hiddenStuff.length;i++){
        hiddenStuff[i].style.opacity+=0.1
    }
    if (hiddenStuff[1].style.opacity===1){
        window.clearInterval(interval);
    }
}, 100);

Возможно, вам потребуется настроить параметры, чтобы получить плавную анимацию.