» »

Красивый эффект на вид материала для uCoz


Красивый эффект на вид материала для uCoz

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

Но как поняли, он только подойдет на тот размер, ка который настроен, не может быть на стандартном, все это в изображение 650x200 и все безусловно будет по центру.

Вид материала uCoz


Установка:

1) Скачиваем архив и загружаем папку eff-ie в файловый менеджер.
2) Идем в Панель Управление - Управление дизайном - выбираем Модуль - Вид материалов и устанавливаем уже в код, там хотим видеть изображение с эффектом:
3) Тут же прописываем в самом верху путь к стилям:
Код
<link type="text/css" rel="StyleSheet" href="/eff-ie/eff-ie_style.css" />


Код
<div align="center">  
<div class="effect eff-ie">  
<img src="$IMG_URL1$" />  
<div class="overlay">  
<div class="icon"></div>  
</div>  
<div class="gradient"></div>  
<div class="caption">  
<p> Просмотров: <b>$READS$</b> / Комментарии: <b>$COMMENTS_NUM$</b> / Дата добавления: <b>$DATE$</b> </p>  
<a class="btn" href="$ENTRY_URL$" title="$TITLE$">ПЕРЕЙТИ К МАТЕРИАЛУ</a>  
</div>  
</div>  
</div>


На этом вся установка, архив можете скачать с этого материала.
При копирование, ссылку обязательно ставим на клик:
Источник: http://internetempire.ru/

Второй способ установки

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

Вид материала для сайта uCoz

Код
<div align="center">  
<div class="effect eff-ie">  
<img src="$IMG_URL1$" />  
<div class="overlay">  
<div class="icon"></div>  
</div>  
<div class="gradient"></div>  
<div class="caption">  
<p> Просмотров: <b>$READS$</b> / Комментарии: <b>$COMMENTS_NUM$</b> / Дата добавления: <b>$DATE$</b> </p>  
<a class="btn" href="$ENTRY_URL$" title="$TITLE$">ПЕРЕЙТИ К МАТЕРИАЛУ</a>  
</div>  
</div>  
</div><br>

<style>  
.eff-ie {
  width: 650px;
  height: 200px;
  overflow: hidden;
  cursor: pointer;
  position: relative;
  border-radius: 5px;
}
.eff-ie img {
  min-width: 100%;
  min-height: 100%;
  border-radius: 5px;
}
.eff-ie .overlay {
  width: 0px;
  height: 0px;
  border: 50px solid transparent;
  border-bottom: 50px solid rgba(255,255,255,0.85);
  border-right: 50px solid rgba(255,255,255,0.85);
  position: absolute;
  right: 0;
  bottom: 0;
  -moz-transform-origin: right;
  -ms-transform-origin: right;
  -o-transform-origin: right;
  -webkit-transform-origin: right;
  transform-origin: right;
  -moz-transition: all 0.2s linear 0s;
  -o-transition: all 0.2s linear 0s;
  -ms-transition: all 0.2s linear 0s;
  -webkit-transition: all 0.2s linear 0s;
  transition: all 0.2s linear 0s;
}
.eff-ie .overlay .icon {
  width: 35px;
  height: 23px;
  background: url('http://zornet.ru/Ajaxoskrip/Forma_skriptov/XzWlaYG.png') 0 0 no-repeat;
  position: absolute;
  top: 9px;
  left: 5px;
  -moz-transition: all 0.01s linear 0.2s;
  -o-transition: all 0.01s linear 0.2s;
  -ms-transition: all 0.01s linear 0.2s;
  -webkit-transition: all 0.01s linear 0.2s;
  transition: all 0.01s linear 0.2s;
}
.eff-ie .gradient {
  position: absolute;
  top: 0px;
  left: 0px;
  width: 100%;
  height: 100%;
  background: -moz-radial-gradient(circle, rgba(255,255,255,0) 25%, rgba(255,255,255,0.7));
  background: -ms-radial-gradient(circle, rgba(255,255,255,0) 25%, rgba(255,255,255,0.7));
  background: -o-radial-gradient(circle, rgba(255,255,255,0) 25%, rgba(255,255,255,0.7));
  background: -webkit-radial-gradient(circle, rgba(255,255,255,0) 25%, rgba(255,255,255,0.7));
  background: radial-gradient(circle, rgba(255,255,255,0) 25%, rgba(255,255,255,0.7));
  opacity: 0;
  -moz-transition: all 0.3s linear 0.2s;
  -ms-transition: all 0.3s linear 0.2s;
  -o-transition: all 0.3s linear 0.2s;
  -webkit-transition: all 0.3s linear 0.2s;
  transition: all 0.3s linear 0.2s;
}  
.eff-ie .caption {
  position: absolute;
  top: 0px;
  left: 0px;
  width: 100%;
  height: 100%;
  text-align: center;
  color: white;
  -moz-transform: scaleY(0);
  -o-transform: scaleY(0);
  -ms-transform: scaleY(0);
  -webkit-transform: scaleY(0);
  transform: scaleY(0);
  -moz-transition: all 0.2s linear 0s;
  -ms-transition: all 0.2s linear 0s;
  -o-transition: all 0.2s linear 0s;
  -webkit-transition: all 0.2s linear 0s;
  transition: all 0.2s linear 0s;
}
.eff-ie .caption p {
  width: 100%;
  max-width: -webkit-calc(80% - 20px);
  max-width: -o-calc(80% - 20px);
  max-width: -moz-calc(80% - 20px);
  max-width: -ms-calc(80% - 20px);
  max-width: calc(80% - 20px);
  margin: 40px auto 0px auto;
  background: rgba(0,0,0,0.15);
  font-weight: 400;
  padding: 6px 10px;
  font-size: 14px;
}
.eff-ie .caption a {
  display: inline-block;
  margin: 60px auto 0px auto;
  background-color: rgba(56, 56, 56, 0.58);
  color: inherit;
  padding: 7px 20px;
  font-size: 15px;
  text-decoration: none;
}
.eff-ie:hover .overlay {
  -moz-transform: scaleX(0);
  -ms-transform: scaleX(0);
  -o-transform: scaleX(0);
  -webkit-transform: scaleX(0);
  transform: scaleX(0);
}
.eff-ie:hover .overlay .icon {
  opacity: 0;
  -moz-transition-delay: 0s;
  -ms-transition-delay: 0s;
  -o-transition-delay: 0s;
  -webkit-transition-delay: 0s;
  transition-delay: 0s;
}
.eff-ie:hover .gradient {
  opacity: 1;
  -moz-transition-delay: 0.2s;
  -ms-transition-delay: 0.2s;
  -o-transition-delay: 0.2s;
  -webkit-transition-delay: 0.2s;
  transition-delay: 0.2s;
}
.eff-ie:hover .caption {
  -moz-transform: scaleY(1);
  -ms-transform: scaleY(1);
  -o-transform: scaleY(1);
  -webkit-transform: scaleY(1);
  transform: scaleY(1);
  -moz-transition-delay: 0.45s;
  -ms-transition-delay: 0.45s;
  -o-transition-delay: 0.45s;
  -webkit-transition-delay: 0.45s;
  transition-delay: 0.45s;
}  
</style>
08.02.2016 Загрузок: 5 Просмотров: 644 Комментарий: (20)

