css, jquery: фоновая картинка

Большое изображение (название изображения: image.jpg ) будет использоваться в качестве фона div .

Часть изображения (предположим, 70%) будет видна, а затем изображение будет двигаться медленно вправо. После того как полная оставшаяся часть станет видимой, она начнет двигаться влево.

Как достичь этого с помощью кросс-браузера?

Код разметки:

<div class="my_div"></div>


2
nl ja de
Я просто не могу понять.
добавлено автор Istiaque Ahmed, источник
@ GabyakaG.Petrioli, позвольте мне посмотреть
добавлено автор Istiaque Ahmed, источник
@Vucko, делает ли это любую анимацию фонового изображения?
добавлено автор Istiaque Ahmed, источник
@ GabyakaG.Petrioli, кстати, что означает OP?
добавлено автор Istiaque Ahmed, источник
Если вы хотите css3, см. Этот move.js .
добавлено автор Vucko, источник
@IstiaqueAhmed - это библиотека, которая упрощает переходы и преобразования CSS3.
добавлено автор Vucko, источник
@IstiaqueAhmed, проверьте .animate() метод jQuery и попробуйте для анимации свойства background-position элемента .my_div .
добавлено автор Gabriele Petrioli, источник
@Vucko, если OP хочет CSS3, он должен увидеть javascript-библиотеку?!?
добавлено автор Gabriele Petrioli, источник
OP = Оригинальный плакат (, который был бы вам в этом случае .. )
добавлено автор Gabriele Petrioli, источник

3 ответы

Чтобы поместить это, сделайте что-то вроде этого

.my_div{
  background: url(img/image.jpg) no-repeat top right;
  margin-top: 10px;
  margin-right: 10px;
}

To animate simply animate the margins with jquery http://api.jquery.com/animate/

$(".my_div").animate({
    marginRight: "100px"
  }, 1500 );

Я не тестировал это, но что-то вроде этого должно сделать трюк

Чтобы запустить его, создайте кнопку с ID = «кнопка» и щелкните по ней.

<input type="button" id="button" value="animate me" />

И js

$("#button").click(function(){
  $(".my_div").animate({
    marginRight: "100px"
  }, 1500 );
});
0
добавлено
хм, имеет смысл. Дай мне попробовать
добавлено автор Istiaque Ahmed, источник
как начать анимацию влево
добавлено автор Istiaque Ahmed, источник
Добавлен пример кнопки
добавлено автор Eric Herlitz, источник

See this : http://jsfiddle.net/fwyJz/2/

$(function() {
   animate();
  setInterval(function() { animate();}, 7000);
});
function animate()
{
 $(".my").animate({
    backgroundPosition: "(-200px 0px)"
}, 3500, function() {
    $(this).animate({
        backgroundPosition: "0px 0px"
    }, 3500).end();
});
}

​This uses a JS file : jquery.bgpos

0
добавлено
предположим, что я опускаю второй метод анимации и добавляю строку backgroundPosition в функцию обратного вызова, тогда мерцание происходит, когда фоновое изображение снова позиционируется на 0,0 . Как удалить мерцание, пожалуйста? jsfiddle: jsfiddle.net/fwyJz/4
добавлено автор Istiaque Ahmed, источник
Я просто хочу, чтобы анимация была только влево. После анимации влево изображение bg должно находиться в исходном положении ( 0,0 ) без какого-либо мерцания, и последует анимация влево. Дело в том, что не нужна правильная анимация.
добавлено автор Istiaque Ahmed, источник
@IstiaqueAhmed: Да, внезапное изменение фонового положения сделает мерцание .. и почему у хотите опустить второй анимировать ..?
добавлено автор Anujith, источник
$("#block").animate({
    marginLeft: "100px"
}, 1500, function(){
    $(this).animate({
         marginRight: "100px"
    });
});
0
добавлено
Верстка сайтов HTML/CSS/JS/PHP
Верстка сайтов HTML/CSS/JS/PHP
3 439 участник(ов)

Правила группы: напишите !rules в чате. Группа Вк: vk.com/web_structure Freelancer: @web_fl Веб Дизайн: @dev_design Маркетолог: @topmarkening Автор: @M_Boroda

CSS — русскоговорящее сообщество
CSS — русскоговорящее сообщество
1 502 участник(ов)

Сообщество любителей CSS Возникли проблемы с CSS? – пиши сюда, обсудим и предложим самое лучшее решение Работа: @css_ru_jobs Правила: https://teletype.in/@css_ru/r1EWtQ2w7 Приходите в наши чаты @javascript_ru и @frontend_ru Флуд: @css_flood

Чат — Типичный Верстальщик
Чат — Типичный Верстальщик
1 080 участник(ов)

Основной канал: @tpverstak Обратная связь: @annblok Все ссылки на соц.сети проекта: http://taplink.cc/tpverstak ПРАВИЛА ЧАТА — https://teletype.in/@annblok/BygPgC3E7

Веб-Технологи: UI/UX, Вёрстка, Фронтенд
Веб-Технологи: UI/UX, Вёрстка, Фронтенд
167 участник(ов)

Всё про веб-дизайн и вёрстку. А также: HTML, CSS, флекс и бутстрапы, шаблонизаторы, препроцессоры, методологии, аглифаеры, улучшаторы и обфускаторы. Обсуждаем темы юзабилити, устраиваем А/В тесты лендингов, и проводим аудит.

DTP :: @DTPublish
DTP :: @DTPublish
147 участник(ов)

Обсуждаемые темы: полиграфия, препресс, верстка, дизайн, иллюстрации, скрипты, плагины. Канал - @DTPublishing

css_jobs
css_jobs
26 участник(ов)

Чат для вопросов по css и html: @css_ru Флуд: @css_flood Канал с вакансиями и резюме: @css_jobs_feed

css_флуд
css_флуд
10 участник(ов)