Сергей ZSA

Рисуем с таким же углом блок в PS экспортируем в svg, ставим background-ом для before/after к следующему/нынешнему блоку. Если вариант не подходит - нужно знать почему не подходит и смотреть диз целиком.

Странный немного вопрос. Четче задавайте или хотя бы примеры прикладывайте по ссылке. Один из вариантов - ловить расстояние от верха страницы (на jquery можно делать), брать это значение, считать сколько это в % от всей высоты страницы и соответственно заполнять ваш круг на количество этих % (круг можно и на svg запилить и с ним через js возиться менять значения, либо через css, я не знаю какой у вас там круг по дизайну поэтому не подскажу тут уже).

Иконки сделаны обычным шрифтом, а их анимация через банальный css, который можно без проблем изучить на самом сайте. Клик ловится через jQuery, дальше определяется что за иконка была кликнута и с помощью .html() функции в том же jquery подставляется вместо менюшки разметка вашего поиска опять же с с анимацией (идеал - даже без html а просто на основе fadeIn fadeOut запилить просто). То есть клик по лупе - fadeOut для меню и fadeIn для поля поиска, при клике по крестику - наоборот. Обе функции и описание про них опять же на сайте jquery найдете иль где ещё в инете, шарьтесь по документации в общем.

jquery.page2page.ru/index.php5/%D0%9F%D0%BE%D0%B8%...

Забил в гугл "parent() jQuery" 2 ссылка в выдаче уже. Аналогично ищите по next и height.

Отлично для web-дизайнеров guideguide.me

Графика:
1. max-width: 100%; у img
2. svg где это возможно и по башке дизайнеру если он делает иконки растром
3. Опционально от вменяемости дизайнера - кадрирование картинок ну и знаменитый тег пикчер с его супер-способностями почти @media (это для ретины и для адаптива сразу у картинок) https://habrahabr.ru/post/237991/ тут про суперспособности

Всякое:
1. требовать промежуточные макеты хоть какие-то (моб, планшет, десктоп, большой десктоп если там резина сайт)
2. бить об стол дизайнера и/или заказчика если он хочет крутой адаптив а дизайна других версий нет и не будет (пошли все куда по дальше, адаптива тогда тоже не будет или платите в 3 раза больше за то чтоб делал верстальщик адаптивный макет в .psd)
3. Mobile first @media запросы изучать
4. Опционально и на любителя - юзать бутстрап или ковыряться че там да как
5. Опционально и на продвинутого - flexbox

Инфы слишком много чтоб это всё описывать тут, поэтому вперед на каналы: open-education.net/services/spisok-youtube-kanalov... где-то из них 100% найдете то что надо. К примеру у "Серёги" (по началу видео поймете кто это) хороший курс про flexbox а у loftblog масса разной инфы про svg, графику и тп.

Я так понял нужна полосочка которая ездит в выпадающем. Сделано оно там вообще не на after. Если проанализировать код - там есть span, который absolute относительно всего выпавшего блока relative собственно (я не запариваюсь с объяснением, для человека который понимает более менее в вёрстке всё это и так ясно, так что если что не понятно - в комментах переспрашивайте). Логика - при наведении на тот или иной элемент узнавать его высоту и его расстояние от начала родительского элемента (с помощью jquery это делается в 2 счета вообще). Дальше задача просто сдвинуть на нужное количество px ваш бегунок. С ходу как рассчитать расстояние сверху имея высоту и расстояние элемента от начала родителя - я честно формулу не придумаю, так как спать хочу. Тут самостоятельно вам подумать стоит ну или пилить все пункты меню одинаковой высоты и опускать элемент на количество px сверху + там ну 3px (количество "+ там ну" узнаете самостоятельно, просто сдвиньте ваш бегунок сначала на количество px сверху {я под этим подразумеваю расстояние от в целом всего блока, который является выпадающим до элемента, на который навели} а потом спустите с помощью инспектора на середку вашего элемента и посчитайте на сколько спустили). Логика такая. Делайте сами, это будет интересно, а я спать. Не получится - пишите. Запилю на codepen иль ещё где и скину ссыль сюда, но уже завтра или когда свободное время будет.

