From https://dribbble.com/shots/8044038-After-Effects-Smoke-Intensive
A Pen by Aaron Iker on CodePen.
<div class="slider"> | |
<input type="range" min="1" max="100" value="50"> | |
</div> | |
<!-- twitter / dribbble --> | |
<a class="dribbble" href="https://dribbble.com/shots/8424211-Smoke-Slider" target="_blank"><img src="https://dribbble.com/assets/logo-small-2x-9fe74d2ad7b25fba0f50168523c15fda4c35534f9ea0b1011179275383035439.png" alt=""></a> | |
<a class="twitter" target="_blank" href="https://twitter.com/aaroniker_me"><svg xmlns="http://www.w3.org/2000/svg" width="72" height="72" viewBox="0 0 72 72"><path d="M67.812 16.141a26.246 26.246 0 0 1-7.519 2.06 13.134 13.134 0 0 0 5.756-7.244 26.127 26.127 0 0 1-8.313 3.176A13.075 13.075 0 0 0 48.182 10c-7.229 0-13.092 5.861-13.092 13.093 0 1.026.118 2.021.338 2.981-10.885-.548-20.528-5.757-26.987-13.679a13.048 13.048 0 0 0-1.771 6.581c0 4.542 2.312 8.551 5.824 10.898a13.048 13.048 0 0 1-5.93-1.638c-.002.055-.002.11-.002.162 0 6.345 4.513 11.638 10.504 12.84a13.177 13.177 0 0 1-3.449.457c-.846 0-1.667-.078-2.465-.231 1.667 5.2 6.499 8.986 12.23 9.09a26.276 26.276 0 0 1-16.26 5.606A26.21 26.21 0 0 1 4 55.976a37.036 37.036 0 0 0 20.067 5.882c24.083 0 37.251-19.949 37.251-37.249 0-.566-.014-1.134-.039-1.694a26.597 26.597 0 0 0 6.533-6.774z"></path></svg></a> |
const $ = (s, o = document) => o.querySelector(s); | |
var interval; | |
let slider = $('.slider'), | |
input = $('input', slider), | |
random = (min, max) => min + Math.random() * (max - min), | |
between = (min, max, percent) => max - (max - min) * (1 - percent), | |
create = slider => { | |
let percent = slider.handle.dataset.percent, | |
position = slider.handle.dataset.position, | |
div = document.createElement('div'); | |
div.classList.add('smoke'); | |
slider.range.appendChild(div); | |
gsap.set(div, { | |
x: position, | |
y: -20 | |
}); | |
gsap.timeline().to(div, { | |
scale: random(between(.15, 1, percent), between(.4, 2, percent)), | |
duration: between(.8, 1.2, percent) | |
}).to(div, { | |
scale: 0, | |
duration: between(.3, .5, percent) | |
}); | |
gsap.to(div, { | |
duration: between(.3, .4, percent), | |
opacity: 1 | |
}); | |
gsap.to(div, { | |
duration: between(2, 3, percent), | |
y: random(between(-40, -200, percent), between(-70, -320, percent)), | |
x: random(between(-20, -90, percent), between(20, 90, percent)) + parseInt(position), | |
onComplete() { | |
div.remove(); | |
} | |
}); | |
}; | |
rangesliderJs.create(input, { | |
onInit(value) { | |
this.handle.dataset.value = value; | |
}, | |
onSlideStart(value, percent, position) { | |
this.handle.classList.add('active'); | |
interval = setInterval(() => { | |
create(this); | |
}, 50); | |
}, | |
onSlide(value, percent, position) { | |
this.handle.dataset.value = value; | |
this.handle.dataset.percent = percent; | |
this.handle.dataset.position = position; | |
}, | |
onSlideEnd() { | |
this.handle.classList.remove('active'); | |
clearInterval(interval); | |
} | |
}); |
<script src="https://cdn.jsdelivr.net/npm/rangeslider-js@3.2.5/dist/rangeslider-js.min.js"></script> | |
<script src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/16327/gsap-latest-beta.min.js"></script> |
.slider { | |
--line-background: #{rgba(#fff, .6)}; | |
--line-active: #fff; | |
--handle-background: #275EFE; | |
--handle-border: #fff; | |
--handle-text-color: #fff; | |
--smoke-background: #fff; | |
--smoke-shadow: inset 3px 3px 0 0 #E1E6F9; | |
max-width: 320px; | |
width: 100%; | |
.rangeslider { | |
width: 100%; | |
height: 3px; | |
position: relative; | |
.rangeslider__fill__bg, | |
.rangeslider__fill { | |
--b: var(--line-active); | |
position: absolute; | |
left: 0; | |
z-index: 1; | |
top: var(--t, 0); | |
height: var(--h, 3px); | |
background: var(--b); | |
border-radius: 2px; | |
} | |
.rangeslider__fill__bg { | |
--t: 1px; | |
--h: 1px; | |
--b: var(--line-background); | |
width: 100%; | |
} | |
.rangeslider__handle { | |
width: 33px; | |
height: 33px; | |
left: 0; | |
top: 2px; | |
z-index: 2; | |
position: absolute; | |
cursor: pointer; | |
&:before { | |
content: attr(data-value); | |
top: 6px; | |
left: -8px; | |
right: -8px; | |
position: absolute; | |
text-align: center; | |
font-family: inherit; | |
backface-visibility: hidden; | |
font-size: 16px; | |
font-weight: 500; | |
line-height: 21px; | |
color: var(--handle-text-color); | |
transition: transform .3s ease; | |
transform: translateY(var(--y, 0)) scale(var(--s, .7)); | |
} | |
&:after { | |
content: ''; | |
width: 100%; | |
height: 100%; | |
border-radius: 50%; | |
display: block; | |
border: 3px solid var(--handle-border); | |
background: var(--handle-background); | |
} | |
&:active, | |
&.active { | |
--s: 1; | |
--y: 44px; | |
} | |
} | |
.smoke { | |
background: var(--smoke-background); | |
box-shadow: var(--smoke-shadow); | |
position: absolute; | |
overflow: hidden; | |
pointer-events: none; | |
left: -4px; | |
top: 0; | |
width: 41px; | |
height: 41px; | |
border-radius: 50%; | |
transform: scale(0); | |
} | |
} | |
} | |
html { | |
box-sizing: border-box; | |
-webkit-font-smoothing: antialiased; | |
} | |
* { | |
box-sizing: inherit; | |
&:before, | |
&:after { | |
box-sizing: inherit; | |
} | |
} | |
// dribbble & twitter | |
body { | |
min-height: 100vh; | |
font-family: 'Roboto', Arial; | |
display: flex; | |
justify-content: center; | |
align-items: center; | |
background: #275EFE; | |
font-family: 'Roboto', Arial, sans-serif; | |
.dribbble { | |
position: fixed; | |
display: block; | |
right: 20px; | |
bottom: 20px; | |
img { | |
display: block; | |
width: 76px; | |
} | |
} | |
.twitter { | |
position: fixed; | |
display: block; | |
right: 112px; | |
bottom: 14px; | |
svg { | |
width: 24px; | |
height: 24px; | |
fill: white; | |
} | |
} | |
} |
<link href="https://fonts.googleapis.com/css?family=Roboto:400,500,700&display=swap" rel="stylesheet" /> |