Поделиться в социальных сетях

Материал разместил

Комментарий: 19
Kosten
Kosten 08.02.2016 01:401
0
Также можно посмотреть DEMO от первоисточника.
Сопрано
Сопрано 08.02.2016 01:472
0
Так красиво смотрится, но думаю нужно знать куда скрипт прописывать, так как понимаю, он только на изображение идет и на демо отлично показано.
Maryges
Maryges 08.02.2016 01:523
0
Trantel, нужно с начало выставить такой вид материала, но сейчас у многих стоит. А так не чего такого не нахожу, бывает, что при наведение краткое описание показывает, но как кто делает. Здесь просто не нужно писать как от кого и что там многое.
AnTron
AnTron 08.02.2016 02:004
0
Красота всегда требует тяжести) а если серьезно, чтоб ставить такой эффект, не стал бы ставить специально под него вид. Другое дело, если у тебя уже стоит по такому формату, то можно и поставить, не вижу не чего в нем такого тяжелого. Главное на изначальной картинке показано, как увеличение, чтоб гость или пользователь навел на ее, а если бы не было, мало бы кто догадался что он установлен, но основном при клике и переходят.
Сафрон
Сафрон 08.02.2016 02:055
0
Но если сам вид закругленный, то думаю не мешало закруглить, темный фон, то как то своими углами он не вписывается.
Kosten
Kosten 08.02.2016 02:076
0
Как его поставить, не разбирал этот код, просто вид материала такого не было, а такой как здесь вы сами понимаете, он не подойдет. Возможно сам автор объяснит, так как мне хватило увидеть как работает.
Kosten
Kosten 08.02.2016 02:407
0
Попробовал на тестовом сайте и по прописной установке не получилось, пришлось стили поместить в CSS и тогда только эффект показался.

Сафрон
Сафрон 08.02.2016 02:428
0
Вижу у тебя на тестовом сайте, так нормально.

Kosten
Kosten 08.02.2016 02:499
0
Вообщем так поставил, в папку только установил одну картинку на знак, стили не стал, а скопировал и прописал в CSS сайта, так как если в папку их поставить, они не работают.

Эффект примерно такой, фот прозрачная картинка, по кроме изображение и при наведение так получается.

Tergran
Tergran 08.02.2016 03:1510
0
Но второй способ, он на прямую, но почему то не вижу на первой установке, куда бы ссылись стили и изображение.
Kosten
Kosten 08.02.2016 03:1912
0
Да хотел проверить стазу, но файловый менеджер нормально, а сайт не мог перезагрузить. Это хорошо что вспомнил есть где то второй и там попробовал и не чего не вышло, пока стили не выдернул и не прописал в CSS и только тогда все появилось как нужно.
Сафрон
Сафрон 08.02.2016 03:1611
0
Вот сейчас нормально и понятно, что нужно все убирать, то просто описание не полное было, думаю и первый работает.
1 2 »
avatar