@frontend_school #интересное

Диммерный выключатель

Сегодня предлагаем вам ознакомиться с кодом следующего проекта, а именно диммерного выключателя света. Каждый раз перезагружая страницу вы получите разный цвет освещения, а поворот выключателя меняет степень освещения. Посмотрите, как он реализован с использование Pug - Stylus - JS.

CodePen

@frontend_school #интересное

Дизайнерская чаша

Чаша, может, и не блещет дизайном, но зато она может помочь вам в создании уникального и приятного дизайна вашего сайта! С помощью HTML-препроцессора Pug, CSS-препроцессора Stylus, JS библиотеки Jquery и толики магии эта чаша по клику выдаст вам пару цветов.

CodePen

@frontend_school #интересное

Kill The King

Сегодня предлагаю вам ознакомиться с очередной игрой. Суть просто - убивай приспешников короля, подбираясь к нему всё ближе и ближе. Из особенностей стоит отметить наличие звука и даже голосов у персонажей, а также приятную графику для подобного проекта.

CodePen

@frontend_school #интересное

Диско-куб

Диско-шар уже не модно! Теперь в моде диско-куб. Приятный дизайн, забавная анимация и простая реализация - что ещё нужно для качественного CodePen проекта?! Выполнен на HTML и CSS с использованием препроцессоров Pug и Stylus соответственно.

CodePen

@frontend_school #интересное

Лабиринт

В воскресенье на обед у нас лабиринт. Управление на джойстике, что немного затрудняет задачу. А задача состоит в том, чтобы одновременно доставить все четыре шарика в центр. Выполнен на HTML, CSS и JavaScript.

CodePen

@frontend_school #интересное

Ящерица

Анимация выполнена на CSS без использования JavaScript.

CodePen

@frontend_school #интересное

3D Pokedex

Выполненный в виде 3D объекта покедекс из вселенной Pokemon. На него можно не только смотреть, но и открыть и посмотреть, что внутри!

CodePen

@frontend_school #интересное

Monument Valley 2

Автор этого проекта перенёс анимацию популярной игры в HTML и CSS. Здесь нет JS, поэтому только смотри, но не трогай. Проект также интересен с точки зрения реализации.

CodePen

@frontend_school #интересное

Мини-квест «Найди подарки»

Скоро Новый год и на CodePen начали появляться тематические проекты. Пройдите этот несложный квест и найди, спрятанные подарки. Приятная графика и код, как дополнительный бонус 😉

CodePen

@frontend_school #интересное #Vue

Калейдоскоп

Калейдоскоп выполнен с помощью фреймворка Vue. Изменения происходят за счёт движения курсора и вычислений на его основе. Если вы решили изучать Vue, то будет очень полезно изучить и этот проект.

CodePen

@frontend_school #интересное

Внимательный мишка

Сегодня предлагаем вашему вниманию CodePen проект, который показывает, как вы можете настроить отображение курсора на странице, а также, как можно создать эффект слежения за ним.

CodePen

@frontend_school #интересное

Спичка в микроволновке

Вы знаете, как ведёт себя зажённая спичка в микроволной печи? Очень интересный эффект! В этом CodePen проекте вы можете наглядно увидеть, что происходит в случае горения спички в работающей микроволновке. Так что, если вам интересно понаблюдать этот эффект или хотите посмотреть, как реализован сам проект, то, как обычно, ссылка ниже!

CodePen

P.S. Пожалуйста, не повторяйте этот эксперимент дома! На YouTube полно роликов с этим эффектом, если вам не хватило того, что предлагает этот проект 😊

@frontend_school #интересное

Форма ввода пароля

Посмотрите какая интересная форма для ввода пароля! Здесь и приятная анимация, и проверка на секьюрность имеется благодаря наличию регулярок. Полезно к изучению всем, особенно тем, кто хочет разобраться с SVG и регулярными выражениями.

CodePen

@frontend_school #интересное

Форма ввода электронной почты

У этой формы не только приятный дизайн, но ещё и валидация текста. То есть, если вы напишете что-то непохожее на email, то форма даст вам об этом знать.

CodePen

3D-самолёт

Интересный проект на CodePen, где автор создал анимацию полёта самолёта. Вы, кстати, можете менять направление полёта простым движением мышки, а клик переключает проект в ночной режим. Из интересного тут библиотека GSAP, а также использование препроцессоров Pug для HTML и Stylus для CSS.

CodePen

@frontend_school #интересное

Кнопка на Vue

Отличный пример работы реактивности во Vue — симпатичная кнопка с приятной анимацией. Можете посмотреть код и даже добавить его в свой проект.

CodePen

@frontend_school #интересное