420873535

Это можно сделать на flex. Просто скопируй )

<div id="gallery">
	<img src="1.jpg" alt>
	<img src="2.jpg" alt>
	<img src="3.jpg" alt>
	…
</div>

И к этим блокам следующий css:

div#gallery {
	display: -ms-flexbox;
	-ms-flex-direction: column;
	-ms-flex-wrap: wrap;
	display: flex;
	flex-direction: column;
	flex-wrap: wrap;
	height: 100vw;
	font-size: 0; 
}
div#gallery img { 
	width: 33.3%;
	transition: .8s opacity;
}

Разобрался сам.

opcache.validate_timestamps=1

- чтобы автоматическая перезапись происходила изменённых файлов
регулируеться параметром (чеканья в секундах).

opcache.revalidate_freq=20

посчитали высоту страницы (hp), высоту окна (hw)
получили максимальный скролл smax = hp - hw и минимальный smin = 0
знаем начальный (hmax) и конечный (hmin) размеры целевого элемента
получаем текущую величину скролла (s)
вычисляем диапазоны изменений

ds = smax - smin = smax
dh = hmax - hmin

отсюда вытекает что

s / ds = h / dh , где h - приращение высоты целевого элемента

=>

h = hmax - (dh * s) / ds

Если нужно увеличивать элемент, меняем последнюю формулу
h = (dh * s) / ds + hmin

Итоговый код (подробный)

var element = document.getElementById('d');
var hp   = document.body.scrollHeight,
    hw   = window.innerHeight,
    smax = hp - hw,
    smin = 0,
    hmin = 100,
    hmax = 300,
    ds   = smax - smin,
    dh   = hmax - hmin;

window.addEventListener('scroll', function () {
    var s = window.pageYOffset; // current scrollTop
    var h = hmax - (dh * s) / ds;

    element.style.height = h + 'px';
});

Сокращенный

var element = document.getElementById('d');
var hmin = 100, 
    hmax = 300;

window.addEventListener('scroll', function () {
    var s = window.pageYOffset; // current scrollTop
    var h = hmax - ((hmax - hmin) * s) / (document.body.scrollHeight - window.innerHeight);

    element.style.height = h + 'px';
});

И демо на фиддле

Самый важный и простой шаг — лечение дивянки использование html5 тегов для разметки страницы.

Вот здесь Вадим Макеев расскажет Вам, как и почему стоит использовать html5 теги.
А вот здесь Ричард Кларк расскажет Вам, как и почему не стоит использовать html5 теги.
А потом ещё можете прочитать вот эту статью, чтобы окончательно запутаться и уйти на бэк-энд.

Но если вам это интересно настолько, что вы понимаете, что между SEO и семантикой не очень-то много общего, то можете ещё почитать вот эти статьи.

Кстати, обязательно читайте комментарии к статьям, они тоже очень полезны.

P.S. После просмотра этих видео вы поймете, почему картинка под спойлером очень крутая.

Фреймворки, библиотеки и плагины для верстки сайта.

1. Bootstrap - самый популярный HTML, CSS, и JS фреймворк в мире для разработки отзывчивых, mobile-first проектов в вебе.

2. slick - Адаптивный слайдер для сайта

3. Owl Carousel 2 - красивый, отзывчивый карусельный слайдер

4. Fotorama - плагин для создания галереи на сайте

5. MagnificPopup - плагин для создания модальных окон

6. FancyBox - построениe всплывающих окон

7. Mmenu - мобильное меню


8. bxSlider - отзывчивый jQuery-слайдер для контента


9. Fullscreen Slit Slider - слайдер с интересной анимацией

10. parallax.js - эффект Parallax

Первая 10-ка

Удалось отправить после указания address-literal отправителя, Яндекс не регистрирует письмо как спам. Вот корректный вариант инициализации:

smtpObj = smtlib.SMTP("smtp.yandex.ru",587,"[10.100.16.102]")

PLAIN авторизация не являлось помехой.

Благодарю Rsa97 и Максим Гришин за помощь в поиске корректной информации.

Есть решение!

Вот тут все работает http://jsfiddle.net/mDL3M/20/

Отдельная благодарность dakiesse

В общем я отыскал для себя 2 варианта:
1) это воспользоватся нативным скроллом вот я примерчик быстро наваял codepen.io/dark19/pen/ybboPw , но есть проблемка в том, что я не придумал как задерживать секцию до полного выполнения анимации, может кто знает, то подскажитет;
2) это воспользоватся готовым решением с помощью плагинов GSAP и ScrollMagic (как мне тут подсказали, но удалили коммент). Вот этим вариантом я и воспользовался. Но нужно хорошо разобраться в документации.
На jquery мне показалось проще как-то все сделать, но у меня не было там сверхзадач в проекте. Мне нужно было просто заполнять свг линию цветом и по мере её заполнения в некоторых участках анимировать блоки html(тут ещё есть грабли: рисуйте svg как path потому, что потом вы не сможете заполнить его цветом, там нужно будет использовать свойства stroke-dasharray и stroke-dashoffset). Но я все таки воспользовался плагинами, хотя, я думаю, зря, так как я вручную прописывал точки заполнения свг и когда должна произойти анимация, по другому я не знаю как вычислить степень заполнения линии. Вот вам ещё пример GSAP + ScrollMagic правда тут он без эффектов codepen.io/dark19/pen/WjwoWm

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

<body>
    <div class='no-bubble'>
        <p class='click-target'></p>
    </div>
</body>

// клик по .click-target не сработает никогда!
$('body').on('click','.click-target', function(){
    // do something...
});
$('body').on('click','.no-bubble', function(e){
    e.stopPropagation();
});

2 и 3 работают аналогично друг другу, но за небольшим исключением:

$('#id').click();
// не равносильно:
$('#id').on('click');
// а работает как:
$('#id').trigger('click');
// т.е. не навешивает обработчик клика, а эмулирует клик по объекту.

А кроме того, 1 и 2 варианты позволяют делать так:

$('id').on('click mouseover mouseout', function(e) {
   if (e.type === 'click') {
        // обработать клик...
   } else if (e.type === 'mouseover') {
       // ну принцип понятен, да?..
   }
});

Например, jQuery Before/After Plugin или TwentyTwenty, или Before-After Slider&Banner