Автор

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

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

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

Многие материалы на сайте взяты из блогов: "Все для веб-дизайнера Rudebox", "A free library of HTML, CSS, JS nuggets Codyhouse" - полностью переведен и представлен в ознакомительных целях!

vk.com/club.ssdru

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



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

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

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


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

Версия скрипта от TRANE73. Скрипт показывает время существования сайта, с указанной вами даты. Сам по себе скрипт простой, но он удобный и небольшой. В зависимости от даты меняются слова например сайт существует 2 дня 7 дней 101 день. Если вам надоело каждый день менять цифры, то просто установите этот скрипт:


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

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


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

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


105 Публикаций

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

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


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

О КОМПАНИИ

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

Close

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


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

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

Close