preloader block-in-viewport grid-flex-css scroll-text scaled-proportional open-close count-up simple-count circlebars loadingbars dropdown-menu video-back parallax c-scroll-bars Isotope-filter masonry js-charts aos scrolldir swiper xZoom hqy-lazyload matchHeight outside-element arrows-for-blocks slip-hover flexMenu ion-range-slider lavalamp credit-card-validator zoom-text data-tables load-more

Folder ./module/preloader

preloader you can see when the page loads

Folder ./module/grid-flex-css

Сетка через scss миксины - используются падинги
Lorem ipsum dolor
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Obcaecati voluptates asperiores, delectus iusto velit dignissimos reprehenderit, blanditiis dolorum pariatur.
Lorem ipsum dolor sit amet,
Lorem ipsum dolor sit amet,
Lorem ipsum dolor sit amet, consectetur adipisicing elit.

Folder ./module/scroll-text

Данный плагин позволяет реализовать циклическое прокручивание текста в пределах блока. Верстка под него очень похожа на верстку под карусель. Тоже есть маска и широкий блок, который содержит проскролливаемый текст (один или несколько абзацев).

HTML-структура:

	<div class="line-box"> <!-- Родительский блок, к которому будет подключаться плагин (может быть одновременно и маской) -->
		<div class="line-wrap"> <!-- Блок, который будет скроллится -->
					<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit...</p> <!-- Контент бегущей строки -->
		</div>
	</div>

В плагине доступны следующие опции:

	jQuery('div.line-box').marquee({
		mask: null,               // селектор маски (опционально, по умолчанию маской будет блок, к которому применён плагин)
		line: 'div.line-wrap',    // селектор скроллящегося блока (по умолчанию прямой потомок маски)
		items: '>*',              // селектор элементов в скроллящемся блоке (по умолчанию прямой потомок скролл.блока)
		animSpeed: 50,            // скорость анимации (пикселей в секунду)
		pauseOnHover: true,       // приостанавливать бегущую строку на ховер
		hoverClass: 'hover',      // класс ховерного состояния бегущей строки
		direction: 'left',        // направление движения "влево" или "вправо" ("left","right")
		initialDelay: 0           // первоначальная задержка перед стартом бегущей строки (мсек)
	});

Примеры работы скрипта

Обычный пример:

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed dui neque, tempor in, fermentum vel, rutrum aliquam, mi. In quis massa adipiscing urna consequat mollis. Maecenas et leo. Suspendisse iaculis odio. In ac eros. Quisque elementum, justo non mattis pellentesque, odio nibh euismod dolor, quis scelerisque metus lacus consequat nisi. Sed nec turpis. Aenean ultrices purus dapibus orci. Fusce erat. Vivamus quis dolor vitae mi vulputate mollis. Sed tellus elit, tempus et, semper a, tincidunt in, justo.

Пример в котором мало контента:

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Justo.

Обратный пример с первоначальной задержкой :

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed dui neque, tempor in, fermentum vel, rutrum aliquam, mi. In quis massa adipiscing urna consequat mollis. Maecenas et leo. Suspendisse iaculis odio. In ac eros. Quisque elementum, justo non mattis pellentesque, odio nibh euismod dolor, quis scelerisque metus lacus consequat nisi. Sed nec turpis. Aenean ultrices purus dapibus orci. Fusce erat. Vivamus quis dolor vitae mi vulputate mollis. Sed tellus elit, tempus et, semper a, tincidunt in, justo.

Folder ./module/scaled-proportional

Some other blocks

I am designed just so.

My design is intentional. I want to be scaled in such a way that scales the design. No reflows or anything, just straight up scaling. Kinda like SVG.

✖ ✖ ✖

Some other blocks

Folder ./module/open-close

В скрипте доступны следующие опции:

			jQuery('div.toggle-block').openClose({
				addClassBeforeAnimation: true,     // изменять класс "active" до навигации
				activeClass:'active',              // активный класс при раскрытом состоянии
				opener:'.opener',                  // селектор ссылки-опенера
				slider:'.slide',                   // селектор блока-слайдера
				animSpeed: 400,                    // длительность анимации (400мсек = 0,4сек)
				effect:'fade',                     // эффект "fade", "slide" или "none"
				event:'click'                      // при каком событии на opener должно происходить открытие опен-клоус
				initcallback: function(){}         // вызов CallBack
			});