Ссылка на скрипт от Алексей выглядит чет очень стремно, некрасивое перетекание вообще там.

Давайте по пунктам постараюсь рассказать, как вообще надо работать во front-end.
1. Вы должны научиться думать блоками (блоками в потоке, выпадающими из потока, flex-блоками и тд и тп). Научиться можно только когда вы поймете как на самом деле надо верстать.
2. Начните с простой вёрстки. Возьмите макет в .psd (80% работы над каждым сайтом вы будете пользоваться PhotoShop и если вы его не знаете хотя бы на предбазовом уровне - печаль беда), импортируйте оттуда все нужные вам картинки ну и начинайте верстать шаблон поблочно, смотря где какой цвет шрифта, размер, жирность, размер блока, фон этого блока и тд и тп.
3. Зачем вы себе морочили голову gulp, sass, bootstrap когда ещё верстать даже нормально не умеете - я увы не понимаю. Вам ни один из этих инструментов не поможет пока вы не будете уметь именно верстать. На данный момент не думайте о технологиях, структуре и тд и тп. Просто сверстайте хоть какой-нибудь макет хоть как-то.
4. Общайтесь с людьми, которые вам могут помочь продвинуться в этой сфере. Таковых крайне много. Можете ко мне в скайп добавиться и узнавать некоторые вещи, можете к другим, к кому угодно фактически, наверно 60-70% верстальщиков с удовольствием поделятся с вами своим опытом
5. Пишите код аккуратно. Был тут недавно вопрос, в котором человек предоставил код, а там ни{ } нету, ни отступов нормальных нет, ну и половина ; просто потеряны, а в html теги применяются не по назначению вовсе. Нельзя так делать ни в коем случае, иначе ваш уровень не поднимется с уровня плинтуса.
6. Файловая структура: папки css images js и на уровне с этими папками лежат файлы .html либо .php всё. Если говорить о препроцессорах и сборщиках - не лезте пока в это, потом узнаете как только научитесь нормально верстать. Я думаю нет смысла объяснять что в папках тех должно лежать. Если вы считаете себя особенным - можете распределять внутри images картинки по папкам на составляющие, к примеру сделать папку отзывов, папку галерей каких-нибудь и тп, но я чаще так не делаю, не хочу чтоб дополнительные символы засоряли мне код и ухудшали читаемость.
7. Связывать между собой html и css судя по всему вы и так уже умеете и привязывать к ним js. Не знаю что вам мешает сверстать любой сайт если вы понимаете как устроены эти 3 технологии (а на них по факту всё и держится).

Итог: Забудьте про sass, gulp и прочее пока не сверстаете шаблонов 10, эти технологии вас никак не ускорят и никак вам не помогут пока вы не будете уметь просто верстать с шаблона .psd и писать нужные скрипты на js или jQuery хотя бы. Научитесь немного фотошопу и занимайтесь практикой. Найти те самые .psd вообще не проблема, их куча бесплатных в интернете.

Ужс какой-то. Не верстайте так. Сделайте по-человечески чтоб в ulбыли li а не a в ul. И для ссылок применяйте active ну и естественно фигурные скобки ставить за вас никто не будет а также ; в конце свойств.

var $gg = $(".players-percent-block");
$( '.players-percent-block' ).  зачем??? Вы переменную зачем задавали с этим классом?

Ну да ладно, по поводу вопроса - есть setTimeout функция в js. Смотрите что она делает. Проще простого функция.

А нельзя просто повесить класс на html при необходимом разрешении и спокойно писать в css всё с вложением всех селекторов в класс или как вариант подключать другой линк?

