Перейти к публикации
Endless

ScrollController

Рекомендованные сообщения

Endless

Небольшой ScrollController для тех, кто не умеет пользоваться колесом мыши кто ценит своё время и не хочет тратить его на прокрутку страницы.

Если будут вопросы по установке user(Script/Style) - напишу инструкцию. Все баги лучше отправлять в issue.

Demo.

 

Поделиться сообщением


Ссылка на сообщение
Поделиться на других сайтах
Andrey
14 часов назад, Predve4niy сказал:

Если будут вопросы по установке user(Script/Style)

UserJS давай :O:


🖊️ Ура! Теперь у Вас есть подпись ☺️

Поделиться сообщением


Ссылка на сообщение
Поделиться на других сайтах
Endless
16 часов назад, Andrey сказал:

UserJS давай :O:

Подготовил инструкцию.

Поделиться сообщением


Ссылка на сообщение
Поделиться на других сайтах
Sheodar

@Predve4niy, Все еще ждем фиксика для подключения CSS :(

 


Хочешь сменить мини-карту? Конвертируй свои старые маркера.

 

Поделиться сообщением


Ссылка на сообщение
Поделиться на других сайтах
Endless
28 минут назад, Sheodar сказал:

@Predve4niy, Все еще ждем фиксика для подключения CSS :(

 

Можешь пока сделать через userStyle. У меня, к сожалению, сегодня времени не будет :с

Поделиться сообщением


Ссылка на сообщение
Поделиться на других сайтах
Sheodar
1 час назад, Predve4niy сказал:

Можешь пока сделать через userStyle. У меня, к сожалению, сегодня времени не будет :с

Как скажешь :) Так приятнее.

(чего-т с загрузкой картинок беда)

Снимок.PNG

И да, лично для себя ненмного КСС поправил. Кнопка чуть больше, чуть подальше от края, и прозрачнее:

 

Нью(нет) стайл

 
	.rs-scroll-controller {
    position: fixed;
    bottom: 35px;
    left: 35px;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    z-index: 100;
    background-color: transparent;
    opacity: .75
}
	.rs-scroll-btn {
    background-color: rgba(255, 255, 255, .5);
    width: 100%;
    height: 100%;
    border-radius: 50%;
    border: 0;
    transform: rotate(0);
    line-height: 1.75;
    transition: .3s ease-in-out;
    transition-property: transform opacity;
    cursor: pointer;
    opacity: 1;
    visibility: visible;
}
	.rs-scroll-btn:focus {
    outline: none;
}
	.rs-scroll-btn[data-scroll-position=down] {
    transform: rotate(180deg);
}
	
.rs-scroll-btn[data-scroll-position=hide] {
    opacity: 0;
    visibility: hidden;
}
	.rs-scroll-btn[data-scroll-position=""] {
    opacity: 0;
    visibility: hidden;
}
	.rs-scroll-btn .fa {
    font-size: 27px;
    color: #333333;
}
@media (max-width: 799px) {
    .rs-scroll-controller {
        display: none;
        visibility: hidden;
    }
}
 
Изменено пользователем Sheodar

Хочешь сменить мини-карту? Конвертируй свои старые маркера.

 

Поделиться сообщением


Ссылка на сообщение
Поделиться на других сайтах
Sheodar

@Predve4niy, Вот маленько под себя переделал. Если будет желание сделать еще и такую версию (у меня тут чутка текст не всегда хочет меняться), то можно и такую добавить) Удобнее, чем выцеливать кнопочку мелкую (имхо).

UPD: ну лол, просидел почти весь день, но так сложно чет делать когда нифига не знаешь язык ни капли :с везде html части есть, а я вроде как не владелец сайта. На jss+css фиг сделаешь нормальную кнопочку  чтоб работала как хочешь :с Все темы за 12-14 год.

UPD2: день не прошел зря. Несмотря на все попытки гугла нифига мне не дать - кнопка "наверх" в вк готова. Измнения в части CSS уже дело каждого.

