Simple yet useful scripts [HTML/CSS/JS] CodePen // Простые, но полезные скрипты [HTML/CSS/JS] CodePen

[MrHaim]

Hello 😉 In this topic I will try to post simple and cool scripts written in HTML, CSS and JS available at codepen.io

1. Checking information on the VISA card

A very nice job that, after entering the data, transfers them to the "3D" card, which can be rotated by hovering over it. Everything is done dynamically, depending on which field we click, the card will rotate ;D.

https://codepen.io/supah/pen/OMdPpW/

2. Scoreboard

Leaderboard of the best or most active players. After hovering over the user, the bar moves forward.

https://codepen.io/supah/pen/WwrJpw

3. Backlit keyboard

A very nice script that can be used, for example, when presenting a keyboard or added to a website, e.g. in the login panel ;D. Depending on which key we press, we will see an inscription expressing perhaps "Emotions".

https://codepen.io/kowlor/pen/MYOKRd

4. Account creation (Interactive Sign Up Form)

The dynamic process of creating a new account is well done ;). After entering the email, the field disappears and another one appears. At the final stage of registration, it will show us that the account is ready

https://codepen.io/rkpasia/pen/LNEQod

5. Login (Calm breeze login screen)

Login interface with inputs and a welcome message after logging in. This can be used if, for example, we are creating a "browser game".

https://codepen.io/Lewitje/pen/BNNJjo

6. Rotating orbits

I don't know where it can be used, but someone did a very nice thing. On the left side we have a panel in which we set the speed of the orbits, size etc... Really after a long time something beautiful is created <3.

https://codepen.io/jackrugile/pen/aCzHs

7. Interface

Useful interface to create pages such as facebook. The basis for creating "social pages" is already 😜

https://codepen.io/jlalovi/pen/bIyAr

8. Login panel (Flat login form 3.0)

Nicely done login/account registration panel ;). At first glance, we see the login panel, but if we click on the pencil where it says "click me", registration will appear. When you want to go back to logging back, click the pencil icon.

https://codepen.io/andytran/pen/PwoQgO

9. Simple Video Player

A simple yet nice video player. We can run it in "Fullscreen" mode and adjust the volume.

https://codepen.io/heff/pen/wtrHL

10. Login Panel (Login Box Concept)

Simple nice login panel. After entering the login, it will show us if it is correct, the same with the password. Then it will go to the checking process. If everything is "OK" we will be shown a greeting.

https://codepen.io/jcoulterdesign/pen/azepmX

11. Budget Checker (Login Box Concept)

Surely you've been looking for a slider where you can mark how much budget you want to spend. This is where the "budget slider" comes in 3D. Use the mouse to move the cursor left and right.

https://codepen.io/Hornebom/pen/ranmi

12. Menu (Simple radial menu)

After clicking on the button with 3 dashes, a selection menu will pop up around us. Smooth drop down menu effect.

https://codepen.io/suez/pen/vAais

13. CD Rom 360

The CD rotates 360 degrees. Many people have been looking for how to do this and I have been looking for it myself. You can substitute any element instead of the plate and voilla.

https://codepen.io/stix/pen/dMXbJb

14. PIN check

Nicely done checking the correctness of the pin entered by us. When entering, we fill up with dots, when we enter the whole thing, we will see if the pin is correct. If it is correct it will light up green and if wrong it will light up red. A nice addition when we want to request a password in some document; p.

https://codepen.io/kotwgarnku/pen/PZLgvb

15. Guarded zone

Securing access to the website. On page load js effect. Nicely done form binding. After entering the password, we can click the "PROCEED" button (e.g. OK)

https://codepen.io/THEORLAN2/pen/mPVzWr

16. File download

When we click the arrow button, a white circle will be created that extends out of the page. It means how much percent is left to download the file. It decreases with decreasing % until the end. At the end, you will see a sign that the file has been downloaded. Very cool idea and I think it will come in handy ;D.

https://codepen.io/montechristos/pen/GZgXWN

 

 

 

Всем привет 😉 В этой теме я постараюсь выкладывать простые и крутые скрипты написанные на HTML, CSS и JS доступные на codepen.io

1. Проверка информации по карте VISA

Очень приятная работа, которая после ввода данных переносит их на "3D" карточку, которую можно вращать, наведя на нее курсор. Все делается динамически, в зависимости от того, какое поле мы нажмем, карточка будет вращаться ;D.

