Алексей

<div class="book-cover__image">
  <svg width="300" height="300" id="coversvg" xmlns="http://www.w3.org/2000/svg"></svg>
</div>

(function($) {
  var s = Snap("#coversvg");
  var paper = s.paper;
  paper.image('https://cdn.filepicker.io/api/file/V5oVAuB8QcCDEYgY2d2K',5,5,464,290);
  var clipPath = paper.el('clipPath').toDefs();
  clipPath.node.id = clipPath.id;
  var rect = paper.rect(5, 5, 290, 290);
  clipPath.append(rect);

  s.select('image:last-child').attr({
    clipPath:'url(#'+clipPath.id+')'
  });
})(jQuery);

$(window).scroll(function () {
  if ($(this).scrollTop() >= 0 && $(this).scrollTop() < 100) {
    $('div').css('backgroundColor', 'red');
  } else if ($(this).scrollTop() >= 100 && $(this).scrollTop() < 200) {
    $('div').css('backgroundColor', 'blue');
  } else if ($(this).scrollTop() >= 200 && $(this).scrollTop() < 300) {
    $('div').css('backgroundColor', 'green');
  } else if ($(this).scrollTop() >= 300 && $(this).scrollTop() < 400) {
    $('div').css('backgroundColor', 'yellow');
  } else {
    $('div').css('backgroundColor', 'black');
  }
});

<ul>
  <li>
    <div class="p1 pe" data-block="pt1"></div>
    <div class="p2 pe" data-block="pt2"></div>
  </li>
  <li>
    <div class="pt pt1"></div>
    <div class="pt pt2"></div>
  </li>
</ul>

$(function(){
  $('.pe').on('mouseenter', function(){
    var block = $(this).data('block');
    $('.'+block).fadeTo(200,1);
  });
  $('.pe').on('mouseleave', function(){
    $('.pt').fadeTo(200,0);
  });
});