Javascript 如何为网页创建色差？

我目前正在开发一个web ui

最近，我添加了一个功能，通过一些范围滑块来更改整体效果，这些滑块通过更改一些过滤器css（如色调旋转、灰度、反转和模糊）来实现

现在：

我随机做了一些截图！而且很酷

我只是想通过降低一个的不透明度来适应photoshop中的两个

以前我想通过使用OpenGL着色器语言来实现这样的效果（我一直想这样做，因为你可以获得更好的效果和更动态的效果），但现在，正如我所说的，在photoshop中实现这一点，我想到了一个解决方案，只需进行色度畸变

然后加载所有css

$( window ).load(function() {
  //chroma aberration
});

通过一个事件（或另一个范围滑块），我可以克隆所有html，降低前面那个html的不透明度，然后移动后面那个html

这样我就可以达到这样的效果

你有什么想法吗？？ 你认为有可能吗？？ 你认为我是对的吗？？或者你认为有更好的解决方案吗

这里我有一些问题，我想：

• 克隆的副本不应可单击

• 当出现悬停、过渡、动画…时，克隆副本的行为应与原始副本相同

• 克隆副本不应扩展页面的框大小，从而移动自身（可能使用位置：绝对和溢出：隐藏）

我试过这种方法，但不起作用

$( window ).load(function() {
  //Chromatic Aberration
  //clone all the body
  $('body')
    .children()
    .wrap( "<div class='original'></div>" )
    .clone()
    .insertAfter('.original')
    .addClass('cloned')
    .css('-webkit-filter',
         'hue-rotate(180deg)',
         'blur(3px)',
         'grayscale(50%)',
         'invert(5%)')
    .css('position','absolute')
    .css('left','10%')
    .css('z-index','-500');
  //(hue180,blur3,grayscale25,invert5)
  //lower opacity of the original
  $('body.original').css('opacity','0.5');
});

$（窗口）.load（函数（）{
//色差
//克隆全身
$（“正文”）
.儿童（）
.wrap（“”）
.clone（）
.insertAfter（“.original”）
.addClass（'克隆'）
.css（“-webkit过滤器”，
“色调旋转（180度）”，
“模糊（3px）”，
“灰度（50%）”，
‘反转（5%）’
.css（'位置'，'绝对'）
.css（'左'，'10%'）
.css（'z指数'，'-500'）；
//（hue180、模糊3、灰度25、反转5）
//原稿的不透明度较低
$（'body.original'）.css（'opacity'，'0.5'）；
});

这是可能的，但这是一项艰巨而繁重的任务。首先，我要让您的css依赖于javascript控制的属性，而不是本机css属性：

而不是：

.button:hover {
    /* fancy hover effects */
}
.button:active {
    /* fancy activation effects */
}

切换到

.button.hover {  /* Note: no longer using the :hover pseudo-class */
    /* fancy hover effects */
}
.button.active {
    /* fancy activation effects */
}

这是一个开始。它将允许您通过自定义逻辑而不是本机CSS对DOM操作作出反应。这是必要的，因为无法在模糊层上激活本机CSS效果

现在，您需要手动添加和删除这些自定义

。悬停
，
。活动
类：

var buttons = document.getElementsByTagName('button');
for (var i = 0; i < buttons.length; i++) {
    // Add `.hover` class on hover start
    buttons[i].onmouseover = function(button) {
        this.classList.add('hover');
    }.bind(buttons[i]);

    // Remove `.hover` class on hover end
    buttons[i].onmouseout = function(button) {
        this.classList.remove('hover');
    }.bind(buttons[i]);

    // Add `.active` class on mouse down
    buttons[i].onmousedown = function(button) {
        this.classList.add('active');
    }.bind(buttons[i]);

    // Remove `.active` class on mouse up
    buttons[i].onmouseup = function() {
        this.classList.remove('active');
    }.bind(buttons[i]);
}

现在对重复元素进行样式设置：

.ui.duplicate {
    left: -10px;
    top: -5px;
    opacity: 0.3;
    z-index: 2; /* Or whatever value is necessary to make it appear on top */
}

工作示例：


