Как просто создать эффект отражения изображения в JavaScript / CSS? - PullRequest
Новая
       52

Как просто создать эффект отражения изображения в JavaScript / CSS?

0 голосов
/ 07 февраля 2019

Я потратил некоторое время на поиски наилучшего способа создания эффекта динамического отражения изображения.

Я нашел следующие варианты:

  • нестандартные теги браузера, такие каккак -webkit-reflect,

  • добавление библиотек с <2012, которые все имеют устаревшие зависимости и дают сбой при объединении, например, с актуальной версией JQuery 3, или </p>

  • Отбросив идею динамического отражения изображений и полагаясь на GIMP / Photoshop.

  • Также большинство существующих решений терпят неудачу на не простом фоне, то есть текстурах.

Недостатки вышеперечисленного лежат под рукой.К сожалению, у меня нет веб-блога, где можно публиковать то, что я придумала, но я думаю, что им стоит поделиться (см. Ответ на свой вопрос ниже).

Ответы [ 2 ]

0 голосов
/ 07 февраля 2019

Вот чистое решение CSS без необходимости использования jQuery или JS: 

.reflect {
  display:inline-block;
  vertical-align:top;
  width:150px;
  height:300px;
  background:
    linear-gradient(#000,#000) center/100% 1px no-repeat, /*a separation*/
    var(--img) top/100% 50% no-repeat;
  position:relative;
}
.reflect::before {
  content:"";
  position:absolute;
  bottom:0;
  left:0;
  right:0;
  top:0;
  background:inherit;
  transform:scale(1,-1);
  -webkit-mask-image: -webkit-linear-gradient(transparent 25%, #ccc 50%);
  mask-image: linear-gradient(transparent 25%, #ccc 50%)
}
.right {
  width:300px;
  height:150px;
  background-position:center,left;
  background-size:1px 100%,50% 100%;
}
.right:before {
  transform:scale(-1,1);
  -webkit-mask-image: -webkit-linear-gradient(left,transparent 25%, #ccc 50%);
  mask-image: linear-gradient(to left,transparent 25%, #ccc 50%)
}
<div class="reflect" style="--img:url(https://picsum.photos/200/200?image=0)"></div>

<div class="reflect right" style="--img:url(https://picsum.photos/200/200?image=1069)"></div>
0 голосов
/ 07 февраля 2019
  1. Добавьте изображение в HTML: 
<img class="reflect" src="some/image.png" />
Добавьте следующие правила CSS: 
img.reflect {
  width: calc(100% - 20px); /* not sure how else to allow for margin */
  margin-left: 10px;
}

img.reflection {
  position: absolute;
  opacity: 0.4;
  margin-top: 4px;
  width: calc(100% - 20px);
  -webkit-mask-image: -webkit-linear-gradient(transparent 75%, black 100%);
  mask-image: linear-gradient(transparent 75%, black 100%);
  -webkit-transform: translateX(calc(-100% - 10px)) translateY(100%) scaleY(-1) ;
  transform: translateX(calc(-100% - 10px)) translateY(100%) scaleY(-1);
}

Если вы не хотите полагаться на JavaScript, вы можете просто добавить отражение, вставив тег отражения сразу после тега изображения из(1): 

<img class="reflection" src="some/image.png" />

В противном случае

Например, расширить JQuery следующей функцией: 
$.fn.reflect = function() {
    var reflection = this.clone();
    this.after(reflection);
    reflection.addClass("reflection");
};
Затем отразите изображение: 
$(".reflect").reflect();

Вот и все, хорошего дня,

Даниил

...