1. Приветствую гостей и пользователей нашего форума! Первый раз вы у нас или же давно участвуете в жизни ресурса, хочу напомнить несколько моментов.

    1) Пользуемся поиском по форуму! Зачастую информация может находиться не по разделу!

    2) Раздел ИНФО-продуктов относительно новый, но имеем уже более 3000 высококлассных материалов (пользуемся сортировкой по прификсам).

    3) И самое важное, КАК КАЧАТЬ БЕЗ ОГРАНИЧЕНИЙ, вся информация находится по этой ссылке КУПИТЬ VIP

    4) Временная акция, получи +5 постов за вступление в нашу группу "Вконтакте" Более подробно ТУТ

    5) Веди активную жизнь на форуме и получай рубли на личный счёт!

    Скрыть объявление
  2. На нашем форуме Null-Prog действует серьёзное правило касательно размещения материалов!

    ДЛЯ РЕЛИЗЁРОВ: категорически запрещается выкладка материалов на файлообменники типа Deposit, letitbit и другие, требующие просмотров рекламы, обрезающие скорость и тд. Нарушителям, первые 2 раза предупреждения, далее БАН. Тему по этому поводу можно посмотреть ТУТ

    Скрыть объявление
  3. В тестовом режиме на нашем форуме открыт онлайн конструктор сайтов. Вы можете попробовать создать свой сайт у НАС, интуитивно понятный интерфейс, переведёт на 95%, быстрый экспорт проекта, от вас только перетаскивать элементы и вставить в них необходимый текст!

    Все вопросы ТУТ

    Скрыть объявление

  4. Скрыть объявление
  5. Уважаемые форумчане, открывается новый раздел форума, посвящённый ремонту и эксплуатации автомобилей. Просмотреть его можно ТУТ

    Так как раздел новый, информация будет пополнять каждый день. Если есть какие либо замечания по этому разделу, отписываемся в соответствующий раздел форума, либо в личку.

    Напоминаю, сообщения в разделе АВТО не учитываются, общение не ограничено.

    Скрыть объявление
  6. Объявляется набор Модераторов на различные раздел форума, свои заявки можно оставлять в ЭТОМ разделе, перед оставлением заявки рекомендуется ознакомиться с ПРАВИЛАМИ для модераторов.

Програмирование Простой эффект прокрутки с параллаксом на CSS3

Тема в разделе "СSS", создана пользователем Sam Jack, 18 авг 2015.

  1. Sam Jack

    Sam Jack Капитан-Узурпатор
    Команда форума Созидатель

    Регистрация:
    5 май 2015
    Сообщения:
    13.755
    Симпатии:
    4.725
    Параллакс один из самых красивых эффеков в современном сайтостроении, простота, и необычность эффекта заставляет посетителя восхищаться такой изюминкой. Мы много уделяем внимания данной теме, и она все больше набирает обороты в читаемости. В данном уроке мы рассмотрим один из достаточно простых эффектов, это прокрутка с эффектом параллакса реализованного с помощью CSS3 и JS. У нас будет четыре изображения, которые будут плавно замещать друг друга при прокрутке страницы. Такой эффект уже реализован на многих сайтах.

    В этом уроке я покажу, как мы можем построить простой сайт с параллаксом с помощью нескольких строк javascript-кода и CSS. Итак, давайте приступим.

    Шаг 1. HTML
    Первый шагом будет добавление фоновых изображений и классов к ним, кроме этого добавляем параметры data-speed, которые необходимы нам для создания данного эффекта:

    1

    2

    3

    4


    Кроме этого Вам необходимо подключить в шапку сайта библиотеку jQuery, обратите внимание, если у Вас уже подключена данная библиотека, то может возникнуть конфликт версий, и весь сайт придет в негодность.

    Шаг 2. CSS
    Теперь нам необходимо определить параметры для каждого изображения, кроме этого изображения будут полностью адаптивными, при сохранении эффекта
    Код:
    1
    #home {
    2
    background: url("../images/home.jpg");
    3
    background-attachment: fixed;
    4
    background-origin: initial;
    5
    background-clip: initial;
    6
    background-size: cover;
    7
    background-repeat:no-repeat;
    8
    background-position:100% 0;
    9
    position:relative;
    10
    min-height:1080px;
    11
    }
    12
    #about {
    13
    background: url("../images/about.jpg");
    14
    background-attachment: fixed;
    15
    background-origin: initial;
    16
    background-clip: initial;
    17
    background-size: cover;
    18
    background-repeat:no-repeat;
    19
    background-position:100% 0;
    20
    position:relative;
    21
    min-height:1080px;
    22
    }
    23
    #blog {
    24
    background: url("../images/blog.jpg");
    25
    background-attachment: fixed;
    26
    background-origin: initial;
    27
    background-clip: initial;
    28
    background-size: cover;
    29
    background-repeat:no-repeat;
    30
    background-position:100% 0;
    31
    position:relative;
    32
    min-height:1080px;
    33
    }
    34
    #contact {
    35
    background: url("../images/contact.jpg");
    36
    background-attachment: fixed;
    37
    background-origin: initial;
    38
    background-clip: initial;
    39
    background-size: cover;
    40
    background-repeat:no-repeat;
    41
    background-position:100% 0;
    42
    position:relative;
    43
    min-height:1080px;
    44
    }
    В результате мы получаем практически функциональный эффект, нам осталось добавить только немного магии для полной работы параллакса.

    Шаг 3. JS
    Основная идея заключается в переходе слайдов с разной скоростью, пока страница прокручивается вверх или вниз. Это может быть достигнуто лишь с помощью нескольких строчек кода. Ниже приводится javascript код, который использует HTML5 селектор типов данных, чтобы все слайды и наборы фоновых позиций каждой страницы прокручивались вверх или вниз.

    Код:
    1
    jQuery(document).ready(function(){
    2
    $objWindow = $(window);
    3
    $('div[data-type="background"]').each(function(){
    4
    var $bgObj = $(this);
    5
    $(window).scroll(function() {
    6
    var yPos = -($objWindow.scrollTop() / $bgObj.data('speed'));
    7
    var coords = '100% '+ yPos + 'px';
    8
    $bgObj.css({ backgroundPosition: coords });
    9
    });
    10
    });
    11
    });
    Надеюсь данный эффект станет Вам полезным и Вы создадите замечательный сайт, который порадует посетителя красивой графикой и плавностью движения.

    Вот и все. Готово!
    Материал взят из зарубежного источника. И представлен исключительно в ознакомительных целях.
     

    Вложения:

    Метки:
  2. vizmus

    vizmus Новичок

    Регистрация:
    24 янв 2016
    Сообщения:
    1
    Симпатии:
    0
    Чет код страницы неправильно показывает.
     
  3. Jhon2

    Jhon2 Новичок

    Регистрация:
    1 июн 2016
    Сообщения:
    13
    Симпатии:
    0
    А где еще можно найти эффекты?
     

Поделиться этой страницей

iHax Community
Рейтинг@Mail.ru Яндекс.Метрика мониторинг сайтов
Форум программного обеспечения/
Загрузка...