Автор

11 02.2017
Простой параллакс для сайта на 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

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


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

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

Сегодняшний пример - это простой шаблон. На больших устройствах контент разделяется на два основных контейнера.


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

Порой на сайте хочется скачать изображения, нажав при этом правой кнопкой мыши на изображение, но не всегда скачанное изображение будет необходимого качества и размера. На многих сайтах содержится специальная страница с изображениями логотипа в высоком разрешении , но такие страницы бывает очень непросто найти. По этому предлагаем просмотреть урок, как создать красивый вариант загрузок изображений, средствами jQuery мы создадим модальное окно с предложениями загрузки разных вариантов изображений.


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

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


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

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


105 Публикаций

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

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


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

О КОМПАНИИ

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

Close

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


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

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

Close