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

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

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

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));
0 0 голос
Рейтинг статьи
На этом всё!
Если у вас есть вопросы, пишите их в нашей группе - https://vk.com/progtime
Вы так же можете разместить свой вопрос на нашем форуме, где другие программисты смогут вам помочь в решение вашей задачи - https://vk.com/prog_time
В ней мы делимся своим опытом с другими начинающими программистами, поэтому обязательно ответим на ваш вопрос.
Так же прокачивайте свои навыки на нашем канале - https://www.youtube.com/c/ProgTime
Подписаться
Уведомить о
guest
54 комментариев
Старые
Новые Популярные
Межтекстовые Отзывы
Посмотреть все комментарии
JanleF
7 месяцев назад

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

JanleF
6 месяцев назад

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

Bupbaipt
Bupbaipt
6 месяцев назад

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

Bupbaipt
Bupbaipt
6 месяцев назад

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

Bupbaipt
Bupbaipt
6 месяцев назад

safest place to buy cialis click here buy cialis thailand

Arturojep
Arturojep
6 месяцев назад

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

JanleF
6 месяцев назад

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

JimmyGoori
JimmyGoori
6 месяцев назад

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

RaymondLem
RaymondLem
5 месяцев назад

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

Harryraw
Harryraw
5 месяцев назад

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

Harryraw
Harryraw
5 месяцев назад

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

Harryraw
Harryraw
5 месяцев назад

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

Harryraw
Harryraw
5 месяцев назад

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

BradleyAnync
BradleyAnync
5 месяцев назад

viagra sale paypal
women viagra

BradleyAnync
BradleyAnync
5 месяцев назад

buy viagra from uk
viagra

BradleyAnync
BradleyAnync
5 месяцев назад

cheapest canadian pharmacy for cialis
buy viagra

BradleyAnync
BradleyAnync
5 месяцев назад

buy levitra pills
viagra online

BradleyAnync
BradleyAnync
5 месяцев назад

buy cialis online no prescription usa
generic viagra

BradleyAnync
BradleyAnync
5 месяцев назад

buy viagra cheap usa
cheap viagra

BradleyAnync
BradleyAnync
5 месяцев назад
MathewDaups
MathewDaups
5 месяцев назад

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

MathewDaups
MathewDaups
5 месяцев назад

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

AndrewCig
AndrewCig
5 месяцев назад

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

AndrewCig
AndrewCig
5 месяцев назад

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

Robertorell
Robertorell
5 месяцев назад

generic cialis no doctor’s prescription buy cialis online canadian

Robertorell
Robertorell
4 месяцев назад

does viagra or cialis help with pe generic for cialis

RichardHap
RichardHap
4 месяцев назад

viagra coupon: directions for use of viagra cheap real cialis

RichardHap
RichardHap
4 месяцев назад

viagra vs cialis: alternative to viagra viagra cialis pills

unsenty
4 месяцев назад

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

MurrayVum
MurrayVum
4 месяцев назад

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

MurrayVum
MurrayVum
4 месяцев назад

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

MurrayVum
MurrayVum
4 месяцев назад

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

MurrayVum
MurrayVum
4 месяцев назад

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

AndrewBog
AndrewBog
3 месяцев назад

how much does cialis cost cialis vs viagra

AndrewBog
AndrewBog
3 месяцев назад

is generic cialis safe cialis generic

RobertoLem
RobertoLem
3 месяцев назад

what is viagra viagra

treantinc
treantinc
3 месяцев назад

Levitra 20mg Avis Trokvome [url=https://ascialis.com/#]Cialis[/url] Artegelp Cialis 5 Mg Precio Vademecum nagnincarp tadalafil cialis from india psyproneeree Compare Viagra To Cialis And Levitra

Michaelnatty
Michaelnatty
3 месяцев назад

when will viagra become generic viagra generic

Michaelnatty
Michaelnatty
3 месяцев назад

how long for viagra to take effect best generic viagra websites

Gabrieldak
Gabrieldak
3 месяцев назад

price of cialis: cialis generic

Gabrieldak
Gabrieldak
3 месяцев назад

side effects for cialis: cialis samples request

DanielEntex
DanielEntex
3 месяцев назад
LesterRuild
LesterRuild
3 месяцев назад

viagra price mail order viagra

RobertEpiva
RobertEpiva
2 месяцев назад
RobertEpiva
RobertEpiva
2 месяцев назад

valtrex 500 mg uk price valtrex cost india

RobertEpiva
RobertEpiva
2 месяцев назад
GregoryNup
GregoryNup
2 месяцев назад

cbd oil yaa health store: cbd cannabis

GregoryNup
GregoryNup
2 месяцев назад

cbd cannabis: cbd oil for anxiety

RobertFatly
RobertFatly
2 месяцев назад

cbd oil near me: cbd hemp oil walmart

RobertFatly
RobertFatly
2 месяцев назад

pure cbd oil: cbd oil