Задать вопрос

Евгений Винокуров

22 года, frontend как смысл жизни

27

вклад
0

вопросов
32

ответа
47%

решений

Ответы

Как показать клавиатуру ввода при нажатии на DIV?
Евгений Винокуров @Eugevin
22 года, frontend как смысл жизни
Не понимаю конечно, в какой ситуации и при каком юзер кейсе это пригодится, но ладно:

<body> <div class="simple-keyboard"><input type="text"></div> </body>

.simple-keyboard { position: relative; } .simple-keyboard input { position: absolute; z-index: -1; top: 0; left: 0; height: 100%; width: 100%; opacity: 0; }

makeButtonMagic(); function makeButtonMagic() { document.querySelector('.simple-keyboard').addEventListener('click', function () { this.querySelector('input').focus(); }) }

Ответ написан более двух лет назад

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

Евгений Винокуров @Eugevin
22 года, frontend как смысл жизни

Сверстать - сложно. Если это кнопка, то можно псевдоэлементами ::before, ::after наложить. В общем и целом, такие "округлости" через CSS можно делать, но это clip-path нужен, пару раз делал с помощью него анимированные бэкграунды (тоже по нужде дизайнеров) - удовольствие ну очень так себе...

Ответ написан более трёх лет назад

Комментировать

Комментировать
Как сделать SVG animation?

Евгений Винокуров @Eugevin
22 года, frontend как смысл жизни

Это можно легко сделать через AnimeJS. Скорее всего, с помощью этой библиотеки и сделано)

Ответ написан более трёх лет назад

1 комментарий

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

Евгений Винокуров @Eugevin
22 года, frontend как смысл жизни

Настройка DNS записей у домена + на самом сервере нужно будет поправить конфиги Nginx/Apache и добавить в них свой второй домен

Ответ написан более трёх лет назад

5 комментариев

5 комментариев
Почему uncaught referenceerror: menu is not defined?
Евгений Винокуров @Eugevin
22 года, frontend как смысл жизни
Немного исправил ваш код:

<script defer src="script.js"></script>

window.onload = () => { menu.onclick = function myFunction() { const x = document.getElementById('myTopnav'); if (x.classList.contains('topnav')) { x.classList.add('responsive') } } }

Документация: defer, classList

Ответ написан более трёх лет назад

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

Евгений Винокуров @Eugevin
22 года, frontend как смысл жизни

Вижу, что вопрос еще не решен, но вам все правильно написали в комментариях.

Да, скорее всего, на сайте Apple используется обычный IntersectionObserver. То есть логика какая: у нас есть страничка и на ней расположены элементы с определенными дата-атрибутами. Я смотрел страницу с IPhone13 и там, к примеру, такие элементы - это data-fiesta и data-build-id (их там конечно больше, потому что анимации разные). Логика такая: при инициализации страницы с помощью querySelectorAll и IntersectionObserver поочередно создаются массивы из одинаковых по анимации элементов и на них вешается обработчик на событие появления на экране, а дальше либо ручками анимировать, либо использовать AnimeJS, GSAP и тд.

*Ничего сложного тут ничего нет, это же не игра на canvas - можно просто открыть исходный код страницы и с первого взгляда все станет +- ясно как работает.

Ответ написан более трёх лет назад

Комментировать

Комментировать
Как запретить зум при двойном клике?
Евгений Винокуров @Eugevin
22 года, frontend как смысл жизни
Попробуйте использовать
<meta name="viewport" content="width=device-width, initial-scale=1.0,user-scalable=no">

!Но сразу предупреждаю - гугл и яндекс такое не любят и по головке за свойство user-scalable=no не поглядят

Ответ написан более трёх лет назад

9 комментариев
9 комментариев
Как сделать адаптивную masonry, чтобы автоматически изображения подстраивались по ширине?

Евгений Винокуров @Eugevin
22 года, frontend как смысл жизни

Наверное, имеете ввиду вот эту штуку. Пользовался пару раз в рабочих проектах - работает как и нужно. Можно написать свое решение на CSS Grid с капелькой JS, но считаю, что оно того не стоит)

Ответ написан более трёх лет назад

Комментировать

Комментировать
Как найти где происходит отрисовка лого в этом примере на canvas'е?

Евгений Винокуров @Eugevin
22 года, frontend как смысл жизни

А зачем нужна отрисовка именно этого лого? Там все минифицировано и оптимизировано вебпаком, поэтому в коде что-то искать сложно и, считаю, не нужно.

Есть несколько алгоритмов для такой обрисовки логотипа. Можно экспортнуть png картинку, которую вы нашли, в base64 и дальше рисовать на канвасе (так, я думаю, на сайте Михуе и используется). Можно рисовать SVG через canvas. Можно рисовать с нуля прямо на канвасе.

* Много способов - обычно используют метод с base64. В целом гугл и ютуб дадут огромное множество туторов по тому как это делать быстро и правильно - найти инфу не сложно)

Ответ написан более трёх лет назад

1 комментарий

1 комментарий
Баг или фича c max-height и picture?

