Java, UX, HTML, CSS, WEB-design

10 анимированных 3D-слайдеров с открытым исходным кодом, созданных на CSS и JavaScript

[ad_1]

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

Все они имеют свои уникальные анимации, настраиваемые интерфейсы и функции. Но если вы не можете найти в плагине то, что вам нужно, возможно, вам придется создать его самостоятельно.

Это то, что сделали многие из разработчиков, представленных ниже, когда создали эти невероятные анимированные 3D-слайдеры. Вот 10 моих фаворитов на CodePen.

НЕОГРАНИЧЕННЫЕ ЗАГРУЗКИ: шаблоны электронной почты, администратора, целевой страницы и веб-сайта

Только начиная с $16.50 в месяц!

Слайсбокс

См. Pen Slicebox — слайдер 3D-изображений от codefactory (@codefactory) на CodePen.

Вы, наверное, уже видели или слышали о Slicebox. Это популярный плагин для 3D-слайд-шоу, и он, безусловно, один из самых детализированных.

Эта ручка предлагает живую демонстрацию анимированного ползунка в действии, при этом большинство функций остались нетронутыми. Все это работает на jQuery, а эта конкретная демонстрация работает всего с 50 строками JavaScript.

Но вы можете найти еще более подробный пример на сайте Codrops. Я большой поклонник этого слайдера. Если вы ищете что-то с сумасшедшими 3D-эффектами — это ваш лучший выбор.

Вращающийся слайдер страницы

См. слайдер Pen Rotating 3D от Николая Таланова (@suez) на CodePen.

Разработчик Николай Таланов создал этот вращающийся слайдер с очень подробным JavaScript и еще более сложными классами HTML/CSS.

Его код на самом деле следует соглашениям об именах БЭМ для CSS, которые используют двойное подчеркивание для отделения блоков от контейнеров. Это значительно упрощает просмотр кода, когда вы понимаете, на что смотрите.

Но этот ползунок может не работать для всех, потому что он вращается вся страница а не просто часть страницы.

Тем не менее, это действительно классный эффект, который будет очень хорошо работать в конкретных проектах.

Плавный ползунок перспективы

См. слайдер перспективы Pen Smooth 3d от Алекса Ноздрюхина (@alexnoz) на CodePen.

Если вам нравится параллакс-дизайн в Интернете, взгляните на этот слайдер, созданный Алексом Ноздрюхиным.

Когда вы перемещаете курсор по странице, вы заметите, что элемент слайд-шоу отвечает тем же. По мере того, как вы перемещаетесь по элементам, обратите внимание на пользовательские эффекты анимации.

Это действительно довольно гладко, и это чертовски творческое использование веб-анимации. Однако у вас могут возникнуть проблемы с поиском проекта, подходящего для этого типа слайд-шоу.

3D-эффекты с помощью jQuery.

См. слайдер Pen jQuery 3D Effect от victor (@vkanet) на CodePen.

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

Все это довольно легко настроить, если вы также хотите изменить стиль анимации. Просто убедитесь, что вы в курсе последних технологий jQuery, прежде чем углубляться в этот код.

3D-переворот изображения

См. слайд-шоу Pen 3D Flip Image от Ника Лануса (@niklanus) на CodePen.

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

Тем не менее, я бы сказал, что разработчик Ник Ланус создал потрясающий дизайн с очень привлекательной анимацией перелистывания.

Вы можете заставить изображения переворачиваться, прокручивая страницу вверх или вниз (все это можно контролировать в jQuery). Но потребуется некоторая работа, чтобы превратить этот анимационный эффект в полноценный слайдер изображений.

Слайдер 3D Cube

См. слайдер Pen 3D Cube. Чистый CSS. Илья К. (@fornyhucker) на CodePen.

Я никогда не видел ничего подобного в Интернете — это должно быть единственное в своем роде.

