Какой рейтинг вас больше интересует?
|
Главная / Главные темы / Тэг «изображения»
Фон сайта с эффектом параллакса на jQuery плагине jquery.plaxmove 2013-10-07 00:21:33
... создает иллюзию трехмерности изображений. Сегодня установим ... ,ну и свои изображения.
+ развернуть текст сохранённая копия
В последнее время стали появляться сайты с удивительным эффектом параллакса, который создает иллюзию трехмерности изображений. Сегодня установим фон с эффектом паралакса 1.Скачиваем архив [isnt-logged] Вы не можете скачивать файлы с нашего сайта ,рекомендуем Вам background-site-effect-parallax-jquery.zip (720.74 Kb)[/is-logged],распаковываем в папку с шаблоном.
2.В хеад подключаем скрипты,если у вас не подключен jquery,то подключайте и его тоже :
Код: <--script src="{tpl_url}/js/jquery.js" type="text/javascript"></script-->
<script src="{tpl_url}/js/jquery.plaxmove.js" type="text/javascript" ></script>3.В стили добавляем :
Код: .layer1{background:url(layer1.png);width:100%;height:100%;top:0px;left:0px}
.layer2{background:url(layer2.png);width:100%;height:100%;top:0px;left:0px}
.layer3{background:url(layer3.png);width:100%;height:100%;top:0px;left:0px}4.Добавляем сам фон в тело сайта:
Код:
<div class="layer1" style="top: 13px; left: 48.225px; "></div>
<div class="layer2" style="top: 25.05px; left: 94.45px; "></div>
<div class="layer3" style="top: 36.074999999999996px; left: 138.6px; "></div> 5.И последнее инициализация :
Код: <script type="text/javascript">
$(function(){
$('.layer1').plaxmove({ratioH:0.05,ratioV:0.05})
$('.layer2').plaxmove({ratioH:0.1,ratioV:0.1})
$('.layer3').plaxmove({ratioH:0.15,ratioV:0.15})
});
</script> 6.Настройки
ratioH — модификатор движения мыши по горизонтали
ratioV — модификатор движения мыши по вертикали
reversed — меняет местами X и Y (движение мыши по горизонтали меняют позицию объекта по вертикали и наоборот )
invertH — инвертирование движения мыши по горизонтали
invertV — инвертирование движения мыши по вертикали
Настройки задаются при инициализации скрипта и могут сочетаться в любой комбинации.
Для изменения используйте настройки и стили,ну и свои изображения.
Тэги: css,, изображениями,, эффекты
Адаптивная галерея на jquery плагине LEAST.JS 2013-10-03 15:13:28
... изображения. По умолчанию изображения ... Полное описание изображения ...
+ развернуть текст сохранённая копия
Пришло время адаптивных сайтов, продолжаем эту тематику в галерее, одинаково хорошо отображаемой как на компе, так и на мобильных устройствах. В галерее используется плагин lazyload - отложенная загрузка картинок, который позволяет экономить трафик. При наведении курсора на изображение отображается краткое описание, а по клику происходит показ полной версии изображения. По умолчанию изображения формируются случайным образом на странице. Скачиваем архив [isnt-logged] Вы не можете скачивать файлы с нашего сайта ,рекомендуем Вам gallery_least.zip (2.68 Mb)[/is-logged] ,заливаем в папку вашего шаблона.
Этот код размещаем между body :
Код: <section>
<ul id="gallery">
<li id="fullPreview"></li>
<!-- один элемент галереи -->
<li>
<a href="images/p1.jpg"></a>
<img data-original="images/t1.jpg" src="img/effects/white.gif" alt="Фото 1" />
<div class="overLayer"></div>
<div class="infoLayer">
<ul>
<li>
<h2>Заголовок фото</h2>
</li>
<li>
<p>Краткое описание изображения</p>
</li>
</ul>
</div>
<div class="projectInfo">
Полное описание изображения
</div>
</li>
<!-- /один элемент галереи -->
</ul>
</section>
Для работы галереи в хеад подключаем следующие скрипты и стили:
Код:
<link href="{tpl_url}/css/least.min.css" rel="stylesheet" type="text/css" />
<!-- jQuery libary -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<!-- least.js JS-file -->
<script src="{tpl_url}/js/least.min.js"></script>
<!-- Lazyload JS-file -->
<script src="{tpl_url}/js/jquery.lazyload.js"></script>
Вызов плагина :
Код: $(document).ready(function(){
$('#gallery').least();
});Опции:
'random': true/false (по умолчанию true - включено)
'lazyload': true/false (по умолчанию true - включено)
Здесь можно подключить любой плагин,последние новости,популярные,и т .д.
Тэги: lightbox, overlay, диалоги,, изображениями,, эффекты
Бегущая строка с текстом и изображениями 2013-09-27 19:51:00
... . Бегущая строка с изображением и текстом: изображением:
+ развернуть текст сохранённая копия
В этом посте мы продолжим тему бегущей строки. В предыдущем материале бегущая строка у нас бегает с сообщениями нашего блога. Но иногда хочется написать для читателей свое обращение или выделить какой то материал, да много чего можно. Я не буду тратить Ваше драгоценное время, а сразу приступим к делу. Дальше даю коды бегущих строк, с текстом, картинками, с фоном.
1. Бегущая строка туда сюда: <marquee behavior="alternate">Реклама - двигатель торговли</marquee>2. Бегущая строка с вашим текстом: <marquee behavior="scroll#0073e9" direction="left"> <p>Жизнь надо устраивать до тех пор, пока жизнь не начнет устраивать тебя <a href="http://www.bdblogov.ru" target="blank"alt="Блог для блогов!"></a></p></marquee> 3. Бегущая строка с фоновым цветом: <marquee bgcolor="# 7600e9" style="color: # ffffff"> Добро пожаловать в мой блог ! </marquee> # 7600e9 - цвет полосы; # ffffff - цвет текста; 4. Бегущая строка с изображением и текстом: <marquee behavior="scroll" direction="left"><img src="http://s020.radikal.ru/i715/1309/8c/e1181dad2881.jpg" /><p>Кто владеет информацией, тот владеет ситуацией </p></marquee>
5. Бегущая строка с изображением: span style="color: #783f04;"><marquee behavior="scroll" direction="left"><img src=" http://s020.radikal.ru/i715/1309/8c/e1181dad2881.jpg" /></marquee>Выделенное зеленым - адрес ссылки на картинку. Как узнать я писала в одном из своих постов. Только адрес копируйте в пункте 6.HTML - картинка в тексте. Вид строки будет зависеть от настроенных Вами в дизайнере шаблонов цветов. Вот вроде и все. Информацию нашла в этом блоге < http://blogger.omg-linux.ru >, кое что немного упростила. Коды вставляйте обычным гаджетом: черновик blogger-дизайн-Html/JavaScript-вставить-сохранить в любом месте макета блога. По теме: Бегущая строка сообщений блога;
Тэги: бегущая, изображениями, строка, текстом
Технология AMD Mantle сроднит PC с PS4 и Xbox One 2013-09-27 11:01:45
Сегодня мы уже рассказали вам о новой линейке видеокарт Radeon R от AMD, с помощью которых компания ...
+ развернуть текст сохранённая копия
Сегодня мы уже рассказали вам о новой линейке видеокарт Radeon R от AMD, с помощью которых компания намерена нанести ответный удар по «зелёному» лагерю. Теперь стоит остановиться более подробно на самой презентации AMD, прошедшей вчера на Гавайях. Как ни странно, о новых GPU представители компании говорили мало, большую часть времени заняла демонстрация двух новых технологий [...]
Тэги: amd, dice, ps4, анонсы, игр, изображения, информация, новости, технологии
Всё, что не так 2013-09-23 18:45:46
 + развернуть текст сохранённая копия
 Какой-то внутренний голос говорит, что я за сегодня уже надоел самым терпеливым :) Нет ! Я не бездельничаю в понедельник. Просто, сегодня решил попробовать не писать статьи, а покупать их. И вы знаете, в основном-то, красиво пишут... Неплохо, в общем, получается. Когда совсем-совсем разбогатею, только так и буду делать. То есть, не писать, а покупать писанину. Ну вы же не захотели, когда я предлагал :)  Фото: Conchita  Фото: Max Lebram  Фото: Silke Tillner  Фото: Potassium Permanganate  Фото: Marco  Фото: Alessandra Magno  Фото: Maria  Фото: Julia Morozova  Фото: Ines van Megen-Thijssen
Тэги: [pics], изображения, фотографии
Главная / Главные темы / Тэг «изображения»
|
Взлеты Топ 5
Падения Топ 5
|
