Выберите в блоках ниже событие, состояние и фразу, которые вам больше всего нравятся, перетащите их в пустое поле — и получите мини-памятку о том, как проявить внимание к близким.
<![CDATA[<style>
.draggable img
{width:100%;}
[name="drop-zone"] .content
{display:flex;width:100%;height:100%;padding:20px; flex-direction: column; align-items: center;
justify-content: center;}
[name="drop-zone"] .content .object
{background:transparent;}
[name="drop-zone"] .content .object .content
{background:transparent!important;}
[name="drop-zone"] .content > div
{
margin: 0px 0;
max-width:345px;
}
.body > [name*="event_"], .body > [name*="state_"], .body > [name*="phrase_"]
{
/*transition: opacity 0.5s;*/
cursor: grab;
cursor: -moz-grab;
cursor: -webkit-grab;
}
.body > [name*="event_"] .content,
.body > [name*="state_"] .content,
.body > [name*="phrase_"] .content
{transition: opacity 0.5s;}
.dropped .content
{
transition: opacity 0.5s;
opacity: 0.4!important;
}
[name="result_btn"]
{display:none;}
[name="result_1_repeat"],
[name="result_2_repeat"],
[name="result_3_repeat"]
{cursor:pointer!important;}
[name*="coop_code"]
{opacity:0;transition: opacity 0.5s;}
[name*="coop_code"].coop_show
{opacity:1;transition: opacity 0.5s;}
[name*="result_"]
{
display:none;
}
[name="result_1_1"].active {left:228px!important;}
[name="result_1_2"].active {left:125px!important;}
[name="result_1_3"].active {left:1099px!important;}
[name="result_1_4"].active {left:40px!important;}
[name="result_1_5"].active {left:177px!important;}
[name="result_1_6"].active {left:125px!important;}
[name="result_1_7"].active {left:125px!important;}
[name="result_1_repeat"].active {left:175px!important;}
[name="result_1_share"].active {left:392px!important;}
[name="result_1_coop"].active {left:607px!important;}
[name="result_1_coop_code"].active {left:730px!important;}
[name="result_2_1"].active {left:181px!important;}
[name="result_2_2"].active {left:40px!important;}
[name="result_2_3"].active {left:1099px!important;}
[name="result_2_4"].active {left:124px!important;}
[name="result_2_5"].active {left:124px!important;}
[name="result_2_6"].active {left:124px!important;}
[name="result_2_7"].active {left:175px!important;}
[name="result_2_repeat"].active {left:174px!important;}
[name="result_2_share"].active {left:392px!important;}
[name="result_2_coop"].active {left:606px!important;}
[name="result_2_coop_code"].active {left:730px!important;}
[name="result_3_1"].active {left:224px!important;}
[name="result_3_2"].active {left:51px!important;}
[name="result_3_3"].active {left:1099px!important;}
[name="result_3_4"].active {left:139px!important;}
[name="result_3_5"].active {left:139px!important;}
[name="result_3_6"].active {left:175px!important;}
[name="result_3_7"].active {left:139px!important;}
[name="result_3_repeat"].active {left:175px!important;}
[name="result_3_share"].active {left:392px!important;}
[name="result_3_coop"].active {left:607px!important;}
[name="result_3_coop_code"].active {left:730px!important;}
</style>
<script>
var DragManager = new function () {
/**
* составной объект для хранения информации о переносе:
* {
* elem - элемент, на котором была зажата мышь
* avatar - аватар
* downX/downY - координаты, на которых был mousedown
* shiftX/shiftY - относительный сдвиг курсора от угла элемента
* }
*/
var dragObject = {};
var self = this;
function onMouseDown(e) {
if (e.which != 1) return;
var elem = e.target.closest('.draggable');
if (!elem) return;
dragObject.elem = elem;
// запомним, что элемент нажат на текущих координатах pageX/pageY
dragObject.downX = e.pageX;
dragObject.downY = e.pageY;
return false;
}
function onMouseMove(e) {
if (!dragObject.elem) return; // элемент не зажат
if (!dragObject.avatar) { // если перенос не начат...
var moveX = e.pageX - dragObject.downX;
var moveY = e.pageY - dragObject.downY;
// если мышь передвинулась в нажатом состоянии недостаточно далеко
if (Math.abs(moveX) < 3 && Math.abs(moveY) < 3) {
return;
}
// начинаем перенос
dragObject.avatar = createAvatar(e); // создать аватар
if (!dragObject.avatar) { // отмена переноса, нельзя "захватить" за эту часть элемента
dragObject = {};
return;
}
// аватар создан успешно
// создать вспомогательные свойства shiftX/shiftY
var coords = getCoords(dragObject.avatar);
dragObject.shiftX = dragObject.downX - coords.left;
dragObject.shiftY = dragObject.downY - coords.top;
dragObject.name = $(dragObject.avatar).attr('name');
startDrag(e); // отобразить начало переноса
}
// отобразить перенос объекта при каждом движении мыши
dragObject.avatar.style.left = e.pageX - dragObject.shiftX + 'px';
dragObject.avatar.style.top = e.pageY - dragObject.shiftY + 'px';
return false;
}
function onMouseUp(e) {
if (dragObject.avatar) { // если перенос идет
finishDrag(e);
}
// перенос либо не начинался, либо завершился
// в любом случае очистим "состояние переноса" dragObject
dragObject = {};
}
function finishDrag(e) {
var dropElem = findDroppable(e);
if (!dropElem) {
self.onDragCancel(dragObject);
} else {
var clone = dragObject;
clone.elem.style = '';
var clonenode = clone.elem.cloneNode(true)
self.onDragEnd(clone, dropElem);
dragObject.avatar.rollback();
dragObject.avatar.click();
}
}
function createAvatar(e) {
// запомнить старые свойства, чтобы вернуться к ним при отмене переноса
var avatar = dragObject.elem;
var old = {
parent: avatar.parentNode,
nextSibling: avatar.nextSibling,
position: avatar.position || '',
left: $(avatar).css("left") || '',
top: $(avatar).css("top") || '',
width: $(avatar).css("width") || '',
height: $(avatar).css("height") || '',
name: $(avatar).attr("name") || '',
zIndex: avatar.zIndex || ''
};
// функция для отмены переноса
avatar.rollback = function () {
old.parent.insertBefore(avatar, old.nextSibling);
avatar.style.position = old.position;
avatar.style.left = old.left;
avatar.style.top = old.top;
avatar.style.width = old.width;
avatar.style.height = old.height;
avatar.style.zIndex = old.zIndex
};
return avatar;
}
function startDrag(e) {
var avatar = dragObject.avatar;
// инициировать начало переноса
document.body.appendChild(avatar);
avatar.style.zIndex = 9999;
avatar.style.position = 'absolute';
}
function findDroppable(event) {
// спрячем переносимый элемент
dragObject.avatar.hidden = true;
// получить самый вложенный элемент под курсором мыши
var elem = document.elementFromPoint(event.clientX, event.clientY);
// показать переносимый элемент обратно
dragObject.avatar.hidden = false;
if (elem == null) {
// такое возможно, если курсор мыши "вылетел" за границу окна
return null;
}
return $('.droppable');
}
document.onmousemove = onMouseMove;
document.onmouseup = onMouseUp;
document.onmousedown = onMouseDown;
this.onDragEnd = function (dragObject, dropElem) {};
this.onDragCancel = function (dragObject) {};
};
function getCoords(elem) { // РєСЂРѕРјРµ IE8-
var box = elem.getBoundingClientRect();
return {
top: box.top + pageYOffset,
left: box.left + pageXOffset
};
}
DragManager.onDragCancel = function (dragObject) {
dragObject.avatar.rollback();
};
DragManager.onDragEnd = function (dragObject, dropElem) {
console.log(dragObject);
var drag_name = $(dragObject.elem).attr('name');
if(drag_name.includes("state"))
{
$('[name*="state_"]').removeClass('dropped');
$('[name="'+ drag_name +'"]').addClass('dropped');
$('.state_wrap').html('');
$('[name="'+ drag_name +'"]')
.clone()
.css({
'position' : 'relative',
'top' : 'auto',
'left' : 'auto',
'display' : 'none'
})
.removeClass('dropped')
.removeClass('draggable')
.appendTo('.state_wrap')
.fadeIn(500);
} else if (drag_name.includes("phrase")){
$('[name*="phrase_"]').removeClass('dropped');
$('[name="'+ drag_name +'"]').addClass('dropped');
$('.phrase_wrap').html('');
$('[name="'+ drag_name +'"]')
.clone()
.css({
'position' : 'relative',
'top' : 'auto',
'left' : 'auto',
'display' : 'none'
})
.removeClass('dropped')
.removeClass('draggable')
.appendTo('.phrase_wrap')
.fadeIn(500);
} else if (drag_name.includes("event")){
$('[name*="event_"]').removeClass('dropped');
$('.event_wrap').html('');
$('[name="'+ drag_name +'"]').addClass('dropped');
$('[name="'+ drag_name +'"]')
.clone()
.css({
'position' : 'relative',
'top' : 'auto',
'left' : 'auto',
'display' : 'none'
})
.removeClass('dropped')
.removeClass('draggable')
.appendTo('.event_wrap')
.fadeIn(500);
}
showResultBtn();
};
function showResultBtn()
{
if($('.event_wrap div').length != 0 && $('.phrase_wrap div').length != 0 && $('.state_wrap div').length != 0)
{
$('[name="result_btn"]').fadeIn(500);
}
};
$('[name="result_btn"]').on('click', function(e){
e.preventDefault();
$('[name="result_btn"]').fadeOut(500);
$('[name*="hide_item"], [name*="event_"], [name*="state_"], [name*="phrase_"], [name="drop-zone"]').fadeOut(500);
$('.body > [name*="event_"], .body > [name*="state_"], .body > [name*="phrase_"]').removeClass('dropped');
showResult();
});
var r_number = '';
function showResult()
{
r_number = $('.event_wrap .object').attr('name');
r_number = r_number.substring(6, r_number.length);
$([document.documentElement, document.body]).animate({
scrollTop: $('[name="top_text"]').offset().top + 140
}, 800);
$('[name*="result_'+ r_number +'"]').addClass('active').delay(500).fadeIn();
};
$('[name*="_repeat"]').on('click', function(e){
e.preventDefault();
setTimeout(function() {$('[name*="result_"]').removeClass('active');}, 500);
$([document.documentElement, document.body]).animate({
scrollTop: $('[name="top_text"]').offset().top + 140
}, 800);
$('[name*="result_"]').fadeOut(500);
$('.event_wrap, .phrase_wrap, .state_wrap').html('');
$('[name="result_btn"]').hide();
$('[name*="hide_item"], [name*="event_"], [name*="state_"], [name*="phrase_"], [name="drop-zone"]').delay(500).fadeIn(500);
});
jQuery('[name*="_share"]').on('click', function(e){
e.preventDefault();
var s_url = 'https://vk.com/share.php?url=https://theblueprint.ru/culture/special/mir-kak-blagodarit?customshare=v' + r_number;
window.open(s_url, '', 'toolbar=0,status=0,width=626,height=436');
});
$('[name*="event_"], [name*="state_"], [name*="phrase_"]').addClass('draggable');
$('[name="drop-zone"]').addClass('droppable');
//$('[name="drop-zone"] .content').append('<div class="event_wrap"></div><div class="phrase_wrap"></div><div class="state_wrap"></div>');
$('[name="result_2_coop"]').click(function(){
$('[name="result_2_coop_code"]').toggleClass('coop_show');
});
$('[name="result_1_coop"]').click(function(){
$('[name="result_1_coop_code"]').toggleClass('coop_show');
});
$('[name="result_3_coop"]').click(function(){
$('[name="result_3_coop_code"]').toggleClass('coop_show');
});
</script>]]> T
{"points":[{"id":8,"properties":{"x":0,"y":0,"z":0,"opacity":1,"scaleX":1,"scaleY":1,"rotationX":0,"rotationY":0,"rotationZ":-35}},{"id":10,"properties":{"x":0,"y":1,"z":0,"opacity":1,"scaleX":0.72,"scaleY":0.72,"rotationX":0,"rotationY":0,"rotationZ":-17}}],"steps":[{"id":9,"properties":{"duration":1.2,"delay":0,"bezier":[],"ease":"Power2.easeIn","automatic_duration":true}}],"transform_origin":{"x":0.5,"y":0.5}}
{"points":[{"id":1,"properties":{"x":0,"y":0,"z":0,"opacity":1,"scaleX":1,"scaleY":1,"rotationX":0,"rotationY":0,"rotationZ":0}},{"id":3,"properties":{"x":0,"y":0,"z":0,"opacity":1,"scaleX":1,"scaleY":1,"rotationX":0,"rotationY":0,"rotationZ":12}},{"id":4,"properties":{"x":0,"y":0,"z":0,"opacity":1,"scaleX":1,"scaleY":1,"rotationX":0,"rotationY":0,"rotationZ":-8}},{"id":6,"properties":{"x":0,"y":0,"z":0,"opacity":1,"scaleX":1,"scaleY":1,"rotationX":0,"rotationY":0,"rotationZ":0}}],"steps":[{"id":2,"properties":{"duration":0.8,"delay":0,"bezier":[],"ease":"Power0.easeNone","automatic_duration":true}},{"id":5,"properties":{"duration":0.8,"delay":0,"bezier":[],"ease":"Power0.easeNone","automatic_duration":true}},{"id":7,"properties":{"duration":0.8,"delay":0,"bezier":[],"ease":"Power0.easeNone","automatic_duration":true}}],"transform_origin":{"x":0.5,"y":0.5}}
Из каких мелочей складывается внимание к близким
иллюстрации: настя Шарандина
Проявлять внимание к окружающим важно всегда. Позвонить родителям, посочувствовать подруге или похвалить коллегу за хорошую работу — из этих мелочей и складывается забота. Вместе с платежной системой «Мир» мы создали мини-игру, которая станет напоминанием о самом важном — эмоциях, которые мы дарим близким.
Выберите в блоках ниже событие, состояние и фразу, которые вам больше всего нравятся, перетащите их в пустое поле — и получите мини-памятку о том, как проявить внимание к близким.
Хвалить и поддерживать сокурсников и коллег — важная часть рабочей рутины. Помните об этом, когда собираетесь на брейншторминг или готовите вместе проект. Но не менее важно быть внимательным к себе и своим потребностям и совершенствовать свои навыки в том, что вам близко. Давно хотите пройти курс по английскому или программированию? Вам будет вдвойне приятно получить за покупку курса бонусы, которые можно потратить на приятные мелочи для себя или близких. Платежная система «Мир» запустила акцию для молодежи — кешбэк 10% смогут получить держатели национальной карты моложе 25 лет за оплату курсов на образовательных платформах Skillbox, SkillFactory, Geekbrains, а также за доставку любимых блюд из «Яндекс Еда» и покупки в магазинах одежды, косметики и в социальной сети «ВКонтакте». Активировать акцию, узнать полный список участников и условия можно на сайте или в приложении «Привет, Мир!» (скачайте в App Store и Google Play).
Хвалить и поддерживать сокурсников и коллег — важная часть рабочей рутины. Помните об этом, когда собираетесь на брейншторминг или готовите вместе проект. Но не менее важно быть внимательным к себе и своим потребностям и совершенствовать свои навыки в том, что вам близко. Давно хотите пройти курс по английскому или программированию? Вам будет вдвойне приятно получить за покупку курса бонусы, которые можно потратить на приятные мелочи для себя или близких. Платежная система «Мир» запустила акцию для молодежи — кешбэк 10% смогут получить держатели национальной карты моложе 25 лет за покупки в магазинах «Золотое яблоко», Befree, Lichi, Street Beat и многих других. Активировать акцию, узнать полный список участников и условия можно на сайте или в приложении «Привет, Мир!» (скачайте в App Store и Google Play).
Находить время для семьи — один из простых способов сказать близким спасибо. К тому же получать вместе положительные эмоции всегда приятно. Появился свободный выходной — отправляйтесь за покупками с мамой или сестрой. Выбирать друг другу наряды и косметику, пообедать пиццей, а потом сходить в кино — звучит как идеальный план. Вдвойне приятно после расслабленного выходного получить бонусы, которые можно будет потратить на приятные мелочи для себя или близких. Платежная система «Мир» запустила акцию для молодежи — кешбэк 10% смогут получить держатели национальной карты моложе 25 лет за покупки в магазинах «Золотое яблоко», Befree, Lichi или Street Beat и многих других. Активировать акцию, узнать полный список участников и условия можно на сайте или в приложении «Привет, Мир!» (скачайте в App Store и Google Play).
РЕКЛАМА · АО «НАЦИОНАЛЬНАЯ СИСТЕМА ПЛАТЕЖНЫХ КАРТ», LdtCKEkFC
РЕКЛАМА · АО «НАЦИОНАЛЬНАЯ СИСТЕМА ПЛАТЕЖНЫХ КАРТ», LdtCKEkFC
РЕКЛАМА · АО «НАЦИОНАЛЬНАЯ СИСТЕМА ПЛАТЕЖНЫХ КАРТ», LdtCKEkFC
РЕКЛАМА · АО «НАЦИОНАЛЬНАЯ СИСТЕМА ПЛАТЕЖНЫХ КАРТ», LdtCKEkFC
