Адаптивность анимации в JQuery под размер окна

Вопрос-ответ JavaScript
1

Доброго всем времени суток!
Прошу о помощи в связи с такой проблемой: делаю страницу с галереей в которой идет плавная смена ретро-фото на современный вид. Модуль анимации использует jquery.
Пока картинку не масштабировать - выглядит нормально. Можно посмотреть на примере первого фото.
Второе фото изменено в процентах по ширине. А анимация проигрывается по параметрам ширины картинки.

image
image.jpg1107×704 217 KB

Изменение размера фото обязательно. Так как предполагается адаптивность данной страницы.
Помогите, люди добрые, прописать подгонку параметров картинки в анимации в зависимости от размеров окна.
Сам в скриптах - профан. Занимаюсь фото, а это одноразовый проект)
Посмотреть проблемную страничку: http://kostopil.net/retro/foto.html
Спасибо за Ваше внимание.

<!-- Block for foto -->
<div class="02fotoEff">
  <div class="02fotoFrame">
    <script type="text/javascript">
      var ImgIdx02foto = 2;

      function PreloadImg() {
        $.ImagePreload("images/02foto2.jpg");
      }
      $(document).ready(function() {
        PreloadImg();
        $(".02fotoEff ul li").click(function() {
          $(".02foto").ImageSwitch({
            Type: $(this).attr("rel"),
            NewImage: "images/02foto" + ImgIdx02foto + ".jpg",
            speed: 1000
          });
          ImgIdx02foto++;
          if (ImgIdx02foto > 2) ImgIdx02foto = 1;
        });
      });
    </script>
    <ul>
      <div align=center>

        <li class="TryFlyOut" rel="FlyOut">
          <img src="images/02foto1.jpg" class="02foto" / width="80%">
        </li>
      </div>
    </ul>
  </div>
</div>
<!-- END Block for foto -->
2

Посмотрел код. Плагин, который ты используешь, написан ужасно и давно https://github.com/iconexperience/imageswitch. В нет нет механизмов которые позволили бы реализовать анимацию на тянующейся странице. Даже переинициализировать плагин не получится.

Попробуй найти другой плагин.

Сама анимация мне очень понравилась. Она использует нестандартную функцию easing-а. Я попробую написать замену этому плагину, но не могу обещать результата. Отпишусь в этой ветке когда будет известно получилось или нет.

3

Спасибо, Дмитрий, за ответ. С нетерпением буду ждать результа) Тоже очень понравилась именно эта анимация. Особенно подходит для моего проекта. Как бы “смахивается пыль истории” :-)

4

Ключевые моменты:

  1. Изображение, которое будет анимироваться должно находиться в элементе с классом .image-switch. У класса .image-switch должно быть прописано position:relative.
  2. Изображение которое будет показываться сначала описывается в аттрибуте src. Изображение которое будет заменять первое - в аттрибуте data-flip.
<img src="http://kostopil.net/retro/images/slash2.jpg"
	width="80%"
	data-flip="http://kostopil.net/retro/images/slash1.jpg"
>
  1. Можешь поиграться с некоторыми параметрами анимации.
$animatedNode.animate({
	opacity: 0,
	left: imageLeft - (width*0.05)
}, 600

left - как далеко влево будет уезжать изображение при анимации. Сейчас это 5% от ширины изображения (т.е. масштаб сдвига будет одинаковый для уменьшенного и увеличиенного изображения). 600 - скорость анимации.

Лови код. Он самодостаточный (т.е. можно открыть в браузере как один html файл).

<!DOCTYPE html>
<html>
<head>
	<script type="text/javascript" src="http://kostopil.net/retro/example/jQuery.js"></script>
	<script>
		$(function () {
			$('.image-switch').each(function (index, node) {
				var current
				function getCurrentSrc() {
					return current
				}
				function getOtherSrc() {
					return current === firstImageSrc ? secondImageSrc : firstImageSrc
				}
				function setCurrentSrc(newCurrent) {
					current = newCurrent
				}
				var $rootNode = $(node)
				var $imgNode = $rootNode.find('img')
				var firstImageSrc = $imgNode.attr('src')
				var secondImageSrc = $imgNode.attr('data-flip')
				var image1NodeToPreload = document.createElement('img')
				var image2NodeToPreload = document.createElement('img')
				image1NodeToPreload.src = firstImageSrc
				image2NodeToPreload.src = secondImageSrc

				current = firstImageSrc
				var animationDone = true
				$rootNode.click(function () {
					if (!animationDone) {
						return
					}
					animationDone = false
					var $animatedNode = $('<img src="' + getCurrentSrc() + '">')
					var width = $imgNode.width()
					var height = $imgNode.height()

					// get position within parent
					var wrapperOffset = $rootNode.offset()
					var imageOffset = $imgNode.offset()
					var imageTop = wrapperOffset.top - imageOffset.top
					var imageLeft = wrapperOffset.left - imageOffset.left
					
					$animatedNode.css({
						position: 'absolute',
						top: imageTop,
						left: imageLeft,
						'z-index': 999,
						width: width,
						height: height
					})

					$rootNode.append($animatedNode)
					$imgNode.attr('src', getOtherSrc())

					$animatedNode.animate({
						opacity: 0,
						left: imageLeft - (width*0.05)
					}, 600, function () {
						$animatedNode.remove()
						animationDone = true
					})
					setCurrentSrc(getOtherSrc())
				})
			})
		})
	</script>
	<style type="text/css">
		.image-switch {
			position: relative;
		}
	</style>
</head>
<body>
	<div class="image-switch">
		<img src="http://kostopil.net/retro/images/slash2.jpg"
			width="80%"
			data-flip="http://kostopil.net/retro/images/slash1.jpg"
		>
	</div>
	<div class="image-switch">
		<img src="http://kostopil.net/retro/images/02foto1.jpg"
			width="40%"
			data-flip="http://kostopil.net/retro/images/02foto2.jpg"
		>
	</div>
</body>
</html>
1 лайк
5

Дмитрий, СПАСИБО!
Всё работает! Просто, лаконично и корректно!
Такие ответы как Ваш нужно в пример другим ставить. Даже я, отдаленно столкнувшийся со скриптами, всё понял!
Ещё раз искренне Вас благодарю! Поклон и уважение таким людям!

1 лайк