+ View More- View Less

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed dui neque, tempor in, fermentum vel, rutrum aliquam, mi. In quis massa adipiscing urna consequat mollis. Maecenas et leo. Suspendisse iaculis odio. In ac eros. Quisque elementum, justo non mattis pellentesque, odio nibh euismod dolor, quis scelerisque metus lacus consequat nisi. Sed nec turpis. Aenean ultrices purus dapibus orci. Fusce erat. Vivamus quis dolor vitae mi vulputate mollis. Sed tellus elit, tempus et, semper a, tincidunt in, justo.

Folder ./module/count-up

Folder ./module/simple-count

Используется библиотека viewportChecker, так что если уже есть на проекте, не забыть удалить лишнюю копию
0 0 0

Folder ./module/circlebars

Link on GitHub: https://github.com/itaditya/circlebars
00:00:00
0%
00:00:00
00:00:00
00:00:00

Folder ./module/loadingbars

Link https://loading.io/progress/

Folder ./module/video-back

BG Stock HTML5 Background Videos

Background Video Demo

Full width video hero

Easy Background Videos

This page uses the jQuery Background Video plugin along with some simple html and css to generate this background video.

The video overlay pattern is available at http://html5backgroundvideos.com/pattern-overlays/

Folder ./module/parallax

CSS background-attachment: fixed – not good for mobile devices, need CSS fix.For touch devices, which not support this you add special class, which you add in touch-device block.For Image add width and height, so script will calculate correctly image ratio for loading or other size problems.

Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?

Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?

Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?

Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?

Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?

Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?

Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?

Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?

Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?

Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?

Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?

Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?

Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?

Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?

Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?

Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?

Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?

Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?

Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?

Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?

Folder ./module/c-scroll-bars

Sometimes there were conflicts jcf.js custom scroll in tabs, and with this js there were no problems.

Used this plugin http://manos.malihu.gr/jquery-custom-content-scroller/

Horizontal scroll

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Architecto ducimus provident incidunt at ut voluptatum cumque repudiandae. Perspiciatis voluptatem ut impedit neque earum reprehenderit sapiente quia ipsum alias corporis magnam, dolores assumenda autem vitae minus molestiae, provident hic, modi voluptatum quasi. Perferendis amet eum nemo nam fuga tenetur numquam sit, voluptatibus quidem reprehenderit, odit sunt rem reiciendis. Veniam magnam voluptas dicta blanditiis aliquam fuga perspiciatis, esse sunt ad voluptates minus incidunt, quaerat dolor rerum placeat fugit, earum. Reiciendis ipsam quidem, maiores non ipsa quasi delectus quos deserunt, nihil illum impedit architecto doloremque tempora. Harum sed facilis voluptatibus dolor rerum repellendus nulla est cupiditate, nostrum debitis maiores ipsam placeat iure, iste fugit praesentium consequatur ducimus quod. Quae quam nemo nam itaque culpa perferendis doloribus earum eveniet vero nisi veritatis odit veniam ratione atque numquam, ab quas asperiores excepturi, dolores libero, iusto! Tempora rerum ratione ut repellat at eos rem hic similique corporis excepturi delectus voluptatem, deserunt fugit veritatis magni perspiciatis voluptatibus vitae ea officiis, impedit adipisci. Rem magni perferendis quos maxime nemo qui voluptates, culpa, totam esse laboriosam sequi! Architecto dolorum dolorem porro inventore quidem accusantium nulla, molestiae. Asperiores repudiandae sequi soluta, illo, cum impedit, nemo numquam nesciunt cumque possimus modi!

Vertical scroll

Folder ./module/Isotope-filter

Isotope - filtering & sorting https://isotope.metafizzy.co/

Filter

Sort

Mercury

Hg

80

200.59

Tellurium

Te

52

127.6

Bismuth

Bi

83

208.980

Lead

Pb

82

207.2

Gold

Au

79

196.967

Potassium

K

19

39.0983

Sodium

Na

11

22.99

Cadmium

Cd

48

112.411

Calcium

Ca

20

40.078

Rhenium

Re

75

186.207

Thallium

Tl

81

204.383

Antimony

Sb

51

121.76

