«Маскировка изображения» миниатюра + полноразмерное изображение.Сложная задача - PullRequest
Новая
       4

«Маскировка изображения» миниатюра + полноразмерное изображение.Сложная задача

0 голосов
/ 14 декабря 2018

Мне нужно настроить эффект, подобный этому:

http://kaceymorrow.com/slo-fi/#Julia_Audio

Когда вы наводите изображение в этом разделе, изображение меняет свой размер напокрыть большую часть экрана, но обратите внимание на то, что переход очень плавный: положение большого изображения точно совпадает с уменьшенным изображением, поэтому оно выглядит как само изображение «раскрывающееся», а не расширяющееся.

Я пробовалнесколько вещей без успеха.У меня ничего нет рядом с решением.

РЕДАКТИРОВАТЬ:

Это лучшее, что у меня есть, но опять же, не рядом с решением!

Этот сценарий ожидает наведения на изображение дляотобразить DIV с изображением в качестве фона.Проблема в том, что изображение расширяется, а не раскрывается. 

$(document).ready(function(){
    $('.ejemplo').hover(function(){
        console.log('hoveeeeer');
        var img = $(this).data('img');
        console.log(img);
        $('.c1').css(
            'background-image', 'url('+img+')',
        )
        $('.c1').show()
        $('.c1').css(
            'opacity', '1'
        )
        $('.ejemplo').css(
            'opacity', '0'
        )
        $('.header_highlights').css(
            'opacity', '0'
        )

        var audio1 = $(this).data('audio');
        var stereo = document.getElementById(audio1);
      //Example of an HTML Audio/Video Method
        stereo.play();
    }).mouseout(function(){
    console.log('no hover')
    $('.c1').hide()
    $('.c1').css(
        'opacity', '0'
    )
    $('.ejemplo').css(
        'opacity', '1'
    )
    $('.header_highlights').css(
        'opacity', '1'
    )
    var audio1 = $(this).data('audio');
    var stereo = document.getElementById(audio1);
    stereo.pause();
    });
  });

HTML: 

  <div class="container-flex w-container" style="">
        <?php $behind_the_image_images = get_field( 'behind_the_image' ); $count= 0;?>
        <?php if ( have_rows( 'behind_the_image' ) ) : ?>
    <?php while ( have_rows( 'behind_the_image' ) ) : the_row(); ?>
           <div data-w-id="50eadee3-1406-6c5c-563f-0957896a13d2" style="opacity:0" class="div-block-5">

   <a id="hover-<?=$count?>" href="#"  class="link-block-4 _1 link-<?=$count?> w-inline-block ejemplo" style="position:relative;" data-audio="audio-<?=$count?>" data-img="<?= get_sub_field('image'); ?>"></a>

            <div class="header_highlights _2"><?= get_sub_field( 'title_image' ) ?></div>
            <style>.link-<?=$count?> {background-image:url('<?= get_sub_field( 'image' ); ?>')!important;}</style>
                    <audio id="audio-<?=$count?>">
              <source src="<?= get_sub_field('audio_hover'); ?>" type="audio/mpeg"></source>
              <source src="nav.ogg" type="audio/ogg"></source>
            </audio>
          </div>
          <?php $count++; ?>
            <?php endwhile; ?>
        <?php endif; ?>
        </div>
      </div>
      <div style="" class="c1"></div>
      </div>

1 Ответ

0 голосов
/ 16 декабря 2018

В итоге я решил это с помощью clip-path и jQuery.

JS: 

jQuery(document).ready(function(){
  jQuery(".bimg").hover(function(){
    jQuery(".bimg").attr("style","clip-path: inset(0 0 0 0);");
    }, function(){
    jQuery(".bimg").attr("style","clip-path: inset(30% 60% 35% 12%);");
  });
});

CSS: 

.bimg {
max-width:none;
position:absolute;
left:-60%;
padding:0px;
margin: 0%;
top:-650%;
}

HTML 

<img src="<?= get_sub_field('image'); ?>"  width="1000px;" style="-webkit-clip-path: inset(30% 60% 35% 12%);clip-path: inset(30% 60% 35% 12%);" height="650px;" class="bimg">

Изображение не отображается идеально, мне нужно добавить больше CSS, чтобы отобразить изображение именно так, как я хочу, и мне нужно сделать его кросс-браузерным совместимым и адаптивным, но основная идея здесь.

...