Евгений Винокуров @Eugevin
22 года, frontend как смысл жизни

Обычно свойства height и max-height подразумевают под собой то, что вы будете использовать их вместе. Если вы просто укажете свойство max-height, картинка все равно будет иметь initial размер со своим initial height значением.

Ответ написан более трёх лет назад

Комментировать

Комментировать
Не запускается сборка GULP выдает ошибки при npm i в window 10 при этом в подсистеме linux все работает. Как пофиксить проблему?

Евгений Винокуров @Eugevin
22 года, frontend как смысл жизни

Ошибка 100% связана с Sass-обработчиком.

Если кратко, то проблема в node-sass npm и текущей версией node.js, которая установлена в окружении. Был такой пакет - node-sass, жил да добра наживал, а потом вдруг его поддержка прекратилась и он перешел в статус deprecated. Теперь вместо node-sass во всех новых проектах при настройке используют dart-sass (пакет sass в npm). Чтобы пофиксить ошибку, советую обновить зависимости и, по возможности, переехать на sass (либо можно попробовать установить зависимости через yarn - может пофиксится и ничего менять не нужно будет).

* Еще как вариант - через nvm поменяй версию ноды на 16.13.2, так как последняя версия node-sass вроде как способна с ней работать.

Ответ написан более трёх лет назад

2 комментария

2 комментария
Как правильно подключиться к библиотеке Approve JS, используя CDN?
Евгений Винокуров @Eugevin
22 года, frontend как смысл жизни
Подключение через require используется тогда, когда вы хотите подключить библиотеку в окружении Node.js. В браузерном JavaScript require функции нет. Подозреваю, что вы просто не изменили
<script src="https://cdnjs.cloudflare.com/ajax/libs/approvejs/[version]/approve.min.js"></script>
[version] на версию при подключении через CDN.

Ответ написан более трёх лет назад

3 комментария
3 комментария
Как исправить ошибку "missing ) after argument list"?
Евгений Винокуров @Eugevin
22 года, frontend как смысл жизни
Нужно поправить на

result1 = await fetch(targetSite+'-01').then(data => data.json());

Ответ написан более трёх лет назад

Комментировать
Комментировать
Android приложение на js и php?

Евгений Винокуров @Eugevin
22 года, frontend как смысл жизни

React Native - лучшее решение, если хочешь создать именно нативное приложение (+ его можно будет легко распараллелить на Anroid/IOS/Web).

PWA - Можешь создать ПВА'шку в виде WEB-приложения, которую можно скачать на телефон и работать оно будет даже в Оффлайн режиме. Если не хочешь сильно запариваться, то выбирай этот вариант

Ответ написан более трёх лет назад

Комментировать

Комментировать
Как сделать такую фигуру в css?

Евгений Винокуров @Eugevin
22 года, frontend как смысл жизни

Можно в Figma создать такую фигуру, экспортнуть как SVG и задать через background для нужной секции. Обычно так делают)

Ответ написан более трёх лет назад

Комментировать

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

Евгений Винокуров @Eugevin
22 года, frontend как смысл жизни

У блока Notifications добавить flex-direction: column. Дочерние блоки упаковать в общие три блока и с ними дальше работать

Ответ написан более трёх лет назад

Комментировать

Комментировать
Как сделать svg картинку при нажатии другого цвета?

Евгений Винокуров @Eugevin
22 года, frontend как смысл жизни

snippet

Ответ написан более трёх лет назад

Комментировать

Комментировать
Почему тег picture работает некорректно?

Евгений Винокуров @Eugevin
22 года, frontend как смысл жизни

Странно, но у меня в Chrome отображается именно webp, т.е тег Picture работает корректно. Нажмите на картинку правой кнопкой мыши и кликните "открыть картинку" - уверен, что откроется webp :з

Ответ написан более трёх лет назад

3 комментария

3 комментария
Как сделать одинаковую высоту блоков с разным контентом?

Евгений Винокуров @Eugevin
22 года, frontend как смысл жизни

Вообще за одинаковую высоту при разном наполнении контентом отвечает свойство родителя (flex-контейнера для child'ов), как align-items. Если поставить значение align-items на stretch (растяжение), то высота будет считаться по самому "длинному" в эту самую высоту элементу. А так вот очень подробный гайдик о флексах: https://css-tricks.com/snippets/css/a-guide-to-flexbox/

PS: Немного не понял вопроса, потому что если судить по коду, который вы приложили выше, то уже все должно прекрасно растягиваться

Ответ написан более трёх лет назад

Комментировать

Комментировать
Существует ли способ сделать фон у БУКВ?

Евгений Винокуров @Eugevin
22 года, frontend как смысл жизни

snippet

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

Ответ написан более трёх лет назад

Комментировать

Комментировать

Самые активные сегодня

VoidVolker
- 4 ответа
- 0 вопросов
Drno
- 2 ответа
- 0 вопросов
ton1
- 2 ответа
- 0 вопросов
Ипатьев
- 2 ответа
- 0 вопросов
TatianaKrd
- 1 ответ
- 1 вопрос
tgarl
- 0 ответов
- 2 вопроса