Меню
Скрипт вид материалов для UCOZ [42] |
Информеры для UCOZ [25] |
Меню для UCOZ [18] |
Слайдер для UCOZ [11] |
Кнопки для UCOZ [21] |
МИНИ ПРОФИЛЬ УКОЗ [4] |
Скрипты мини-чатов для UCOZ [10] |
Страница 404 для UCOZ [3] |
Скрипты статистики для UCOZ [5] |
Скрипты PHP для UCOZ [4] |
Другие скрипты для UCOZ [131] |
НОВОЕ ВИДЕО
НОВЫЕ КОМЕНТАРИИ
Коментарий:Невероятно....это полезный веб-сайты.
Добавил:Stevensleed
Коментарий:Сколько лет прошло, старина?) зарегался, просто вспомнить те времена,
Добавил:Vj PitBulvjpitbul94
Коментарий:Всё исправил, проверил , скачивайте
Добавил:Modred
Коментарий:Классный скрипт , но на PHP
Добавил:ZemHU
Коментарий:Отличный движок Добавил:DexonEdutt
Коментарий:Легко установить Добавил:Mixhoarm
Поиск
Витрины ссылок
НОВОЕ НА ФОРУМЕ
Тема: Stepform - Виджеты для повышен... | |
Форум: "Полезные сслыки |
Тема: REG.RU - бесплатный хостинг д... | |
Форум: "Полезные сслыки |
Тема: Бесплатный веб хостинг с PHP | |
Форум: "Полезные сслыки |
Тема: Sape | |
Форум: "Полезные сслыки |
Тема: Ukit - конструктор сайтов для ... | |
Форум: "Полезные сслыки |
Тема: Megaindex.ru | |
Форум: "Полезные сслыки |
Тема: TeaserNet.com | |
Форум: "Полезные сслыки |
Каталог ТОП
1. RemMosMash.ru - ремонт бытовой техники Сайт: https://remmosmash.ru |
2. МастерРБТ - ремонт стиральных машин в Домодедово Сайт: https://masterrbt.ru/ |
3. Ремонт и отделка. Контакты: +7 (926) 214-53-53 Сайт: http://www.remgam.ru/ |
4. Адвокатский кабинет Шишук А.Б. Сайт: http://ADVOKAT-SHISHUK.RU |
5. Автозапчасти-СПАКСЕР Сайт: http://spacser-shop.com.ua |
6. Islamiconline.ru Сайт: https://islamiconline.ru/ |
7. Покупаем электродвигатели Сайт: http://stanprivod.ru |
8. Кабинет Информатики Сайт: http://kabinfo.ucoz.ru/ |
9. Торрент портал Сайт: http://utrutor.ucoz.org/ |
10. ООО "Корпорация АЕГ" Сайт: http://aeg-med.ru/ |
11. Татобзор.ру Сайт: https://tatobzor.ru/ |
12. Займ онлайн. Кредитуем всех 24 часа. Сайт: http://vyberi-uslugi.ru |
13. Автозапчасти-СПАКСЕРВИС Сайт: https://spacser.com.ua |
14. AndroSoft Сайт: http://androsoft.ucoz.ru |
15. Заработок в интернете без вложений Сайт: http://seodengi.ucoz.org/ |
Главная » Файлы » Скрипты для UCOZ » Информеры для UCOZ |
Оригинальный информер
Оригинальный информер для сайта при наведении курсора картинка сдвигается и открывается информация о материале. Код
<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> </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>
Вставить этот код и радуемся результату. | |
ПОСМОТРЕТЬ ДЭМО ВЕРСИЮК материалу оставили ссылку на демоверсию, по которой вы можете оценить функционал данного материала. При обнаружении ссылки, не содержашей демоверсии, сообщите об этом Администратору. | |
| |
Похожие материалы: | |
Просмотров: 588 | Загрузок: 0 | |
Всего комментариев: 0 | |