Question

我目前正在开发一个web ui

最近我添加了一个功能来改变一些范围滑块的整体效果，通过改变一些滤镜css，如色调旋转，灰度，反转和模糊

现在：

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

我试图通过降低一个

的不透明度来试图将两者放在Photoshop中

之前我想通过使用open gl shader语言来实现这样的效果（我一直想要这样做，因为你可以实现更好的效果和更多的动态）但是现在，正如我所说，在photoshop中这样做，我想到了一个小的解决方案就是做色度偏差

之后加载所有css，

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

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

通过这种方式，我可以实现这样的效果

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

我认为这里有一些问题：

克隆的副本不应该是可点击的
当有悬停，转换，动画时，克隆副本的行为应与原始副本相同......
克隆的副本不应该扩展页面的大小，移动自身（可能使用position：absolute和overflow：hidden）

我试过这种方式，但它没有工作

$( 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');
});

Answer 1

这是可能的，但这是一项困难且javascript繁重的任务。我首先要让你的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效果。

现在您需要手动添加和删除这些自定义.hover，.active类：

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]);
}

好的，这足以通过自定义事件控制原始图层。但现在我们需要添加模糊层。我们可以实现一些自定义深度克隆。我们希望这是自定义的，因为在我们进行克隆时，我们希望能够采取自定义操作（添加事件）。

var customCloneNode = function(node) {

    var cloned = node.cloneNode(false); /* DON'T clone children; we'll do it manually */

    // In a moment we'll do some custom logic with `cloned`

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

    return cloned;

};

所以我们知道如何模拟css事件和克隆html节点。现在我们需要将两者结合起来，这样克隆的子进程就会在原始的相应元素获得/丢失时获得并丢失自定义的css类：

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 */
}

工作示例：

＆＃13;

window.onload = function() {
  var cloneNodeWithLinkedEvents = function(node) {
            
      var cloned = node.cloneNode(false); /* DON'T clone children */
      
      if (node.classList && node.classList.contains('button')) {
        
          // Here's the custom logic for buttons:
          node.onmouseover = function(parallelNode) {
              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);
        
      }
      
      if (node.nodeName === 'INPUT') {
          
          var changeFunc = function(parallelNode) {
              parallelNode.value = this.value;
          }.bind(node, cloned);
          node.addEventListener('input', changeFunc);
          node.addEventListener('keyup', changeFunc);
          node.addEventListener('keydown', changeFunc);
          
      }

      // 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.getElementsByClassName('ui')[0];
  var parallelElem = cloneNodeWithLinkedEvents(originalElem);

  originalElem.parentNode.appendChild(parallelElem);
  parallelElem.classList.add('duplicate');
 
 };

＆＃13;

.ui {
    position: absolute;
    left: 0; top: 0;
    width: 100%; height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    box-shadow: inset 0 0 0 3px #000000;
}
.ui .button {
    position: absolute;
    width: 100px;
    height: 30px; line-height: 30px;
    margin-left: -51px; margin-top: -16px;
    text-align: center;
    background-color: #ffffff;
    font-family: monospace;
    border: 2px dotted #ff0000;
    background-color: #800000;
    color: #ffffff;
    
    transition: background-color 300ms linear;
}
.ui .button.hover {
    background-color: #808080;
}
.ui .button1 { left: 20%; top: 20%; }
.ui .button2 { left: 50%; top: 20%; }
.ui .button3 { left: 80%; top: 20%; }

.ui .decoration {
    position: absolute;
    left: 30%; top: 30%;
    width: 40%; height: 5%;
    background-color: #5050ff;
}
.ui .text {
    position: absolute;
    left: 5%; top: 38%;
    width: 90%;
    color: #6060df;
}
.ui input {
    position: absolute;
    width: 200px; height: 30px; line-height: 30px;
    left: 10%; top: 70%;
    color: #00ff00;
}

.ui {
    opacity: 1;
    z-index: 1;
}
.ui.duplicate {
    left: -10px; top: -5px;
    pointer-events: none !important;
    opacity: 0.7;
    z-index: 2;
    
    filter: hue-rotate(60deg);
}

＆＃13;

<div class="ui">
    <div class="button button1">BUTTON1</div>
    <div class="button button2">BUTTON2</div>
    <div class="button button3">BUTTON3</div>
    <div class="decoration"></div>
    <div class="text">
         Some text haha wheeee yayyy<br/>
         Some text haha wheeee yayyy<br/>
         Some text haha wheeee yayyy<br/>
    </div>
    <input type="text"/>
</div>

＆＃13;

请注意，将鼠标悬停在重复图层上并不会激活任何悬停效果，并且悬停在原始图像上会激活对两者的影响！另请注意，键入input元素会将值更改事件链接到副本。

如何为网页创建色差？

1 个答案: