UX эффекты
Перейти до навігації
Перейти до пошуку
- http://frontmen.fm/#contacts — хорошая форма контактов
- http://codepen.io/Rpmiller80/pen/JbFEt — подобное ↑
- 10+ Radio Button CSS style Examples
- https://gscode.in/radio-button-css/
- Material UI stretch button
- Underground radios
- Input range with morphing knob
- Input range with morphing knob part II
- Input range with morphing knob part III
- jQuery Time Range Slider
- Gear Slider
- jQuery.limitslider
- Color range slider
- http://loopj.com/jquery-simple-slider/demo.html
- Ion.RangeSlider
- budgetSlider
- Slider Pagination Concept - with jQuery UI Slider
- https://animate.style/
- https://animista.net/
- https://animejs.com/
- Moving Letters — Text animated with JavaScript & anime.js
- Light
- Velocity.js — быстрая библиотека анимаций, может работать без JQuery и может интегрироваться с Vue.js.
- Анимирование списков и появления/исчезновения — Vue.js
- AOS - Animate on scroll library
- ScrollMagic
- Blur effect on scroll
- 3D tilted effect on scroll
- Мягкий эффект при достижении конца или начала прокрутки
- Parallax Images Scroll
- ScrollMe - For simple scrolling effects
- https://codepen.io/daveredfern/pen/zBGBJV — Change background colour with fade animation as you scroll
- https://scrollmagic.io/examples/basic/class_toggles.html Class Toggles - Examples - ScrollMagic
- https://clevercreative.com/ — индикатор под навбаром
- https://volum8.com/webbys-strongeru/ — индикатор внизу экрана
- https://mmenujs.com — App look-alike menus with sliding submenus
- https://codepen.io/ainalem/pen/wxpRWX — Stretchy nav highlight
- https://codepen.io/ainalem/pen/KBvOWV — Fluid tab bar
- https://codepen.io/ainalem/pen/MWKxaGO — Nav Bar meets Bottom Sheet
- https://www.sliderrevolution.com/resources/css-hamburger-menu/ — Cool CSS Hamburger Menu Icons and Their Animations
- https://codepen.io/ainalem/pen/GeMqdP — Flippin' juicy burgers
- https://codepen.io/ainalem/pen/LJYRxz — Flippin' burgers
- https://codepen.io/ainalem/pen/ZaMQdK — Gooey hamburger menu
- https://codepen.io/ainalem/pen/YoyZpq — The circular menu
- https://codepen.io/fabean/pen/XXegoQ — Single Element Animated Hamburger Menu CSS Only
- https://codepen.io/mblode/pen/evjfn — The Hamburger Menu
- https://codepen.io/stevenfabre/pen/LGvzk — Hamburger Animated Icon
- https://codepen.io/silvandiepen/pen/rZaOGR — Menu test - css only - effects
- https://codepen.io/RRoberts/pen/ZBYaJr — Hamburger Icon Animations
См. Примеры на действующих сайтах
- https://codepen.io/marcbizal/pen/YXEmyQ — Fullscreen Navigation — с вычислением размера морфинга
- https://codepen.io/lmgonzalves/pen/KaWaJO — Morphing Hamburger Menu with CSS
- https://codepen.io/sergioandrade/pen/onkub — Hamburger icon with Morphing Menu
- https://ldh.webflow.io/ — меню с морфингом (https://winners.webbyawards.com/2021/websites-and-mobile-sites/features-design/best-navigationstructure/167836/ldh-hazards-online-training-platform WebbyAwards 2021)
- https://codepen.io/r0tterz/pen/LAGrC
- https://codepen.io/carolynmcneillie/pen/ZMpgye
- https://codepen.io/lbebber/pen/GJrxdR
- https://codepen.io/melissacodes/pen/wPjdym
- https://codepen.io/jenya/pen/KrRqLY
- How to add a paint stroke highlight to text using CSS in Divi
- fullPage.js
Другие варианты:
- CSS scroll-behavior, scroll-snap-type & mix-blend-mode
- d4nyll/smartscroll: jQuery plugin for scrolljacking and auto-hashing
- onepage-scroll
- tilt.js — A tiny requestAnimationFrame powered 60+fps lightweight parallax hover tilt effect for jQuery.
- http://gijsroge.github.io/tilt.js/
- https://github.com/gijsroge/tilt.js
- Пример: https://madewithlove.com/our-products/audits/ — блок "5 pillars of an audit"
- Без jQuery: https://github.com/micku7zu/vanilla-tilt.js
- 3D CSS Parallax Depth Effect
- Expand/collapse cards with figure cut text
- Absolute items grid with modal window
- cards hover effects
- Card hover effect
- EC card hover
- Card hover effect experiments
- House of Cards - a Collection by Mojtaba Seyedi on CodePen — коллекция эффектов карточек
- Emerging Tooltip
- Underline to Talking Bubble Morphing
- The more menu
- https://codepen.io/MichaelRyanSmith/pen/obboGX — подсказка на обороте карточки
- Information to Close Button & Dialog Animation
Подборки:
- Vue-Toastification — Хорошо для отображения информации типа "Товар добавлен в корзину"
- Awesome Notifications — Lightweight JavaScript library for beautifull and smooth notifications
См. Modal
- https://www.kirilv.com/canvas-confetti/
- https://codepen.io/alexzaworski/pen/mEkvAG Color Changin — клик на фоне вызывает фейерверк и смену цвета фона
- Responsive Device Mockups
- https://codepen.io/plavookac/pen/QMwObb CSS Wave Animation with a .png — волна в подвале
- Great CSS Text Animation Examples You Can Use
- CSS Particle Effects — всплывающие фонтаны из текста
- Примеры сайтов
- Примеры анимации
- Buttons
- https://blog.avada.io/css/ — 100+ Best CSS Examples