Кто знает как сделать горизонтальное перемещение объекта при скролле?

Question

[swks]

и так есть код

<div id="axis" class="one">
<img class="object van move-right" src="images/van-to-right.png" alt="" /></div>

.object {
    position: absolute;
    transition: all 2s ease-in-out;
    -webkit-transition: all 2s ease-in-out; /** Chrome & Safari **/
    -moz-transition: all 2s ease-in-out; /** Firefox **/
    -o-transition: all 2s ease-in-out; /** Opera **/
}
.van {
    top: 45%;
    left: 44%;
}
#axis:hover .move-right{
    transform: translate(350px,0);
    -webkit-transform: translate(350px,0); /** Chrome & Safari **/
    -o-transform: translate(350px,0); /** Opera **/
    -moz-transform: translate(350px,0); /** Firefox **/
}

вот демо d3pr5r64n04s3o.cloudfront.net/articles/042_css_ani...

соль в чем, сейчас код реализован так что движение происходит при наведении на объект, но нужно сделать так, что бы движение происходило при скролле страницы в тот момент когда объект попадает в поле видимости, кто подскажет как реализовать такое ?

Answer 1

[Виталий Инчин ☢]

Как добавить и удалить класс при сколле?

За место ховера - класс.

#axis.transform .move-right{
    transform: translate(350px,0);
}

classPoint(axis, "transform");

И почитайте на досуге про автопрефиксер.

Comments

[swks]

все работает, спасибо

Answer 2

[afishr]

Я попробывал это с использованием JQuery

function checkScroll() {
	$(*id элемента*).each(function() {
		var topEdge = $(this).offset().top,
				bottomEdge = topEdge + $(this).height(),
				wScroll = $(window).scrollTop();

		if(topEdge < wScroll && bottomEdge > wScroll) {
			*делаем смещение путем добавления нужного класса CSS*
		}
	});
};

Comments

[swks]

function check() {
$(axis).each(function() {
var topEdge = $(this).offset().top,
bottomEdge = topEdge + $(this).height(),
wScroll = $(window).scrollTop();

if(topEdge < wScroll && bottomEdge > wScroll) {
.move-right}
});
};

зайюзал код, но по чему то анимация не идет, а сразу идет конечный результат

[afishr]

swks: залей свой код на JS Bin и кинь ссылку из адресной строки браузера сюда.

[swks]

jsbin.com/vudumapuze/edit?html,css,js,output

[afishr]

swks: Думаю вам стоит присмотрется к варианту Виталий Инчин ☢ . Я явно что-то напутал тут.