Cobalt

Co

27

58.933

Ytterbium

Yb

70

173.054

Argon

Ar

18

39.948

Nitrogen

N

7

14.007

Uranium

U

92

238.029

Plutonium

Pu

94

(244)

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nesciunt veritatis, eius laboriosam reprehenderit quod aliquid id quaerat, repudiandae quos at sapiente vel maxime libero similique voluptate possimus. Odio, voluptatum, in? 1 Lorem ipsum dolor, sit, amet consectetur adipisicing elit. Beatae quia obcaecati architecto iusto incidunt qui itaque ullam magnam sed vero autem iste, dolor velit quis eius sunt accusantium ea, porro.

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nesciunt veritatis, eius laboriosam reprehenderit quod aliquid id quaerat, repudiandae quos at sapiente vel maxime libero similique voluptate possimus. Odio, voluptatum, in? 2

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nesciunt veritatis, eius laboriosam reprehenderit quod aliquid id quaerat, repudiandae quos at sapiente vel maxime libero similique voluptate possimus. Odio, voluptatum, in? 3

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nesciunt veritatis, eius laboriosam reprehenderit quod aliquid id quaerat, repudiandae quos at sapiente vel maxime libero similique voluptate possimus. Odio, voluptatum, in? 4

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nesciunt veritatis, eius laboriosam reprehenderit quod aliquid id quaerat, repudiandae quos at sapiente vel maxime libero similique voluptate possimus. Odio, voluptatum, in? 5 Lorem ipsum dolor sit, amet consectetur adipisicing, elit. Iste eveniet autem tempore error quam voluptatem cum hic provident! Facere natus iure impedit commodi mollitia labore saepe neque, architecto blanditiis dolor.

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nesciunt veritatis, eius laboriosam reprehenderit quod aliquid id quaerat, repudiandae quos at sapiente vel maxime libero similique voluptate possimus. Odio, voluptatum, in? 6

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nesciunt veritatis, eius laboriosam reprehenderit quod aliquid id quaerat, repudiandae quos at sapiente vel maxime libero similique voluptate possimus. Odio, voluptatum, in? 1 Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nesciunt veritatis, eius laboriosam reprehenderit quod aliquid id quaerat, repudiandae quos at sapiente vel maxime libero similique voluptate possimus. Odio, voluptatum, in? 1 Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nesciunt veritatis, eius laboriosam reprehenderit quod aliquid id quaerat, repudiandae quos at sapiente vel maxime libero similique voluptate possimus. Odio, voluptatum, in? 1

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nesciunt veritatis, eius laboriosam reprehenderit quod aliquid id quaerat, repudiandae quos at sapiente vel maxime libero similique voluptate possimus. Odio, voluptatum, in? 2

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nesciunt veritatis, eius laboriosam reprehenderit quod aliquid id quaerat, repudiandae quos at sapiente vel maxime libero similique voluptate possimus. Odio, voluptatum, in? 3

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nesciunt veritatis, eius laboriosam reprehenderit quod aliquid id quaerat, repudiandae quos at sapiente vel maxime libero similique voluptate possimus. Odio, voluptatum, in? 4 Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nesciunt veritatis, eius laboriosam reprehenderit quod aliquid id quaerat, repudiandae quos at sapiente vel maxime libero similique voluptate possimus. Odio, voluptatum, in? 1

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nesciunt veritatis, eius laboriosam reprehenderit quod aliquid id quaerat, repudiandae quos at sapiente vel maxime libero similique voluptate possimus. Odio, voluptatum, in? 5

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nesciunt veritatis, eius laboriosam reprehenderit quod aliquid id quaerat, repudiandae quos at sapiente vel maxime libero similique voluptate possimus. Odio, voluptatum, in? 6

Folder ./module/masonry

Masonry (vertical) - columnWidth

Masonry (horizontal) - columnWidth

Folder ./module/js-charts

charts 1

charts 2

Folder ./module/aos

Used this plugin https://michalsnik.github.io/aos/
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cumque dolores blanditiis est quis neque eos, dolor reiciendis quas ea dignissimos, cupiditate consequuntur ipsam itaque eum possimus explicabo! Non atque, suscipit.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Molestias!

Folder ./module/scrolldir

Used this plugin https://github.com/dollarshaveclub/scrolldir