С этим 3D-кубом вы можете быть удивлены точностью и плавностью анимации. Обратите внимание, что этот сценарий немного тяжеловат, поэтому вам, возможно, придется подождать минуту, пока загрузится перо.

Но вот что самое интересное: вся эта трехмерная анимация куба работает. на чистом CSS. JavaScript не требуется. Насколько это здорово?

Карусель с использованием TweenMax.js и jQuery

См. Карусель Pen 3D с использованием TweenMax.js и jQuery Джона Блазека (@johnblazek) на CodePen.

Вы можете создавать невероятные вещи с помощью пользовательских библиотек, таких как TweenMax.

Одним из таких примеров является эта карусель, которая работает так же, как типичный вращающийся 3D-альбом, который вы ожидаете найти в iTunes. Все это управляется через JavaScript и работает с одной из многих анимаций TweenMax.

Конечно, эта демонстрация просто использует текст-заполнитель для каждого блока, так что это не так уж красиво. Но вы можете легко заменить текст и создать чертовски настраиваемую карусель.

3D-слайдер на чистом CSS

См. Pen PURE CSS 3D SLIDER от Дмитрия Панфилова (@panfilov) на CodePen.

Вот еще один радикальный слайдер с супер уникальным интерфейсом. Этот слайдер CSS3 построен только на HTML и CSS, что делает его еще более впечатляющим.

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

Но на самом деле это больше похоже на практический проект, просто чтобы показать, как много вы можете сделать с небольшой изобретательностью CSS.

Галерея 3D-изображений

См. галерею изображений Pen 3D от Бобби (@ImBobby) на CodePen.

Если вы ищете 3D-анимированные слайдеры с меньшей рамкой, ознакомьтесь с этим фрагментом кода.

Он работает с помощью преобразований CSS3 и действительно выглядит так, как будто он встроен в страницу в трехмерном пространстве. Обратите внимание, что загрузка изображений также может занять несколько секунд, поэтому с вашей стороны может потребоваться некоторое терпение.

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

10. Карусель в кубе

См. карусель Pen 3D Cube от Дерека Уилдена (@frxnz) на CodePen.

Ага, еще одна сумасшедшая карусель кубов с довольно причудливым кодом.

Этот дизайн, созданный Дереком Уилденом, основан на миксинах Sass и Bourbon для упрощения анимации. Но весь код jQuery построен с нуля, поэтому вы можете легко использовать его повторно без какой-либо предварительной обработки.

Опять же, это может оказаться не очень полезным для каждого проекта, который вы создаете. Но дизайн достаточно яркий, чтобы привлечь внимание, и, безусловно, его можно использовать в большинстве современных веб-браузеров.

Это только верхушка айсберга с 3D-анимированными слайдерами и другими 3D-эффектами в Интернете. Если вы хотите увидеть больше, загляните в CodePen, где вы найдете множество потрясающих 3D-фрагментов, с которыми вы можете работать.

Этот пост может содержать партнерские ссылки. Смотрите нашу информацию о партнерских ссылках здесь.

[ad_2]
Source: 1stwebdisigner

Заключение

Вы ознакомились с статьей — 10 анимированных 3D-слайдеров с открытым исходным кодом, созданных на CSS и JavaScript

Пожалуйста оцените статью, и напишите комментарий.

Похожие статьи

Добавить комментарий

Ваш адрес email не будет опубликован.

Краткое описание по статье 10 анимированных 3D-слайдеров с открытым исходным кодом, созданных на CSS и JavaScript

Название: 10 анимированных 3D-слайдеров с открытым исходным кодом, созданных на CSS и JavaScript . Краткое описание: [ad_1] ⭐ Вы можете добавить несколько довольно сума . Дата публикации: 21.01.2022 . Автор: Алишер Валеев .

Для чего создан сайт Novosti-Nedeli.ru

Данный сайт посвящен новостям мира и мира технологий . Также тут вы найдете руководства по различным девайсам.

Сколько лет сайту?

Возраст составляет 3 года

Кнопка «Наверх»