>Zina: /* Фото людей */

2023-12-17T17:13:09Z

Фото людей

Нова сторінка

== Слайдеры ==

* [[Slider]]

== Формы ==

* http://frontmen.fm/#contacts — хорошая форма контактов
* http://codepen.io/Rpmiller80/pen/JbFEt — подобное ↑

=== Input ===

* [https://codepen.io/ainalem/pen/aPLxez Bump name part II]
* [https://codepen.io/ainalem/pen/GRqPwoz Placeholders]
* [https://codepen.io/ainalem/pen/rrRELG Minimalistic search]

=== Радиокнопки / Radio Buttons ===

* [https://dev.to/gscode/10-radio-button-css-style-examples-ph6 10+ Radio Button CSS style Examples]
* https://gscode.in/radio-button-css/
* [https://codepen.io/ainalem/pen/JxEqzW Material UI stretch button]
* [https://codepen.io/ainalem/pen/QzogPe Underground radios]

=== Input Scroll ===

* [https://codepen.io/ainalem/pen/JjGpojP Input range with morphing knob]
* [https://codepen.io/ainalem/pen/jOWZBQd Input range with morphing knob part II]
* [https://codepen.io/ainalem/pen/BajgxOj Input range with morphing knob part III]

=== От-До ===

* [https://codepen.io/caseymhunt/pen/kertA jQuery Time Range Slider]
* [https://codepen.io/MarioD/pen/WwXbgr Gear Slider]
* [https://vanderlee.github.io/limitslider/#chapter%20Examples jQuery.limitslider]
* [https://codepen.io/gabrieltomescu/pen/GsbIi Color range slider]
* http://loopj.com/jquery-simple-slider/demo.html
* [http://ionden.com/a/plugins/ion.rangeSlider/demo.html Ion.RangeSlider]
* [https://codepen.io/Hornebom/details/ranmi budgetSlider]
* [https://tympanus.net/Development/SliderPagination/ Slider Pagination Concept - with jQuery UI Slider]

== Иконки ==

* [https://codepen.io/ainalem/pen/NWqKwWg Search to close]

== Анимации ==

* https://animate.style/
* https://animista.net/
* https://animejs.com/
* [https://tobiasahlin.com/moving-letters/ Moving Letters] — Text animated with JavaScript & anime.js
* [https://codepen.io/ainalem/pen/rNNErVJ Light]

* [http://velocityjs.org/ Velocity.js] — быстрая библиотека анимаций, может работать без JQuery и может интегрироваться с Vue.js.
* [https://ru.vuejs.org/v2/guide/transitions.html Анимирование списков и появления/исчезновения — Vue.js]

== Анимации во время прокрутки ==

* [https://michalsnik.github.io/aos/ AOS - Animate on scroll library]
** [https://active-vision.ru/blog/animatsiya-pri-prokrutke/ Анимация при прокрутке страницы с библиотекой AOS js — как сделать анимацию при скролле]
* [https://scrollmagic.io/ ScrollMagic]
* [https://github.com/harayu/Blur-effect-on-scroll Blur effect on scroll]
* [https://github.com/peachananr/tiltedpage_scroll 3D tilted effect on scroll]
* [http://www.thepetedesign.com/demos/fancy_scroll_demo.html Мягкий эффект при достижении конца или начала прокрутки]
* [http://cyntss.github.io/Parallax-img-scroll/ Parallax Images Scroll]
* [http://scrollme.nckprsn.com/ 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

== Hamburger ==

=== Hamburger Icon ===

* 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

=== Hamburger Menu ===

См. [https://wiki.zina.com.ua/%D0%9F%D1%80%D0%B8%D0%BC%D0%B5%D1%80%D1%8B_%D1%81%D0%B0%D0%B9%D1%82%D0%BE%D0%B2#.D0.93.D0.B0.D0.BC.D0.B1.D1.83.D1.80.D0.B3.D0.B5.D1.80_.D0.BC.D0.B5.D0.BD.D1.8E_.2F_Hamburger_menu Примеры на действующих сайтах]

=== Morphing Menu ===

* 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://tympanus.net/codrops/2021/05/04/dynamic-css-masks-with-custom-properties-and-gsap/ Dynamic CSS Masks with Custom Properties and GSAP] — [https://tympanus.net/Tutorials/codrops-masked-hero/ демо]

== Paint Stroke / Brush Stroke ==

* 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
* [https://www.andyhooke.co.uk/how-to-add-a-paint-stroke-highlight-to-text-using-css-in-divi/ How to add a paint stroke highlight to text using CSS in Divi]

== Fullpage: Один блок - один экран ==

* fullPage.js

Другие варианты:

* [https://codepen.io/andrejsharapov/pen/xBGKrr CSS scroll-behavior, scroll-snap-type & mix-blend-mode]
* [https://github.com/d4nyll/smartscroll d4nyll/smartscroll: jQuery plugin for scrolljacking and auto-hashing]
* [https://github.com/peachananr/onepage-scroll onepage-scroll]
** [http://peachananr.github.io/onepage-scroll/Demo/demo.html Демо]
** [https://codepen.io/nelsonleite/pen/WwZNVN Daily UI: Mobile app landing page]

== Подгрузка снизу ==

* [https://scrollmagic.io/examples/advanced/infinite_scrolling.html Infinite Scrolling - Examples - ScrollMagic]

== Карточки ==

* 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
* [https://codepen.io/dazulu/pen/VVZrQv 3D CSS Parallax Depth Effect]
* [https://codepen.io/ainalem/pen/xJydpe Expand/collapse cards with figure cut text]
* [https://codepen.io/piupiupiu/pen/epzzZp Absolute items grid with modal window]
* [https://codepen.io/vibham05/pen/yWgvLW cards hover effects]
* [https://codepen.io/elcan-kerimov/pen/EdMdXx Card hover effect]
* [https://codepen.io/jorgesanes10/pen/QdMEXr EC card hover]
* [https://codepen.io/andrewsims/pen/mQoYwz Card hover effect experiments]
* [https://codepen.io/collection/Dggzmr/ House of Cards - a Collection by Mojtaba Seyedi on CodePen] — коллекция эффектов карточек

=== Ярлыки на карточках товаров ===

* [https://codepen.io/nazarelen/pen/BKGZPP CSS3 ribbons]

== Tooltip — всплывающие подсказки ==

* [https://codepen.io/ainalem/pen/OJRLRPO Emerging Tooltip]
* [https://codepen.io/ainalem/pen/ExPVZNK Underline to Talking Bubble Morphing]
* [https://codepen.io/ainalem/pen/VNVaVd The more menu]
* https://codepen.io/MichaelRyanSmith/pen/obboGX — подсказка на обороте карточки
* [https://codepen.io/danielvillalba/pen/gZqJem Information to Close Button & Dialog Animation]

== Popups ==

* [https://codepen.io/ainalem/pen/RqYZNO Material UI popup]

== Page Transition ==

* [https://codepen.io/ste-vg/pen/NALWrj Thumbnail to fullscreen page transition]
* [https://codepen.io/ARS/pen/wavXgQ Page Transition Loader]
* [https://codepen.io/Podgro/pen/zvvzeM Page transition CSS3]

Подборки:

* [https://speckyboy.com/page-transition-effects/ 10 Exciting CSS & JavaScript Page Transition Effects]

== Тур по картинке ==

* [https://tympanus.net/Development/ImageZoomTour/index3.html Image Zoom Tour with jQuery]

== Случайный выбор ==

* [https://tympanus.net/TipsTricks/FastHoverSlideshow/index.html Tips & Tricks: Fast Hover Slideshow with CSS3]

== Плитка ==

* [https://tympanus.net/Development/AnimatedResponsiveImageGrid/index5.html Animated Responsive Image Grid]
* [https://css-tricks.com/examples/SeamlessResponsivePhotoGrid/ Seamless Responsive Photo Grid]
* [https://tympanus.net/Development/AutomaticImageMontage/index.html Automatic Image Montage with jQuery]

== Параллакс ==

* [[Parallax]]

== Вращение картинки ==

* [https://andrepolischuk.com/circlr/ circlr]

== Авторизация / Логин / Login ==

* [https://codepen.io/Lewitje/pen/BNNJjo Calm breeze login screen]

== Смена цвета в зависимости от цвета фона ==

* [http://www.kennethcachia.com/background-check/ BackgroundCheck]

== Бегущая строка ==

* [https://coolcarousels.frebsite.nl/c/9/ News ticker effect by scrolling a definition list]

== Toast ==

* [https://maronato.github.io/vue-toastification/ Vue-Toastification] — Хорошо для отображения информации типа "Товар добавлен в корзину"
* [https://f3oall.github.io/awesome-notifications/ Awesome Notifications] — Lightweight JavaScript library for beautifull and smooth notifications

== Modal / Модальные окна ==

См. [[Modal]]

== Фото людей ==

* [https://codepen.io/ainalem/pen/QWGNzYm About Us Pop-Out Effect]

== Салют / фейерверк / конфетти ==

* https://www.kirilv.com/canvas-confetti/
* https://codepen.io/alexzaworski/pen/mEkvAG Color Changin — клик на фоне вызывает фейерверк и смену цвета фона

== Прочее ==

* [https://codepen.io/MichaelRyanSmith/pen/meoYZV Responsive Device Mockups]
* https://codepen.io/plavookac/pen/QMwObb CSS Wave Animation with a .png — волна в подвале
* [https://www.sliderrevolution.com/resources/css-text-animation/ Great CSS Text Animation Examples You Can Use]
* [https://codepen.io/z-/pen/bpxgWZ CSS Particle Effects] — всплывающие фонтаны из текста

== См. также ==

* [[Примеры сайтов]]
* [[Примеры анимации]]
* [[Buttons]]
* https://blog.avada.io/css/ — 100+ Best CSS Examples

[[Категория:JavaScript]]

UX эффекты - Історія редагувань

>Zina: /* Фото людей */