Down

Up

Folder ./module/swiper

Used this plugin https://idangero.us/swiper/

Lorem ipsum dolor sit amet consectetur adipisicing elit. Accusamus quidem consequatur consequuntur magni aperiam eveniet. Non sequi nihil blanditiis, a quas voluptatum, veniam ea laborum asperiores cupiditate repellat, doloribus nam?

img

Lorem ipsum dolor sit amet consectetur adipisicing elit. Accusamus quidem consequatur consequuntur magni aperiam eveniet. Non sequi nihil blanditiis, a quas voluptatum, veniam ea laborum asperiores cupiditate repellat, doloribus nam?

img

Lorem ipsum dolor sit amet consectetur adipisicing elit. Accusamus quidem consequatur consequuntur magni aperiam eveniet. Non sequi nihil blanditiis, a quas voluptatum, veniam ea laborum asperiores cupiditate repellat, doloribus nam?

img

Lorem ipsum dolor sit amet consectetur adipisicing elit. Eaque, adipisci. Placeat tempore consectetur assumenda ad debitis incidunt velit voluptas tempora ipsum dignissimos ex similique sapiente asperiores laudantium, nihil nostrum omnis enim quibusdam! Ducimus, recusandae? Dolor aspernatur, inventore. Hic nam, quasi voluptatem natus explicabo consectetur a ab sequi, illo nobis cupiditate, dolor voluptates quae distinctio. Libero eligendi qui alias aperiam fuga quibusdam temporibus corrupti eaque, modi molestiae quas facere expedita, impedit eveniet repellat labore accusantium, aliquid id odio! Voluptatum impedit unde dolor eveniet, sequi sapiente aliquam optio tenetur quibusdam, ad? Eum, dolore incidunt minima magnam blanditiis eveniet quos praesentium at ullam, ad quam ipsam est. Corrupti consequuntur, unde. Iusto, mollitia fuga non odit voluptatem laboriosam magni officia eius possimus sed culpa repudiandae veniam tenetur voluptates, soluta porro eum ullam rem quis blanditiis nobis molestias consequatur necessitatibus ipsum. Nam ab ullam aperiam eius animi rem, libero doloribus itaque repudiandae sit, maiores velit ratione esse dolorem quo culpa ut laudantium, quod, facilis. Atque dolorem pariatur tempore nihil officia, excepturi maiores ipsum sequi possimus animi veniam repellendus labore reiciendis molestias, commodi architecto, voluptatibus doloremque accusamus! Tempore aspernatur sunt a eaque accusamus, dignissimos placeat sapiente adipisci beatae soluta aperiam facilis quasi qui ea mollitia nobis iure molestiae incidunt aliquid doloribus! Commodi, facilis sint inventore laborum necessitatibus tenetur minima error, sapiente laudantium dignissimos vel, nemo maiores, culpa atque fugiat accusantium iure sequi. Veritatis amet ipsum voluptatum sunt voluptate a? Sed atque illo, amet, necessitatibus, error enim laboriosam ullam deleniti porro, rem placeat facilis dolores voluptas vitae sunt voluptatum deserunt delectus voluptatem dolore facere veniam. Neque ratione voluptatum maxime assumenda officia pariatur doloribus debitis magnam vel quis ipsa incidunt voluptatem omnis accusantium alias reprehenderit unde minima dolor, eaque laboriosam fugit nisi delectus labore. Consequuntur tenetur voluptate laudantium, eos dolor assumenda saepe dolore dignissimos odit officia! Assumenda, maiores.

