необычные переходы по блокам сайта

Необычные переходы по карточкам на сайте

Сегодня мы свами рассмотрим как сделать необычные переходы по блокам на сайте. При наведение на блок он будет накрываться элементом с описанием и анимация будет происходить с той стороны с которой зашел на блок курсор.

HTML

Элементы выводятся списком, каждый элемент это новый li. Внутри каждого элемента списка вы можете помещать любую информацию. Во внутрь блока с классом info помещается то что будет появляться при наведение курсора на элемент.

<div class='container'>
  <ul>
    <li>
      <a class='normal' href='#'>
        <img class="face_img" src="https://prog-time.ru/wp-content/uploads/2017/12/if_Html_669948.png"/>
      </a>
      <div class='info'>
        <h3>Тестовый заголовок</h3>
        <p>Спасибо что посмотрел мою запись, надеюсь я смог тебе помочь. Напиши в комментариях что ты хотел бы ещё увидеть на моем сайте.</p>
      </div>
    </li>
    <li>
      <a class='normal' href='#'>
        <img class="face_img" src="https://prog-time.ru/wp-content/uploads/2017/12/if_Html_669948.png"/>
      </a>
      <div class='info'>
        <h3>Тестовый заголовок</h3>
        <p>Спасибо что посмотрел мою запись, надеюсь я смог тебе помочь. Напиши в комментариях что ты хотел бы ещё увидеть на моем сайте.</p>
      </div>
    </li>
    <li>
      <a class='normal' href='#'>
        <img class="face_img" src="https://prog-time.ru/wp-content/uploads/2017/12/if_Html_669948.png"/>
      </a>
      <div class='info'>
        <h3>Тестовый заголовок</h3>
        <p>Спасибо что посмотрел мою запись, надеюсь я смог тебе помочь. Напиши в комментариях что ты хотел бы ещё увидеть на моем сайте.</p>
      </div>
    </li>
    <li>
      <a class='normal' href='#'>
        <img class="face_img" src="https://prog-time.ru/wp-content/uploads/2017/12/if_Html_669948.png"/>
      </a>
      <div class='info'>
        <h3>Тестовый заголовок</h3>
        <p>Спасибо что посмотрел мою запись, надеюсь я смог тебе помочь. Напиши в комментариях что ты хотел бы ещё увидеть на моем сайте.</p>
      </div>
    </li>
    <li>
      <a class='normal' href='#'>
        <img class="face_img" src="https://prog-time.ru/wp-content/uploads/2017/12/if_Html_669948.png"/>
      </a>
      <div class='info'>
        <h3>Тестовый заголовок</h3>
        <p>Спасибо что посмотрел мою запись, надеюсь я смог тебе помочь. Напиши в комментариях что ты хотел бы ещё увидеть на моем сайте.</p>
      </div>
    </li>
    <li>
      <a class='normal' href='#'>
        <img class="face_img" src="https://prog-time.ru/wp-content/uploads/2017/12/if_Html_669948.png"/>
      </a>
      <div class='info'>
        <h3>Тестовый заголовок</h3>
        <p>Спасибо что посмотрел мою запись, надеюсь я смог тебе помочь. Напиши в комментариях что ты хотел бы ещё увидеть на моем сайте.</p>
      </div>
    </li>
  </ul>
</div>
</div>

CSS

Здесь мы прописываем стили для основных элементов, а так же анимацию.

.face_img {
    width: 100px;
}
li {
  -webkit-perspective: 400px;
          perspective: 400px;
}

.info {
  -webkit-transform: rotate3d(1, 0, 0, 90deg);
          transform: rotate3d(1, 0, 0, 90deg);
  width: 100%;
  height: 100%;
  padding: 20px;
  position: absolute;
  top: 0;
  left: 0;
  border-radius: 4px;
  pointer-events: none;
  background-color: rgba(26, 188, 156, 0.9);
}

.in-top .info {
  -webkit-transform-origin: 50% 0%;
          transform-origin: 50% 0%;
  -webkit-animation: in-top 300ms ease 0ms 1 forwards;
          animation: in-top 300ms ease 0ms 1 forwards;
}

.in-right .info {
  -webkit-transform-origin: 100% 0%;
          transform-origin: 100% 0%;
  -webkit-animation: in-right 300ms ease 0ms 1 forwards;
          animation: in-right 300ms ease 0ms 1 forwards;
}

.in-bottom .info {
  -webkit-transform-origin: 50% 100%;
          transform-origin: 50% 100%;
  -webkit-animation: in-bottom 300ms ease 0ms 1 forwards;
          animation: in-bottom 300ms ease 0ms 1 forwards;
}

.in-left .info {
  -webkit-transform-origin: 0% 0%;
          transform-origin: 0% 0%;
  -webkit-animation: in-left 300ms ease 0ms 1 forwards;
          animation: in-left 300ms ease 0ms 1 forwards;
}

