Возникли проблемы с воспроизведением эффекта

Question

Возникли проблемы с воспроизведением эффекта

0

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

Я в тупике, как это было достигнуто. Может ли кто-нибудь пролить свет на него для меня?

Dean Elliott 17 дек. 2013, в 15:41

Источник

0

Посмотрите на исходный код?
Reeno 17 дек. 2013, в 13:50
0

@Reeno Это не сильно помогло, я не мог сказать, что связано с чем
Dean Elliott 17 дек. 2013, в 13:52
0

Сайт RED действительно впечатляет, но с более чем 100 творческими фанатами в одном месте, это то, что вы можете сделать. Похоже, что эффект прокрутки вверх основан на переходах CSS. Вам нужно будет начать копаться в CSS, чтобы перепроектировать технику.
Marc Audet 17 дек. 2013, в 14:05

Показать ещё 1 комментарий

Теги:

jquery

css

1 ответ

Ещё вопросы

@Reeno Это не сильно помогло, я не мог сказать, что связано с чем
Сайт RED действительно впечатляет, но с более чем 100 творческими фанатами в одном месте, это то, что вы можете сделать. Похоже, что эффект прокрутки вверх основан на переходах CSS. Вам нужно будет начать копаться в CSS, чтобы перепроектировать технику.

Millenjo · Answer 1 · 2013-12-17T12-54-00.000Z

Вот скрипка, которую я делал, это работает так

http://jsfiddle.net/T4RHp/1/

имейте в виду, что непрозрачность может иметь некоторые проблемы с IE

EDIT: setTimeout() не требуется, я просто положил его туда, чтобы получить некоторую задержку при запуске скрипта

код:

var timeArray = [200, 250, 300, 350, 400, 450, 500, 550, 600, 650, 700, 750, 800];

setTimeout( function() {

    $('.box').each( function ()
    {
        var intVal = Math.floor((Math.random()*12));
        $(this).animate({ top: 0, opacity: 1 }, timeArray[ intVal ]);   
    });

}, 500);

CSS:

.box 
{
    opacity: 0;
    height: 100px;
    width: 100px;
    position: relative;
    top: 40px;
    margin: 20px;
    border: 1px solid #333;
    float: left;
}

HTML:

<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>