Lorem ipsum dolor sit amet consectetur adipisicing elit. Ducimus eius dolore deleniti error rem corporis, nam debitis iusto modi, optio atque dolores aliquid. Officia, iure, quae! Error a, sunt in quaerat illo quisquam, pariatur modi cupiditate ea saepe sequi doloribus minima inventore perferendis sint voluptas neque omnis fugit quia dolorem fugiat accusamus rerum obcaecati! Minima, nam tenetur numquam facilis dignissimos consequatur nisi aspernatur mollitia tempora ipsam saepe sint odit, quo assumenda, ratione cum ex officia est rerum! Molestiae hic, delectus aliquid nobis sit, expedita laudantium voluptatum quaerat provident exercitationem dolore, totam? At vel harum optio dolor sit dolorem eveniet deserunt officiis similique nemo doloribus, molestias ducimus laboriosam pariatur inventore dolores, expedita recusandae aliquam natus ratione sunt magni dicta eius labore ea? Quaerat iste ullam et quod expedita. Est unde optio explicabo cum doloremque sed inventore! Unde possimus perspiciatis, cum sunt eum sit numquam est, modi obcaecati. Quidem eos hic doloremque optio commodi minima consequatur, voluptatem quibusdam. Facilis porro ipsa, consequuntur voluptate, fugiat voluptatem sapiente excepturi accusamus perferendis odio illum beatae quod nisi adipisci illo assumenda cum natus magni. Laborum aliquid, officia dolor debitis veniam fugit a nihil, dicta minima fugiat praesentium maiores animi, consequuntur provident quia magni sed pariatur hic, libero molestias ipsum nemo suscipit at! Dolorum ut doloribus consectetur, voluptatem animi deserunt a culpa nam iure, recusandae at, ducimus minus nemo praesentium voluptas, labore laboriosam quos necessitatibus vitae nisi alias hic. Nihil odit similique cumque tempore ea maxime quasi eos at, error veritatis, rem, optio repellat culpa architecto quos consequuntur cupiditate? Optio odio odit dignissimos, magni doloribus deserunt adipisci deleniti voluptatum sit animi earum maxime suscipit quam eos nesciunt inventore distinctio pariatur, nihil minus, soluta quisquam, rem ipsam corrupti. Labore nam, rerum fugit voluptatum cum dignissimos perferendis doloremque officiis cumque repellat animi nostrum laborum sapiente nihil itaque molestiae quis natus omnis distinctio beatae ratione esse ipsam voluptates? Cum exercitationem itaque explicabo at facere accusamus inventore perspiciatis, repudiandae, quasi, temporibus ratione, veniam obcaecati soluta facilis nobis. Esse repellat hic iusto nemo blanditiis, corporis incidunt distinctio doloribus reprehenderit laudantium asperiores! Laborum eligendi exercitationem deleniti ipsam iste officia sit debitis consequuntur amet beatae et nesciunt eos ducimus in quidem eum obcaecati asperiores rem molestias minus, saepe accusantium necessitatibus eveniet. Cumque repudiandae necessitatibus dolorum excepturi, nisi? Suscipit inventore dolorem odio error cumque, pariatur asperiores quia ea minus magni perferendis laudantium laborum enim aliquam aliquid non quam numquam incidunt commodi voluptatum quasi placeat alias?.

