Как сделать такой эффект с фотографией?
Как сделать такой эффект с фотографией, чтобы можно было тянуть за линию влево и вправо? С одной стороны фотография черно белая, а с другой цветная.
…
Category: CSS
Исправить стилизованный select на js
Нашел на просторах интернета код стилизации select, немного подправил стили под себя, но столкнулся в одной задачей и не могу ее исправить. Нужно чтобы по умолчанию был активен первый option, но данный код его полностью выбрасывает. Что ну…
Скроллинг страницы мышкой при нажатии на страницу
Как можно реализовать скроллинг страницы мышкой? А именно возможно ли, нажимая левую клавишу мышки на странице и не отпуская ее (клавишу), передвигать страницу вверх и вниз? Спасибо!
…
Запретить выделение при двойном нажатии
Требуется, чтобы при двойном нажатии, текст в квадрате не выделялся.
function t5() {
clearSelection();
let x = document.querySelector(‘.div-5’);
if(this.classList.contains(‘active’)){
this.classList.remove(‘active’)…
Как остановиться при прокручивании страницы прямо перед элементом
У меня есть элемент на странице, когда я до него скролю, я хочу чтобы я остановился прямо перед ним. Однако, если я начинаю скролить от начала страницы, то к тому моменту когда я дошел до этого элемента, я либо не доскролил немного, или же…
После удаление динамического элемента HTML блокируется взаимодействие со всей страницой
В HTML динамически добавляется элемент, которы ложится поверх всего содержимого сайта. После закрытия этого элемента(окна) он удаляется из HTML, больше не отображается, но взаимодействовать с сайтом не получается, то есть ссылки, кнопки пр…
Нестандартная последовательность размещения блоков на странице
Как разместить блоки в такой последовательности, как указано на картинке? Любые методы приветствуются, в том числе и JavaScript, с помощью которого вероятнее всего и возможно такое размещение блоков. Или все гораздо проще?
…
Как с помощью скрипта добавить класс первому слову в абзаце?
Как с помощью скрипта добавить класс первому слову в абзаце?
<p>Спорт приносит большую радость. Люди ходят в секции, посещают спорт – клубы, играют в спортивные игры, закаляются и общаются с новыми людьми. Спортивные командные игр…
Как сделать кликабельную карту из файла SVG?
В настоящее время я изучаю Javascript.
Я пытаюсь составить кликабельную карту Германии с данными. Такую, как эта.
Amchart предоставляет карту Германии в файле SVG. Но это не похоже на тот пример, что выше.
У меня есть некоторые да…
Виртуальный манипулятор (джойстик) на JS
Для проекта требуется создать эмулятор джойстика, чтобы при определенном положении манипулятора серверу отсылалась определенная команда, исходя из X и Y координат.
Серый квадрат в левом верхнем углу и есть сам манипулятор. Он должен нах…
Как сделать размытие фона в CSS с помощью одной строки кода
От автора: фоновые размытые изображения — это круто. Это неоспоримый факт. В каждом пользовательском интерфейсе должно быть не менее десяти фоновых размытых изображений (желательно наложенных друг на друга), и каждый интерфейс, созданный с самого зарождения всемирной паутины, который не содержит фоновых размытых изображений, должен быть переработан в первую очередь. Это правда. Разработчики любят, когда вы […]
Вёрстка сайта слайдера
С помощью каких плагинов можно сделать сайт похожим на этот .
Думаю тут можно использовать slick-slider только сделать так, чтобы он реагировал на scroll и swipe, но как сделать меню которое есть на этом сайте (прилаживаю картинку)?
…
Как проверить имя и фамилию через одну функцию
https://jsfiddle.net/gej9582z/
есть функция validName . она проверяет имя и фамилию на валидность. В параметре nameID передается id инпута (‘surname’ или ‘name’). То что не прошло валидацию получает класс incorrect-forms (добавляется крас…
Как создать липкий футер с помощью flexbox
От автора: создание липкого футера является одной из самых распространенных задач веб-разработки, которую вы легко можете решить с помощью flexbox. Без липкого футера, если у вас недостаточно содержимого на странице, футер «подпрыгивает» до середины экрана, что может полностью испортить взаимодействие с пользователем. До появления flexbox разработчики использовали отрицательные поля, чтобы заставить нижний колонтитул опускаться до […]
CSS Import
От автора: каскадные таблицы стилей (CSS) являются основой дизайна большинства веб-сайтов. Он описывает, как элементы должны отображаться на экране. Именно здесь в игру вступает правило CSS @import . Правило @import указывает движку CSS импортировать внешнюю таблицу стилей в другую таблицу стилей. Это позволяет добавлять правила стилей из таблицы стилей в другую таблицу. Это правило также […]
JS Таймлайн с привязанными к нему данными
хотел бы спросить, вот наткнулся на такой сайт как этот https://shamir.localtimeline.com/index.php?lang=he#
кто-нибудь знает, чтобы сделать такой таймлайн, с привязанными к нему данными, нужно писать свои костыли или же есть какие-то библ…
Подсветка пункта меню именно в тот момент, когда до него проскролили
Подскажите, пожалуйста, как мне сделать так, чтобы активный (выбранный пункт меню) подсвечивался непосредственно при выполнении определенного условия (когда проскролились до нужного элемента). Условие я задам потом сама, на данный момент ф…
Простой калькулятор
Почему не работает калькулятор ?
“use strict”;
function CalcNumbers(result){
document.getElementById(“input”).innerHTML=document.getElementById(“input”).innerHTML+result;
}
.calculator{
width: 500px;
background: #F08080;
…
Responsive SVG textpath для передвижения текста
Я пытаюсь обернуть блок новостей (который будет варьироваться по ширине и высоте) с анимированным SVG-текстом вокруг него. У меня получилось вот это:
#canvas{
height: 100vh;
width: 100vw;
}
.svg-container {
display: inline-b…
проблема в работе jQuery [закрыт]
всем привет. Подключил jQuery к HTML, но ничего не работает, когда добавляю $ или jQuery. Для проверки написал alert(‘привет’); – оно работает.
Я прикрепил коды, и по логике, так всё должно работать. Но на страничке не появляется ссылка “…
Firefox писал этот код ошибки (ReferenceError: "x" is not defined)
HTML
<section class=”modal modal-map”>
<h2 class=”visually-hidden”>Как до нас добраться</h2>
<iframe width=”766″ height=”560″ src=”https://www.google.com/maps/embed?pb=!1m14!1m8!1m3!1d4491.477615428313!2d37.499406!3d5…
4 способа анимировать цвет текстовой ссылки при наведении
От автора: давайте создадим эффект на чистом CSS, который меняет цвет текстовой ссылки при наведении… но цвет будет меняться постепенно, а не сразу. Для этого мы можем использовать четыре различных метода. Давайте рассмотрим их, помня о важных вещах, таких как доступность, производительность и поддержка браузерами. Техника 1: Использование background-clip: text На момент написания статьи background-clip: […]
Скролл к секциям, совместно со скроллом слайдов
Всем привет, есть код плавной прокрутки к секциям, по сути прокручивает только 3 секции со всей страницы, но на второй секции есть слайдер, когда прокручиваешь к слайдеру, сначала должны пролистать слайды, только потом скролл должен идти н…
Как при нажатии на кнопку добавить элемент canvas?
Как при нажатии на кнопку добавить элемен canvas js и при нажатии на вторую кнопку удалить последний добавленый?
Как увеличить и уменьшит размер фото при клике на него в JS
Есть одно фото задал его width=200 height=200 нужно увеличивать фото при каждом нажатии по 50px до размера 500px а затем уменьшат до начальной 200px
…
Как создать параметры для текста в JS
В первом input user пишет что то и при нажатии на publish отображается результат в h1
во втором input пишется размер текста например 15px
в третьем – font-family
в четвертом – цвет текста
в пятом – background-color
нужно чтобы при клике se…
Не работает меню на мобильной версии
Уже какой день не могу решить данный вопрос, кому не сложно помогите.
Проблема такова, подменю в ПК версии работает стабильно. Как только перехожу на мобильную версию и хочу открыть sub-menu чтобы выбрать любой под-пункт, меня пересылает…
Пересечение текста линией в CSS
От автора: в начале этого года я наткнулась на это демо от Флорина Попа, в нем линия проходит либо поверх, либо позади букв заголовка. Я подумала, что это крутая идея, но в реализации было несколько мелочей, которые я могла бы упростить и улучшить одновременно. Во-первых, в оригинальной демо-версии текст заголовка дублируется, чего, как я знала, […]
Как создать подобный эффект
Меня заинтересовал подобный эффект дыма, под которым находится изображение, см здесь. Если не ошибаюсь, это разновидность параллакс эффекта. Каким образом это можно реализовать ? Может есть какие то готовые либы ?
Буду рад за любую помощь…
Проблема с анимацией @vaadin/router
Резко встала проблема анимации переходов с использованием @vaadin/router. Когда пользователь переходит по роутам срабатывает типичный fadeOut и fadeIn, но возникают проблемы из-за позиционирования – #outlet выпадает из основного контейнера…
Свежие комментарии