Какой рейтинг вас больше интересует?
|
Главная / Главные темы / Тэг «изображением»
Фон сайта с эффектом параллакса на 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
|