Плавное появление логотипа (картинки) при загрузке страницы приветствия

Тема в разделе "JavaScript", создана пользователем Flad.Solo, 2 фев 2012.

Модераторы: ZiX
  1. Flad.Solo

    Flad.Solo Создатель

    Регистр.:
    26 мар 2009
    Сообщения:
    26
    Симпатии:
    1
    задача такова:
    -при вводе адреса сайт.ком юзер попадает на страничку приветствия
    -страничка пустая
    -начинает плавно возникать логотип (скажем, на протяжении 5000 (пяти секунд)
    -через 5000 срабатывает редирект на сайт.ком/ввв (основная страничка wordpress)
    скажем, <body onLoad="setTimeout('delayer()', 5000)">

    нашел ПРИМЕР http://www.marioschmolka.com/
    (написано на флеше, флеш не хочу, нужен скрипт чтобы айфоны видели)

    пробовал воплотить через слайдер
    InnerFade with JQuery
    http://medienfreunde.com/lab/innerfade/
    первой картинкой ставил прозрачный png, а потом лого второй картинкой
    но сильно длинная пауза до появления лого, не устроило
    (и еще не отображалось в Opeda Mobile на iPhone)

    подскажите более простой способ воплощения появляющегося лого
    спасибо
     
  2. coolparty

    coolparty Постоялец

    Регистр.:
    6 ноя 2006
    Сообщения:
    63
    Симпатии:
    25
    самый простой способ - сделать анимированный .gif с одним циклом. иначе делайте интервал и изменяйте $('#logo').css("filter", "alpha(opacity=здесь_от_0_до_100)");
     
  3. mdss

    mdss ♖♘♗♕♔♗♘♖

    Moderator
    Регистр.:
    20 фев 2007
    Сообщения:
    1.130
    Симпатии:
    668
    <a href="#" class="logo"><img src="i/logo.gif" alt="" /></a>

    сам js

    $('.logo').fadeIn(5000);
     
  4. dino

    dino

    Регистр.:
    28 май 2009
    Сообщения:
    550
    Симпатии:
    204
    Тогда уж упростим:
    Код:
    <img src="i/logo.gif" alt="" id="logo" />
    $('#logo').fadeIn(5000);
    :)
     
  5. Flad.Solo

    Flad.Solo Создатель

    Регистр.:
    26 мар 2009
    Сообщения:
    26
    Симпатии:
    1
    спасибо, mdss и dino, работает! (спасибо и coolparty, но анимированный gif я изначально не рассматривал из-за веса)
    update: правда в Firefox и Opera не работает, а в Chrome и IE9 - да..

    в связи моей нелюбовью ко всякого рода welcome.php (просто подруга попросила так)
    возник вопрос:
    можно ли вместо этой отдаляющей пользователя от контента страницы
    сделать чтобы при загрузке wordpress сайта по адресу сайт.ком
    на тех же 5000 поверх всех элементов на странице была заливка белым(любым) фоном и лого в центре
    а по истечению искомых пяти секунд фон и лого "растворялись" fadeOut?
    по-моему значительно интереснее нежели отдельная страница
     
  6. mdss

    mdss ♖♘♗♕♔♗♘♖

    Moderator
    Регистр.:
    20 фев 2007
    Сообщения:
    1.130
    Симпатии:
    668