.out-top .info {
  -webkit-transform-origin: 50% 0%;
          transform-origin: 50% 0%;
  -webkit-animation: out-top 300ms ease 0ms 1 forwards;
          animation: out-top 300ms ease 0ms 1 forwards;
}

.out-right .info {
  -webkit-transform-origin: 100% 50%;
          transform-origin: 100% 50%;
  -webkit-animation: out-right 300ms ease 0ms 1 forwards;
          animation: out-right 300ms ease 0ms 1 forwards;
}

.out-bottom .info {
  -webkit-transform-origin: 50% 100%;
          transform-origin: 50% 100%;
  -webkit-animation: out-bottom 300ms ease 0ms 1 forwards;
          animation: out-bottom 300ms ease 0ms 1 forwards;
}

.out-left .info {
  -webkit-transform-origin: 0% 0%;
          transform-origin: 0% 0%;
  -webkit-animation: out-left 300ms ease 0ms 1 forwards;
          animation: out-left 300ms ease 0ms 1 forwards;
}

@-webkit-keyframes in-top {
  from {
    -webkit-transform: rotate3d(-1, 0, 0, 90deg);
            transform: rotate3d(-1, 0, 0, 90deg);
  }
  to {
    -webkit-transform: rotate3d(0, 0, 0, 0deg);
            transform: rotate3d(0, 0, 0, 0deg);
  }
}

@keyframes in-top {
  from {
    -webkit-transform: rotate3d(-1, 0, 0, 90deg);
            transform: rotate3d(-1, 0, 0, 90deg);
  }
  to {
    -webkit-transform: rotate3d(0, 0, 0, 0deg);
            transform: rotate3d(0, 0, 0, 0deg);
  }
}
@-webkit-keyframes in-right {
  from {
    -webkit-transform: rotate3d(0, -1, 0, 90deg);
            transform: rotate3d(0, -1, 0, 90deg);
  }
  to {
    -webkit-transform: rotate3d(0, 0, 0, 0deg);
            transform: rotate3d(0, 0, 0, 0deg);
  }
}
@keyframes in-right {
  from {
    -webkit-transform: rotate3d(0, -1, 0, 90deg);
            transform: rotate3d(0, -1, 0, 90deg);
  }
  to {
    -webkit-transform: rotate3d(0, 0, 0, 0deg);
            transform: rotate3d(0, 0, 0, 0deg);
  }
}
@-webkit-keyframes in-bottom {
  from {
    -webkit-transform: rotate3d(1, 0, 0, 90deg);
            transform: rotate3d(1, 0, 0, 90deg);
  }
  to {
    -webkit-transform: rotate3d(0, 0, 0, 0deg);
            transform: rotate3d(0, 0, 0, 0deg);
  }
}
@keyframes in-bottom {
  from {
    -webkit-transform: rotate3d(1, 0, 0, 90deg);
            transform: rotate3d(1, 0, 0, 90deg);
  }
  to {
    -webkit-transform: rotate3d(0, 0, 0, 0deg);
            transform: rotate3d(0, 0, 0, 0deg);
  }
}
@-webkit-keyframes in-left {
  from {
    -webkit-transform: rotate3d(0, 1, 0, 90deg);
            transform: rotate3d(0, 1, 0, 90deg);
  }
  to {
    -webkit-transform: rotate3d(0, 0, 0, 0deg);
            transform: rotate3d(0, 0, 0, 0deg);
  }
}
@keyframes in-left {
  from {
    -webkit-transform: rotate3d(0, 1, 0, 90deg);
            transform: rotate3d(0, 1, 0, 90deg);
  }
  to {
    -webkit-transform: rotate3d(0, 0, 0, 0deg);
            transform: rotate3d(0, 0, 0, 0deg);
  }
}
@-webkit-keyframes out-top {
  from {
    -webkit-transform: rotate3d(0, 0, 0, 0deg);
            transform: rotate3d(0, 0, 0, 0deg);
  }
  to {
    -webkit-transform: rotate3d(-1, 0, 0, 104deg);
            transform: rotate3d(-1, 0, 0, 104deg);
  }
}
@keyframes out-top {
  from {
    -webkit-transform: rotate3d(0, 0, 0, 0deg);
            transform: rotate3d(0, 0, 0, 0deg);
  }
  to {
    -webkit-transform: rotate3d(-1, 0, 0, 104deg);
            transform: rotate3d(-1, 0, 0, 104deg);
  }
}
@-webkit-keyframes out-right {
  from {
    -webkit-transform: rotate3d(0, 0, 0, 0deg);
            transform: rotate3d(0, 0, 0, 0deg);
  }
  to {
    -webkit-transform: rotate3d(0, -1, 0, 104deg);
            transform: rotate3d(0, -1, 0, 104deg);
  }
}
@keyframes out-right {
  from {
    -webkit-transform: rotate3d(0, 0, 0, 0deg);
            transform: rotate3d(0, 0, 0, 0deg);
  }
  to {
    -webkit-transform: rotate3d(0, -1, 0, 104deg);
            transform: rotate3d(0, -1, 0, 104deg);
  }
}
@-webkit-keyframes out-bottom {
  from {
    -webkit-transform: rotate3d(0, 0, 0, 0deg);
            transform: rotate3d(0, 0, 0, 0deg);
  }
  to {
    -webkit-transform: rotate3d(1, 0, 0, 104deg);
            transform: rotate3d(1, 0, 0, 104deg);
  }
}
@keyframes out-bottom {
  from {
    -webkit-transform: rotate3d(0, 0, 0, 0deg);
            transform: rotate3d(0, 0, 0, 0deg);
  }
  to {
    -webkit-transform: rotate3d(1, 0, 0, 104deg);
            transform: rotate3d(1, 0, 0, 104deg);
  }
}
@-webkit-keyframes out-left {
  from {
    -webkit-transform: rotate3d(0, 0, 0, 0deg);
            transform: rotate3d(0, 0, 0, 0deg);
  }
  to {
    -webkit-transform: rotate3d(0, 1, 0, 104deg);
            transform: rotate3d(0, 1, 0, 104deg);
  }
}
@keyframes out-left {
  from {
    -webkit-transform: rotate3d(0, 0, 0, 0deg);
            transform: rotate3d(0, 0, 0, 0deg);
  }
  to {
    -webkit-transform: rotate3d(0, 1, 0, 104deg);
            transform: rotate3d(0, 1, 0, 104deg);
  }
}
/* you can ignore this ones */
ul {
  padding: 0;
  margin: 0 0 50px;
}
ul:after {
  content: "";
  display: table;
  clear: both;
}

