Автор

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

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

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


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

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


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

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


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

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


105 Публикаций

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

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


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

О КОМПАНИИ

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

Close

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


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

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

Close