Анимация “конверт”

373

24 ноября 2016, 09:54

Как сделать подобное на jQuery/JavaScript/CSS

Есть ромб, разделенный условно на четыре части и при наведении на него мышкой эти четыре части раскрываются в квадрат, т.е весь ромб превращается в квадрат, т.е типо как открытие конверта, только с четырех сторон. Внутри которого скрытый текст

Answer 1

Вот пример реализации на css.

Сейчас конверт открывается при наведении, но с помощью JavaScript (и минимум изменений в css) можно навесить обработчик, который будет открывать конверт при клике.

body { 
  margin: 70px; 
  background: #f7f7f7; 
} 
.envelope { 
  position: relative; 
  background: #082cde; 
  width: 80px; 
  height: 80px; 
  text-align: center; 
  line-height: 80px; 
} 
.envelope:hover .part1, 
.envelope:hover .part3 { 
  -webkit-transform: rotateX(-180deg); 
  transform: rotateX(-180deg); 
} 
.envelope:hover .part2, 
.envelope:hover .part4 { 
  -webkit-transform: rotateY(-180deg); 
  transform: rotateY(-180deg); 
} 
.envelope:hover .part1 { 
  border-bottom-color: #082cde; 
} 
.envelope:hover .part2 { 
  border-left-color: #082cde; 
} 
.envelope:hover .part3 { 
  border-top-color: #082cde; 
} 
.envelope:hover .part4 { 
  border-right-color: #082cde; 
} 
.envelope:hover .envelope__cover { 
  display: inline-block; 
} 
.envelope .envelope__cover { 
  -webkit-transition: all 0.5s linear; 
  transition: all 0.5s linear; 
  color: white; 
  vertical-align: middle; 
  line-height: normal; 
  display: none; 
} 
.envelope .envelope__part { 
  width: 0; 
  height: 0; 
  border: 40px solid transparent; 
  -webkit-transition: all 0.5s ease; 
  transition: all 0.5s ease; 
  position: absolute; 
} 
.envelope .part1 { 
  border-bottom-color: #1d40ef; 
  -webkit-transform-origin: bottom; 
  -ms-transform-origin: bottom; 
  transform-origin: bottom; 
} 
.envelope .part2 { 
  border-left-color: #1d40ef; 
  -webkit-transform-origin: left; 
  -ms-transform-origin: left; 
  transform-origin: left; 
} 
.envelope .part3 { 
  border-top-color: #1d40ef; 
  -webkit-transform-origin: top; 
  -ms-transform-origin: top; 
  transform-origin: top; 
} 
.envelope .part4 { 
  border-right-color: #1d40ef; 
  -webkit-transform-origin: right; 
  -ms-transform-origin: right; 
  transform-origin: right; 
}

<div class="envelope"> 
  <div class="envelope__part part1"></div> 
  <div class="envelope__part part2"></div> 
  <div class="envelope__part part3"></div> 
  <div class="envelope__part part4"></div> 
  <div class="envelope__cover">Inner content</div> 
</div>

Из интересного: каждая из четырех частей (которые открываются) являются простыми div, у который высота и ширина равны 0, но задан border c соответствующим цветом границы (например, для нижней грани - border-bottom-color), который позволяет отображать блок в виде треугольника.