Lorem ipsum dolor sit amet consectetur adipisicing elit. Repellat laboriosam exercitationem itaque cupiditate eveniet doloribus ipsam ab tempore, maiores dolore provident esse saepe quia velit sit expedita ipsum ratione perferendis voluptates recusandae voluptatibus quod placeat doloremque ducimus, nihil? Sequi, cum aliquid aperiam nam, nesciunt id eum doloremque obcaecati voluptatibus pariatur cupiditate necessitatibus eaque, possimus nulla atque. Veniam rerum provident nam eveniet quas sed nostrum nisi, architecto, tempora. Rem quas quisquam recusandae quae illum sapiente sit vero, nam magni nesciunt natus facere exercitationem soluta ad, iusto inventore eius sint nisi atque eos delectus temporibus porro! Expedita inventore quaerat ducimus mollitia aut officiis nulla provident! Porro in incidunt quos nesciunt nulla accusantium possimus ab quo. Vitae, labore! Temporibus nobis praesentium perspiciatis aspernatur quasi sequi, at maiores possimus, commodi, libero deleniti laudantium assumenda minima ratione repellendus officiis reprehenderit veritatis fugit! Dolor provident non maiores doloribus illo blanditiis, quidem, iusto, alias culpa debitis dolore iste fugit consequuntur tenetur exercitationem? Illum ad reprehenderit, impedit nulla aperiam dolorum adipisci. Possimus quibusdam odio quo, rem consequuntur sunt, minima explicabo, nulla aspernatur delectus ab debitis dicta eum sit porro, a quas. Ipsam laudantium perferendis labore vitae iste deleniti nemo veritatis perspiciatis sapiente dolorum dignissimos, molestias eveniet commodi repudiandae error earum odio sint impedit consequatur unde corrupti fugit odit. Velit itaque iure voluptatem doloremque iusto, architecto vitae quibusdam numquam rerum hic ipsum quo ab earum quas est deleniti consequuntur ipsam quaerat impedit doloribus nulla odit magnam dignissimos accusamus esse. Quam officia, ut ea eveniet id quibusdam veritatis nam illo repellendus dolor perferendis incidunt corrupti error molestiae voluptates beatae, alias facilis, nobis recusandae nemo. Eos quia aliquid nisi incidunt sapiente saepe nesciunt, ad quod, ipsa aut, ratione iusto unde ipsam reiciendis placeat, harum non explicabo voluptatibus numquam obcaecati minus sunt. Perferendis pariatur consequuntur iste labore, culpa iusto vero quae? Quia cupiditate, quae ducimus repellendus? Exercitationem impedit repellat, aspernatur ipsa ad, reprehenderit voluptatibus in dolores quam, tempore obcaecati. Sint, necessitatibus blanditiis praesentium inventore nam magni eos nostrum quo alias aliquam modi porro laborum nemo. Necessitatibus itaque exercitationem saepe nostrum reprehenderit suscipit amet molestiae optio eligendi neque autem veritatis, delectus facilis numquam ex adipisci blanditiis, dolorum voluptatem eum tempore in dolor nihil. Et minima possimus illo dolore, incidunt expedita ab, asperiores culpa odit libero quas animi! Cupiditate error doloribus eaque odio omnis quo itaque asperiores vitae assumenda quia quae cum molestias culpa expedita laudantium, rem voluptatum possimus perferendis veritatis blanditiis eos optio? Sunt facere nostrum suscipit, omnis cum dicta incidunt deleniti distinctio ullam, eum qui accusamus iure tenetur atque nemo eius cupiditate earum temporibus vitae impedit accusantium nam. Repudiandae ullam necessitatibus aspernatur architecto asperiores amet, quam? Quae commodi, eligendi assumenda labore, asperiores provident ab adipisci ipsum ea. Explicabo et magni officiis? Ullam vitae totam error maiores sequi architecto ea numquam suscipit eaque? Nobis repellat totam laudantium sequi assumenda eaque maxime deserunt! Fugiat itaque deserunt minima accusantium veritatis, consectetur velit eos quod. Quisquam odit accusamus, debitis exercitationem dolorum asperiores voluptatibus ab, sequi natus excepturi impedit modi minima ullam officia assumenda porro consectetur numquam.

Folder ./module/xZoom

Used this plugin https://payalord.github.io/xZoom

Folder ./module/hqy-lazyload

Used this plugin https://rockcookies.github.io/hqy-lazyload/examples.html

Just image

alt-text

Retina images

alt-text

Background images

Iframe lazy load

Folder ./module/matchHeight

Used this plugin https://github.com/liabru/jquery-match-height

Групировка по дата атрибутам data-mh="" работает изначально

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aspernatur labore adipisci dolorum. Amet, nostrum libero facere quis laborum ad dolorum labore officia, a tempora ut, dolore modi commodi nulla soluta.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Assumenda expedita accusantium fugit alias hic dicta animi exercitationem molestias voluptate mollitia explicabo officia error nemo, ducimus aperiam nam at nisi, unde culpa minima repudiandae! Sequi laudantium iste, voluptatibus, iusto, recusandae quaerat eveniet architecto provident ea pariatur fuga temporibus cum nostrum aperiam.
text
The last bit of text The last bit of text The last bit of text The last bit of text

Групировка по классу - настраивается отдельно в js

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aspernatur labore adipisci dolorum. Amet, nostrum libero facere quis laborum ad dolorum labore officia, a tempora ut, dolore modi commodi nulla soluta.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Assumenda expedita accusantium fugit alias hic dicta animi exercitationem molestias voluptate mollitia explicabo officia error nemo, ducimus aperiam nam at nisi, unde culpa minima repudiandae! Sequi laudantium iste, voluptatibus, iusto, recusandae quaerat eveniet architecto provident ea pariatur fuga temporibus cum nostrum aperiam.
text
The last bit of text The last bit of text The last bit of text The last bit of text

