Форум программистов
 

Восстановите пароль или Зарегистрируйтесь на форуме, о проблемах и с заказом рекламы пишите сюда - alarforum@yandex.ru, проверяйте папку спам!

Вернуться   Форум программистов > Web программирование > HTML и CSS
Регистрация

Восстановить пароль
Повторная активизация e-mail

Купить рекламу на форуме - 42 тыс руб за месяц

Ответ
 
Опции темы Поиск в этой теме
Старый 25.05.2015, 12:18   #1
Bender1000
Пользователь
 
Регистрация: 20.05.2013
Сообщений: 37
Вопрос Background как подложка, трехмерный эффект

Скажите, знатоки, как делается такой эффект, что один фон находится как бы дальше другого? Как, к примеру, на этом сайте - фон с девушкой находится позади другого, более "верхнего" фона. Как сделать так, чтобы этот фон с девушкой прокручивался медленнее, чем "внешний"?
http://artemasdigital.com/demo/em/html/
10000 часов програмирования - https://vk.com/tth.ikarev
Bender1000 вне форума Ответить с цитированием
Старый 28.05.2015, 19:16   #2
Bender1000
Пользователь
 
Регистрация: 20.05.2013
Сообщений: 37
По умолчанию

Параллакс-эффект это. Могли бы и ответить )))
10000 часов програмирования - https://vk.com/tth.ikarev
Bender1000 вне форума Ответить с цитированием
Старый 02.06.2015, 23:26   #3
Лубышев
Участник клуба
 
Аватар для Лубышев
 
Регистрация: 23.07.2007
Сообщений: 1,054
По умолчанию

Допустим есть какая то страница и на ней блок DIV
у этого блока есть background - красочная картинка. и вам надо в зависимости от какого то события/действия двигать ее.

Например по событию скрола документа, так как это сделано в вашем примере
тогда используем JS
Я буду приводить примеры с использованием JQuery

Код:
$(window).scroll(function(){
//по событию скрола что-то сделать
})
Что будем делать?
Например двигать фон
Код:
var a=какая_то_формула_расчета();
$("блок").css("background-position", "center "+a+"px");
Какую формулу расчета придумать?
ну, например в зависимости от положения этого блока на странице в данный момент времени. нам понадобится определить его координаты. в Jquery это делается с помощью:
$("блок").offset();
В итоге мы можем получить примерно такой простенький JS:
Код:
$(document).ready(function(){

  $(window).scroll(function(){
      r=$("блок").offset();
      $("блок").css("background-position", "center "+(r.top-210)/1.7+"px");
  })

})
P.S. (r.top-210)/1.7 - это я взял от болды, можешь побаловаться с циферками для наилучшего эффекта

P.S. Этот вариант не является единственным и не претендует быть самым верным
Писано по д'Эльфийски
Лубышев вне форума Ответить с цитированием
Ответ


Купить рекламу на форуме - 42 тыс руб за месяц



Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Трехмерный динамический массив (задание размеров), как? trafbite Общие вопросы Delphi 7 06.08.2012 12:41
Подложка Abuhamed HTML и CSS 1 09.07.2012 10:45
Трехмерный массив в Delphi. Как реализовать? ichi Общие вопросы Delphi 3 11.04.2012 04:13
как заполнить трехмерный массив процедурой? MyLastHit Общие вопросы Delphi 9 03.01.2011 21:00
Трехмерный график в OpenGL. Как разметить оси? Беллая Мультимедиа в Delphi 5 10.11.2010 23:21