Для поворота на 180 градусов использовал transform: rotateX() и `transform: rotateY(), а чтобы поворот был относительно нужной грани (например, для нижнего треугольника, относительно его нижней стороны) - transform-origin.

Исходники SCSS:

$outerColor: #1d40ef;
$innerColor: #082cde;
$envelopeSizePx: 80;
body {
  margin: 70px;
}
.envelope {
  position: relative;
  background: $innerColor;
  width: $envelopeSizePx+px;
  height: $envelopeSizePx+px;
  text-align: center;
  line-height: $envelopeSizePx+px;
  &:hover {
    .part1, .part3 {
      transform: rotateX(-180deg);
    } 
    .part2, .part4 {
      transform: rotateY(-180deg);
    }
    .part1 {
      border-bottom-color: $innerColor;
    }
    .part2 {
      border-left-color: $innerColor;
    }
    .part3 {
      border-top-color: $innerColor;
    }
    .part4 {
      border-right-color: $innerColor;
    }
    .envelope__cover {
      display: inline-block;
    }
  }
  .envelope__cover {
    color: white;   
    vertical-align: middle;
    line-height: normal;
    display: none;
  }
  .envelope__part {
    width: 0; height: 0;
    border: $envelopeSizePx/2+px solid transparent;
    transition: all 0.5s ease;
    position: absolute;
  }
  .part1 {
    border-bottom-color: $outerColor;
    transform-origin: bottom;
  }
  .part2 {
    border-left-color: $outerColor;
    transform-origin: left;
  }
  .part3 {
    border-top-color: $outerColor;
    transform-origin: top;
  }
  .part4 {
    border-right-color: $outerColor;
    transform-origin: right;
  }
}

Answer 2

Здравствуйте, попробуйте так.

.romb-main{ 
 margin:150px; 
} 
 
#romb{ 
  height:200px; 
  width:200px; 
  background:navy; 
    transform: rotate(45deg) ; 
    -webkit-transform: rotate(45deg) ; 
    -moz-transform: rotate(45deg) ; 
    -o-transform: rotate(45deg) ; 
    -ms-transform: rotate(45deg) ; 
} 
#romb:hover{ 
  cursor:pointer; 
  } 
#romb:hover > .r-tr{ 
  position:absolute; 
width: 0; 
height: 0; 
right:0px; 
top:-100px; 
border-style: solid; 
border-width: 0 100px 100px 100px; 
border-color: transparent transparent #007bff transparent; 
} 
#romb:hover > .l-tr{ 
  position:absolute; 
width: 0; 
height: 0; 
border-style: solid; 
border-width: 100px 100px 100px 0; 
border-color: transparent #007bff transparent transparent; 
left:-100px; 
top:0; 
} 
#romb:hover > .ld-tr{ 
width: 0; 
height: 0; 
border-style: solid; 
border-width: 100px 0 100px 100px; 
border-color: transparent transparent transparent #007bff; 
position:absolute; 
bottom:0; 
right:-100px; 
} 
 
#romb:hover > .rd-tr{ 
width: 0; 
height: 0; 
border-style: solid; 
border-width: 100px 100px 0 100px; 
border-color: #007bff transparent transparent transparent; 
position:absolute; 
left:0; 
bottom:-100px; 
} 
.text{ 
display:none; 
  color: #fff; 
    font-size: 25px; 
    height: 200px; 
    padding: 50px; 
    text-align: center; 
    vertical-align: baseline; 
    width: 200px; 
    transform: rotate(-45deg) ; 
    -webkit-transform: rotate(-45deg) ; 
    -moz-transform: rotate(-45deg) ; 
    -o-transform: rotate(-45deg) ; 
    -ms-transform: rotate(-45deg) ;   
} 
 
#romb:hover > .text{ 
  display:block; 
}

<div class='romb-main'> 
 
<div id='romb'> 
<div class='text'> 
Text 
</div> 
 <div class='l-tr'></div> 
 <div class='r-tr'></div>  
 <div class='ld-tr'></div> 
 <div class='rd-tr'></div> 
</div> 
 
</div>

Если добавить css анимацию будет более плавно все происходить.

ПОСЛЕДНИЕ ВОПРОСЫ

Все вопросы

ТОП-10

Все популярные вопросы

Загрузить страницу с нужным содержимом

. ...

409

jQuery

Несколько значений переменной JS?

Если пользователь вводит в текстовую форму допустим: "open google" Так вот и мы проверяем через if если он это ввел тогда откроем ему гугл window. open( 'http://google....

372

jQuery

Как через this удалять файл в нужном input'е?

. ...

523

jQuery

jQuery: улучшение кода функции для замены одних тэгов на другие

Не вдаваясь в то, зачем это нужно: эта функция заменяет собтвенные тэги (как, впрочем, и любые существующие, имя которых указано в параметре)...

317