Is there a way to do a reflection in javascript but fade away the bottom of the reflection?

Question

I'm trying to do a reflection in javascript since some browsers do not support the webkit css reflection. I created another image and inverted it while decreasing its opacity. Example: https://jsfiddle.net/dppt48cm/1/ .

refImage.onload = function(){
    refImage.style.position = "absolute";
    refImage.style.left = "0px";
    refImage.style.top = "400px";
    refImage.style.transform = "scaleY(-1)";
    refImage.style.opacity = "0.4";
    divElement.appendChild(refImage);
}

I'm setting the "reflection" here but creating another image.

What I'm trying to do now is to adjust the length of the reflection. For example, I don't want to show the head of the dog in the reflection. Would it be possible to stop the reflection at the nose or set the reflection in pixels?

Please take a look at this https://jsfiddle.net/iRbouh/paren7ks/ ! — Ismail RBOUH, Jul 20 '16 at 23:07

score 0 · Answer 1 · answered Jul 20 '16 at 22:22

0

You can use the clip style property.

refImage.style.clip = "rect(150px, 400px, 400px, 0px)";

https://jsfiddle.net/dppt48cm/6/

answered Jul 20 '16 at 22:22

Trevor

1

Is there a way to fade the bottom edge? – user6432770 Jul 20 '16 at 22:54
None that I am aware of. This might help you though: http://stackoverflow.com/questions/19375311/div-blur-of-part-of-backgroung-image-with-css – Trevor Jul 21 '16 at 20:52

score 0 · Answer 2 · answered Jul 20 '16 at 23:01

You can use a div with a background composed of image and gradient to simulate the webkit CSS reflection:

var divElement = document.getElementById("test");
var newImage = new Image();

newImage.onload = function() {
  newImage.style.position = "absolute";
  newImage.style.left = "0px";
  newImage.style.top = "0px";
  divElement.appendChild(newImage);

  //Reflection  
  var div = document.createElement('div');
  div.className = 'reflection-image';
  div.style.width = this.width + 'px';
  div.style.height = (this.height * 0.7) + 'px';
  div.style.backgroundImage = "url('" + this.src + "')";
  div.style.left = "0px";
  div.style.top = "400px";
  divElement.appendChild(div);
}

newImage.src = "https://3.bp.blogspot.com/-W__wiaHUjwI/Vt3Grd8df0I/AAAAAAAAA78/7xqUNj8ujtY/s400/image02.png";

body {
  background-color: white;
}
.reflection-image {
  position: absolute;
  background: 0 bottom no-repeat;
  transform: scaleY(-1);
}
.reflection-image:after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#ffffff+0,ffffff+100&1+0,0.7+100 */
  background: -moz-linear-gradient(top, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 0.7) 100%);
  /* FF3.6-15 */
  background: -webkit-linear-gradient(top, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 0.7) 100%);
  /* Chrome10-25,Safari5.1-6 */
  background: linear-gradient(to bottom, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 0.7) 100%);
  /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
  filter: progid: DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#b3ffffff', GradientType=0);
  /* IE6-9 */
}

<div class="tinted-image" id="test">

</div>

score 0 · Answer 3 · answered Jul 20 '16 at 23:09

I think your best bet is to use linear-gradient. It has much wider support.

See https://jsfiddle.net/dppt48cm/12/

Explanation: In this case I've used an :after pseudo element to apply the gradient. I've also removed the onLoad for the images because it was causing the image order to vary, and set them to display:block so that the reflection will sit below the original.

JS

var divElement = document.getElementById("test");
var newImage = new Image();
var refImage = new Image();

newImage.src = "https://3.bp.blogspot.com/-W__wiaHUjwI/Vt3Grd8df0I/AAAAAAAAA78/7xqUNj8ujtY/s400/image02.png";
refImage.src = "https://3.bp.blogspot.com/-W__wiaHUjwI/Vt3Grd8df0I/AAAAAAAAA78/7xqUNj8ujtY/s400/image02.png";
refImage.style.transform = "scaleY(-1)";

divElement.appendChild(newImage);
divElement.appendChild(refImage);

CSS

#test {
   position: relative;
}
#test:after {
    content:"";
    width: 100%;
    height: 50%;
    position: absolute;
    bottom: 0;
    left: 0;
    background: linear-gradient(to bottom, rgba(255, 255, 255, .40) 0%, rgba(255, 255, 255, 0.75) 49%, rgba(255, 255, 255, 1) 80%);
}

img {
  display: block;
}

Is there a way to do a reflection in javascript but fade away the bottom of the reflection?

3 Answers3

JS

CSS