Блог ”Справочник Петербуржца”
интернет-журнал событий,
интернет-дневник, онлайн-дневник

Эффекты плавного появления элементов web-сайта.

25.11.2014

Просмотр HTTP-заголовков
Следите за корректностью HTTP-заголовков. Одна из причин некорректной индексации сайта – неправильный ответ веб-сервера в ответ на запрос поискового робота.
Адрес и телефон
Всем привет.

Вы наверное заметили красивую тенденцию на продающих web-сайтах одностраничниках, когда многие текстовые блоки плавно появляются при скроллинге web-страницы по вертикали. И это очень привлекает наше внимание. Оказывается это легко сделать с помощью того же jQuery. Я ничего не придумал, просто глянул урок от Сергея Немцева. 

А что там? Да все просто.
В своей странице вставляем вызов скриптов перед закрывающим тегом body.

Важно - проверяем не подключен ли у нас уже jquery! В этом случае первую строку можно опустить:
script src="http://www.78blog.ru/cgi-bin/click.cgi?go=js/jquery-1.9.1.js"

script src="http://www.78blog.ru/cgi-bin/click.cgi?go=js/scripts.js"
script src="http://www.78blog.ru/cgi-bin/click.cgi?go=js/jquery-ui.js"
script src="http://www.78blog.ru/cgi-bin/click.cgi?go=js/jquery.leanModal.min.js"

Добавляем два стиля в style.css:

.hidden_area {opacity: 0;}
и
.anim {transition: all 0.6s ease; opacity: 0.01;}



А теперь работаем непосредственно по тексту нашей web-страницы.
Для добавления эффекта плавного появления элемента:
  1. сразу после  body ставим 
  2. а нужный элемент охватываем классом area
    код
    .
