ОРИГИНАЛЬНЫЙ ИНФОРМЕР
 Главная  » Все для Ucoz» Скрипты для Ucoz

Автор Сообщение


Новое 08 Ноя 17 в 20:53

 



Название: Оригинальный информер
Жанр: Скрипты
Автор: Mytorrento

Описание: Оригинальный информер для сайта при наведении курсора картинка сдвигается и открывается информация о материале.
Код
<div class="spoiler_body">
<div c-poster="c-poster"><div c-poster-cover="c-poster-cover">
<div c-poster-cover-photo="c-poster-cover-photo" style="background-image: url(ссылка на изображение);"></div></div>
<div c-poster-body="c-poster-body"><h2 c-poster-title="c-poster-title">$TITLE$</h2><div style="font-size:10px">Автор: <a href="$PROFILE_URL$"><span title="Партнер сайта" class="colorPART">$USERNAME$</span></a></div>
<div style="font-size:10px">$RFILE_SIZE$</div>
<div style="font-size:11px"><a href="$ENTRY_URL$"><strong>Скачать:</strong></a> <span style="font-size:10px" <img src="/.s/sm/2/angry.gif" border="0" align="absmiddle" alt="angry" /> Скачан уже <b>$LOADS$</b> wink </span></div>
<div style="font-size:10px">Форум: <a href="$CATEGORY_URL$">$CATEGORY_NAME$</a></div>
<div class="clearfixdiv"></div>  
<br>
<a style="float:right;" href="$ENTRY_URL$">Открыть ></a></div></div>
<style>
@-webkit-keyframes Loader-in {
  0% {
  -webkit-transform: translateX(-100 <img src="/.s/sm/2/wacko.gif" border="0" align="absmiddle" alt="wacko" /> ;
  transform: translateX(-100 <img src="/.s/sm/2/wacko.gif" border="0" align="absmiddle" alt="wacko" /> ;
  }
  50% {
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
  }
  100% {
  -webkit-transform: translate3d(0, -100px, 0);
  transform: translate3d(0, -100px, 0);
  }
}

@keyframes Loader-in {
  0% {
  -webkit-transform: translateX(-100 <img src="/.s/sm/2/wacko.gif" border="0" align="absmiddle" alt="wacko" /> ;
  transform: translateX(-100 <img src="/.s/sm/2/wacko.gif" border="0" align="absmiddle" alt="wacko" /> ;
  }
  50% {
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
  }
  100% {
  -webkit-transform: translate3d(0, -100px, 0);
  transform: translate3d(0, -100px, 0);
  }
}
@-webkit-keyframes Poster-in {
  0% {
  opacity: 0;
  -webkit-transform: scale(1.5);
  transform: scale(1.5);
  }
  100% {
  opacity: 1;
  -webkit-transform: scale(1);
  transform: scale(1);
  }
}
@keyframes Poster-in {
  0% {
  opacity: 0;
  -webkit-transform: scale(1.5);
  transform: scale(1.5);
  }
  100% {
  opacity: 1;
  -webkit-transform: scale(1);
  transform: scale(1);
  }
}

[c-poster] {
  -webkit-animation: Poster-in .8s 1;
  animation: Poster-in .8s 1;
  -webkit-animation-fill-mode: backwards;
  animation-fill-mode: backwards;
  background: #fff;
  box-shadow: 0 0 20px rgba(0, 0, 0, 0.1);
  cursor: pointer;
  display: block;
  float: left;
  height: 160px;
  color: inherit;
  overflow: hidden;
  margin-bottom: 32px;
  padding: 32px;
  padding-left: 50px;
  position: relative;
  -webkit-transition: .4s box-shadow;
  transition: .4s box-shadow;
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
  width: 120px;
}
[c-poster] + [c-poster] {
  margin-left: 32px;
}
[c-poster]:hover {
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2);
  -webkit-transition: .4s box-shadow .2s;
  transition: .4s box-shadow .2s;
}
[c-poster]:hover [c-poster-cover] {
  -webkit-transform: translate3d(-170px, 0, 0);
  transform: translate3d(-170px, 0, 0);
}
[c-poster]:hover [c-poster-cover-photo] {
  opacity: .5;
  -webkit-transform: translate3d(110px, 0, 0);
  transform: translate3d(110px, 0, 0);
}

[c-poster-cover] {
  background: #000;
  height: 100%;
  left: 0;
  overflow: hidden;
  pointer-events: none;
  position: absolute;
  top: 0;
  -webkit-transition: -webkit-transform .4s;
  transition: transform .4s;
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
  width: 100%;
  z-index: 9;
}

[c-poster-cover-photo] {
  background: transparent no-repeat center center / cover;
  height: 100%;
  -webkit-transition: -webkit-transform, opacity;
  transition: transform, opacity;
  -webkit-transition-duration: .4s;
  transition-duration: .4s;
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
  width: 100%;
}

[c-poster-title] {
  font-size: 14px;
  color: #363636;
}

[c-poster-network] {
  font-size: 14px;
  color: #bababa;
  margin-bottom: 24px;
}

[c-poster-description] {
  font-size: 12px;
  background: #fff;
  line-height: 18px;
  color: #474849;
  padding-bottom: 36px;
  max-height: 260px;
  overflow: hidden;
  position: relative;
  -webkit-transition: max-height .6s;
  transition: max-height .6s;
  z-index: 1;
  font-weight: 100;
}
[c-poster-description]::before {
  content: '';
  display: block;
  background: -webkit-linear-gradient(top, transparent, #fff);
  background: linear-gradient(to bottom, transparent, #fff);
  height: 36px;
  position: absolute;
  left: 0;
  width: 100%;
  bottom: 0;
}
[c-poster-description]:active {
  max-height: 300px;
}

[c-poster-seasons] {
  position: absolute;
  bottom: 32px;
  text-decoration: none;
  color: #000;
}
  .clearfixdiv{
  clear: left;
  }
</style>

Создать инормер: Например каталога файлов.
материалов - по желанию
колонок - 1
длина заголовка - 23

Вставить этот код и радуемся результату. Посмотреть можно на главной странице.





     







[Профиль] [ЛС]
Быстрый ответ ОРИГИНАЛЬНЫЙ ИНФОРМЕР
Текст сообщения




Вы не можете начинать темы
Вы не можете отвечать на сообщения
Вы не можете редактировать свои сообщения
Вы не можете удалять свои сообщения
Вы не можете голосовать в опросах
Вы не можете прикреплять файлы к сообщениям
Вы можете скачивать файлы





!ВНИМАНИЕ!
Сайт не предоставляет электронные версии произведений, а занимается лишь коллекционированием и каталогизацией ссылок, присылаемых и публикуемых на форуме нашими читателями. Если вы являетесь правообладателем какого-либо представленного материала и не желаете, чтобы ссылка на него находилась в нашем каталоге, свяжитесь с нами, и мы незамедлительно удалим ее. Файлы для обмена на трекере предоставлены пользователями сайта, и администрация не несет ответственности за их содержание. Просьба не заливать файлы, защищенные авторскими правами, а также файлы нелегального содержания! У нас вы сможете скачать торренты бесплатно без регистрации и смс. Зайдя на наш сайт вам не нужно регистрироваться и платить за скачивание. У нас доступно для скачивания множество категорий. Благодаря нашему легкому интерфейсу вы без труда сможете Скачать фильмы в хорошем качестве через торрент, Скачать cериалы в хорошем качестве через торрент, Скачать мультфильмы через торрент. Так же вы можете для своего компьютера скачать самые классные программы, это утилиты, операционные системы, браузеры и т.д. Посещайте наш сайт и качайте сколько душе угодно.

Привет, меня зовут Ёко, я что-то типа ангела хранителя Mytorrento.ru. Унас Вы найдете много интересного! (К тому же абсолютно бесплатно и наши Админы очень приветливы. А пока я могу только предложить зарегистрироваться или войти через соцсеть.)