Берлога программиста | Веб и не только

CSS mouse-out transition effect Эффект фонового перехода при наведении курсора на текст. Применяется CSS-свойство scaleX() к псевдоэлементу :before. Background transition effect when hovering over text. Applies the scaleX() CSS property to the :before pseudo-element. #mouseout #transition #css

Parallax scroll animation Параллакс-анимация смены дня и ночи при прокрутке страницы. Применяя разную скорость движения к изображениям переднего и заднего плана, автор добивается невероятных эффектов, привлекающих внимание. Анимация реализована с помощью GSAP и ScrollTrigger. Parallax animation of the change of day and night when scrolling the page. By applying different motion speeds to the foreground and background images, the author achieves incredible attention-grabbing effects. Animation is implemented using GSAP and ScrollTrigger. #parallax #animation #GSAP #ScrollTrigger

About Us Pop-Out Effect Интересный эффект всплывающего изображения, реализованный на чистом CSS. Interesting popup image effect implemented in pure CSS. #popout #css

Parallax Photo Carousel Необычный слайдер фотографий с параллакс-эффектом в виде карусели. Реализован с помощью GSAP и ZeptoJS. Unusual photo slider with parallax effect in the form of a carousel. Implemented with GSAP and ZeptoJS. #carousel #parallax #gsap #zepto

Trash button animation Потрясающая анимация кнопки удаления, созданная на HTML, CSS и JS. This is an amazing Trash Button Animation created in HTML, CSS and JS. #trash #button #animation #css #javascript

Toggles Анимированные переключатели с уникальным дизайном, которые намного интереснее, чем обычные toggle. Анимация реализована на чистом CSS. Uniquely designed animated switches that are much more interesting than regular toggle. The animation is done in pure CSS. #toggles #css

Infinite draggable webgl slider Бесконечный перетаскиваемый слайдер, реализованный с помощью GSAP и Tree.js. Infinite draggable slider implemented with GSAP and Tree.js. #Infinite #draggable #webgl #slider #webgl #gsap #threejs

Login Form Форма входа с плавающим заполнителем и светящейся кнопкой на чистом CSS. A login form with a floating placeholder and a glowing button in pure CSS. #login #form #css

Pokemon Card Holo Effect Эффект голографической карты, основанный на режимах наложения на карточку gif-анимации и градиентной заливки при наведении. Реализовано с помощью jQuery. Holographic map effect based on gif animation and gradient fill on hover modes. Implemented with jQuery. #holoeffect #Holographic #card #css #jQuery

Color this sofa! – SVG + Blend Mode trick Автор показывает как реализовать палитру цветов для изображений продуктов. Даже не имея этих изображений продукта в тысячи цветов. Даже если у нас нет изображений продуктов в векторном формате, чтобы мы могли применять fill к SVG. 1. Создайте векторный контур, который покрывает область на JPG, которая изменит цвет (возможно, в Photoshop с помощью Pen Tool и экспорта вектора). 2. Поместите эту сплошную векторную область точно поверх JPG продукта. 3. mix-blend-mode: multiply; SVG. 4. Измените цвет заливки SVG по желанию. The author shows how to implement a color picker for product images. Even without having these product images in thousands of colors. Even if we don't have vector images of the products so that we can apply fill to the SVG. #colorpicker #svg #css #javascript

Stripe Like CSS Only Menu Автор показывает как добиться эффекта слайда для меню с плавной анимацией на чистом CSS. The author shows how to achieve a slide effect for a menu with smooth animation in pure CSS. #menu #slide #animation #css

Netflix Intro Animation Pure CSS Потрясающая работа автора вступительной анимации Netflix, реализованная на чистом CSS. Анимация состоит из трех основных этапов. Первый - когда буква тускнеет с каждой стороны, пока не дойдет до второй части. Вторая часть состоит из множества вертикальных «огней» разной ширины и цвета, которые появляются после исчезновения буквы. Третья часть - движение камеры, применяемое при исчезновении «огней». Awesome work by the author of Netflix's intro animation, rendered in pure CSS. Animation has three main steps. The first is when the letter fades on each side until it reaches the second part. The second part consists of many vertical "lights" of different widths and colors that appear after the letter disappears. The third part is the camera movement applied when the “lights” disappear. #Netflix #Intro #Animation #CSS

404 Page Пример анимации SVG-элементов на адаптивной странице 404. Анимация выполнена с помощью GSAP. An example of animating SVG elements on a responsive 404 page. Animation done with GSAP. #animation #svg #404 #gsap

CSS3 Loader & Spinners Большая коллекция из 126 прелоадеров, реализованных на чистом CSS. A large collection of 126 preloaders implemented in pure CSS. #loader #spinners #preloaders #css

Log In / Sign Up Креативная реализация карточки входа / регистрации на сайте. Иконки использованы от Unicons. Анимация переворачивания карточки выполнена на чистом CSS. Creative implementation of the entry / registration card on the site. The icons are used from Unicons. The card flipping animation is done in pure CSS. #login #signup #card #css

Download Button Animation Анимация кнопки "Скачать", реализованная с помощью GSAP. Download button animation implemented with GSAP. #download #button #animation #GSAP

Fluid text hover Плавная трансформация SVG-маски внутри текста при наведении. Анимация реализована с помощью GSAP. Smooth transformation of the SVG mask inside the text on hover. Animation is implemented using GSAP. #fluid #texthover #hover #GSAP

Radio Hopping Radio-кнопки с анимацией перепрыгивания, реализованные с помощью CSS. Radio buttons with jump animations implemented with CSS. #radio #button #hopping #css

Random Password Generator Генератор случайных паролей. Реализован с помощью HTML, CSS и JS. Random password generator. Implemented with HTML, CSS and JS. #random #password #generator #css #javascript

Sliding tabs | CSS transitions only Передвигающиеся вкладки на чистом CSS. Sliding tabs in pure CSS. #slidingtabs #tabs #css