Для добавления эффекта выскакивания элемента:

  1. сам элемент охватываем классом anim < div class="anim">код
  • а div-ные блоки охватываем классами effect и wrap scroll-animate.

  • Должно получиться что-то вроде такого вложения:


    Довольно просто. Как это выглядит на практике можете оценить здесь. Покрутите страницу вверх-вниз. Хотите попробовать сами? Подсказки с кодом можете взять здесь.

    Между прочим подобное в Adobe Muse делается не менее легко, и без кодирования.)



    Ярлыки: Adobe webdesign дизайн идея инфобизнес тестирование




    Самые интересные записи

    Лучшие ПОИСКОВЫЕ системы 2014. Гордись, Россия!
    23.09.2014

    По данным liveinternet, Яндекс самая популярная в России поисковая система. Ее доля на рынке составляет 53% против 34х% Google. Далее идёт наращивающий оборот Mail.ru, который недавно перешёл полностью на...

    Ярлыки: Рейтинг поисковых систем
    Комментариев нет

    23.09.2014

    ...


    Комментариев нет
    Сок ростков пшеницы - целебный витграсс
    24.04.2013

    Сок ростков пшеницы , или  сок витграсс  (от wheat – пшеница и grass – трава, англ.) прочно вошел в рацион миллионов людей по всему миру. Во многих странах сок витграсс продается в овощных...


    Комментариев нет
    Неделя MxWorld #17
    06.05.2013

    Неделя MxWorld #17: В предстоящие выходные пройдет предпоследний этап серии АМА Суперкросс 2013 в Солт Лэйк Сити, а также первый этап Чемпионата Европы по Мотокроссу в классе EMX Open и в классах...


    Комментариев нет

    06.05.2013

    ...


    Комментариев нет
    Камень Авантюрин
    20.11.2013

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

    Ярлыки: Авантюрин
    Комментариев нет
    Облицовочная плитка
    03.07.2013

    Цокольная облицовочная плитка Английский камень Бутовый камень Бутовый камень Карельский...


    Комментариев нет
    АМА Мотокросс 2013 - шестой этап - класс 450
    03.07.2013

    Победителем шестого этапа Чемпионата Америки по Мотокроссу 2013 в классе 450 вновь стал Райан Данжи. В первом заезде первым финишировал Райан Данжи, который в конце заезда опередил...

    Ярлыки: Мото новости Мотокросс Мото
    Комментариев нет

    03.07.2013

    ...


    Комментариев нет
    Словарь автомобильного жаргона
    03.07.2013

    З/М З/М - задний… З/Ч З/Ч -… ЗА РУБЛЁМ ЗА РУБЛЁМ - "За… ЗА РУЛЁМ ЗА РУЛЁМ - автомобильный… ЗАВОДИТЬСЯ ЗАВОДИТЬСЯ - ну это ясно – машину… ЗАДЕЛАТЬ ДЕЛОВУЮ МАШИНУ ...


    Комментариев нет
    Шаг 2 — выбор и регистрация хостинга
    26.06.2014

    В предыдущем уроке мы регистрировали домен . Теперь самое время зарегистрировать хостинг. Сегодня я расскажу: Что такое хостинг и для чего он нужен Какой бывает хостинг Чем...

    Ярлыки: регистрация хостинга
    Комментариев нет
    Школа яхтенного капитана
    20.08.2013

    Школа яхтенного капитана Сост. Е. П. Леонтьев Москва "Физкультура и спорт", 1983. Содержание Основы теории и устройство крейсерных яхт. Элементы теории парусной яхты. 1.1. Требования,...


    Комментариев нет

    20.08.2013

    ...


    Комментариев нет
    Mazda 3 седан
    03.07.2013

    Седан Mazda 3 , с его характерной динамикой стиля и непринужденной уверенностью, всегда по-особому смотрится на дороге....


    Комментариев нет

    03.07.2013

    ...


    Комментариев нет

    01.01.1970







    Самые интересные записи

    Свадебный фотограф
    05.06.2014

    Свадебный фотограф – это не просто фотограф, который специализируется на съемке свадеб. Свадебный фотограф – один из важнейших профессионалов, которые обслуживают свадьбу. Посудите сами:...

    Ярлыки: Свадебный фотограф
    Комментариев нет
    Немного обо всем: Большая Советская Энциклопедия
    07.06.2013

    Немного обо всем: Большая Советская Энциклопедия : Первое издание БСЭ 1-е изд. выпущено по постановлению президиума ЦИК СССР (1925) с 1926 по 1947 (Москва, Акционерное общество...


    Комментариев нет
    Гран При Швеции ЧМ по Мотокроссу 2013 - класс MX1
    03.07.2013

    Победителем Гран При Швеции Чемпионата Мира по Мотокроссу 2013 в классе MX1 стал итальянец Антонио Кайроли. Россиянин Евгений Бобрышев сошел с дистанции в обоих заездах. В первом...

    Ярлыки: Мото новости Мотокросс Мото
    Комментариев нет

    03.07.2013

    ...


    Комментариев нет
    Словарь автомобильного жаргона
    03.07.2013

    У МЕНЯ НЕ ЗАРЖАВЕЕТ У МЕНЯ НЕ ЗАРЖАВЕЕТ - все будет в… УАЗ УАЗ: 1) Ульяновский автомобильный завод; 2) семейство авто этого… УАЙТ УАЙТ - марка автомобиля,… УАТТ УАТТ...


    Комментариев нет
    "ВКонтакте" начала переговоры с крупнейшими лейблами
    05.07.2013

    Администрация " ВКонтакте " начала переговоры с крупнейшими звукозаписывающими компаниями о возвращении их музыки на страницы соцсети. Об этом сообщает газета " Ведомости " в номере от 5...

    Ярлыки: Павел Дуров Бизнес и финансы ВКонтакте Интернет Новости Интернет
    Комментариев нет

    05.07.2013

    ...


    Комментариев нет
    ИММУНИТЕТ ВОЕННЫХ КОРАБЛЕЙ
    14.09.2013

    ИММУНИТЕТ ВОЕННЫХ КОРАБЛЕЙ - Общепризнанный принцип международного морского права, означающий неприкосновенность военных кораблей, нераспространение на них законов иностранных...

    Ярлыки: ИММУНИТЕТ ВОЕННЫХ КОРАБЛЕЙ
    Комментариев нет
    Компрессор автомобильный Беркут R-15
    07.06.2013

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


    Комментариев нет
    Audi Q7, 2006 г.в. Цена 1290000 руб.
    15.05.2013

    Audi Q7 Цена: 1290000 руб. Год выпуска: 2006 Объем двигателя: 4.2 FSI (350 Hp) quattro tiptronic Тип двигателя: Бензин инжектор Тип трансмиссии: Автомат Пробег: 158603 км Кузов: ...


    Комментариев нет
    АМА Мотокросс 2013 - шестой этап - класс 450
    03.07.2013

    Победителем шестого этапа Чемпионата Америки по Мотокроссу 2013 в классе 450 вновь стал Райан Данжи. В первом заезде первым финишировал Райан Данжи, который в конце заезда опередил...

    Ярлыки: Мото новости Мотокросс Мото
    Комментариев нет

    03.07.2013

    ...


    Комментариев нет
    Комплект камина
    03.07.2013

    Облицовка камина ...


    Комментариев нет

    Мониторинг доступности сайтаПроверено на вирусыДизайн сайта “СириусВеб”