Отображать эффект ослабления при открытии сайта

Question

Как я могу отобразить эффект замедления, открывающийся слева, когда страница открыта?Нравится этот сайт: http://focuslabllc.com/

Answer 1

Это тот парень, который написал js для сайта, на который вы ссылаетесь.Я поиграл с CSS как вариант для этого, но в итоге просто перешел на jQuery 100%.Скоро у меня будет запись в блоге о некоторых аспектах разработки нашего нового сайта, и я расскажу о том, как мы это сделали.Он будет включать в себя некоторые демоверсии jsFiddle и т. Д.

Answer 2

Как и в dfsq-answer, анимация будет запускаться с классом по js (на этот раз без jquery):

window.onload = function() {
    var oElement = document.getElementById('content');
    oElement.className = oElement.className + ' start_animation';
};

И css изменяет поле и непрозрачность с переходом (-duration):

#content {
    ...
    /* starting status */
    margin: 10px 200px 10px 0px;
    opacity: 0;
    /* now set the animation duration */
    transition-duration: 1s;
    -moz-transition-duration: 1s;
    -webkit-transition-duration: 1s;
    -o-transition-duration: 1s;
}

#content.start_animation {
    margin: 10px 100px;     /* change horizontal margins */
    opacity: 1;             /* change opacity            */
}

Также посмотрите этот пример .

Answer 3

Я бы использовал CSS переходы.Взгляните на пример, который я создал http://jsfiddle.net/ZL9m7/1/

Относительный CSS прост:

.container {
    opacity: 0.1;
    transition: opacity 1s linear;
    -webkit-transition: opacity 1s linear; /* Play with timing functions */
    -moz-transition: opacity 1s linear;
    -o-transition: opacity 1s linear;
}

.container-ease-in {
    opacity: 1;
}

И крошечный триггер JavaScript (jQuery для удобства):

$(function() {
    $('.container').addClass('container-ease-in');
});

Answer 4

Вы можете использовать анимацию JQuery или переход YUI для достижения этой цели.Скройте div и покажите его ИЛИ установите ширину равной 0, а затем анимируйте ее максимально с определенной продолжительностью.

Answer 5

Вы можете сначала скрыть свой контент (с помощью CSS), а затем, как только контент страницы загрузится, используйте javascript для запуска / запуска операции замедления, чтобы сделать вещи видимыми.

Или, вы можете начать безКонтент и создайте контент страницы с помощью javascript таким образом, чтобы вы могли раскрыть его так, как вам хочется.