https://codepen.io/supah/pen/OMdPpW/

2. Табло

Таблица лидеров лучших или самых активных игроков. После наведения на пользователя полоса движется вперед.

https://codepen.io/supah/pen/WwrJpw

3. Клавиатура с подсветкой

Очень хороший скрипт, который можно использовать, например, при представлении клавиатуры или добавить на веб-сайт, например. в панели входа ;D. В зависимости от того, какую клавишу мы нажмем, мы увидим надпись, выражающую, возможно, «Эмоции».

https://codepen.io/kowlor/pen/MYOKRd

4. Создание учетной записи (интерактивная форма регистрации)

Динамический процесс создания новой учетной записи выполнен хорошо ;). После ввода почты поле исчезает и появляется другое. На финальном этапе регистрации нам покажет, что аккаунт готов

https://codepen.io/rkpasia/pen/LNEQod

5. Войти (Экран входа в систему с легким бризом)

Интерфейс входа с входами и приветственным сообщением после входа в систему. Это можно использовать, если, например, мы создаем «браузерную игру».

https://codepen.io/Lewitje/pen/BNNJjo

6. Вращающиеся орбиты

Я не знаю, где это можно использовать, но кто-то сделал очень хорошую вещь. С левой стороны у нас есть панель, в которой мы устанавливаем скорость орбит, размер и т. д. Действительно, спустя долгое время создается что-то красивое <3.

https://codepen.io/jackrugile/pen/aCzHs

7. Интерфейс

Полезный интерфейс для создания страниц, таких как facebook. Основа для создания "социальных страниц" уже есть 😜

https://codepen.io/jlalovi/pen/bIyAr

8. Панель входа (плоская форма входа 3.0)

Красиво сделанная панель входа/регистрации аккаунта ;). На первый взгляд мы видим панель входа в систему, но если мы нажмем на карандаш, где написано «щелкни меня», появится регистрация. Если вы хотите вернуться к входу в систему, щелкните значок карандаша.

https://codepen.io/andytran/pen/PwoQgO

9. Простой видеоплеер

Простой, но приятный видеоплеер. Мы можем запустить его в «полноэкранном» режиме и настроить громкость.

https://codepen.io/heff/pen/wtrHL

10. Панель входа в систему (концепция окна входа)

Простая приятная панель входа. После ввода логина он покажет нам, правильный ли он, то же самое и с паролем. Затем он перейдет к процессу проверки. Если все "ОК" нам будет показано приветствие.

https://codepen.io/jcoulterdesign/pen/azepmX

11. Проверка бюджета (концепция окна входа)

Наверняка вы искали ползунок, где можно отметить, сколько бюджета вы хотите потратить. Вот тут-то и появляется «бегунок бюджета» в 3D. Используйте мышь для перемещения курсора влево и вправо.

https://codepen.io/Hornebom/pen/ranmi

12. Меню (простое круговое меню)

После нажатия на кнопку с 3 черточками, вокруг нас выскочит меню выбора. Плавный эффект выпадающего меню.

https://codepen.io/suez/pen/vAais

13. Компакт-диск 360

CD вращается на 360 градусов. Многие люди искали, как это сделать, и я искал это сам. Вместо пластины можно заменить любой элемент и вуаля.

https://codepen.io/stix/pen/dMXbJb

14. Проверка PIN-кода

Красиво сделана проверка корректности введенного нами пин-кода. При вводе заполняем точками, при вводе целиком - посмотрим, правильный ли пин. Если он правильный, он загорится зеленым, а если неправильный, загорится красным. Приятное дополнение, когда мы хотим запросить пароль в каком-то документе; п.

https://codepen.io/kotwgarnku/pen/PZLgvb

15. Охраняемая зона

Защита доступа к сайту. JS-эффект при загрузке страницы. Красиво оформленный переплёт. После ввода пароля мы можем нажать кнопку «ПРОДОЛЖИТЬ» (например, ОК)

https://codepen.io/THEORLAN2/pen/mPVzWr

16. Загрузка файла

Когда мы нажмем кнопку со стрелкой, будет создан белый круг, выходящий за пределы страницы. Это означает, сколько процентов осталось для загрузки файла. Он уменьшается с уменьшением % до конца. В конце вы увидите знак того, что файл был загружен. Очень классная идея и думаю пригодится ;D.

https://codepen.io/montechristos/pen/GZgXWN

 

 

Кредит для XwReK // Credit to XwReK