<div id="wrap">
<!-- section -->
<div class="section">
<div class="center">
<button id="changeDrop">Изменить поведение</button>
<div id="sources">
<div class="source">
<div class="source__content">
<span>1</span>
</div>
</div>
<div class="source">
<div class="source__content">
<span>2</span>
</div>
</div>
<div class="source">
<div class="source__content">
<span>3</span>
</div>
</div>
</div>
<div id="target"></div>
</div>
</div>
<!--/section -->
</div>
html,
body {
margin: 0;
padding: 0;
font-family: sans-serif;
font-size: 16px;
line-height: 1.4;
color: #555;
background: #fff;
}
* {
box-sizing: border-box;
}
#wrap {
position: relative;
}
.section {
padding: 40px 20px;
border-bottom: 1px solid #ddd;
&:last-child {
border-bottom: 0;
}
&--d {
background: #000;
}
}
#changeDrop {
padding: 20px;
}
#sources {
margin-top: 60px;
height: 2000px;
}
.source {
width: 30px;
height: 30px;
margin-bottom: 60px;
cursor: pointer;
user-select: none;
&:last-child {
margin-bottom: 0;
}
&__content {
position: relative;
width: 100%;
height: 100%;
line-height: 30px;
text-align: center;
background: #ddd;
}
&:hover {
box-shadow: 0 0 0 2px #aaa;
}
&--cln {
top: 0;
left: 0;
position: fixed;
z-index: 9;
pointer-events: none;
&:hover {
box-shadow: none;
}
}
&--fly {
transition: 2s ease-out;
transition-property: left, top;
z-index: 10;
}
&--drop {
transition: 1s ease-out;
transition-property: transform, opacity;
transform: translateY(30px);
opacity: 0;
}
&--hide {
transition: 1s ease-out;
transition-property: opacity;
opacity: 0;
}
}
#target {
position: fixed;
width: 30px;
height: 30px;
top: 100px;
right: 30px;
background: #fff;
box-shadow: 0 0 0 2px #f00;
}
View Compiled
var drop = true,
hang = 0,
winScrollDist = 250;
$('#changeDrop').click(function() {
if(drop) {
drop = false;
} else {
drop = true;
}
});
$('.source').click(function () {
var $source = $(this),
$target = $('#target'),
uniq = Date.now();
if (drop == true) {
hang = $source.height();
} else {
hang = 0;
}
var sOT = $source.offset().top - $(window).scrollTop(),
sOL = $source.offset().left - $(window).scrollLeft(),
tOT = $target.offset().top - $(window).scrollTop() - hang,
tOL = $target.offset().left - $(window).scrollLeft();
$source.clone().addClass('source--cln').attr('id', uniq).appendTo('body');
var $flyingElem = $('#' + uniq);
$flyingElem
.css({
top: sOT,
left: sOL
});
var appearTimeout,
flyTimeout,
removeTimeout;
function movingElem() {
clearTimeout(appearTimeout, flyTimeout, removeTimeout);
appearTimeout = setTimeout(function () {
$flyingElem
.addClass('source--fly')
.css({
top: tOT,
left: tOL
});
flyTimeout = setTimeout(function () {
if (drop == true) {
$flyingElem.addClass('source--drop');
} else {
$flyingElem.addClass('source--hide');
}
removeTimeout = setTimeout(function () {
$flyingElem.remove();
}, 3000);
}, 2000);
}, 100);
}
movingElem();
$(window).on('resize', function () {
clearTimeout(flyTimeout, removeTimeout);
tOT = $target.offset().top - $(window).scrollTop() - hang;
tOL = $target.offset().left - $(window).scrollLeft();
movingElem();
});
$(window).on('scroll', function () {
var winScroll = $(window).scrollTop();
if (winScroll > sOT + winScrollDist) {
$flyingElem.animate({
opacity: 0
}, 200);
}
});
});
This Pen doesn't use any external CSS resources.