我目前正在开发一个网络用户界面
最近我添加了一个功能来通过一些范围 slider 来改变整体效果,这些 slider 通过改变一些滤镜 css 来实现,比如色调旋转、灰度、反转和模糊
现在:
做一些截图是我随机做的!而且很酷!!!
我只是想通过降低一个的不透明度来使两者适合 photoshop
以前我想通过使用 open gl shader 语言来实现这样的效果(我一直想这样做,因为你可以获得更好的效果和更多的动态)但是现在,正如我所说,在 photoshop 中这样做,我想到了一个解决色差的小方法
加载完所有的css之后,
$( window ).load(function() {
//chroma aberration
});
通过一个事件(或另一个范围 slider )我可以克隆所有的 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');
});
最佳答案
这是可能的,但这是一项艰巨且 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 操作使用react。这是必要的,因为将无法在模糊层上激活原生 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 */
}
工作示例:
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');
};
.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);
}
<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>
请注意,将鼠标悬停在复制的图层上不会激活任何悬停效果,而将鼠标悬停在原始图层上会同时激活两者的效果!另请注意,在 input
元素中键入内容会将值更改事件链接到副本。
关于javascript - 如何为网页创建色差?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/46635965/