Главная » 2013 » Сентябрь » 8 » 3D вид материалов новостей для кинотеатров (Скрипты для ucoz)
08.09.2013, 15:06

3D вид материалов новостей для кинотеатров



Посмотрев материал 3D Shading with Box-Shadows, подумал. как это можно приспособить для ucoz, так пришла идея сделать вид материалов новостей для онлайн кинотеатра или просто для сайта с фильмами.

Посмотреть, что у меня получилось можно ЗДЕСЬ.

Ну а теперь как это все установить:

1. Активируем все дополнительные поля в настройках модуля новостей. Можно их переименовать, Главная » Замена стандартных надписей » Форма добавления модуля "Новости сайта":

  • Название материала - Русское название фильма
  • Дополнительное поле 1 - Английское название фильма
  • Дополнительное поле 2 - Год выпуска
  • Дополнительное поле 3 - Рейтинг MPAA
  • Дополнительное поле 4 - Продолжительность
  • Дополнительное поле 5 - Постер

Для скриншота используем загруженное на сайт изображение 1 ($IMG_URL1$).
Изображения постера и скриншота подгоняются под размеры 260х400 и 260х185 пикселей соответственно, поэтому надо стараться подбирать изображения пропорциональные, что бы не сжимало и не вытягивало.

2. Устанавливаем HTML код. Для этого заходим Главная » Управление дизайном » Редактирование шаблонов » Новости сайта » Вид материалов, ищем:

Код
$MESSAGE$


И меняем на:

Код

<div class="scene">  
<div class="movie" onclick="return true">
  <div class="poster" style="background-image: url($OTHER5$);"></div>
  <div class="info" style="background-image: url($IMG_URL1$);">
  <header>
  <h1>$TITLE$<br>$OTHER1$</h1>
  <span class="year">$OTHER2$</span>
  <span class="rating">$OTHER3$</span>
  <span class="duration">$OTHER4$</span>
  </header>
  <p>
  $MESSAGE$<br><a href="$ENTRY_URL$">Подробнее</a>
  </p>
  </div>
  </div>
  </div>


3. Устанавливаем CSS стили. Куда заходить писать не буду, у всех стили находятся в разных местах :). Просто добавляем:

Код

/*************************************
Build the scene and rotate on hover
**************************************/

.scene {
  width: 260px;
  height: 370px;
  margin: 30px;
  float: left;
  -webkit-perspective: 1000px;
  -moz-perspective: 1000px;
  perspective: 1000px;
}

.movie {
  width: 260px;
  height: 370px;
  -webkit-transform-style: preserve-3d;
  -moz-transform-style: preserve-3d;
  transform-style: preserve-3d;
  -webkit-transform: translateZ(-130px);
  -moz-transform: translateZ(-130px);
  transform: translateZ(-130px);
  -webkit-transition: -webkit-transform 350ms;
  -moz-transition: -moz-transform 350ms;
  transition: transform 350ms;
}

.movie:hover {
  -webkit-transform: rotateY(-78deg) translateZ(20px);
  -moz-transform: rotateY(-78deg) translateZ(20px);
  transform: rotateY(-78deg) translateZ(20px);
}

/*************************************
Transform and style the two planes
**************************************/

.movie .poster,  
.movie .info {
  position: absolute;
  width: 260px;
  height: 370px;
  background-color: #fff;
  -webkit-backface-visibility: hidden;
  -moz-backface-visibility: hidden;
  backface-visibility: hidden;
}

.movie .poster {
  -webkit-transform: translateZ(130px);
  -moz-transform: translateZ(130px);
  transform: translateZ(130px);
  background-size: cover;
  background-repeat: no-repeat;
}

.movie .info {
  -webkit-transform: rotateY(90deg) translateZ(130px);
  -moz-transform: rotateY(90deg) translateZ(130px);
  transform: rotateY(90deg) translateZ(130px);
  border: 1px solid #B8B5B5;
  font-size: 0.8em;
  text-align: justify;
  font-family: Tahoma, Geneva, sans-serif;
}

