» »

Информер с визуальным слайд-эффектом


Информер с визуальным слайд-эффектом

Создаём простые информер с эффектом в виде выезжающего блока с названием и описанием материала для каталогов сайта на HTML5 и CSS3. Раньше для создания различных эффектов требовалось подключение javascript и дополнительных файлов изображений, с приходом инструментов CSS3 и HTML5 всё реализуется гораздо проще.

Здесь чем отличается этот эффект, что он может применяться на вид материалов, и с ним идут стили, чтоб сделать под свой дизайн, и на ресурсе будут оригинально все смотреться

Эффект основан на трансформациях и переходах CSS3 применённых к тегу HTM5
Работает стопроцентно в следующих браузерах: Internet Explorer 10+, Firefox 6+, Chrome 13+, Opera 11+ и Safari 3.2+.

Кстати если вам не всё равно на армию пользователей упорно засевших на XP с её IE8, широко и повсеместно использовать эффекты основанные только на CSS3, пока преждевременно)

HTML разметка
Код
<figure>
<img src="$IMG_URL1$" alt="$TITLE$">
<figcaption>
<h2>$TITLE$</h2>
<p>$MESSAGE$</p>
<a href="$ENTRY_URL$">Подробнее</a>
</figcaption>
</figure>

Чтобы укоротить описание поменяем
Код
<p>$MESSAGE$</p>

на :
Код
<p><?substr($MESSAGE$,0,250)?> ...</p>


Стили CSS
Код
figure {
width: 285px;
height: 185px;
margin: 5px;
overflow: hidden;
position: relative;
text-align: left;
-moz-box-shadow:0 5px 5px #000;
box-shadow:0 5px 5px #000;
-webkit-box-shadow:0 5px 5px #000;
border-radius: 5px;
cursor: default;
font:normal 12px/14px Helvetica, Arial, sans-serif;
}
figure figcaption,
figure figcaption img{
width: 285px;
height: 185px;
position: absolute;
overflow: hidden;
top: 0;
left: 0;
background: #EEEEEE;
-moz-transform: translateX(-285px);
-o-transform: translateX(-285px);
-webkit-transform: translateX(-285px);
transform: translateX(-285px);
  visibility:hidden;  
-webkit-transition: all 0.5s ease-out;  
-moz-transition: all 0.5s ease-out;  
-ms-transition: all 0.5s ease-out;  
-o-transition: all 0.5s ease-out;  
transition: all 0.5s ease-out;
}
figure img {
width: 285px;
height: 185px;
display: block;
position: relative;
  -webkit-transition: all 0.5s ease-out;  
-moz-transition: all 0.5s ease-out;  
-ms-transition: all 0.5s ease-out;  
-o-transition: all 0.5s ease-out;  
transition: all 0.5s ease-out;
}
figure h2 {
text-transform: uppercase;
color: #B22222;
position: relative;
font-size: 14px;
letter-spacing: 1px;
margin: 10px 0 0 10px;
}
figure p {
font-size: 12px;
line-height: 16px;
position: relative;
color: #333;
margin: 10px 10px;
-webkit-transition: all 0.5 ease-out;  
-moz-transition: all 0.5 ease-out;  
-ms-transition: all 0.5 ease-out;  
-o-transition: all 0.5 ease-out;  
transition: all 0.5 ease-out;
}
figure a {
text-decoration: none;
color: #359CC6;
margin: 10px 10px;
}
figure a:hover {
color: #B22222;  
border-bottom: 1px dotted #9F1D35;
}
figure:hover figcaption,
figure:hover figcaption img{
-moz-transform: translateX(0);
-o-transform: translateX(0);
-webkit-transform: translateX(0);
transform: translateX(0);
visibility:visible;
}
figure:hover img {
-moz-transform: translateX(285px);
-o-transform: translateX(285px);
-webkit-transform: translateX(285px);
transform: translateX(285px);
}
figure:hover p{
opacity: 1;
}


Размеры и цвета конечно же меняем на свои, а если интересно посмотреть в работе информер,
то извиняюсь что не стал делать Демо, недавно сделал знакомой девушке такой же информер ТУТ на главной странице сайта, поэтому не стал делать двойную работу)

За основу взята идея материала с сайта dbmast.ru


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

30.05.2016 Просмотров: 396 Комментарий: (14)

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

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

Комментарий: 14
Сопрано
Сопрано 30.05.2016 14:271
0
Красиво смотрится, что то на demo понять не могу, там много эффектов.
Angerfist
Angerfist 30.05.2016 14:302
0
В середине страницы: статьи о животных
Kosten
Kosten 30.05.2016 14:373
0
Angerfist, поменял изображение, чтоб понятнее было, а так на сайте смотрится очень красиво, и описание есть, что главное.



Вот как пример, наводя изображение уходит и появляется описание, как понимаю, должно быть краткое.
Angerfist
Angerfist 30.05.2016 14:384
0
Я понял конечно, правильно и сделал)
Сопрано
Сопрано 30.05.2016 14:425
0
Angerfist, а это как понимаю информер, больше на его похоже



Костен все понял, просто не мог найти как выйти, далее написано, нужно жирнее текст сделать.
Angerfist
Angerfist 30.05.2016 14:446
+1
А это другой Информер, уже опубликован на этом сайте
Scheme
Scheme 30.05.2016 14:497
0
Angerfist, но это больше на вид материала с эффектами подходит, чем на информер.
Angerfist
Angerfist 30.05.2016 14:529
0
Можно и на вид материалов конечно
Kosten
Kosten 30.05.2016 15:2910
0
Как demo замутил, что то нужно так сказать новое.)
Сопрано
Сопрано 30.05.2016 14:508
0
Спасибо, сейчас попробую поставить, что то подсказывает, что уже ставил, посмотрим.
feliksteg
feliksteg 30.05.2016 20:2711
0
Хорошо подойдёт под вид материала, но здесь его нужно доработать и потом сразу делать под мобильные устройства. Здесь главное описание краткое идёт под изображение, которое как не крути, вес в поиске больше будет иметь, чем просто поставить картинку на форуме, пусть даже она очень качественная и по размерам большая, а для поиска не чего не стоит будет, если и появится, только не в первых рядах, как здесь.
csretven
csretven 31.05.2016 19:5012
0
Так минутку, это не информер, это скрипт, с которого и сделали вид материала, как говорил новые технологий. smile
Angerfist
Angerfist 31.05.2016 19:5913
0
Неа, код разный всмотрись, просто я все виды материалов леплю в таком формате так как к моему сайту подходит по дизайну
feliksteg
feliksteg 31.05.2016 20:2314
0
Просто такой формат всегда будет смотрится, но еще с эффектами, то есть какой то резон ставить именно такой.
avatar