li {
  position: relative;
  float: left;
  width: 200px;
  height: 200px;
  margin: 5px;
  padding: 0;
  list-style: none;
}
li a {
  display: inline-block;
  vertical-align: top;
  text-decoration: none;
  border-radius: 4px;
}
li h3 {
  margin: 0;
  font-size: 16px;
  color: rgba(255, 255, 255, 0.9);
}
li p {
  font-size: 12px;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.8);
}
li .normal {
  width: 100%;
  height: 100%;
  background-color: #ECF0F1;
  color: rgba(52, 73, 94, 0.6);
  box-shadow: inset 0 2px 20px #e6ebed;
  text-align: center;
  font-size: 50px;
  line-height: 200px;
}
li .normal svg {
  pointer-events: none;
  width: 50px;
}
li .normal svg path {
  fill: rgba(52, 73, 94, 0.2);
}

.container {
  width: 840px;
  margin: 0 auto;
}

header {
  font-family: 'Bree Serif', serif;
  text-align: center;
  margin: 50px 0 25px;
  color: #34495E;
}
header p {
  margin: 0;
  color: rgba(52, 73, 94, 0.4);
}

JavaScript

Здесь в зависимости от направления курсора мы меняем класс у элемента и тем самых активирует описанную выше анимацию.

// - Noel Delgado | @pixelia_me

const nodes = [].slice.call(document.querySelectorAll('li'), 0);
const directions = { 0: 'top', 1: 'right', 2: 'bottom', 3: 'left' };
const classNames = ['in', 'out'].map(p => Object.values(directions).map(d => `${p}-${d}`)).reduce((a, b) => a.concat(b));

const getDirectionKey = (ev, node) => {
  const { width, height, top, left } = node.getBoundingClientRect();
  const l = ev.pageX - (left + window.pageXOffset);
  const t = ev.pageY - (top + window.pageYOffset);
  const x = l - width / 2 * (width > height ? height / width : 1);
  const y = t - height / 2 * (height > width ? width / height : 1);
  return Math.round(Math.atan2(y, x) / 1.57079633 + 5) % 4;
};

class Item {
  constructor(element) {
    this.element = element;
    this.element.addEventListener('mouseover', ev => this.update(ev, 'in'));
    this.element.addEventListener('mouseout', ev => this.update(ev, 'out'));
  }

  update(ev, prefix) {
    this.element.classList.remove(...classNames);
    this.element.classList.add(`${prefix}-${directions[getDirectionKey(ev, this.element)]}`);
  }}


nodes.forEach(node => new Item(node));
На этом всё!
Если у вас есть вопросы, пишите их в нашей группе - https://vk.com/progtime
Вы так же можете разместить свой вопрос на нашем форуме, где другие программисты смогут вам помочь в решение вашей задачи - https://vk.com/prog_time
В ней мы делимся своим опытом с другими начинающими программистами, поэтому обязательно ответим на ваш вопрос.
Так же прокачивайте свои навыки на нашем канале - https://www.youtube.com/c/ProgTime

