Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Cut/Copy/Paste
#wrap.nocut
%p
Somebody once told me the world is gonna roll me //
I ain't the sharpest tool in the shed //
She was looking kind of dumb with her finger and her thumb //
In the shape of an "L" on her forehead
<br><br>
Well the years start coming and they don't stop coming //
Fed to the rules and I hit the ground running //
Didn't make sense not to live for fun //
Your brain gits smart but your head gits dumb //
So much to do, so much to see //
So what's wrong with taking the back streets? //
You'll never know if you don't go //
You'll never shine if you don't glow
<br><br>
Hey now, you're an all-star, get your game on, go play //
Hey now, you're a rock star, get the show on, get paid //
And all that glitters is gold //
Only shooting stars break the mold
.multi-button
%button.cut Cut
%button.copy Copy
%button.paste Paste
.close
function surroundSelection() {
var span = document.createElement("span");
span.classList.add('selection');
if (window.getSelection) {
var sel = window.getSelection();
if (sel.rangeCount) {
var range = sel.getRangeAt(0).cloneRange();
range.surroundContents(span);
sel.removeAllRanges();
sel.addRange(range);
}
}
}
$(".cut").on('click', function(){
$('#wrap').removeClass("nocut");
$('.selection').attr('data-splitting', 'words');
Splitting();
setTimeout(function(){
$('.selection').remove();
$('#wrap').addClass("nocut");
}, 1500);
setTimeout(function(){
$('.multi-button').removeClass('visible');
$('#wrap').removeClass("copy").removeClass('active');
}, 1800);
});
$('.cut, .copy').click(function(){
var selected = window.getSelection().toString();
localStorage.setItem('text', selected);
});
$('.paste').on('click', function(){
$('#wrap').addClass('pasted');
setTimeout(function(){
var newtext = localStorage.getItem('text');
$('.selection').text(newtext);
}, 1000);
setTimeout(function(){
$('.multi-button').removeClass('visible');
$('#wrap').removeClass('pasted').removeClass('active');
}, 1700);
});
$(".copy").on('click', function(){
$('#wrap').addClass("copy");
setTimeout(function(){
$('.multi-button').removeClass('visible');
$('#wrap').removeClass("copy").removeClass('active');
}, 2600);
});
$("button").click(function(){
$(this).addClass('active');
$('body').addClass('active');
var sel = window.getSelection ? window.getSelection() : document.selection;
if (sel) {
if (sel.removeAllRanges) {
sel.removeAllRanges();
} else if (sel.empty) {
sel.empty();
}
}
setTimeout(function(){
$("button").removeClass('active');
}, 1200);
setTimeout(function(){
$("body").removeClass('active');
}, 3500);
})
$("#wrap").on('mousedown', function(){
if ($(this).hasClass('nocut')){
$('#wrap p span').contents().unwrap();
$('#wrap p span').remove();
$('.multi-button').removeClass('visible');
$('#wrap').removeClass('active');
}
});
$(".close").click(function(){
$('.multi-button').removeClass('visible');
});
$("#wrap").on('mouseup', function(){
var content = window.getSelection().toString().length;
if (content > 0){
$('.multi-button').addClass('visible');
$('#wrap').addClass('active');
$('#wrap').removeClass("copy");
}
else{
$('.multi-button').removeClass('visible');
$('#wrap').removeClass('active');
}
if ($(this).hasClass('nocut')){
surroundSelection();
var topPos = ($("#wrap p .selection").position().top - 50);
var leftPos = ($("#wrap p .selection").position().left - 125);
var width = ($("#wrap p .selection").width()/2);
$('.multi-button').css({
top: topPos,
left: leftPos + width,
});
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://unpkg.com/splitting@1.0.5/dist/splitting.min.js"></script>
body {
height: 100vh;
margin: 0;
display: grid;
place-items: center;
font-size:100%;
&:before{
content:'☝️ select some text';
position:absolute;
font-family:'Comfortaa', sans-serif;
bottom:0;
left:50%;
display:inline-block;
transform:translate(-50%, -20px);
font-size:14px;
padding:0 5px;
border-bottom:1px solid yellow;
}
&.active{
pointer-events:none;
}
.multi-button{
position:absolute;
transition:transform 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275), box-shadow 0.3s ease-in-out, top 0s ease-in-out, left 0s ease-in-out;
transition-delay:0.3s, 0.0s, 0.6s, 0.6s;
width:250px;
display:flex;
justify-content:space-between;
border-radius:5px;
transform-origin:bottom;
transform:scaleY(0);
transform-style:preserve-3d;
perspective:100px;
box-shadow:0 0px 20px -10px rgba(0,0,0,0);
.close{
content:'';
position:absolute;
width:15px;
height:15px;
background:linear-gradient(-45deg, transparent calc(50% - 1px), #fff calc(50% - 1px), #fff calc(50% + 1px), transparent calc(50% + 1px)), linear-gradient(45deg, red calc(50% - 1px), #fff calc(50% - 1px), #fff calc(50% + 1px), red calc(50% + 1px));
border-radius:100%;
box-shadow:inset 0 0 0 2px red, 0 0 0 2px #222;
right:-7.5px;
top:-7.5px;
transform:scale(0);
transition:0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275);
cursor:pointer;
}
&:before{
transition:0.3s ease-in-out;
content:'';
position:absolute;
width:125%;
height:112.5%;
top:-25%;
left:-12.5%;
background:rgba(255,255,255,0);
backdrop-filter: blur(0px);
box-shadow:0px -25px 25px 10px redrgba(255,255,255,0);
border-radius:10px;
}
button{
outline:none;
padding:10px;
background:#fff;
border:none;
font-family:'Comfortaa', sans-serif;
text-transform:uppercase;
font-weight:900;
letter-spacing:2px;
width:33.333%;
cursor:pointer;
box-shadow:0 0 0 1px #222, inset 0 0 0 1px #555;
transition:transform 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275), background 0.2s ease-in-out, padding 0.2s ease-in-out;
transition-delay:0.2s, 0.3s, 0s;
backface-visibility:hidden;
overflow:hidden;
position:relative;
box-sizing:border-box;
&:before, &:after{
content: '';
width: 15px;
height: 15px;
background-size: contain;
background-position: center;
background-repeat: no-repeat;
position: absolute;
top: 50%;
left: 10px;
transform:translateY(-300%);
transition:0.2s ease-in-out;
}
&:after{
width:20px;
height:20px;
transform:translateY(300%);
background-image:url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/383755/like.svg');
}
&.cut{
&:before{
background-image:url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/383755/cut%20(1).svg');
}
}
&.copy{
&:before{
background-image:url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/383755/copy.svg');
}
}
&.paste{
&:before{
background-image:url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/383755/paste.svg');
}
}
&:first-of-type{
transform-origin:right;
transform:rotateY(-90deg);
background:#ccc;
border-radius:5px 0 0 5px;
}
&:nth-of-type(3){
transform-origin:left;
transform:rotateY(90deg);
background:#ccc;
border-radius:0 5px 5px 0;
}
}
&.visible{
transform:scaleY(1);
transition-delay:0s, 0.2s, 0s, 0s;
box-shadow:0 20px 20px -10px rgba(0,0,0,0.5);
.close{
transition-delay:0.75s;
transform:scale(1);
&:hover{
transform:scale(1) rotate(90deg);
transition-delay:0s;
}
}
&:before{
transition-delay:0.3s;
background:rgba(255,255,255,0.25);
backdrop-filter: blur(0.25px);
box-shadow:0px -25px 450px 10px rgba(255,255,255,0.25);
}
button{
transition-delay:0.4s, 0s, 0s;
transform:rotateY(0deg);
background:#fff;
&.active{
padding-left:20px;
padding-right:0px;
&.cut{
padding-left:10px;
}
&:before{
transition-delay:0.25s;
transform:translateY(-300%);
}
&:hover{
&:before{
transition-delay:0.25s;
transform:translateY(-300%);
}
}
&.paste{
&:after{
transition-delay:0.25s;
transform:translateY(calc(-50% - 2.5px)) translateX(-2.5px);
}
}
&:after{
transition-delay:0.25s;
transform:translateY(calc(-50% - 2.5px));
}
}
&:hover{
background:yellow;
padding-left:20px;
padding-right:0px;
&.cut{
padding-left:10px;
}
&:before{
transform: translateY(-50%);
}
}
}
}
}
#wrap{
width:90%;
max-width:700px;
&.pasted{
p{
.selection{
animation:paste 1s ease-in-out 2 alternate;
@keyframes paste{
to{
color:transparent;
}
}
}
}
}
&:not(.nocut).active{
.selection{
background:transparent;
}
}
&:not(.nocut){
.selection{
color:transparent;
transition:none;
span.word{
&:before, &:after{
animation:remove1 1.4s ease-in-out 1 forwards;
@keyframes remove1{
to{
transform:translate(calc(-50% + 100px), 50vh) rotate(90deg);
opacity:0;
}
}
@keyframes remove2{
to{
transform:translate(calc(-50% - 100px), 50vh) rotate(-90deg);
opacity:0;
}
}
}
&:after{
animation:remove2 1.4s ease-in-out 1 forwards;
}
}
}
}
&.active{
&.copy{
.selection{
position:relative;
z-index:-1;
&:before{
content:'';
position:absolute;
width:200vw;
height:10px;
background:#fff;
box-shadow:0 0 40px 20px #fff;
left:-50vw;
top:-50px;
animation:scan 2s ease-in-out 1 forwards, glow 2s ease-in-out 1 forwards;
@keyframes scan{
to{
top:calc(100% + 50px);
}
}
@keyframes glow{
0%{
opacity:0.25;
}
10%{
opacity:1;
}
45%{
box-shadow:0 0 40px 20px #fff;
}
50%{
box-shadow:0 0 40px 80px #fff;
}
55%{
box-shadow:0 0 40px 20px #fff;
}
90%{
opacity:1;
}
100%{
opacity:0.25;
}
}
}
}
}
.selection{
animation:shift 0.4s ease-in-out 1 forwards;
background:linear-gradient(to right, yellow 50%, #222 50%);
background-size:200% 200%;
background-position:0% 50%;
@keyframes shift{
from{
background-position:0% 50%;
color:#222;
}
to{
background-position:-100% 50%;
color:#fff;
}
}
@keyframes shift2{
0%{
background-position:0% 50%;
color:#fff;
}
25%{
background-position:0% 50%;
color:#fff;
}
75%{
background-position:-100% 50%;
color:#222;
}
100%{
background-position:-100% 50%;
color:#222;
}
}
}
*{
&::selection {
background: transparent;
}
&:focus, &:active{
&::selection {
background: transparent;
}
}
}
}
&.nocut:not(.active){
*{
&::selection {
background: yellow;
}
&:focus, &:active, &::first-letter{
&::selection {
background: yellow;
}
}
}
}
p{
font-family:'Crimson Text', serif;
font-size:1.25rem;
line-height:1.5;
color:#222;
padding:10px;
display:inline-block;
overflow:hidden;
.selection{
position:relative;
background:transparent;
transition:0.3s ease-in-out;
padding:5px 0;
span.word{
position:relative;
color:transparent;
transition:none;
width:auto;
box-sizing:border-box;
display:inline-block;
@for $i from 1 through 20{
&:nth-of-type(#{$i}n){
&:before, &:after{
animation-delay:#{$i/60}s;
}
&:nth-of-type(even){
&:before, &:after{
animation-delay:#{$i/60}s;
}
}
}
}
@for $j from 1 through 12{
&:nth-of-type(#{$j}n){
&:before, &:after{
animation-duration:#{0.75 + ($j/10)}s;
}
}
}
&:before, &:after{
content:attr(data-word);
color:#222;
position:absolute;
left:50%;
top:50%;
transform:translate(-50%, -50%) rotate(0deg);
display:inline-block;
will-change:transform;
backface-visibility:hidden;
width:100%;
box-sizing:border-box;
clip-path: polygon(0 0, 50% 0, 50% 100%, 0% 100%);
}
&:after{
clip-path: polygon(50% 0, 100% 0, 100% 100%, 50% 100%);
}
}
}
}
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.