-
Notifications
You must be signed in to change notification settings - Fork 47
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Automatically update gh-pages [skip ci]
- Loading branch information
Showing
1 changed file
with
1 addition
and
1 deletion.
There are no files selected for viewing
This file contains 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
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -1 +1 @@ | ||
<!doctype html><html dir="ltr" lang="en"><head><meta charset="utf-8"/><meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=5"/><title>Image Comparison Slider - React, Vue, Angular</title><meta name="description" content="Lightweight, accessible, and mobile-friendly slider component that allows users to compare two images. It is compatible with React, Vue and Angular."><style>x-ray{display:block;margin-bottom:1rem}</style><link rel="icon" href="favicon.ico"><meta property="og:type" content="website"/><meta property="og:title" content="Image Comparison Slider - React, Vue, Angular"/><meta property="og:description" content="Lightweight, accessible, and mobile-friendly slider component."/><meta property="og:url" content="https://img-comparison-slider.sneas.io"/><meta property="og:image" content="https://img-comparison-slider.sneas.io/social-preview.png"/><link href="css/main.71f732f6.css" rel="stylesheet"><script src="js/xray.bf2974cc.js" defer="defer"></script><script src="js/index.1.359d1b98.js" defer="defer"></script></head><body><nav class="navbar navbar-expand navbar-light"><div class="container"><a class="navbar-brand" href="/"><img src="images/logo.a516ac1d.svg" class="navbar-brand-image" alt="img-comparison-slider logo"/></a><ul class="navbar-nav ms-auto align-items-center"><li class="nav-item mx-0"><a class="nav-link py-3" href="examples.html">Usage Examples</a></li><li class="nav-item mx-0"><a class="nav-link py-3" href="https://github.com/sneas/img-comparison-slider" aria-label="Project's GitHub Page"><i class="fab fa-github fa-xl"></i><span class="d-none"> GitHub</span></a></li></ul></div></nav><div class="container pt-4 position-relative"><img-comparison-slider class="d-block main-slider" onfocus='if(window.hasKeyboardBeenUsed=!1,window.session=window.session??1,2===window.session)document.getElementById("message").classList.add("d-none"),document.getElementById("second-message").classList.remove("d-none");else document.getElementById("message").classList.remove("d-none"),document.getElementById("second-message").classList.add("d-none")' onkeyup='if(!["ArrowLeft","ArrowRight"].includes(event.code))return;switch(window.hasKeyboardBeenUsed=!0,window.session){case 2:document.getElementById("message").classList.add("opacity-0"),document.getElementById("second-message").classList.remove("opacity-0");break;case 3:document.getElementById("message").classList.add("opacity-0"),document.getElementById("second-message").classList.add("opacity-0");break;default:document.getElementById("message").classList.remove("opacity-0"),document.getElementById("second-message").classList.add("opacity-0")}' onblur='!0===window.hasKeyboardBeenUsed&&window.session++,document.getElementById("message").classList.add("opacity-0"),document.getElementById("second-message").classList.add("opacity-0")'><div slot="first"><img src="images/first.b4046e00.svg" width="100%" alt="First image example"/><div class="position-absolute" style="left:1%;top:60%"><div class="fs-md-5 fs-lg-3 fs-xl-2 fs-xxl-1 mb-1">Compare two images. Before and after.</div><div data-nosnippet class="fs-md-5 fs-lg-3 fs-xl-2 fs-xxl-1 mb-1 d-none d-md-block show-on-focus text-nowrap">Now try to use <i class="fas fa-caret-left align-middle"></i> or <i class="fas fa-caret-right align-middle"></i> arrows on the keyboard.</div><div data-nosnippet class="fs-md-5 fs-lg-3 fs-xl-2 fs-xxl-1 opacity-0 show-on-focus d-none" id="message">Amazing, isn't it?</div><div data-nosnippet class="fs-md-5 fs-lg-3 fs-xl-2 fs-xxl-1 opacity-0 show-on-focus d-none" id="second-message">Your <a href="https://github.com/sneas/img-comparison-slider" target="_blank" class="text-decoration-none" onmousedown="event.stopPropagation()"><i class="fab fa-github fa-sm align-middle"></i> star</a> will make a big difference for this project.</div></div></div><div slot="second"><img src="images/second.93ae2554.svg" width="100%" alt="Second image example"/></div></img-comparison-slider></div><div class="bg-warning py-5"><div class="container"><div class="row gx-0 gx-md-5"><div class="col-12 col-md-6">This <a href="https://github.com/sneas/img-comparison-slider/blob/master/LICENSE">free open source</a> slider component was created to demonstrate the difference between two images. For example, to show the difference before and after applying photo effects or filters, to compare photos of rooms before and after construction, or to show landscape changes over time. The component is well suited for news portals, artists, or design portfolios.</div><div class="col-12 col-md-6 mt-3 mt-md-0">Because it is a <a href="https://developer.mozilla.org/en-US/docs/Web/Web_Components">web component</a>, it is compatible with almost any JS framework, web application, or design system. In addition, this component offers a wide range of settings - the <a href="/examples.html">examples</a> section provides many ideas and styling techniques. The setup and settings documentation is available on the <a href="https://github.com/sneas/img-comparison-slider">component's GitHub page</a>.</div></div></div></div><div class="container pt-5 pb-0 pb-md-5"><h2 class="h1 mb-5">Features</h2><ul class="row align-items-start list-unstyled g-0"><li class="col-6 col-xl-4 mb-5 text-center row justify-content-center g-3"><div class="col-8"><img src="images/mobile-friendly.22aec8f8.svg" class="w-100" alt="Mobile-friendly"/></div><div class="col-12 lead"><strong>Mobile-friendly</strong></div></li><li class="col-6 col-xl-4 mb-5 text-center row justify-content-center g-3"><div class="col-8"><img src="images/accessible.1330e75b.svg" class="w-100" alt="Accessible"/></div><div class="col-12 lead"><strong>Accessible</strong></div></li><li class="col-6 col-xl-4 mb-5 text-center row justify-content-center g-3"><div class="col-8"><img src="images/responsive.5e14bd71.svg" class="w-100" alt="Responsive"/></div><div class="col-12 lead"><strong>Responsive</strong></div></li><li class="col-6 col-xl-4 mb-5 text-center row justify-content-center g-3"><div class="col-8"><img src="images/compact.9116300d.svg" class="w-100" alt="Compact"/></div><div class="col-12 lead"><strong>Compact</strong></div></li><li class="col-6 col-xl-4 mb-5 text-center row justify-content-center g-3"><div class="col-8"><img src="images/adjustable.72f16042.svg" class="w-100" alt="Adjustable"/></div><div class="col-12 lead"><strong>Adjustable</strong></div></li><li class="col-6 col-xl-4 mb-5 text-center row justify-content-center g-3"><div class="col-8"><img src="images/js.38f5c51e.svg" class="w-100" alt="Supports modern JS frameworks"/></div><div class="col-12 lead"><strong>Supports modern JS frameworks</strong></div></li></ul></div><div class="pb-5 pt-0 mt-md-5"><div class="container"><div class="h1 mb-5">What it looks like on default / <a href="/examples.html#always-show" style="text-decoration-thickness:2px">See more examples</a></div><img-comparison-slider class="d-block"><img slot="first" src="images/morning.372b13bb.webp" width="100%" alt="First image example"/> <img slot="second" src="images/morning-blurred.1d21249b.webp" width="100%" alt="Second image example"/></img-comparison-slider></div></div><footer class="footer py-5 bg-warning"><div class="container">© 2019 – Made with love and care by <a href="mailto:[email protected]" class="text-decoration-none">sneas</a> <a href="https://github.com/sneas" target="_blank" class="ms-2"><i class="fab fa-github fa-2xl"></i></a> <a href="https://twitter.com/sneasio" target="_blank" class="ms-2"><i class="fab fa-x-twitter fa-2xl"></i></a> <a href="https://linkedin.com/in/sneas" target="_blank" class="ms-2"><i class="fab fa-linkedin fa-2xl"></i></a>.</div></footer><script src="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.2/js/all.min.js" integrity="sha512-uKQ39gEGiyUJl4AI6L+ekBdGKpGw4xJ55+xyJG7YFlJokPNYegn9KwQ3P8A7aFQAUtUsAQHep+d/lrGqrbPIDQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script></body></html> | ||
<!doctype html><html dir="ltr" lang="en"><head><meta charset="utf-8"/><meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=5"/><title>Image Comparison Slider - React, Vue, Angular</title><meta name="description" content="Lightweight, accessible, and mobile-friendly slider component that allows users to compare two images. It is compatible with React, Vue and Angular."><style>x-ray{display:block;margin-bottom:1rem}</style><link rel="icon" href="favicon.ico"><meta property="og:type" content="website"/><meta property="og:title" content="Image Comparison Slider - React, Vue, Angular"/><meta property="og:description" content="Lightweight, accessible, and mobile-friendly slider component."/><meta property="og:url" content="https://img-comparison-slider.sneas.io"/><meta property="og:image" content="https://img-comparison-slider.sneas.io/social-preview.png"/><link href="css/main.71f732f6.css" rel="stylesheet"><script src="js/xray.bf2974cc.js" defer="defer"></script><script src="js/index.1.359d1b98.js" defer="defer"></script></head><body><nav class="navbar navbar-expand navbar-light"><div class="container"><a class="navbar-brand" href="/"><img src="images/logo.a516ac1d.svg" class="navbar-brand-image" alt="img-comparison-slider logo"/></a><ul class="navbar-nav ms-auto align-items-center"><li class="nav-item mx-0"><a class="nav-link py-3" href="examples.html">Usage Examples</a></li><li class="nav-item mx-0"><a class="nav-link py-3" href="https://github.com/sneas/img-comparison-slider" aria-label="Project's GitHub Page"><i class="fab fa-github fa-xl"></i><span class="d-none"> GitHub</span></a></li></ul></div></nav><div class="container pt-4 position-relative"><img-comparison-slider class="d-block main-slider" onfocus='if(window.hasKeyboardBeenUsed=!1,window.session=window.session??1,2===window.session)document.getElementById("message").classList.add("d-none"),document.getElementById("second-message").classList.remove("d-none");else document.getElementById("message").classList.remove("d-none"),document.getElementById("second-message").classList.add("d-none")' onkeyup='if(!["ArrowLeft","ArrowRight"].includes(event.code))return;if(window.hasKeyboardBeenUsed=!0,2===window.session)document.getElementById("message").classList.add("opacity-0"),document.getElementById("second-message").classList.remove("opacity-0");else document.getElementById("message").classList.remove("opacity-0"),document.getElementById("second-message").classList.add("opacity-0")' onblur='!0===window.hasKeyboardBeenUsed&&window.session++,document.getElementById("message").classList.add("opacity-0"),document.getElementById("second-message").classList.add("opacity-0")'><div slot="first"><img src="images/first.b4046e00.svg" width="100%" alt="First image example"/><div class="position-absolute" style="left:1%;top:60%"><div class="fs-md-5 fs-lg-3 fs-xl-2 fs-xxl-1 mb-1">Compare two images. Before and after.</div><div data-nosnippet class="fs-md-5 fs-lg-3 fs-xl-2 fs-xxl-1 mb-1 d-none d-md-block show-on-focus text-nowrap">Now try to use <i class="fas fa-caret-left align-middle"></i> or <i class="fas fa-caret-right align-middle"></i> arrows on the keyboard.</div><div data-nosnippet class="fs-md-5 fs-lg-3 fs-xl-2 fs-xxl-1 opacity-0 show-on-focus d-none" id="message">Amazing, isn't it?</div><div data-nosnippet class="fs-md-5 fs-lg-3 fs-xl-2 fs-xxl-1 opacity-0 show-on-focus d-none" id="second-message">Your <a href="https://github.com/sneas/img-comparison-slider" target="_blank" class="text-decoration-none" onmousedown="event.stopPropagation()"><i class="fab fa-github fa-sm align-middle"></i> star</a> will make a big difference for this project.</div></div></div><div slot="second"><img src="images/second.93ae2554.svg" width="100%" alt="Second image example"/></div></img-comparison-slider></div><div class="bg-warning py-5"><div class="container"><div class="row gx-0 gx-md-5"><div class="col-12 col-md-6">This <a href="https://github.com/sneas/img-comparison-slider/blob/master/LICENSE">free open source</a> slider component was created to demonstrate the difference between two images. For example, to show the difference before and after applying photo effects or filters, to compare photos of rooms before and after construction, or to show landscape changes over time. The component is well suited for news portals, artists, or design portfolios.</div><div class="col-12 col-md-6 mt-3 mt-md-0">Because it is a <a href="https://developer.mozilla.org/en-US/docs/Web/Web_Components">web component</a>, it is compatible with almost any JS framework, web application, or design system. In addition, this component offers a wide range of settings - the <a href="/examples.html">examples</a> section provides many ideas and styling techniques. The setup and settings documentation is available on the <a href="https://github.com/sneas/img-comparison-slider">component's GitHub page</a>.</div></div></div></div><div class="container pt-5 pb-0 pb-md-5"><h2 class="h1 mb-5">Features</h2><ul class="row align-items-start list-unstyled g-0"><li class="col-6 col-xl-4 mb-5 text-center row justify-content-center g-3"><div class="col-8"><img src="images/mobile-friendly.22aec8f8.svg" class="w-100" alt="Mobile-friendly"/></div><div class="col-12 lead"><strong>Mobile-friendly</strong></div></li><li class="col-6 col-xl-4 mb-5 text-center row justify-content-center g-3"><div class="col-8"><img src="images/accessible.1330e75b.svg" class="w-100" alt="Accessible"/></div><div class="col-12 lead"><strong>Accessible</strong></div></li><li class="col-6 col-xl-4 mb-5 text-center row justify-content-center g-3"><div class="col-8"><img src="images/responsive.5e14bd71.svg" class="w-100" alt="Responsive"/></div><div class="col-12 lead"><strong>Responsive</strong></div></li><li class="col-6 col-xl-4 mb-5 text-center row justify-content-center g-3"><div class="col-8"><img src="images/compact.9116300d.svg" class="w-100" alt="Compact"/></div><div class="col-12 lead"><strong>Compact</strong></div></li><li class="col-6 col-xl-4 mb-5 text-center row justify-content-center g-3"><div class="col-8"><img src="images/adjustable.72f16042.svg" class="w-100" alt="Adjustable"/></div><div class="col-12 lead"><strong>Adjustable</strong></div></li><li class="col-6 col-xl-4 mb-5 text-center row justify-content-center g-3"><div class="col-8"><img src="images/js.38f5c51e.svg" class="w-100" alt="Supports modern JS frameworks"/></div><div class="col-12 lead"><strong>Supports modern JS frameworks</strong></div></li></ul></div><div class="pb-5 pt-0 mt-md-5"><div class="container"><div class="h1 mb-5">What it looks like on default / <a href="/examples.html#always-show" style="text-decoration-thickness:2px">See more examples</a></div><img-comparison-slider class="d-block"><img slot="first" src="images/morning.372b13bb.webp" width="100%" alt="First image example"/> <img slot="second" src="images/morning-blurred.1d21249b.webp" width="100%" alt="Second image example"/></img-comparison-slider></div></div><footer class="footer py-5 bg-warning"><div class="container">© 2019 – Made with love and care by <a href="mailto:[email protected]" class="text-decoration-none">sneas</a> <a href="https://github.com/sneas" target="_blank" class="ms-2"><i class="fab fa-github fa-2xl"></i></a> <a href="https://twitter.com/sneasio" target="_blank" class="ms-2"><i class="fab fa-x-twitter fa-2xl"></i></a> <a href="https://linkedin.com/in/sneas" target="_blank" class="ms-2"><i class="fab fa-linkedin fa-2xl"></i></a>.</div></footer><script src="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.2/js/all.min.js" integrity="sha512-uKQ39gEGiyUJl4AI6L+ekBdGKpGw4xJ55+xyJG7YFlJokPNYegn9KwQ3P8A7aFQAUtUsAQHep+d/lrGqrbPIDQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script></body></html> |