Folder ./module/outside-element

Действие по клику вне элемента
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sit ipsam quidem, nulla consequuntur error at repudiandae laborum, sunt optio, quaerat itaque! Praesentium possimus corporis, ipsum rem, officia porro doloribus veniam.

Folder ./module/arrows-for-blocks

Соединительные стрелки для блочных элементов http://michael.verhov.com/ru/post/canvas_arrows_for_div

Folder ./module/slip-hover

Used this plugin http://wayou.github.io/SlipHover/

Folder ./module/flexMenu

Used this plugin https://github.com/352Media/flexMenu

Folder ./module/ion-range-slider

Used this plugin http://ionden.com/a/plugins/ion.rangeSlider/start.html

Options with init js

Options with data atribut

Folder ./module/lavalamp

Used this plugin http://lavalamp.magicmediamuse.com/

lavalamp with nav

lavalamp with nav(border style)

lavalamp with img

lavalamp on input focus

Folder ./module/credit-card-validator

Used this plugin https://jquerycreditcardvalidator.com/

Folder ./module/zoom-text

jQuery Zoom Plugin Demo

"Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."

Folder ./module/data-tables

Used this plugin https://datatables.net/examples/basic_init/zero_configuration.html
Name Position Office Age Start date Salary
Tiger Nixon System Architect Edinburgh 61 2011/04/25 $320,800
Garrett Winters Accountant Tokyo 63 2011/07/25 $170,750
Ashton Cox Junior Technical Author San Francisco 66 2009/01/12 $86,000
Cedric Kelly Senior Javascript Developer Edinburgh 22 2012/03/29 $433,060
Airi Satou Accountant Tokyo 33 2008/11/28 $162,700
Brielle Williamson Integration Specialist New York 61 2012/12/02 $372,000
Herrod Chandler Sales Assistant San Francisco 59 2012/08/06 $137,500
Rhona Davidson Integration Specialist Tokyo 55 2010/10/14 $327,900
Colleen Hurst Javascript Developer San Francisco 39 2009/09/15 $205,500
Sonya Frost Software Engineer Edinburgh 23 2008/12/13 $103,600
Jena Gaines Office Manager London 30 2008/12/19 $90,560
Quinn Flynn Support Lead Edinburgh 22 2013/03/03 $342,000
Charde Marshall Regional Director San Francisco 36 2008/10/16 $470,600
Haley Kennedy Senior Marketing Designer London 43 2012/12/18 $313,500
Tatyana Fitzpatrick Regional Director London 19 2010/03/17 $385,750
Michael Silva Marketing Designer London 66 2012/11/27 $198,500
Paul Byrd Chief Financial Officer (CFO) New York 64 2010/06/09 $725,000
Gloria Little Systems Administrator New York 59 2009/04/10 $237,500
Bradley Greer Software Engineer London 41 2012/10/13 $132,000
Dai Rios Personnel Lead Edinburgh 35 2012/09/26 $217,500
Jenette Caldwell Development Lead New York 30 2011/09/03 $345,000
Yuri Berry Chief Marketing Officer (CMO) New York 40 2009/06/25 $675,000
Caesar Vance Pre-Sales Support New York 21 2011/12/12 $106,450
Doris Wilder Sales Assistant Sidney 23 2010/09/20 $85,600
Angelica Ramos Chief Executive Officer (CEO) London 47 2009/10/09 $1,200,000
Gavin Joyce Developer Edinburgh 42 2010/12/22 $92,575
Jennifer Chang Regional Director Singapore 28 2010/11/14 $357,650
Brenden Wagner Software Engineer San Francisco 28 2011/06/07 $206,850
Fiona Green Chief Operating Officer (COO) San Francisco 48 2010/03/11 $850,000
Shou Itou Regional Marketing Tokyo 20 2011/08/14 $163,000
Michelle House Integration Specialist Sidney 37 2011/06/02 $95,400
Suki Burks Developer London 53 2009/10/22 $114,500
Prescott Bartlett Technical Author London 27 2011/05/07 $145,000
Gavin Cortez Team Leader San Francisco 22 2008/10/26 $235,500
Martena Mccray Post-Sales support Edinburgh 46 2011/03/09 $324,050
Unity Butler Marketing Designer San Francisco 47 2009/12/09 $85,675
Howard Hatfield Office Manager San Francisco 51 2008/12/16 $164,500
Hope Fuentes Secretary San Francisco 41 2010/02/12 $109,850
Vivian Harrell Financial Controller San Francisco 62 2009/02/14 $452,500
Timothy Mooney Office Manager London 37 2008/12/11 $136,200
Jackson Bradshaw Director New York 65 2008/09/26 $645,750
Olivia Liang Support Engineer Singapore 64 2011/02/03 $234,500
Bruno Nash Software Engineer London 38 2011/05/03 $163,500
Sakura Yamamoto Support Engineer Tokyo 37 2009/08/19 $139,575
Thor Walton Developer New York 61 2013/08/11 $98,540
Finn Camacho Support Engineer San Francisco 47 2009/07/07 $87,500
Serge Baldwin Data Coordinator Singapore 64 2012/04/09 $138,575
Zenaida Frank Software Engineer New York 63 2010/01/04 $125,250
Zorita Serrano Software Engineer San Francisco 56 2012/06/01 $115,000
Jennifer Acosta Junior Javascript Developer Edinburgh 43 2013/02/01 $75,650
Cara Stevens Sales Assistant New York 46 2011/12/06 $145,600
Hermione Butler Regional Director London 47 2011/03/21 $356,250
Lael Greer Systems Administrator London 21 2009/02/27 $103,500
Jonas Alexander Developer San Francisco 30 2010/07/14 $86,500
Shad Decker Regional Director Edinburgh 51 2008/11/13 $183,000
Michael Bruce Javascript Developer Singapore 29 2011/06/27 $183,000
Donna Snider Customer Support New York 27 2011/01/25 $112,000
Name Position Office Age Start date Salary

