|
Название: Оригинальный информер Жанр: Скрипты Автор: 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
Вставить этот код и радуемся результату. Посмотреть можно на главной странице.
|
|