Автор

Простой параллакс для сайта на jQuery - плагин ImageScroll

Простой параллакс для сайта на jQuery - плагин ImageScroll


Что такое параллакс уже наверное известно всем и нет смысла повторяться в каждой публикации! Ковыряясь в инете нашел этот вариант (там был только HTML, а все остальное: картинки, стили и скрипты были на сайте разработчика). Объединив всё вместе, я сделал архив для скачивания и хочу представить очередной, в моем блоге, вариант этого плагина ImageScroll на jQuery.

 

ДЕМО
ИСХОДНИКИ

 

HTML

Для начинающих приведу пример подключения. Между тегами <head> </head> подключаем скрипты:

<script src="js/modernizr.js" type="text/javascript"></script>
<script src='js/jquery.min.js'></script>
<script src='js/jquery.imageScroll.min.js'></script>
<script src="js/index.js"></script>

Теперь устанавливаем саму div разметку нашей страницы:

<div class="img-holder" data-image="img/autumn_season-1600x900.jpeg" data-image-mobile="img/autumn_season-800x450.jpeg" data-width="1600" data-height="900"></div>
  <section>
    <p>Текст первого блока</p>
  </section>
 
<div class="img-holder" data-image="img/japan_digital_nature-1680x1050.jpeg" data-image-mobile="img/japan_digital_nature-800x500.jpeg" data-width="1680" data-height="1050"></div>  
  <section>
    <p>Текст второго блока</p>
  </section>
 
<div class="img-holder" data-image="img/german_landscapes-1600x900.jpeg" data-image-mobile="img/german_landscapes-800x450.jpeg"></div>  
  <section>
    <p>Текст третьего блока</p>
  </section>

 

CSS

Сам по себе стиль не большой и если в Вашем уже существующем CSS описан стиль .section, то вам это и не надо! Но на всякий случай вот стиль:

#container {width:100%;}
section { padding: 5% 15%; margin: 0 auto;}

Примеры скриптов приводить не буду, они у нас уже подключены!

Вот собственно и всё!


Подписывайтесь на нашу группу в контакте vk.com/club.ssdru



Статьи по темеjQuery

Простой параллакс для сайта на jQuery - плагин ImageScroll

Навигация на сайте это неотъемлемый элемент, ведь с помощью нее пользователь с легкостью может перейти к необходимой информации, не задаваясь поиском информации теряя на это драгоценное время. Но порой необходимо поместить в меню достаточно много информации, а это не весьма удобно, ведь меню станет достаточно объемным и будет занимать много места, а это плохо скажется на визуальном оформлении сайта. Что же делать в таком случае? выход достаточно простой, нам необходимо создать выпадающее меню для сайта, которое будет отлично вписываться в дизайн сайта.


Простой параллакс для сайта на jQuery - плагин ImageScroll

Скрипт представляет собой нечто вроде плагина. Для чего можно использовать выдвижную панель? Вы можете создать выдвижной блок «Контакты» на сайт, это будет полезно, например, для сайтов с портфолио.


Простой параллакс для сайта на jQuery - плагин ImageScroll

Если у Вас на сайте есть модальные окна, возможно это формы регистрации, авторизации или просто креативное отображение контента во всплывающих окнах, тогда вам необходимо их стилизировать, придав им новеньких эффектов. В данном уроке мы рассмотрим замечательную подборку эффектов для модальных окон. Все они имеют плавность эффекта и не требуют особых умений интеграции, все достаточно просто. Есть огромное количество вариантов появления диалогового окна, и мы бы хотели продемонстрировать некоторые идеи о том, как отображать диалоговые окна.


Простой параллакс для сайта на jQuery - плагин ImageScroll

В данном уроке мы рассмотрим как можно стилизовать подвал, или как его еще называют, футер сайта. Если вы присматривались, то внизу сайта можно найти схожие ссылки, которые находятся в панели навигации, это делается с целью упростить навигацию на сайте, чтобы вы не возвращались в самое начало. Мы создадим фиксированную  панель в подвале сайта с отзывчивым интерфейсом, кроме этого добавим несколько социальных иконок. Кроме этого панель легко настроить под цветовой интерфейс сайта.


Раскрутка в соцсетях

В данном блоге описано где и как сделать накрутку групп, сообществ и личных страничек в популярных социальных сетях и тест платных сайтов занимающихся накруткой.


Перейти в Блог

Надёжный хостинг

С нами хостинг удобен и прост, как диван у вас дома. Вы с комфортом размещаетесь, а все внутренние пружины мы берем на себя.

Бесплатный тестовый период, ежедневные бэкапы, неограниченный трафик, акции с бонусами... Конечно, у нас все это есть.


Перейти на хостинг

О КОМПАНИИ

Studio Design существует с 2001 года. Основной нашей деятельностью до 2007 года было видеопроизводство ( видеореклама и документальные фильмы, о чем подробно описано в нашем блоге ). С 2007 года, вот уже как лет, наша основная специфика - это создание сайтов для бизнеса или частной деятельности, веб дизайн, а также поддержка и администрирование готовых проектов. Каждая выполненная нами работа - это уникальный, а самое главное, адаптивный под все современные мобильные устройства дизайн сайта. Мы готовы создать сайт с нуля для каждого клиента с любого уголка России! Мы поможем Вам в создании, как одностраничных сайтов – визиток, так и крупных интернет магазинов или корпоративных сайтов. А все наши работы, большинство из которых действуют и по сей день!

Close

Целовальников Сергей


Веб-дизайн, HTML5, CSS3, jQuery, JavaScript, Верстка.

Верстальщик с большим опытом работы. Занимаюсь созданием сайтов с 2005 года. Постоянно обучаюсь и совершенствую свои навыки. Веду свои проекты, в том числе и данный блог.

Close