A simple, gummy little switch thingy. Now accelerated for touch devices! All JS can be removed though and it will still work.
A Pen by Christian Naths on CodePen.
A simple, gummy little switch thingy. Now accelerated for touch devices! All JS can be removed though and it will still work.
A Pen by Christian Naths on CodePen.
%form{ action: "#"} | |
.field.position | |
%input(type="checkbox" id="checkme") | |
%label Animated using position | |
%hr | |
.field.transform | |
%input(type="checkbox" id="checkme") | |
%label Animated using transform | |
#output |
if (Modernizr.touch) | |
$("#output").text("Touch device") | |
$switch = $("input[type='checkbox']") | |
$switch.on "click", (event) -> | |
event.preventDefault() | |
event.stopPropagation() | |
$switch.on "touchend", (event) -> | |
event.preventDefault() | |
event.stopPropagation() | |
$this = $(this) | |
if $this.is(":checked") | |
$this.prop("checked", false) | |
else | |
$this.prop("checked", true) |
@keyframes switch-on-position | |
0% | |
left: 0 | |
right: 50% | |
25% | |
left: 0 | |
right: 37.5% | |
100% | |
left: 50% | |
right: 0 | |
@keyframes switch-off-position | |
0% | |
left: 50% | |
right: 0 | |
25% | |
left: 37.5% | |
right: 0 | |
100% | |
left: 0% | |
right: 50% | |
@keyframes switch-on-transform | |
0% | |
transform: translate(0) scaleX(1) | |
25% | |
transform: translate(0) scaleX(1.33) | |
100% | |
transform: translate(100%) scaleX(1) | |
@keyframes switch-off-transform | |
0% | |
transform: translate(100%) scaleX(1) | |
25% | |
transform: translate(100%) scaleX(1.33) | |
100% | |
transform: translate(0) scaleX(1) | |
body | |
max-width: 30em | |
margin: 0 auto | |
text-align: center | |
padding: 1.5em 2em | |
input[type="checkbox"] | |
position: relative | |
display: inline-block | |
-webkit-appearance: none | |
-webkit-tap-highlight-color: transparent | |
height: 2em | |
width: 4em | |
font-size: 2em | |
border-radius: 1.5em | |
background-color: $neutral-medium | |
border-color: transparent | |
background-clip: padding-box | |
color: $neutral-light | |
vertical-align: middle | |
transition: all 0.25s linear 0.25s | |
&::before | |
content: "" | |
position: absolute | |
top: 0 | |
left: 0 | |
bottom: 0 | |
right: 50% | |
background-color: white | |
border-radius: 100% | |
border: 0.125em solid transparent | |
background-clip: padding-box | |
z-index: 2 | |
transform-origin: right center | |
&::after | |
position: absolute | |
left: 0.675em | |
top: 0 | |
line-height: 2 | |
font-family: "Ionicons" | |
content: "\f121 \f129" | |
letter-spacing: 1em | |
z-index: 1 | |
&:focus | |
color: white | |
border-color: transparent | |
background-color: $neutral-medium | |
outline: none | |
input[type="checkbox"]:checked | |
color: white | |
background-color: $green | |
border-color: transparent | |
&::before | |
transform-origin: left center | |
.field | |
display: inline-block | |
margin: 1.5em 0 | |
hr | |
border: none | |
border-bottom: 1px solid $neutral-light | |
label | |
display: block | |
color: $neutral-medium | |
.field.position input[type="checkbox"]::before | |
animation: switch-off-position 0.25s ease-out forwards | |
.field.position input[type="checkbox"]:checked::before | |
animation: switch-on-position 0.25s ease-out forwards | |
.field.transform input[type="checkbox"]::before | |
animation: switch-off-transform 0.25s ease-out forwards | |
.field.transform input[type="checkbox"]:checked::before | |
animation: switch-on-transform 0.25s ease-out forwards | |