function moveElement() {
$('[data-parent-move]').each(function() {
var $this = $(this),
object = $(this).find('[data-move]'),
valueX,
valueY,
posX,
posY;
$(this).on('mouseenter', function(){
$(this).find('[data-move]').each(function(){
posX = parseInt($(this).css('left'),10);
posY = parseInt($(this).css('top'),10);
moveOnBoard($(this), posX, posY);
})
})
function moveOnBoard($this2, posX, posY){
$this.on('mousemove', function(e){
if(e.target.closest('[data-parent-move]')){
var target = e.target.closest('[data-parent-move]');
var targetCoords = target.getBoundingClientRect();
var xCoord = e.clientX - targetCoords.left;
var yCoord = e.clientY - targetCoords.top;
if ($this2.attr('data-move') == 'plus') {
valueX = (e.pageX * -1 / $this2.attr('data-move-speed'));
valueY = (yCoord * -1 / $this2.attr('data-move-speed'));
moveSide($this2, valueX, valueY, posX, posY);
} else {
valueX = (e.pageX * 1 / $this2.attr('data-move-speed'));
valueY = (yCoord * 1 / $this2.attr('data-move-speed'));
moveSide($this2, valueX, valueY, posX, posY);
}
}
})
}
})
}
function moveSide(object, valueX, valueY, posX, posY){
object.css({
'transform' : 'translate(' + valueX + 'px,' + (valueY) + 'px)',
'transition' : 'all .2s',
'transition-timing-function' : 'ease-out'
})
}function selectStyle(){
$('.select').each(function(){
// Variables
var $this = $(this),
selectOption = $this.find('option'),
selectOptionLength = selectOption.length,
selectedOption = selectOption.filter(':selected'),
dur = 500;
$this.hide();
// Wrap all in select box
$this.wrap('<div class="select"></div>');
// Style box
$('<div>',{
class: 'select__gap',
// text: 'Please select'
text: $(this).find('option:first-child').html(),
}).insertAfter($this);
var selectGap = $this.next('.select__gap'),
caret = selectGap.find('.caret');
// Add ul list
$('<ul>',{
class: 'select__list'
}).insertAfter(selectGap);
var selectList = selectGap.next('.select__list');
// Add li - option items
for(var i = 0; i < selectOptionLength; i++){
$('<li>',{
class: 'select__item',
html: $('<span>',{
text: selectOption.eq(i).text()
})
})
.attr('data-value', selectOption.eq(i).val())
.appendTo(selectList);
}
// Find all items
var selectItem = selectList.find('li');
selectList.slideUp(0);
selectGap.on('click', function(){
if(!$(this).hasClass('open')){
$(this).addClass('open');
selectList.slideDown(dur);
selectItem.on('click', function(){
var chooseItem = $(this).data('value');
$('select').val(chooseItem).attr('selected', 'selected');
selectGap.text($(this).find('span').text());
selectList.slideUp(dur);
selectGap.removeClass('open');
});
} else {
$(this).removeClass('open');
selectList.slideUp(dur);
}
});
});
}.select{
position: relative;
display: block;
width: 100%;
margin-bottom: 20px;
border: 1px solid #bcbcbc;
outline: none !important;
&:focus{
outline: none !important;
}
}
.select__gap{
position: relative;
overflow: hidden;
margin-bottom: -1px;
padding: 10px 20px;
border-bottom: 1px solid #bcbcbc;
text-overflow: ellipsis;
white-space: nowrap;
cursor: pointer;
transition: all .3s;
&:before{
content: '\f107';
position: absolute;
right: 10px;
top: 50%;
font: normal normal normal 14px/1 FontAwesome;
transform: translateY(-50%);
transition: all .3s;
}
&.open{
margin-bottom: 15px;
&:before{
transform: translateY(-50%) rotate(180deg);
}
}
}
.select__list{
padding: 0;
li{
margin: 0;
padding: 5px 20px;
cursor: pointer;
transition: all .3s;
&:before{
display: none;
}
&:hover{
background: #f6f6f6;
color: #5e5e5e;
}
}
}