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

и так есть код

<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...

соль в чем, сейчас код реализован так что движение происходит при наведении на объект, но нужно сделать так, что бы движение происходило при скролле страницы в тот момент когда объект попадает в поле видимости, кто подскажет как реализовать такое ?
  • Вопрос задан
  • 523 просмотра
Решения вопроса 1
In4in
@In4in
°•× JavaScript Developer ^_^ ו°
Как добавить и удалить класс при сколле?

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

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


classPoint(axis, "transform");

И почитайте на досуге про автопрефиксер.
Ответ написан
Пригласить эксперта
Ответы на вопрос 1
afishr
@afishr
make const not var
Я попробывал это с использованием JQuery
function checkScroll() {
	$(*id элемента*).each(function() {
		var topEdge = $(this).offset().top,
				bottomEdge = topEdge + $(this).height(),
				wScroll = $(window).scrollTop();

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

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы