Скрипты

photo-fusion-система-обмена-изображениями Photo Fusion – система обмена изображениями. Это место, где вы можете делиться фотографиями бесплатно и без проблем, пользователи могут делиться своими...
vanguard-v2-1-0-система-авторизации-и-управление-пользователями Vanguard - это приложение PHP, написанное на основе Laravel PHP, которое позволяет владельцам сайтов быстро добавлять и активировать аутентификацию,...
my-loto-скрипт-моментальной-лотереи-рулетки Скрипт моментальной лотереи, где несколько человек вкладывают деньги в общий банк, через минуту этот банк достается одному человеку (победитель...

Для Photoshop

animation-glitch-photoshop-action Action для программы Photoshop, который генерирует видео ряд анимационных эффектов в виде помех на экране, из ваших изображений. Вы можете создать...
radiant-action-photoshop Экшен для программы Photoshop, создаёт эффект света и геометрических фигур, что поможет создать стильный модный вид вашему образу. Создавайте яркие и...
doomsday-action-экшен-для-photoshop Экшен для программы Photoshop, создаёт потрясающий эффект драматизма с глубокими тенями и световым контрактом. Отлично подойдёт при создании рекламных...

Эффект параллакса с JQuery

Эффект параллакса с JQuery

Эффект Parallax это изменение видимого объекта относительно фона в зависимости от положения наблюдателя. Эффект довольно популярен в web-дизайне и применяется чаще для создания динамического фона или шапки сайта. В этом примере вы увидите как с помощью библиотеки JQuery и плагина jParallax создать такой эффект.

 
 
1 HTML

index.html

Основная страница с подключением JQuery и плагина jParallax

<script src="/js/jquery.min.js"></script>
<script src="/js/jquery.jparallax.js"></script>
<link rel="stylesheet" href="/css/main.css" type="text/css" />

<div class="examples">
    <h2>Using jParallax to create own interactive e-card</h2>
    <div id="my_ecard">
        <img src="/images/bg.jpg" alt="" style="width:1600px;height:800px;"/>
        <img src="/images/layer1.png" alt="" style="width:1400px;height:700px;"/>
        <img src="/images/layer2.png" alt="" style="width:1400px;height:700px;"/>
        <img src="/images/layer3.png" alt="" style="width:1200px;height:600px;"/>
    </div>
    <div style="clear:both"></div>
</div>

<script>
jQuery(document).ready(function(){
  jQuery('#my_ecard').jparallax();
});
</script>

2 CSS

body{
background:#eee;font-family:Verdana, Helvetica, Arial, sans-serif;
margin:0;padding:0
} .examples{
background:#FFF;
width:800px;
font-size:80%;
border:1px #000 solid;
margin:3.5em auto 2em;
padding:1em 2em 2em
} #my_ecard {
position:relative;
overflow:hidden;
width:800px;
height:600px;
}

3 JS

Для инициализации эффекта параллакса надо вызвать его конструктор.

<script>
jQuery(document).ready(function(){
  jQuery('#my_ecard').jparallax();
});
</script>

4 Изображения

Необходимо добавить изображения из примера или свои.

 

  • Просмотров: 2165
  1. Комментарии (0)

  2. Add Yours

Комментарии (0)

Комментарии отсутствуют

Оставьте свой комментарий

Оставить комментарий в качестве гостя. Зарегистрироваться либо авторизоваться.
Вложения (0 / 3)
Поделиться вашим местоположением

Векторная графика

плашки-для-рекламных-текстов Набор ярких плашек для рекламных текстов в векторном формате, которые значительно выделят ваш текст на общем фоне. Формат файлов: AI / EPS /...
start-up-rockets-–-ракеты-в-векторе Набор векторных изображений, разного вида летящих ракет. Можно использовать при создании анимации и рекламных баннеров. Формат файлов:...
pop-art-man-векторные-мужчин-в-стиле-поп-арт Набор изображений в векторном формате, яркие иллюстрации мужчин в модном стиле поп арт, отлично подойдёт при создании рекламных баннеров. Формат...

Растовая графика

атлетика-и-бодибилдинг-–-фото-клипарт Набор из 32 изображений высокого качества на тему атлетики и бодибилдинга. Отлично подойдут для рекламных флаеров, баннеров и слайдеров на сайтах...
интернет-технологии,компьютер,гаджеты-–-фото-клипарт Набор из 25 изображений высокого качества, различные интернет технологии, компьютеры, гаджеты. Отлично подойдет для слайд-шоу. Размер 4800 на 3200 px....
бизнес-леди-–-набор-фото-клипарта Набор из 15 изображений высокого качества с красивой блондинкой, бизнес-леди. Эти изображения отлично подойдут для использования в презентациях,...

VLVIT.RU - Сайт для людей увлекающиеся web дизайном, современными интернет технологиями, графическими программами Adobe Photoshop, Illustrator.

2017г.