T
{"points":[{"id":4,"properties":{"x":0,"y":0,"z":0,"opacity":1,"scaleX":1,"scaleY":1,"rotationX":0,"rotationY":0,"rotationZ":0}},{"id":6,"properties":{"x":0,"y":0,"z":0,"opacity":1,"scaleX":1.02,"scaleY":1.02,"rotationX":0,"rotationY":0,"rotationZ":0}}],"steps":[{"id":5,"properties":{"duration":1.6,"delay":0,"bezier":[],"ease":"Sine.easeInOut","automatic_duration":true}}],"transform_origin":{"x":0.5,"y":0.5}}
C драгоценностями Shiphra подбираем золотой ключ к любому настроению.
Знаем, как непросто соединить планы на день с аксессуарами. Но если утренний вайб совпадет с украшениями Shiphra из коллекции «10», мир (буквально!) заиграет. Перетащите элемент, который соответствует вашему настроению, в центр круга и узнаете, какое украшение вам выпадет.
иллюстрации: Лиза Никонорова
{"points":[{"id":7,"properties":{"x":0,"y":0,"z":0,"opacity":1,"scaleX":1,"scaleY":1,"rotationX":0,"rotationY":0,"rotationZ":0}},{"id":9,"properties":{"x":0,"y":0,"z":0,"opacity":1,"scaleX":1.05,"scaleY":1.05,"rotationX":0,"rotationY":0,"rotationZ":0}}],"steps":[{"id":8,"properties":{"duration":1.6,"delay":0,"bezier":[],"ease":"Sine.easeInOut","automatic_duration":true}}],"transform_origin":{"x":0.5,"y":0.5}}
<![CDATA[<style>
[name="result_btn"],
[name="repeat_btn"],
[name="share_btn"]
{cursor:pointer;!important}
body > [name*="var_"].cloned-avatar img
{
max-height:200px!important;
max-width: 200px!important;
}
[name*="var_"].dropped
{
opacity:0;
transition:all 0.3s;
}
[name="drop-zone"] .var_wrap,
[name="drop-zone"] .var_wrap .object
{
width: 100%;
height: 100%;
margin: auto;
}
[name="drop-zone"] .var_wrap .content
{
background:transparent!important;
display:flex;
width:100%;
height:100%;
align-items: center;
justify-content: center;
}
[name="drop-zone"] .var_wrap .content img
{
width:50%!important;
max-width: 200px!important;
}
[name="drop-zone"] .var_wrap [name="var_4"] .content img,
[name="drop-zone"] .var_wrap [name="var_3"] .content img
{
max-width: 320px!important;
}
[name="loader"].show
{
top:866px!important;
}
[name*="_repeat"],
[name*="_share"]
{
transition:all 0.3s;
cursor:pointer;
}
[name*="_repeat"]:hover .content,
[name*="_share"]:hover .content
{
transition:all 0.3s;
background-color: rgb(229, 229, 229)!important;
}
[name*="_repeat"]:hover .content span,
[name*="_share"]:hover .content span
{
transition:all 0.3s;
color: rgba(38, 28, 28, 0.56)!important;
}
#article
{
max-height:3100px!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();
}
}
function createAvatar(e) {
// запомнить старые свойства, чтобы вернуться к ним при отмене переноса
var avatar = dragObject.elem;
var old = {
parent: avatar.parentNode,
nextSibling: avatar.nextSibling,
position: avatar.style.position || '',
left: $(avatar).css("left") || '',
top: $(avatar).css("top") || '',
width: $(avatar).css("width") || '',
height: $(avatar).css("height") || '',
maxHeight: $(avatar).css("max-height") || '',
name: $(avatar).attr("name") || '',
zIndex: avatar.style.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.maxHeight = old.maxHeight;
avatar.style.zIndex = old.zIndex;
avatar.classList.remove('cloned-avatar');
};
return avatar;
}
function startDrag(e) {
var avatar = dragObject.avatar;
// инициировать начало переноса
document.body.appendChild(avatar);
avatar.style.zIndex = 9999;
avatar.style.position = 'absolute';
avatar.style.maxHeight = '200px';
avatar.style.width = 'auto';
avatar.classList.add('cloned-avatar');
}
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');
// проверим, является ли найденный элемент droppable
var droppableElem = $(elem).closest('.droppable');
console.log(droppableElem);
if (droppableElem.length > 0) {
return droppableElem;
}
return null;
}
document.onmousemove = onMouseMove;
document.onmouseup = onMouseUp;
document.onmousedown = onMouseDown;
this.onDragEnd = function (dragObject, dropElem) {};
this.onDragCancel = function (dragObject) {};
};
function getCoords(elem) {
var box = elem.getBoundingClientRect();
return {
top: box.top + pageYOffset,
left: box.left + pageXOffset
};
}
DragManager.onDragCancel = function (dragObject) {
dragObject.avatar.rollback();
};
$('[name*="var_"').addClass('draggable');
$('[name="drop-zone"]').addClass('droppable');
$('[name="drop-zone"] .content').append('<div class="var_wrap"></div>');
var itemId = 0;
DragManager.onDragEnd = function (dragObject, dropElem) {
var drag_name = $(dragObject.elem).attr('name');
itemId = $(dragObject.elem).attr('name').split('_')[1];
showLoader();
if(drag_name.includes("var_"))
{
$('[name*="var_"]').removeClass('dropped');
$('[name="'+ drag_name +'"]').addClass('dropped');
$('.var_wrap').html('');
$('[name="'+ drag_name +'"]')
.clone()
.css({
'position' : 'relative',
'top' : 'auto',
'left' : 'auto',
'display' : 'none'
})
.removeClass('dropped')
.removeClass('draggable')
.appendTo('.var_wrap')
.fadeIn(500);
}
console.log(itemId);
setTimeout(function() {
showItem(itemId);
}, 2000);
};
function showLoader()
{
$('[name*="start_"], [name*="var_"]').fadeOut(300);
$('[name="loader"]').addClass('show').delay(300).fadeIn(300).click();
}
function showItem(id)
{
$('[name*="start_"], [name*="reset_btn"], [name^="loader"], [name="drop-zone"]').fadeOut(100);
var currentTopLine = $(`.object[name="topline_${id}"]`);
var currentTopLineValue = parseInt(currentTopLine.css('top'));
$(`.object[name^="item_${id}"]`).each(function () {
const $element = $(this);
let originalTop = parseInt($element.css('top'), 0 || 0);
if (!$element.data('original-top')) {
$element.data('original-top', originalTop);
}
let newTopValue = (originalTop - currentTopLineValue) + 640;
let currentZ = parseInt($element.css('z-index'), 10) || 0;
$element.fadeOut(0, function () {
$element.css('top', newTopValue + 'px');
$element.css('z-index', currentZ + 100);
$element.addClass('active').fadeIn(300);
});
});
};
$('[name*="_repeat"]').click(function () {
hideItem(itemId);
});
function hideItem() {
$(`.object[name*="item_"].active`).each(function () {
const $element = $(this);
let originalTop = parseInt($element.data('original-top'), 0 || 0);
$element.fadeOut(300, function () {
$element.css('top', originalTop + 'px');
});
});
$('.var_wrap').html('');
$('[name="drop-zone"], [name="loader_bg"], [name*="var_"], [name*="start_"]').delay(300).fadeIn(300);
};
jQuery('[name*="_share"]').on('click', function(e){
e.preventDefault();
var s_url = 'https://vk.com/share.php?url=https://theblueprint.ru/fashion/specials/shiphra-magiceskij-kod?customshare=v' + itemId;
window.open(s_url, '', 'toolbar=0,status=0,width=626,height=436');
});
</script>]]> {"points":[{"id":7,"properties":{"x":0,"y":0,"z":0,"opacity":1,"scaleX":1,"scaleY":1,"rotationX":0,"rotationY":0,"rotationZ":0}},{"id":9,"properties":{"x":0,"y":0,"z":0,"opacity":1,"scaleX":1,"scaleY":1,"rotationX":0,"rotationY":-7,"rotationZ":0}}],"steps":[{"id":8,"properties":{"duration":7,"delay":0,"bezier":[],"ease":"Sine.easeInOut","automatic_duration":true}}],"transform_origin":{"x":0.5,"y":0.5}}
Перетащите любой элемент в центр круга
Новая коллекция носит название «10», а самой компании Shiphra подошла бы цифра 1. Потому что это первый в мире бренд, все украшения которого созданы только из лабораторно выращенных бриллиантов, изумрудов, сапфиров и рубинов. Экологически безопасная добыча позволяет планете не бугриться еще более глубокими карьерами, приисками и кимберлитовыми трубками, а ювелирам — заполучить камни неземной чистоты и выдающейся каратности.
Такой подход отражается и в самом слове Shiphra. Сюрприз: оно происходит не от французского chiffre («цифра») и не от арабского sifr («ноль»), а от имени женщины, укрывшей младенца Моисея. Библейская история спасения разворачивается еще раз — только теперь речь идет о недрах Земли.
С 2018 года, когда бренд появился на свет, дизайнеры Shiphra разработали семь коллекций. Самой новой стала «10». Она объединила в себе точность Булевой алгебры (ведь кодом из единиц и нолей можно оцифровать любую историю, песню и фото) с мириадами толкований этих знаков в разных религиях и культурах. 10 — число бесконечных возможностей в фэншуй, количество заповедей в христианстве, список добрых деяний в буддизме и веха, которой люди в любой точке мира отмеряют года.
Полсотни украшений коллекции разделены на три группы — в первой число «10» состоит из крепко спаянных арабских цифр, во второй абстрактные единица и ноль держатся друг от друга на расстоянии, а в третьей линия вписана в круг бесконечности. И только вам решать, какой смысл обретет число 10 в вашей ювелирной коллекции.
Бутик Shiphra
Москва, Петровка, 5
{"points":[{"id":7,"properties":{"x":0,"y":0,"z":0,"opacity":1,"scaleX":1,"scaleY":1,"rotationX":0,"rotationY":0,"rotationZ":0}},{"id":9,"properties":{"x":0,"y":0,"z":0,"opacity":1,"scaleX":0.93,"scaleY":0.93,"rotationX":0,"rotationY":0,"rotationZ":0}},{"id":1,"properties":{"x":0,"y":0,"z":0,"opacity":1,"scaleX":0.93,"scaleY":0.93,"rotationX":0,"rotationY":0,"rotationZ":0}},{"id":3,"properties":{"x":5,"y":0,"z":0,"opacity":1,"scaleX":0.93,"scaleY":0.93,"rotationX":0,"rotationY":0,"rotationZ":0}},{"id":5,"properties":{"x":-5,"y":0,"z":0,"opacity":1,"scaleX":0.93,"scaleY":0.93,"rotationX":0,"rotationY":0,"rotationZ":0}},{"id":10,"properties":{"x":5,"y":0,"z":0,"opacity":1,"scaleX":0.93,"scaleY":0.93,"rotationX":0,"rotationY":0,"rotationZ":0}},{"id":12,"properties":{"x":-5,"y":0,"z":0,"opacity":1,"scaleX":0.93,"scaleY":0.93,"rotationX":0,"rotationY":0,"rotationZ":0}}],"steps":[{"id":8,"properties":{"duration":0.6,"delay":0,"bezier":[],"ease":"Sine.easeInOut","automatic_duration":true}},{"id":2,"properties":{"duration":0.1,"delay":0,"bezier":[],"ease":"Power0.easeNone","automatic_duration":true}},{"id":4,"properties":{"duration":0.1,"delay":0,"bezier":[],"ease":"Sine.easeInOut","automatic_duration":true}},{"id":6,"properties":{"duration":0.1,"delay":0,"bezier":[],"ease":"Sine.easeInOut","automatic_duration":true}},{"id":11,"properties":{"duration":0.1,"delay":0,"bezier":[],"ease":"Sine.easeInOut","automatic_duration":true}},{"id":13,"properties":{"duration":0.1,"delay":0,"bezier":[],"ease":"Sine.easeInOut","automatic_duration":true}}],"transform_origin":{"x":0.5,"y":0.5}}
{"points":[{"id":7,"properties":{"x":0,"y":0,"z":0,"opacity":1,"scaleX":1,"scaleY":1,"rotationX":0,"rotationY":0,"rotationZ":0}},{"id":9,"properties":{"x":0,"y":0,"z":0,"opacity":1,"scaleX":1,"scaleY":1,"rotationX":0,"rotationY":-7,"rotationZ":0}}],"steps":[{"id":8,"properties":{"duration":7,"delay":0,"bezier":[],"ease":"Sine.easeInOut","automatic_duration":true}}],"transform_origin":{"x":0.5,"y":0.5}}
Чтобы повесить на грудь золотую медаль, не обязательно участвовать в марафонах и чемпионатах по кроссфиту. Достаточно верить, что сегодня все планы выстрелят на 10/10. Золотая подвеска с паве из лабораторных бриллиантов в треть карата делает самую убедительную аффирмацию на успех из всех возможных.
Чокер из белого золота на двойной цепочке — это ювелирное послание не для всех, записанное двоичным кодом 1-0-1-0. При большом рвении можно его разгадать. А можно просто любоваться игрой лабораторно выращенных бриллиантов без учета их веса и хитрой раскладки.
Круг и вертикальная линия из белого золота поймали равновесие и застыли в сложной асане. Сто процентов понимания, дорогое колье: конструкцию из непохожих форм удержат в хрупком балансе только точный расчет, цветы, рукотворные бриллианты и настоящая любовь.
POV: надеть в спортзал вместо часов с пульсометром браслет из розового золота. После похожего на значок «вкл» соединения по цепочке бежит, мигая отдельными лабораторными бриллиантами, разряд в 1,19 карата. Примерно так ощущаются биты из утреннего плейлиста.
Идея исчезнуть (изо всех мессенджеров и даже аэропортов) особенно греет, если где-то на свете есть partner in crime. Пусть он составляет компанию лишь онлайн. Главное, что отдельные фигуры (в том числе и те, что отлиты из розового золота на этом жестком браслете) навсегда связаны точкой притяжения между ними.
