Customizable split-view image diff for everyone (works on desktop, tablet, mobile...)

Developer
Daformat
Size
5,948 Kb
Views
18,216
  1. Customizable split-view image diff for everyone (works on desktop, tablet, mobile...) Previews
  2. Customizable split-view image diff for everyone (works on desktop, tablet, mobile...) HTML Codes
  3. Customizable split-view image diff for everyone (works on desktop, tablet, mobile...) CSS Codes
  4. Customizable split-view image diff for everyone (works on desktop, tablet, mobile...) JS Codes

How do I make an customizable split-view image diff for everyone (works on desktop, tablet, mobile...)?

Split view image comparison, hover your mouse or move your finger over the image to compare two different images.. What is a customizable split-view image diff for everyone (works on desktop, tablet, mobile...)? How do you make a customizable split-view image diff for everyone (works on desktop, tablet, mobile...)? This script and codes were developed by Daformat on 10 September 2022, Saturday.

Customizable split-view image diff for everyone (works on desktop, tablet, mobile...) Previews
IQ Test

Customizable split-view image diff for everyone (works on desktop, tablet, mobile...) - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Customizable split-view image diff for everyone (works on desktop, tablet, mobile...)</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div class="comparebox"></div> <script src="js/index.js"></script>
</body>
</html>

Customizable split-view image diff for everyone (works on desktop, tablet, mobile...) - Script Codes CSS Codes

/** * Configuration */
/** * Base styles */
.comparebox .img-box-r, .comparebox .img-box-l, .comparebox { width: 720px; height: 542px;
}
.comparebox .img-box-r, .comparebox .img-box-l { position: absolute; overflow: hidden; background-color: #fff; background-image: linear-gradient(to bottom right, #ddd 25%, transparent 25%, transparent 75%, #ddd 75%, #ddd), linear-gradient(to bottom right, #ddd 25%, transparent 25%, transparent 75%, #ddd 75%, #ddd), linear-gradient(to bottom right, #ddd 25%, transparent 25%, transparent 75%, #ddd 75%, #ddd), linear-gradient(to bottom right, #ddd 25%, transparent 25%, transparent 75%, #ddd 75%, #ddd); background-position: 0 0, 10px 10px; background-size: 20px 20px;
}
.comparebox .img-box-r:after, .comparebox .img-box-l:after { width: 720px; height: 542px; content: ''; position: absolute; background-repeat: no-repeat; background-size: contain; background-position: 50%;
}
.comparebox span::before, .comparebox span::after { position: absolute; top: 10px; border: 1px solid rgba(142, 142, 142, 0.25); background: rgba(142, 142, 142, 0.1); border-radius: 4px; padding: 0.2em 0.5em; display: inline-block; opacity: 0.9; transform: scale(0.85); transition: all ease 0.15s, opacity ease-out 0.35s, top ease-out 0.35s; box-shadow: 0 1px 2px rgba(0, 42, 84, 0.15);
}
html, body { height: 100%; margin: 0;
}
body { background-color: #f3f3f3; display: flex; min-height: 100%; justify-content: center; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", 'Open Sans', sans-serif;
}
.comparebox { position: relative; margin: auto; overflow: hidden; cursor: col-resize; background-color: #fff; box-shadow: 2px 2px 16px rgba(0, 0, 0, 0.25);
}
.comparebox ::before { content: ' ';
}
.comparebox .img-box-r:after { background-image: url("https://www.dropbox.com/s/s0v9r3ii6fflmgt/mgb-logo-full-details.png?dl=1");
}
.comparebox .img-box-l { width: 308.57143px;
}
.comparebox .img-box-l:after { background-image: url("https://www.dropbox.com/s/28cba0p8abouxn1/mgb-logo-full-details-flatpint.png?dl=1");
}
.comparebox span { position: absolute; height: 542px; overflow: visible; box-shadow: 0 1px 1px rgba(42, 63, 84, 0.3), 0 0 6px rgba(0, 42, 84, 0.3); width: 3px; margin-left: -1.5px; background-color: #fafafa; left: 308.57143px;
}
.comparebox span::before { background-color: rgba(255, 204, 204, 0.85); color: #c20000; border-color: rgba(179, 0, 0, 0.5); content: 'Old'; left: 1em;
}
.comparebox span::after { background-color: rgba(213, 242, 227, 0.85); color: #14aa5e; border-color: rgba(18, 157, 87, 0.5); content: 'New'; right: 1em;
}
.comparebox[dragging="true"] span:after, .comparebox[dragging="true"] span:before { opacity: 0.95; transform: scale(1); box-shadow: 1px 1px 6px rgba(0, 42, 84, 0.3); transition: all ease 0.15s, top ease-out 0.12s, opacity ease-out 0.35s;
}