Проще сделать рекламу на разные страницы непосредственно, чтоб не было головной боли с подсчетами. Ну а на этих разных страницах уже другие данные ставить (можно сделать 1 index.php с разными $_GET какими-нибудь чтоб они обрабатывались правильно и подставлять нужные данные). У нас в компании так страниц 40 крутится почти идентичных.

ruseller.com/jquery.php?id=15

тут достаточно инфы по этому поводу. Можно использовать и $.ajax, принцип примерно тот же и почитать о нем можно много чего. Комментарии на той странице даны, больше как бы комментировать нечего по js-составляющей.

На счет php - создаете файл, который ранее указывали собственно в ajax функции (на который будет запрос идти). В нём нужным образом обрабатываете ваши данные как обычный post запрос. То есть что без ajax что с ajax могут быть обработчики php идентичны (конечно если у вас там в php редирект не торчит).

https://habrahabr.ru/post/14246/ это на чистом js (опять же не вижу смысла что-то сюда добавлять, целую статью кидать в файл нет смысла)

js и хотя бы jQuery для более менее нормальной работы и чтоб делать что-то более сложное нужно ещё подтянуть CSS. Шаблоны "средней сложности" у всех понятие очень растяжимое как резиновая вёрстка.

По собственному опыту - в интернете делается поуши копий сайтов. Страшно представить сколько копируется каждый день. Особенно видно по Landing Page для сезонных товаров всяких. Кто-то скопировал у кого-то потом у этого тоже скопировали и тд и тп, а потом поди докажи, что ты это вообще копировал, а не сам делал. Но это относительно LP.
На счет больших и известных сайтов (скопировать хабр к примеру) - я бы не брался за такую работу если там полная копия. Почему? Это бредятина и заказчик псих, нет ни денег ни ж... поднимать не хочет чтоб своё что-то сделать, а с такими заказчиками терпеть не могу работать.
Если с основательным количеством переделок - это уже не копия, а скажем так рерайт)) За него же не сажают в тюрьму))

Для отображения при нахождении в зоне видимости можно использовать viewportchecker.js НО тут js будет мало, так как на озоне выводится ещё и несколько товаров во время того, как человек достиг определенного момента на странице, а это осуществляется с помощью ajax и php в стороннем файле, который вытягивает необходимые товары из базы данных а это всё делается вот таким образом: roothelp.ru/lessons/ajax_podzagruzka_kontenta_pri_...

Можно всё реализовать с помощью jQuery и jQuery cookie. Алгоритм действий примерно следующий:
1. При заходе на сайт присваивается кука time (как вам удобно, мне удобней было бы timestamp ставить в неё, а не date) а также кука с количеством того, что вы хотите менять (кука col)
2. Через каждое n-количество времени (можно через каждую минуту к примеру) запускать скрипт, меняющий на определенное значение ваше число или что вы хотите менять.

Как этот скрипт по-моему должен работать: из time сейчас вычитается time первоначальный и узнается количество полных 15 минут (к примеру прошло 70 минут - это 4 раза по 15, как разделить без остатка с округлением в меньшую сторону на js - гуглите). Это кол-во (в нашем случае 4) умножается на кол-во того, на сколько за 15 минут должно число смениться, затем получившееся число складывается с нашей первоначальной кукой col ну и выводится куда вам надо.

3. При заходе на сайт обязательно должна быть проверка на куку time и col. Если оных нет - начинаем с 1 этапа (то есть создаем куки эти и вперед). Если есть - запускаем скрипт, описанный во 2 пункте.

Для других интервалов времени делаются просто другие куки и другой скрипт по увеличению. Честно говоря мало представляю зачем такое надо, обычно всё же увеличение такое делается не персонально для каждого пользователя, а массово для всех и сразу (чтоб не зашли с другого браузера с другими куками) и делается это через cron и php

Посмотреть в сторону ajax или хотя бы $.post