/*************************************
Shadow beneath the 3D object
**************************************/

.csstransforms3d .movie::after {
  content: '';
  width: 260px;
  height: 260px;
  position: absolute;
  bottom: 0;
  box-shadow: 0 30px 50px rgba(0,0,0,0.3);
  -webkit-transform-origin: 100% 100%;
  -moz-transform-origin: 100% 100%;
  transform-origin: 100% 100%;
  -webkit-transform: rotateX(90deg) translateY(130px);
  -moz-transform: rotateX(90deg) translateY(130px);
  transform: rotateX(90deg) translateY(130px);
  -webkit-transition: box-shadow 350ms;
  -moz-transition: box-shadow 350ms;
  transition: box-shadow 350ms;
}

.csstransforms3d .movie:hover::after {
  box-shadow: 20px -5px 50px rgba(0,0,0,0.3);
}

/*************************************
Movie information
**************************************/

.info header {
  color: #FFF;
  padding: 7px 10px;
  font-weight: bold;
  height: 165px;
  background-size: contain;
  background-repeat: no-repeat;
  text-shadow: 0px 1px 1px rgba(0,0,0,1);
}

.info header h1 {
  margin: 0 0 2px;
  font-size: 1.4em;
}

.info header .rating {
  border: 1px solid #FFF;
  padding: 0px 3px;
}

.info p {
  padding: 1.2em 1.4em;
  margin: 2px 0 0;
  font-weight: 400;
  color: #666;
  line-height: 1.4em;
  border-top: 10px solid #555;
}

/*************************************
Generate "lighting" using box shadows
**************************************/

.movie .poster,
.movie .info,
.movie .info header {
  -webkit-transition: box-shadow 350ms;
  -moz-transition: box-shadow 350ms;
  transition: box-shadow 350ms;
}

.csstransforms3d .movie .poster {
  box-shadow: inset 0px 0px 40px rgba(255,255,255,0);
}

.csstransforms3d .movie:hover .poster {
  box-shadow: inset 300px 0px 40px rgba(255,255,255,0.8);
}

.csstransforms3d .movie .info,  
.csstransforms3d .movie .info header {
  box-shadow: inset -300px 0px 40px rgba(0,0,0,0.5);
}

.csstransforms3d .movie:hover .info,  
.csstransforms3d .movie:hover .info header {
  box-shadow: inset 0px 0px 40px rgba(0,0,0,0);
}

/*************************************
Posters and still images
**************************************/
.info {
  background-repeat: no-repeat;
  background-size: 260px 185px !important;
}

.poster {
  background-repeat: no-repeat;
  background-size: 260px 370px !important;
}

/*************************************
Fallback
**************************************/
.no-csstransforms3d .movie .poster,  
.no-csstransforms3d .movie .info {
  position: relative;
}

/*************************************
Media Queries
**************************************/
@media screen and (max-width: 60.75em){
  .scene {
  float: none;
  margin: 30px auto 60px;
  }
}


Ну вот, где то так.
Материал взят с сайта infoscript.ru
Внимание! Копирование данного материала запрещено без указания ссылки на сайт Infoscript.ru
Источник/Автор: Skaiman
Категория: Скрипты uCoz | Просмотров: 1392 | Добавил: Skaiman | Рейтинг: 0.0/0 |
Теги: материалов, вид, кинотеатро, новостей, для, 3d
Всего комментариев: 2
1 komar   (14.09.2013 00:00)
Аватар пользователя
Прикольно!

2 MaSTerGuiTar -Infoscript Team-  (17.09.2013 22:02)
Аватар пользователя
Ага) Чуть поменьше ещё его)

Добавлять комментарии могут только зарегистрированные пользователи.
[ Регистрация | Вход ]