Customizable split-view image diff for everyone (works on desktop, tablet, mobile...) - Script Codes JS Codes

'use strict'
// Position labels at the top when not hovering on the box
var default_label_ypos = '10px';
// Positionning labels at the bottom is as easy as doing:
// var default_label_ypos = 'calc(100% - 36px)';
var comparebox = { ele_box: document.querySelectorAll('.comparebox')[0], imgBox: ['img-box-r', 'img-box-l'], addCSSRule: function(sheet, selector, rules, index) { // console.log('Adding css rules', arguments); sheet.addRule(selector, rules); sheet.insertRule(selector + "{" + rules + "}", index); }, updateLabelsPosition: function(position, cssUnit) { var selector = '.comparebox span::before, .comparebox span::after', props = 'top: ' + position + (cssUnit ? cssUnit :''), ruleIndex = 0; if (this.prevRule) { document.styleSheets[0].removeRule(ruleIndex); } this.addCSSRule(document.styleSheets[0], selector, props, ruleIndex); this.prevRule = {'selector': selector, 'props': props}; }, update: function(xPos, yPos) { this.imgLeft.style.width = xPos; this.ctrl.style.left = xPos; this.updateLabelsPosition(yPos, 'px'); }, init: function() { var _this = this, _box = _this.ele_box; // Init elements _box.innerHTML = '<div class="' + _this.imgBox[0] + '"></div><div class="' + _this.imgBox[1] + '"></div><span data-mousey="10px"></span>'; // Add elements to comparebox _this.imgLeft = _box.getElementsByTagName('div')[1]; _this.ctrl = _box.getElementsByTagName('span')[0]; // Setup default label position _this.updateLabelsPosition(default_label_ypos); _this.bind(); }, bind: function() { var _this = this, _box = _this.ele_box, _boxHh = _box.offsetHeight / 2, _boxWw = _box.offsetWidth / 2, _ctrl = _this.ctrl, _xyRatio = 1; _this.startDragging = function() { _box.setAttribute('dragging', true); }; _this.stopDragging = function() { _box.setAttribute('dragging', false); _this.updateLabelsPosition(default_label_ypos); }; _this.drag = function (event, evtObj) { var obj = evtObj || event, pos_x = obj.clientX - _box.offsetLeft, op_x = (pos_x <= _box.offsetWidth ? pos_x : _box.offsetWidth), mouse_y; if (_box.attributes.dragging.value === "false") { return; } event.preventDefault(); mouse_y = obj.clientY - _box.offsetTop - 13; mouse_y = (mouse_y < 10 ? 10 : mouse_y); mouse_y = (mouse_y > _box.offsetHeight - 36 ? _box.offsetHeight - 36 : mouse_y); _this.update((op_x >= 0 ? op_x + 'px' : 0), mouse_y); } _this.ele_box.addEventListener('mouseenter', function (event) { _this.startDragging(); }); _this.ele_box.addEventListener('mouseleave', function (event) { _this.stopDragging(); }); _this.ele_box.addEventListener('mousemove', function (event) { _this.drag(event); }); _this.ele_box.addEventListener('touchstart', function(event) { if (event.touches.length > 1 || event.targetTouches.length > 1 || event.changedTouches.length > 1) { _this.stopDragging(); return; } event.preventDefault(); _this.startDragging(); _this.drag(event, event.changedTouches[0]); }); _this.ele_box.addEventListener('touchend', _this.stopDragging); _this.ele_box.addEventListener('touchcancel', _this.stopDragging); _this.ele_box.addEventListener('touchmove', function(event) { _this.drag(event, event.changedTouches[0]); }); }
};
console.info( 'Hello, I’m Mat\n' + '--------------\n' + 'I enjoy crafting digital things\n' + 'http://hello-mat.com\n'
);
comparebox.init();
Customizable split-view image diff for everyone (works on desktop, tablet, mobile...) - Script Codes
Customizable split-view image diff for everyone (works on desktop, tablet, mobile...) - Script Codes
Home Page Home
Developer Daformat
Username daformat
Uploaded September 10, 2022
Rating 3
Size 5,948 Kb
Views 18,216
Do you need developer help for Customizable split-view image diff for everyone (works on desktop, tablet, mobile...)?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Daformat (daformat) Script Codes
Name
Simple growing tree svg animation
Drawing branches on a retina compatible canvas
Drawing branches with canvas
Create amazing art & images with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!