window.onload=function（）{
var cloneNodeWithLinkedEvents=函数（节点）{
var cloned=node.cloneNode（false）；/*不克隆子级*/
if（node.classList&&node.classList.contains（'button'））{
//以下是按钮的自定义逻辑：
node.onmouseover=函数（parallelNode）{
this.classList.add（'hover'）；
parallelNode.classList.add（'hover'）；
}.bind（节点，克隆）；
node.onmouseout=函数（parallelNode）{
这个.classList.remove（'hover'）；
parallelNode.classList.remove（'hover'）；
}.bind（节点，克隆）；
}
如果（node.nodeName==='INPUT'）{
var changeFunc=函数（并行节点）{
parallelNode.value=此.value；
}.bind（节点，克隆）；
node.addEventListener（'input'，changeFunc）；
node.addEventListener（'keyup'，changeFunc）；
node.addEventListener（'keydown'，changeFunc）；
}
//注意：为了简洁起见，我只在这里添加了悬停事件。
//添加活动事件以及
//输入元素中的任何值更改等。
var childNodes=node.childNodes；
对于（var i=0；i
.ui{
位置：绝对位置；
左：0；上：0；
宽度：100%；高度：100%；
背景色：rgba（0,0,0,0.5）；
框阴影：插入0 3px#000000；
}
.ui.按钮{
位置：绝对位置；
宽度：100px；
高度：30px；线高度：30px；
左边距：-51像素；上面距：-16像素；
文本对齐：居中；
背景色：#ffffff；
字体系列：monospace；
边框：2个点#ff0000；
背景色：#800000；
颜色：#ffffff；
过渡：背景色300ms线性；
}
.ui.button.hover{
背景色：#808080；
}
.ui.button1{左侧：20%；顶部：20%；}
.ui.button2{左侧：50%；顶部：20%；}
.ui.button3{左侧：80%；顶部：20%；}
.ui.装饰{
位置：绝对位置；
左：30%；顶：30%；
宽度：40%；高度：5%；
背景色：#5050ff；
}
.ui.text{
位置：绝对位置；
左：5%；顶：38%；
宽度：90%；
颜色：#6060df；
}
.ui输入{
位置：绝对位置；
宽度：200px；高度：30px；线宽：30px；
左：10%；顶：70%；
颜色：#00ff00；
}
.ui{
不透明度：1；
z指数：1；
}
.ui.重复{
左侧：-10px；顶部：-5px；
指针事件：无！重要；
不透明度：0.7；
z指数：2；
过滤器：色调旋转（60度）；
}

按钮1
按钮2
按钮3
一些文字哈哈哈哈哈哈哈哈哈哈哈

一些文字哈哈哈哈哈哈哈哈哈哈哈

一些文字哈哈哈哈哈哈哈哈哈哈哈

你尝试过模糊过滤器吗？该网页已经有4个用于过滤器的范围滑块（还有模糊是的），非常感谢你的回答，我很难知道我不是程序员（我想你有），但我会
var cloneNodeWithLinkedEvents = function(node) {

    var cloned = node.cloneNode(false); /* DON'T clone children */

    // Here's the custom logic:
    node.onmouseover = function(parallelNode) {
        // Add a "hover" class to the original node AND the cloned one!
        this.classList.add('hover');
        parallelNode.classList.add('hover');
    }.bind(node, cloned);

    node.onmouseout = function(parallelNode) {
        this.classList.remove('hover');
        parallelNode.classList.remove('hover');
    }.bind(node, cloned);

    // Note: For brevity I've only added the hover event here.
    // It will be important to add the active event, as well as
    // any value changes in input elements, etc.

    var childNodes = node.childNodes;
    for (var i = 0; i < childNodes.length; i++)
        cloned.appendChild(cloneNodeWithLinkedEvents(childNodes[i]));

    return cloned;

};

var originalElem = document.getElementByClassName('ui')[0];
var parallelElem = cloneNodeWithLinkedEvents(originalElem);

// Add the cloned node to the same parent which is holding `originalElem`
originalElem.parentNode.appendChild(parallelElem);

// Give the parallel node a unique class so we can style it:
parallelElem.classList.add('duplicate');

.ui.duplicate {
    left: -10px;
    top: -5px;
    opacity: 0.3;
    z-index: 2; /* Or whatever value is necessary to make it appear on top */
}