0

Для расчёта скорости движения фона при скролле хочу получить высоту картинки background-image по факту её подстройки под ширину блока. Стиль фона такой:

{
    background-size: 100% auto;
    background-repeat: no-repeat;
    background-attachment: scroll;
    background-position: center top;
}

При скролле будет меняться вертикальная координата background-position, со скоростью, рассчитанной на основании отношения высот фона и блока. Это вообще здоровая мысль, или лучше положить картинку в img и двигать его?

11
  • 1
    "по факту её подстройки под ширину блока" - вот тут не ясно, оригинальный размер изображения или же блока, в котором оное есть бекграунд?
    – Kirill
    Commented 27 янв. 2018 в 11:04
  • 1
    Без понимания как бекграунд спозиционирован и все такое, сложно дать однозначно верный ответ ... размер исходника узнать получив её src и дальше что-то типа const img = new Image(); img.src = src; console.log(img.height); ... дальше можно из каких-то формул и расчетов исходя из свойств бекграунда высчитать какова "степень деформации" ... ну и все в этом духе. Commented 27 янв. 2018 в 11:17
  • 1
    @Kirill Korushki Именно фонового изображения и именно по факту подстройки. Не блок и не оригинал. Commented 27 янв. 2018 в 11:18
  • 1
    @AleksandrShemetillo, да, узнать реальный размер, а не исходный без доп. вычислений не выйдет (на сколько я знаю). Commented 27 янв. 2018 в 11:23
  • 1
    На англоязычном SO был подобный вопрос.
    – user262779
    Commented 27 янв. 2018 в 11:25

3 ответа 3

5

Вот вам готовое решение:

$(document).ready(function() {
  var wHeight = $(window).height();

  function parallax() {
    var pHeight = $(this).outerHeight();
    var pMiddle = pHeight / 2;
    var wMiddle = wHeight / 2;
    var fromTop = $(this).offset().top;
    var scrolled = $(window).scrollTop();
    var speed = $(this).attr('data-parallax-speed');
    var rangeA = (fromTop - wHeight);
    var rangeB = (fromTop + pHeight);
    var rangeC = (fromTop - wHeight);
    var rangeD = (pMiddle + fromTop) - (wMiddle + (wMiddle / 2));

    if (rangeA < 0) {
      rangeA = 0;
      rangeB = wHeight
    }

    var percent = (scrolled - rangeA) / (rangeB - rangeA);
    percent = percent * 100;
    percent = percent * speed;
    percent = percent.toFixed(2);

    var animFromBottom = (scrolled - rangeC) / (rangeD - rangeC);
    animFromBottom = animFromBottom.toFixed(2);

    if (animFromBottom >= 1) {
      animFromBottom = 1;
    }

    $(this).css('background-position', 'center ' + percent + '%');
  }
  $('.parallax').each(parallax);
  $(window).scroll(function(e) {
    $('.parallax').each(parallax);
  });
});
* {
  margin: 0;
  padding: 0;
}

div {
  height: 70vh;
}

.img {
  background: url(https://i.dmarge.com/2015/02/new-in-box_1.jpg) no-repeat center / cover;
}

.img2 {
  min-height: 300px;
  background: url(http://lmlnews.ru/wp-content/uploads/2015/03/2014-11-02_165540.jpg) no-repeat center / cover;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="img2 parallax" data-parallax-speed="-1"></div>
<div></div>
<div class="img parallax" data-parallax-speed="1"></div>
<div></div>

Если я ошибся с необходимостью достижения конечного результата, то из JS вы без труда найдете все необходимые участки по определению высот и иных координат.

8
  • Благодарю. Обходит проблему получения размеров. Я только скорость исключил для себя, поскольку любой показатель кроме единицы даёт либо недокрутку, либо, что хуже, возможность выхода фона за край блока. Непонятно, как быть с ответом ) Проблему исходную решает, но на вопрос в его формулировке не отвечает... Commented 27 янв. 2018 в 15:46
  • На самом деле, если вы попробуете разные варианты изменения высоты блока, то увидите, что фон не выходит за его пределы с параметром cover. Однако, если высота блока будет соответствовать высоте изображения, то прокрутка не будет осуществляться. Когда-то и я искал легкий универсальный вариант parallax, но их не существует. Либо фон сильно будет "резать", либо какой-то такой вариант, как в примере. Для меня его вполне достаточно. Commented 27 янв. 2018 в 15:52
  • В порядке самообучения переписал ваш пример под плагин jQuery. Так его можно использовать в цепочке и он сразу применяется ко всему набору. jsfiddle.net/sapolio/cauhoqam Не очень наивно? ) Commented 27 янв. 2018 в 23:36
  • @AleksandrShemetillo стало немного аккуратней. Правда вы зря исключили скорость перемещения. Если блок с parallax находится вверху, что довольно часто бывает, установив отрицательное значение в data-parallax-speed фон начнет подыматься медленней остального содержимого. Добавил в пример нужный участок. Commented 28 янв. 2018 в 10:19
  • А в какой пример? )) Commented 28 янв. 2018 в 17:12
2

var myBlock = document.getElementById('myblock');

style = myBlock.currentStyle || window.getComputedStyle(myBlock, false),
  bg_url = style.backgroundImage.replace(/url\((['"])?(.*?)\1\)/gi, '$2').split(',')[0];

var image = new Image();
image.src = bg_url;

console.log('width  : ' + image.width);
console.log('height : ' + image.height);
#myblock {
  width: 100%;
  height: 350px;
  background-image: url("http://blog.trueclothing.net/wp-content/uploads/2015/01/Rasta_Homer_by_djog.png");
  background-repeat: no-repeat;
}
<div id="myblock"></div>

спасибо сюда

1
  • похоже, не работает. Возвращается размер оригинала. Вот, применил к своей ситуации: jsfiddle.net/ke8rh71u/1 Commented 27 янв. 2018 в 12:41
0

var a = document.getElementById("block");
var img = new Image();
img.src = "https://www.google.com/images/branding/googlelogo/2x/googlelogo_color_92x30dp.png";
var b = a.offsetWidth; // длинна блока
var c = a.offsetHeight; // высота
img.onload = function() {
  var d = img.offsetWidth; // длинна фоновой картинки
  var e = img.offsetHeight; //  её высота
  // document.write(d,e);
  // чтоб убедиться что размеры правильные удалите // перед строчкой document.write(d,e);
  // чтоб подогнать размер блока под размер картинки 
  if (b > d) {
    a.style.width = d;
  }
}
a.appendChild(img);
.block {
  display: block;
  width: 200px;
  height: 200px;
  background-size: auto auto;
}
<div id="block" class="block"></div>

1
  • 1
    пожалуйста, постарайтесь оставлять чуть более развёрнутые ответы. дополнить ответ можно, нажав править Commented 7 мая в 7:59

Ваш ответ

Нажимая «Отправить ответ», вы соглашаетесь с условиями пользования и подтверждаете, что прочитали политику конфиденциальности.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.