Простой параллакс эффект для шапки сайта на CSS3 за 2 шага

Доброго времени суток. В этом уроке я расскажу об интересном и простом параллакс эффекте на css3.

А так же работу этой плюшки можно увидеть прямо в этой статье. Традиционно в статье будет описана установка такой штуки в шаблон DLE  и в шаблон WP

Шаг 0 Откройте файл стилей вашего шаблона

Шаг 1 Добавьте в конец файла код

.megic_class {
background-position: 50% 50%;
background-repeat: no-repeat;
background-attachment: fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}

 Шаг 2 Откройте код главной страницы Вашего сайта 

И примените класс megic_class к блоку у которого есть фон в виде картинки.

Пример просто параллакс фона сайта на DLE и WP

Шаг 0 Откройте файл стилей вашего шаблона

Если сайт работает на DLE

Шаг 1 Добавьте в конец файла код

body {
background-position: 50% 50%;
background-repeat: no-repeat;
background-attachment: fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
background: url("../images/page_bg.jpg");
}

Шаг 2 Загрузите картинку с помощью FTP именем page_bg.jpg в папку images которая находится в Вашем шаблоне. 

Если такой папки нет то создайте ее.

Если сайт работает на WP

Шаг 1 Добавьте в конец файла код

body {
background-position: 50% 50%;
background-repeat: no-repeat;
background-attachment: fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
background: url("images/page_bg.jpg");
}

Шаг 2 Загрузите картинку с помощью FTP именем page_bg.jpg в папку images которая находится в Вашем шаблоне. 

Если такой папки нет то создайте ее.

На этом все. Ставьте лайки если все получилось.

Понравилась статья? Ставь лайк.

Похожие материалы

Обсуждения

Оставьте свой Email И мы обсудим Вашу идею
*P.S.:Не работаю с бюджетами менее чем 600$