35
Оставить комментарий

avatar
35 Цепочка комментария
0 Ответы по цепочке
0 Последователи
 
Популярнейший комментарий
Цепочка актуального комментария
33 Авторы комментариев
AndrewBogAndrewBogMurrayVumMurrayVumMurrayVum Авторы недавних комментариев
  Подписаться  
новее старее большинство голосов
Уведомление о
JanleF
Гость

Acticin 30gm In Usa [url=https://apcialisle.com/#]cialis canada[/url] Buy Cialis Online Us Pharmacy cialis otc Viagra Con Hipertension

JanleF
Гость

Cats Amoxil [url=https://apcialisle.com/#]Cialis[/url] Free Viagra Samples By Mail Cialis buy accutane in london

Bupbaipt
Гость
Bupbaipt

viagra cheap shipping pain meds online without doctor prescription buy cialis vancouver bc

Bupbaipt
Гость
Bupbaipt

buy cialis uk cheap http://tadmedz.com viagra for sale in new york

Bupbaipt
Гость
Bupbaipt

safest place to buy cialis click here buy cialis thailand

Arturojep
Гость
Arturojep

viagra buy no prescription viagra online without prescription how to buy viagra in india

JanleF
Гость

Access Rx Viagra [url=https://cheapcialisir.com/#]non prescription cialis online pharmacy[/url] Achat Propecia Cialis Amoxicilina Real Store

JimmyGoori
Гость
JimmyGoori

cheap cialis online canadian pharmacy https://edpillsphrm.com cialis from canada

RaymondLem
Гость
RaymondLem

buy viagra edinburgh https://www.sildwithdoctorprescription.com brand viagra cheap

Harryraw
Гость
Harryraw

best buy for levitra http://alexa24ph.com – viagra without doctor prescription how can i buy viagra

Harryraw
Гость
Harryraw

buy generic viagra from india http://tadal24ph.com – generic tadalafil can buy viagra uk

Harryraw
Гость
Harryraw

cialis without prescription http://aralenph.com – buy alaren the cheapest cialis

Harryraw
Гость
Harryraw

canadian viagra http://hydroxychloroquine24.com – buy plaquenil generic cialis india

BradleyAnync
Гость
BradleyAnync

viagra sale paypal
women viagra

BradleyAnync
Гость
BradleyAnync

buy viagra from uk
viagra

BradleyAnync
Гость
BradleyAnync

cheapest canadian pharmacy for cialis
buy viagra

BradleyAnync
Гость
BradleyAnync

buy levitra pills
viagra online

BradleyAnync
Гость
BradleyAnync

buy cialis online no prescription usa
generic viagra

BradleyAnync
Гость
BradleyAnync

buy viagra cheap usa
cheap viagra

BradleyAnync
Гость
BradleyAnync
MathewDaups
Гость
MathewDaups

generic cialis coming out
http://cialisxtl.com/ the cost of cialis

MathewDaups
Гость
MathewDaups

generic names for cialis and viagra
http://cialisxtl.com/ cialis samples request

AndrewCig
Гость
AndrewCig

sildenafil citrate generic viagra 100mg https://sildenafilprof.com
what color are cialis pills

AndrewCig
Гость
AndrewCig

viagra coupons 75% off https://sildenafilprof.com
levitra super active cheap us

Robertorell
Гость
Robertorell

generic cialis no doctor’s prescription buy cialis online canadian

Robertorell
Гость
Robertorell

does viagra or cialis help with pe generic for cialis

RichardHap
Гость
RichardHap

viagra coupon: directions for use of viagra cheap real cialis

RichardHap
Гость
RichardHap

viagra vs cialis: alternative to viagra viagra cialis pills

unsenty
Гость

cialis tadalafil 100mg [url=https://abcialisnews.com/]when will cialis be generic[/url] Proventil Price buy cialis viagra buy cialis viagra

MurrayVum
Гость
MurrayVum

pain medications without a prescription best price for generic viagra on the internet
onlinepharmacyero.com prescription drugs without prior prescription

MurrayVum
Гость
MurrayVum

pet meds without vet prescription pain medications without a prescription
onlinepharmacyero.com viagra without a prescription

MurrayVum
Гость
MurrayVum

buy prescription drugs online without is it illegal to buy prescription drugs online
onlinepharmacyero.com online ed meds

MurrayVum
Гость
MurrayVum

how to get prescription drugs without doctor viagra without a doctor prescription walmart
onlinepharmacyero.com buy prescription drugs without doctor

AndrewBog
Гость
AndrewBog

how much does cialis cost cialis vs viagra

AndrewBog
Гость
AndrewBog

is generic cialis safe cialis generic