Folder ./module/load-more

Load more plugin

Модуль, который используется для подгрузки новых блоков на страницу. Здесь тоже есть небольшая анимация (плавное появление), и она тоже сделана на css3.

Работа этого модуля требует правильной структуры как основного холдера, так и загружаемых блоков.

  • Из основных параметров прошу обратить внимание на поле “Событие”

    http://screen.w3.ua/Dec15/1855125045.jpg

    Это поле устанавливает функциональность блока, по которой новые блоки будут загружаться.

    click - по клику на кнопку “Загрузить ещё”

    scroll - при доскраливании до низа блока (как в Facebook, к примеру)

    Кстати, наличие ссылки обязательно для блока, тк из этой ссылки берется url для загрузки новых блоков. Т.е если ссылки нет по дизайну - она все-равно должна быть в разметке, хоть и скрыта стилями.

  • Дополнительные параметры

    • Селектор для новых блоков - селектор блока, в который вставляются свежезагруженные блоки. Если оставить null - блоки будут добавляться в основной холдер.
    • Класс блока в момент подгрузки - класс, который вешается на холдер в момент начала загрузки следующей пачки блоков и убирается, когда эта загрузка произошла. Эта настройка может понадобится, когда вам нужно к примеру затемнять холдер или вешать поверх всего холдера какой-то индикатор загрузки.
    • Класс для новых блоков - класс, который довешивается на новые блоки и снимается почти сразу. Что дает возможность проанимировать их появление. Чтобы лучше понять как работает эта опция - скачайте пример.

click

Bootstrap heading

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Culpa obcaecati ipsum, quisquam deleniti explicabo. Officiis ab fugiat voluptatibus excepturi corporis repellat voluptas est, odit sit, quisquam ipsum voluptate libero possimus.

Bootstrap heading

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Asperiores odio animi, maxime, iste mollitia distinctio est aliquam, ratione sint molestias consectetur amet, impedit quod. Dolore fugiat recusandae doloremque, voluptatem fuga.

load more

scroll

Bootstrap heading

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Culpa obcaecati ipsum, quisquam deleniti explicabo. Officiis ab fugiat voluptatibus excepturi corporis repellat voluptas est, odit sit, quisquam ipsum voluptate libero possimus.

Bootstrap heading

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Asperiores odio animi, maxime, iste mollitia distinctio est aliquam, ratione sint molestias consectetur amet, impedit quod. Dolore fugiat recusandae doloremque, voluptatem fuga.

breakpoint