Category: css3

02
Май
2021

Как исправить такое поведение в slick-slider?

Ссылка: https://kirinayik.github.io/gosurf/
Последний блок с картой и нижнем слайдером, хочу сделать через asNavFor связанные слайдеры.
Можно ли как-то запретить слайдеру карте (surf-map) двигаться при взаимодействии с нижним (surf-slider)…

21
Апр
2021

Как отфильтровать элементы по клику?

У меня есть контейнер с набором разных элементов. Все элементы отличаются по цветам. Всего три цвета. Каждому элементу присвоено имя стилевого класса (class), которое позволяет связать каждый элемент с нужным для него стилевым оформлением….

18
Апр
2021

Как создать круговое меню?

Меня заинтересовала работа участника @UModeL, где он нарисовал круговое меню с использованием технологии CSS.
Вот его ответ на вопрос Как сделать треугольник с закругленной линией (не углом):

body {
margin: 0;
display: flex;
just…

15
Апр
2021

как сделать canvas полного размера по div?

мне надо, чтобы div в body занимал весь экран. и чтобы canvas растянулся по этому div. но проблема в том, что canvas таки растягивается, а не принимает нужный размер. то есть я задал квадраты в 96px например, и если width указать 100%, то …

14
Апр
2021

Перемещение элемента по кривой Безье по клику в обе стороны

Имеются две точки (A и B) и кривая Безье от одной к другой. При клике на точку A мы запускаем с помощью animateMotion анимацию перемещения элемента вдоль пути движения из точки A к точке B.

<svg id=”svg” width=”500″ height=”300″ vie…

13
Апр
2021

Как изменить цвет текста если за текстом появился чёрный слайд?

Есть слайдер и поверх него идёт текст в position: absolute. Как сделать, чтобы этот текст менял цвет с чёрного на белый, если на слайдере чёрный слайд?

.content {
position: relative;
}
.text {
position: absolute;
left: 50%;
top…

09
Апр
2021

Как нарисовать карту, нанести на нее точки (маркеры) и анимировать к ним всплывающие подсказки (tooltip) при наведении?

У меня есть следующее изображение карты:

Задача: Мне необходимо нарисовать такую карту средствами и технологиями, которыми это выполнить возможно, и нанести на нее точки (маркеры), обозначающие города. Кроме этого, при клике на маркеры до…

08
Апр
2021

Как закрашивать текст в элементах перемещающимся цветным блоком?

Есть табы.

По умолчанию цвет текста – серый.
При переключении нужно чтобы красный цвет плавно заменял серый со смещением.
Вот так

Под табом должна быть черточка.
Думается что все красное должно быть одним блоком.
Можно как то сделать так…

08
Апр
2021

Как закрашивать текст в элементах перемещающимся цветным блоком?

Есть табы.

По умолчанию цвет текста – серый.
При переключении нужно чтобы красный цвет плавно заменял серый со смещением.
Вот так

Под табом должна быть черточка.
Думается что все красное должно быть одним блоком.
Можно как то сделать так…

05
Апр
2021

Математический маятник, анимация демонстрирующая этот эффект

Математический маятник — осциллятор, представляющий собой механическую систему, состоящую из материальной точки на конце невесомой нерастяжимой нити или лёгкого стержня и находящуюся в однородном поле сил тяготения. Другой конец нити (стер…

03
Апр
2021

Как реализовать плавное заполнение ползунка input range с фиксацией на заданных метках диапазона?

Есть временная шкала input[type="range"] с ползунком и метками на 4,6,12 месяцев.
У меня не получается сделать так, чтобы можно было плавно тянуть за кругляш по всей длине ползунка, но чтобы он мог фиксироваться только на заданны…

29
Мар
2021

Свайпер обрезает часть блока, которая должна остаться

У swiper-container по умолчанию стоит overflow: hidden;. Из-за этого он обрезает часть слайдов по оси-Y. Если я поменяю на overflow: visible;, то по оси-Y будет всё ок, а вот по оси-X будет видна часть следующего блока.
Сам вопрос: Как сде…

12
Мар
2021

Активный слайд на slick js

Всем привет. Имеется такой сея слайдер (ссылка)
Не пойму как сделать чтобы отслеживался активный слайд при нажатии на стрелки. То есть должен выделяться активный слайд внизу.
Подскажите пожалуйста, если кто знает.
Всем спасибо.
https://cod…

12
Мар
2021

Как через js установить css-свойства с префиксами?

Мне через JS нужно задать css-свойства и свойство transition в том числе. Хочу добавить через JS вендорные префиксы. С использованием cssText скрипт не работает, а без них добавляется просто transition без префиксов. Как мне через JS добав…

07
Мар
2021

Как при помощи js или python получить размер окна браузера и передать этот размер в css файл?

Как при помощи js или python получить размер окна браузера и передать этот размер в css файл ?
Предположим у меня есть следующий блок div:
<div class="saitpage"></div>

и css файл:
.saitpage {
margin-le…

07
Мар
2021

Как при помощи js или python получить размер окна браузера и передать этот размер в css файл?

Как при помощи js или python получить размер окна браузера и передать этот размер в css файл ?
Предположим у меня есть следующий блок div:
<div class="saitpage"></div>

и css файл:
.saitpage {
margin-le…

05
Мар
2021

В замешательстве, не адаптируется по центру

Скрипт настроен верно и подсчитывает координаты тоже верно.
Работаю над модальными окнами, вставляю содержимое блоков(html) в модальное окно двум способами

Html блок находится в домдокументе, присвоено свойство display:none. Он скрыт и от…

28
Фев
2021

Как присвоить высоту одного элемента к другим элементам на чистом JS?

Как мне через vanilla js получить высоту самого высокого элемента слайдера и присвоить его к остальным, чтобы по итогу была одна высота для всех?
На сайте использовался swiper-слайдер, при добавлении в него картинок разного размера они рас…

26
Фев
2021

Когда переходить к обучению JavaScript? [закрыт]

Решил пойти по пути frontend разработчика в самом начале, верстальщика так сказать. Активно изучаю Css , пытаюсь вникнуть в его тонкости , комбинаторы , спецификацию, технологию flexbox итд. Стоит ли параллельно с ним учить JavaScript или …

17
Фев
2021

CSS hover и document.querySelector

Мой пример, похожий на задачу https://jsfiddle.net/61xqy7z5/1/
Нужно при выборе/клике пункта меню, чтобы пропадал выпадающий список и менялся на кнопке текст, у пунктов меню уже есть свой обработчик JS и туда добавляю просто
document.query…