A simple and clean image comparison slider, fully responsive and touch ready made with css and jquery.
A Pen by Andreas Borgen on CodePen.
Andreas Borgen Sphinxxxx
Sphinxxxx
/ image-comparison-slider.markdown
Last active
March 13, 2024 15:30
Image Comparison Slider
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <script src='//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js'></script> | |
| <script src="//code.highcharts.com/stock/highstock.js"></script> | |
| <script src="//code.highcharts.com/highcharts-more.js"></script> | |
| <div id="chart1" class="chart-area" > | |
| <div class="aspect-ratio" ></div> | |
| <div class="chart-wrapper" > | |
| <div class="chart" ></div> | |
| </div> | |
| </div> |
A Pen by Andreas Borgen on CodePen.
Javascript utils for other pens
A Pen by Andreas Borgen on CodePen.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| //- Challenge (nested transforms): https://a.hrc.onl/img/mark-h.svg | |
| //- | |
| //- Clean (zoom out to see controls...): | |
| //- <svg xmlns:svg="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg" | |
| //- viewBox="0 0 336 288" height="288" width="336" > | |
| //- <g transform="matrix(1.3333333,0,0,-1.3333333,0,288)" > | |
| //- <g transform="scale(0.1)" style="fill:#254da3;fill-opacity:1;fill-rule:nonzero;stroke:none" > | |
| //- <path d="M 720,0 0,0 l 0,720 90,360 -90,360 0,720 720,0 0,-2160" /> | |
| //- <path d="m 2160,0 -720,0 90,1080 -90,1080 720,0 0,-2160" /> | |
| //- <path d="m 2520,1080 -1080,1080 0,-720 -1440,0 0,-720 1440,0 0,-720 1080,1080" style="fill:#e51b2d" /> |
Write a bookmarklet script, and get a minified link you can add to your bookmarks bar.
Uses Google's Closure Compiler Service
A Pen by Andreas Borgen on CodePen.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <script> | |
| var exports = exports || {}; | |
| var module = module || {}; | |
| </script> | |
| <script __src='http://algebra.js.org/javascripts/algebra-0.2.6.min.js'></script> | |
| <script src='https://cdn.rawgit.com/lovasoa/linear-solve/716f0f3c22fedc90f05d42f6d8dbc6bada4e4597/gauss-jordan.js'></script> | |
| <h2>SVG arc path</h2> | |
| <h3>Drag the blue and green dots</h3> |
A Pen by Andreas Borgen on CodePen.
NewerOlder