逐渐改变图像与CSS（擦拭过渡） [英] Gradually change image with CSS (wipe transition)

问题描述

我有一个奇怪的问题。这很奇怪，因为我很难解释我的意思。我意识到，我可以得到一些负面的反馈，但没有其他地方要问。

我在寻找的是CSS中的一种技术（或者如果不可能的话，然后还JavaScript）逐渐改变悬停图像。我不希望它淡出或一次改变整个图像。我想要的是制作一张图片，当我用鼠标将其悬停时，图片的悬停部分会发生变化，而我悬停图片的时间越多，我就会看到其他图片的内容越多。我希望这个描述就够了。我很抱歉，但我不知道这是如何调用的。

我做了类似于我在这里想到的内容（

编辑2：
我们已经找到了我的意思的实例： jpegmini.com
但带有不同的图像。
现在我所问的是我该怎么做，或者它是怎么叫的，因为我的问题没有答案。
我也会改变他人的名字，他们正在寻找这个。

编辑3：
我们已经找到答案了，这个正是我所寻找的：

JS

  var ctx = c.getContext（2d），
 img = new Image（）; // image显示
 
 img.onload = start; 
 img.src =link to img; 
 
函数start（）{
 c.onmousemove = function（e）{
 var r = c.getBoundingClientRect（），
x = e.clientX  -  r。剩下; 
 ctx.clearRect（0，0，c.width，c.height）; 
 ctx.drawImage（img，0，0，x，c.height，0，0，x，c.height）; 
 ctx.fillRect（x，0，5，c.height）; 
}; 
 
 
 code 
 
 
 
 
 $ b 
  #c {
 background：url（link to other img）; 
 background-size：cover; 
 
  
 HTML 
 < canvas id = c width = 620 height = 400>< / canvas> 
  
 
 
解决方案
我会为此使用canvas + CSS。这是因为它会让你完全控制鼠标移动，并提供一个简单的方法来介绍酒吧和不同类型的擦拭（对角线，自定义等），如果你稍后想要。
 
 
 
 
 
为canvas元素定义背景图像为CSS  
 
在顶部图像中绘制剪切至鼠标位置
 
 
 
 
示例
 
 
 
 
 
 
  var ctx = c.getContext（2d），img = new Image（）; // image to showimg.onload = start; img.src =//i.imgur.com/mS4R13a.png\";function start（）{c.onmousemove = function（e）{var r = this.getBoundingClientRect（） ，x = e.clientX  -  r.left; ctx.clearRect（0，0，c.width，c.height）; //清除新画布的画布ctx.drawImage（img，0，0，x，c.height，0，0，x，c.height）; //剪切并绘制图像到x ctx.fillRect（x，0，5，c.height）; //绘制细条};}  

#c {background：url（// i.imgur.com/GQ6xVAT.png）; background-size：cover; }

< canvas id = c width = 620 height = 400>< / canvas>

I have a weird question. It is weird, because it will be really hard for me to explain what I mean. I realize, that I could get some negative feedback, but got no other place to ask.

What I am searching for is a technique in CSS (or if not possible, then also JavaScript) to gradually change image on hover. I don't want it to fade out or change the whole image at once. What I want, is to have an image, and when I hover it with my mouse, the hovered part of image changes, and the more I hover my image, the more I can see of the other image. I hope this description is enough. I am sorry, but I have no idea how is this called.

I made something similar of what I am thinking here (https://jsbin.com/xurokogicu/edit?html,css,output) but this is on scroll, I want this to happen when I hover image with my mouse.

Hope you understand anything I am saying here,

Thanks in advance!

EDIT: Here are two pictures to better understand my idea. The black line represents that somewhere on that line (vertically) is mouse cursor. If I hover my mouse on the left, the black line moves to left and reveals part of other image. So basically at first there is this monkey picture and then, wherever I hover, appears that black line which reveals other image on right side.

EDIT2: Guys we have found a live example of what I meant: jpegmini.com But with different images. Now what I am asking is how can I do it, or how is it called, because my question stands unanswered. I would also change the name of the title for others, who are searching for this.

EDIT3 : WE HAVE FOUND AN ANSWER, this is exactly what I was looking for:

JS

var ctx = c.getContext("2d"),
img = new Image();         // image to show

img.onload = start;
img.src = "link to img";

function start() {
  c.onmousemove = function(e) {
    var r = c.getBoundingClientRect(),
        x = e.clientX - r.left;
    ctx.clearRect(0, 0, c.width, c.height); 
    ctx.drawImage(img, 0, 0, x, c.height,  0, 0, x, c.height); 
    ctx.fillRect(x, 0, 5, c.height); 
  };

}

CSS

#c {
  background: url(link to other img); 
  background-size: cover;
  }

HTML

<canvas id=c width=620 height=400></canvas>

解决方案

I would use a canvas + CSS for this. This is because it will give you full control over mouse movements as well as providing a simple way to introduce bar and different types of wipes (diagonal, custom etc.) if you would like that later on.

• Define the background image as CSS for the canvas element
• Draw in top image clipped to mouse position

Example

var ctx = c.getContext("2d"),
    img = new Image();         // image to show

img.onload = start;
img.src = "//i.imgur.com/mS4R13a.png";

function start() {
  c.onmousemove = function(e) {
    var r = this.getBoundingClientRect(),
        x = e.clientX - r.left;
    ctx.clearRect(0, 0, c.width, c.height);                     // clear canvas for new draw
    ctx.drawImage(img, 0, 0, x, c.height,  0, 0, x, c.height);  // clip and draw image to x
    ctx.fillRect(x, 0, 5, c.height);                            // draw a thin black bar
  };
}

#c {
  background: url(//i.imgur.com/GQ6xVAT.png); 
  background-size: cover;
  }

<canvas id=c width=620 height=400></canvas>

这篇关于逐渐改变图像与CSS（擦拭过渡）的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！