Как задать стартовое положение фона при параллаксе?

Question

[Odinokun]

Доброго времени суток.
Подскажите пожалуйста, как сделать так, что бы фон у блока начинал прокручиваться именно при появлении блока в видимой части экрана. Т.к. у меня он начинает прокручиваться при скролле страницы и к тому моменту как нужный блок показывается в экране монитора он уже смещен на 2/3.
Вот пример кода codepen.io/Odinokun/pen/XXXXgd

Answer 1

[Александр Плаксенко]

привет, например вот маленькая либа morr.github.io/appear.html
когда видно элемент, вешаете свой паралакс.

Answer 2

[R3AD]

Нужен параллакс эффект в итоге?

Comments

[Odinokun]

Нужен.

[R3AD]

К блоку с фоном ставим стиль
background-attachment: fixed; //либо так
background: url(../img/foto.jpg)fixed; //либо так
Тянем за скролл браузера, именно за него а не колесиком, если фон поехал то все ок, и нужно будет только добавить скрипт у меня он есть.
Пример работы sipuchka.ru

[R3AD]

vitaly9200 skype

[R3AD]

Вы добавляете лишний класс parallax в HTML - это не правильно, все делается стилями и одним скриптом

[R3AD]

Создаем и подключаем js файл:
(function($) {

jQuery.scrollSpeed = function(step, speed, easing) {

var $document = $(document),
$window = $(window),
$body = $('html, body'),
option = easing || 'default',
root = 0,
scroll = false,
scrollY,
scrollX,
view;

if (window.navigator.msPointerEnabled)

return false;

$window.on('mousewheel DOMMouseScroll', function(e) {

var deltaY = e.originalEvent.wheelDeltaY,
detail = e.originalEvent.detail;
scrollY = $document.height() > $window.height();
scrollX = $document.width() > $window.width();
scroll = true;

if (scrollY) {

view = $window.height();

if (deltaY < 0 || detail > 0)

root = (root + view) >= $document.height() ? root : root += step;

if (deltaY > 0 || detail < 0)

root = root <= 0 ? 0 : root -= step;

$body.stop().animate({

scrollTop: root

}, speed, option, function() {

scroll = false;

});
}

if (scrollX) {

view = $window.width();

if (deltaY < 0 || detail > 0)

root = (root + view) >= $document.width() ? root : root += step;

if (deltaY > 0 || detail < 0)

root = root <= 0 ? 0 : root -= step;

$body.stop().animate({

scrollLeft: root

}, speed, option, function() {

scroll = false;

});
}

return false;

}).on('scroll', function() {

if (scrollY && !scroll) root = $window.scrollTop();
if (scrollX && !scroll) root = $window.scrollLeft();

}).on('resize', function() {

if (scrollY && !scroll) view = $window.height();
if (scrollX && !scroll) view = $window.width();

});
};

jQuery.easing.default = function (x,t,b,c,d) {

return -c * ((t=t/d-1)*t*t*t - 1) + b;
};

})(jQuery);

Вызываем плавную прокрутку с регулировкой скорости (только на ней виден паралакс):

$(function() {

jQuery.scrollSpeed(100, 800);

});

И сейчас любой background превращаем в паралакс, просто добавив
background-attachment: fixed; //либо так
background: url(../img/foto.jpg)fixed; //либо так
background: url(../img/foto.jpg) 50% 50% fixed; //50% 50% центрирование изображения

[Odinokun]

R3AD: я пробовал делать таким способом (правда без плавной прокрутки),
но у данного способа есть один большой минус. При background-attachment: fixed на iPod, iPhone & iPad фон как и положено на мобильных дивайсах не фиксируется, но почему-то аццки зуммируется (как если бы я изображение 100*100рх растянул на экран 1024-768).
И получается при таком способе параллакса надо через медиазапрос задавать экранам меньше чем например 1200рх свойство background-attachment: scroll.

[R3AD]

Минусов нет, а растяжка фона происходит из-за неправильного CSS