P.S. Вообще было интересно облазить тонну сайтов, поскольку знания цсс и скрипта было нулевым. Время незаметно улетело.

UPD3: Видео-инструкция (надеюсь не залочат?). Хз что ютуб делает с кач-вом видео. Но видать без фуллхыде монитора летсплеи не снимать :D Но там и так понятно.

UPD4: Вынес в скрипте небольшой конфиг для настройки "под  себя". 

UPD5 (Last) : Теперь кнопка (область) появляется только после прокрутки. Раньше даже без листания слева была область которая меняла цвет при наведении. Теперь все работает как часы. Теперь конец :) 
 

Изменено пользователем Sheodar

Хочешь сменить мини-карту? Конвертируй свои старые маркера.

 

Поделиться сообщением


Ссылка на сообщение
Поделиться на других сайтах
Andrey
16 часов назад, Sheodar сказал:

Хз что ютуб делает с кач-вом видео.

У контакта ещё хуже - FullHD только дли избранных, а об поддержке 4K и говорить нечего. Тытуб сначала готовить видео в плохом качестве, постепенно появляются остальные варианты (фоновая обработка).


🖊️ Ура! Теперь у Вас есть подпись ☺️

Поделиться сообщением


Ссылка на сообщение
Поделиться на других сайтах
Sheodar
6 часов назад, Andrey сказал:

У контакта ещё хуже - FullHD только дли избранных, а об поддержке 4K и говорить нечего. Тытуб сначала готовить видео в плохом качестве, постепенно появляются остальные варианты (фоновая обработка).

Проблема еще в мониторе моем, все же. И рендеринге, в итоге. 1440х900. А растягивать или тратить еще сутки как-то не хотелось. Просто ютуб именно картинку покоцал (mp4 на компе норм на фулл скрип даже после рендера, а на вот ютубе кубы). 


Хочешь сменить мини-карту? Конвертируй свои старые маркера.

 

Поделиться сообщением


Ссылка на сообщение
Поделиться на других сайтах
Andrey
13 минут назад, Sheodar сказал:

И рендеринге

Делать вам нечего. Записали и загрузили сразу. Это только тытуберам нужен рендер, чтобы там всякие эффекты надобавлять.


🖊️ Ура! Теперь у Вас есть подпись ☺️

Поделиться сообщением


Ссылка на сообщение
Поделиться на других сайтах
Sheodar
Только что, Andrey сказал:

Делать вам нечего. Записали и загрузили сразу. Это только тытуберам нужен рендер, чтобы там всякие эффекты надобавлять.

Музычка :( 


Хочешь сменить мини-карту? Конвертируй свои старые маркера.

 

Поделиться сообщением


Ссылка на сообщение
Поделиться на других сайтах
Andrey

Опять же, тытуберам это только нужно. Главное - хорошее качество и чтобы понятно было.


🖊️ Ура! Теперь у Вас есть подпись ☺️

Поделиться сообщением


Ссылка на сообщение
Поделиться на других сайтах
Sheodar

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


Хочешь сменить мини-карту? Конвертируй свои старые маркера.

 

Поделиться сообщением


Ссылка на сообщение
Поделиться на других сайтах
Sheodar

(Сообщения, увы, все еще менять нельзя). Часто перехожу на "последний ответ", надоело что для появления кнопки нужно скролить. Теперь она может появится сразу при загрузке страницы, если высота ниже заданной благодаря вот такому вот костылику:

    if ((window.pageYOffset || document.documentElement.scrollTop) > switchingHeight && x === 1)
    {
        rsScrollController.initScrollController();
        x++;
    }

+Замените в стайлише строку 
height: 799px;
На:
height: 100vh; 

(+поменял стрелочки, скушна)

Изменено пользователем Sheodar

Хочешь сменить мини-карту? Конвертируй свои старые маркера.

 

Поделиться сообщением


Ссылка на сообщение
Поделиться на других сайтах

×
×
  • Создать...