Параллакс jquery: Создаём parallax scrolling эффект с помощью jQuery и CSS / Хабр

Содержание

Плагин Parallax для jQuery - CodeRoad



Мне нужно преобразовать дизайн в HTML CSS, и сайт использует последнюю причуду эффекта параллакса. Я провел исследование и наткнулся на дюжину плагинов для достижения этой цели.

Веб-сайт имеет следующие функции

  1. Полноэкранные Изображения
  2. Вкладки
  3. SLide показать
  4. Карта
  5. Формы

Какой плагин вы предлагаете и какая отправная точка для меня, чтобы начать работу?

jquery html css parallax
Поделиться Источник Harsha M V     25 мая 2013 в 13:40

2 ответа


  • jQuery параллаксная прокрутка для iPhone?

    Я ищу быстрый, отзывчивый плагин Parallax scrolling для iPhone/iPad. кто-нибудь имел опыт работы с производительностью плагинов parallax? Те, что я пробовал, отстают. Просто интересно. Спасибо!

  • бесплатный слайдер слоя jquery?

    Есть ли бесплатный плагин jquery, похожий на http://codecanyon.net/item/layerslider-the-parallax-effect-slider/922100?ССО?WT.ac=search_item&WT.seg_1=search_item&WT.z_author=kreatura



2

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

Поделиться 2ne     25 мая 2013 в 16:06


Поделиться Kenneth von Rauch     30 мая 2013 в 21:12


Похожие вопросы:


Как отключить плагин jQuery jParallax на scroll и снова включить его при остановке прокрутки?

У меня есть фиксированный jParallax-http :/ / webdev.stephband.info/jparallax/index. html -фон с элементами страницы, которые scroll поверх фиксированного фона parallaxing. Проблема: плагин работает...


Сохранение пропорций изображения без изменений при использовании плагина Scrolling Parallax jQuery

Я использую плагин Scrolling Parallax jQuery для scroll изображения background (на самом деле это не фоновое изображение css) на этом сайте . Можно ли сохранить соотношение сторон изображения, то...


Ищете плагин jQuery parallax

Я ищу этот плагин jQuery под названием Parallax, но нигде не могу найти ссылку : Подключаемый источник: http:/ / www.laurentiuswonen.com/jaarverslag2010/активы/js / jquery.parallax.js


jQuery параллаксная прокрутка для iPhone?

Я ищу быстрый, отзывчивый плагин Parallax scrolling для iPhone/iPad. кто-нибудь имел опыт работы с производительностью плагинов parallax? Те, что я пробовал, отстают. Просто интересно. Спасибо!


бесплатный слайдер слоя jquery?

Есть ли бесплатный плагин jquery, похожий на http://codecanyon.net/item/layerslider-the-parallax-effect-slider/922100?ССО?WT.ac=search_item&WT.seg_1=search_item&WT.z_author=kreatura


JQuery Параллакс не работает

Я создаю страницу с некоторым эффектом parallex bg.. у меня есть три дива с одинаковым фоном смотрите это fiddle когда я использую разные изображения bg для всех дивов, то параллекс работает, но с...


Как добавить наложение в раздел Parallax для Twitter Bootstrap

Как добавить наложение в раздел parallax для twitter bootstrap? Ниже приведен код для параллакса: HTML: <div class=container-fluid> <div> <div class=ha-bg-parallax text-center...


parallax.js parallax-слайдер parallax content and image

http://pixelcog.github.io/parallax.js / Привет, мир! У меня есть проблема с плагином выше. Мне удалось сделать несколько параллаксных фонов и заполнить их контентом без проблем, однако в...


Webpack2 + Materialize-css + Любой Плагин jquery

Я работаю с Webpack 2 после миграции с Webpack 1. Некоторые из моих плагинов jquery перестают работать. Я получаю следующую ошибку при использовании пакета materialize-css: TypeError:...


React Materialize Parallax изображение не прокручивается с фоном

Я пытаюсь использовать параллакс от react-Materialize для сайта портфолио. У меня есть изображения, работающие в параллаксе, однако он, похоже, не прокручивается. Я загрузил JQuery перед материалом...

Эффект параллакса при помощи CSS3 и jQuery

Сегодня мы хотим поделиться с Вами простым способом создания эффекта параллакс для слайдера с контентом. Используя CSS-анимацию, мы будем управлять анимацией каждого отдельного элемента в слайдере и создавать эффект параллакса при помощи анимирования фона слайдера.

Идея основывается на слайдере с главной страницы Kendo UI, фрэймворке для современных HTML UI. После того как мы получили несколько вопросов о том, как сделать что-то подобное, мы решили воссоздать этот эффект.

Как это работает

Слайдер состоит из нескольких слайдов, каждый из них будет иметь заголовок h3, текст, ссылку и изображение:

<div>
 
 <div>
 <h3>Some headline</h3>
 <p>Some description</p>
 <a href="#">Read more</a>
 <div>
 <img src="images/1.png" alt="image01" />
 </div>
 </div>
 
 <div>
 <!-- ... -->
 </div>
 
 <!-- ... -->
 
 <nav>

 <span></span>
 <span></span>
 </nav>
 
</div>

Мы будем анимировать каждый из этих элементов. Для этого мы будем управлять поведением элементов, присвоив нужный класс соответствующим слайдам. Например, если мы хотив чтобы текущий слайд сдвигался вправо, мы укажем ему класс "da-slide-toright". Там будет четыре различных класса для каждого из возможных направлений движения слайдов:

  • .da-slide-fromright
  • .da-slide-fromleft
  • .da-slide-toright
  • .da-slide-toleft

С помощью этих классов мы можем управлять анимацией каждого элемента:

/* Появление слайда справа */
.da-slide-fromright h3{
 animation: fromRightAnim1 0.6s ease-in 0.8s both;
}
.da-slide-fromright p{
 animation: fromRightAnim2 0.6s ease-in 0.8s both;
}
.da-slide-fromright .da-link{
 animation: fromRightAnim3 0.4s ease-in 1.2s both;
}
.da-slide-fromright .da-img{
 animation: fromRightAnim4 0.6s ease-in 0.8s both;
}
 
/* Настройка анимации для различного поведения каждого элемента: */
@keyframes fromRightAnim1{
 0%{ left: 110%; opacity: 0; }

 100%{ left: 10%; opacity: 1; }
}
@keyframes fromRightAnim2{
 0%{ left: 110%; opacity: 0; }
 100%{ left: 10%; opacity: 1; }
}
@keyframes fromRightAnim3{
 0%{ left: 110%; opacity: 0; }
 1%{ left: 10%; opacity: 0; }
 100%{ left: 10%; opacity: 1; }
}
@keyframes fromRightAnim4{
 0%{ left: 110%; opacity: 0; }
 100%{ left: 60%; opacity: 1; }
}

Настройки

Доступны следующие настройки при вызове плагина cslider:

$('#da-slider').cslider({
 
 current     : 0,
 // Индекс текущего слайда
 
 bgincrement : 50,
 //увеличиваем позицию фона (эффект параллакса) при скольжении
 
 autoplay    : false,
 // слайдшоу вкл/выкл
 
 interval    : 4000
 //время между переходами
 
});

Эффект параллакса создается путем перемещения фона слайдера в обратном направлении при скольжении. При помощи парамета bgincrement вы можете контролировать количество пикселей, на которое будет перемещение.

Демонстрация

Демо 1: Настройки по умолчанию
Демо 2: Слайд-шоу (с различной анимацией)

Обратите внимание, что этот эффект не будет работать в браузерах, не поддерживающих CSS анимацию и переходы.

Мы надеемся, что вам понравился наш небольшой эксперимент и он будет Вам полезен!

Скачать исходные файлы

Перевод статьи с tympanus.net/codrops


Если у Вас возникли вопросы, то для скорейшего получения ответа рекомендуем воспользоваться нашим форумом

jQuery Параллакс

Коллекция бесплатных примеров и плагинов параллакса jQuery (для вертикальной или горизонтальной прокрутки).

  1. Эффекты прокрутки jQuery
  2. CSS-эффекты параллакса
  3. Эффекты прокрутки CSS
О коде

Страница портфолио Parallax

Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

Отзывчивый: yes

Зависимости: bootstrap.css, jquery.js

Сделано с
  • HTML (Pug) / CSS (SCSS) / JS
О коде

Параллаксная прокрутка

CSS mix-blend-mode и потрясающая прокрутка с параллаксом.

Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

Отзывчивый: yes

Зависимости: jquery.js

О коде

Автопортрет с параллаксом

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

Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

Отзывчивый: yes

Зависимости: jquery.js

О коде

Свертывающийся параллакс Google

Google Android вдохновил свертывание параллакса в jQuery.

Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

Отзывчивый: yes

Зависимости: jquery.js

Сделано с
  • HTML
  • CSS
  • JS (jquery.js, parallax.js)
О коде

Сетка параллакса

Использовал parallax.js для настройки этой интерактивной сетки панорамирования изображений. Использует положение курсора, если вы находитесь на настольном компьютере или ноутбуке.

О коде

Карточка 3D View Parallax

Карточный параллакс 3D-вида в jQuery.

Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

Отзывчивый: no

Зависимости: jquery.js

Сделано с
  • HTML
  • CSS/SCSS
  • JS (jquery.js, lodash.js)
О коде

Эффект прокрутки с параллаксом на всю страницу

Легкий эффект прокрутки с параллаксом на всю страницу.

Сделано с
  • HTML
  • CSS
  • JS (jquery.js, jquery-ui.js)
О коде

Параллакс

Поэкспериментируйте с эффектами параллакса.

Сделано с
  • HTML
  • CSS
  • JS/CoffeeScript (jquery.js, sketch.js)
О коде

Холст Параллакс горы

Перемещайте мышь, чтобы изменять скорость и перемещаться вверх и вниз.

О коде

Параллаксная прокрутка

Простая параллакс-прокрутка.

Простой Parallax эффект при прокрутке страницы

Здравствуйте, публикую реализацию очень простого Parallax эффекта при прокрутке страницы. Данный parallax эффект не только очень прост в установке и настройке, но и сам по себе скрипт параллакса небольшой и не нуждается в дополнительных настройках. Работает данный скрипт при подключенной библиотеке jQuery, которая используется практически во всех современных CMS и продающих страницах.

Пример использования

See the Pen Простой Parallax эффект by vavik (@vavik96) on CodePen.

Подробнее о подключении Parallax эффекта к сайту

Подключается рarallax эффект проще простого и работает при подключенной библиотеке jQuery. Данный эффект параллакса работает как с более новыми версиями библиотеки jQuery, так и с более старыми. Проверено!

Поэтому подключаем к HTML документу сначала jQuery, а после сам скрипт parallax.min.js

Выглядит подключение вот так:

<script src="js/jquery-1.11.3.min.js"></script>
 <script src="js/parallax.min.js"></script>

 

На WP jQuery подключать не нужно

На WordPress по умолчанию уже подключена библиотека jQuery, поэтому подключайте только скрипт parallax эффекта parallax.min.js. Советую подключать скрипты, как написано в статье — подключение скриптов на WordPress

 

Ну а теперь HTML CSS подключение параллакса

Берите блок, это может быть header, section, div, footer.
Блок div, в частности, называйте любым классом, и присваивайте:
width: 100%
min-height: 400px;
Хотя это не принципиально.

Выглядит все это так:
HTML

<div data-parallax="scroll" data-image-src="img/bg_4.jpg"> 
<h3>section</h3>
</div>

CSS

.parallax {
    min-height: 400px;
    background: transparent;
}

Теперь по коду:

— любой класс, об этом написано выше.
<h3>section</h3> — надпись внутри блока с parallax эффектом, в данном случае заголовок.
Источник

Слайдер с эффектом параллакса на jQuery

(function($) {

$.fn.parallaxSlider = function(options) {

var opts = $.extend({}, $.fn.parallaxSlider.defaults, options);

return this.each(function() {

var $pxs_container = $(this),

o = $.meta ? $.extend({}, opts, $pxs_container.data()) : opts;

//основной слайдер

var $pxs_slider = $('.pxs_slider',$pxs_container),

//элементы в слайдеры

$elems = $pxs_slider.children(),

//общее количество элементов

total_elems = $elems.length,

//навигационные кнопки

$pxs_next = $('.pxs_next',$pxs_container),

$pxs_prev = $('.pxs_prev',$pxs_container),

//фоновые  изображения

$pxs_bg1 = $('.pxs_bg1',$pxs_container),

$pxs_bg2 = $('.pxs_bg2',$pxs_container),

$pxs_bg3 = $('.pxs_bg3',$pxs_container),

//текущее изображение

current = 0,

//контейнер превьюшек

$pxs_thumbnails = $('.pxs_thumbnails',$pxs_container),

//превьюшки

$thumbs = $pxs_thumbnails.children(),

//интервал для режима автопрокрутки

slideshow,

//изображение загрузки

$pxs_loading = $('.pxs_loading',$pxs_container),

$pxs_slider_wrapper = $('.pxs_slider_wrapper',$pxs_container);

//во-первых, предзагрузка всех изображений

var loaded = 0,

$images = $pxs_slider_wrapper.find('img');

$images.each(function(){

var $img = $(this);

$('<img/>').load(function(){

++loaded;

if(loaded == total_elems*2){

$pxs_loading.hide();

$pxs_slider_wrapper.show();

//ширина изображения

var one_image_w = $pxs_slider.find('img:first').width();

/*

установки ширины слайдера

*/

setWidths($pxs_slider,

$elems,

total_elems,

$pxs_bg1,

$pxs_bg2,

$pxs_bg3,

one_image_w,

$pxs_next,

$pxs_prev);

/*

установка ширины для превьюшек

*/

$pxs_thumbnails.css({

'width' : one_image_w + 'px',

'margin-left' : -one_image_w/2 + 'px'

});

var spaces = one_image_w/(total_elems+1);

$thumbs.each(function(i){

var $this = $(this);

var left = spaces*(i+1) - $this.width()/2;

$this.css('left',left+'px');

if(o.thumbRotation){

var angle = Math.floor(Math.random()*41)-20;

$this.css({

'-moz-transform' : 'rotate('+ angle +'deg)',

'-webkit-transform' : 'rotate('+ angle +'deg)',

'transform' : 'rotate('+ angle +'deg)'

});

}

//анимация превьюшек при наведении на них мышкой

$this.bind('mouseenter',function(){

$(this).stop().animate({top:'-10px'},100);

}).bind('mouseleave',function(){

$(this).stop().animate({top:'0px'},100);

});

});

highlight($thumbs.eq(0));

//прокрутка при нажатии на навигационные кнопки

$pxs_next.bind('click',function(){

++current;

if(current >= total_elems)

if(o.circular)

current = 0;

else{

--current;

return false;

}

highlight($thumbs.eq(current));

slide(current,

$pxs_slider,

$pxs_bg3,

$pxs_bg2,

$pxs_bg1,

o.speed,

o.easing,

o.easingBg);

});

$pxs_prev.bind('click',function(){

--current;

if(current < 0)

if(o.circular)

current = total_elems - 1;

else{

++current;

return false;

}

highlight($thumbs.eq(current));

slide(current,

$pxs_slider,

$pxs_bg3,

$pxs_bg2,

$pxs_bg1,

o.speed,

o.easing,

o.easingBg);

});

/*

клик на превьюшке

*/

$thumbs.bind('click',function(){

var $thumb = $(this);

highlight($thumb);

if(o.auto)

clearInterval(slideshow);

current = $thumb.index();

slide(current,

$pxs_slider,

$pxs_bg3,

$pxs_bg2,

$pxs_bg1,

o.speed,

o.easing,

o.easingBg);

});

/*

активация автопроигрывания, если данная опция определена

*/

if(o.auto != 0){

o.circular = true;

slideshow = setInterval(function(){

$pxs_next.trigger('click');

},o.auto);

}

/*

при изменении окна, нужно пересчитывать ширину элементов и их

позиционирование;

*/

$(window).resize(function(){

w_w = $(window).width();

setWidths(

$pxs_slider,

$elems,

total_elems,

$pxs_bg1,

$pxs_bg2,

$pxs_bg3,

one_image_w,

$pxs_next,

$pxs_prev

);

slide(

current,

$pxs_slider,

$pxs_bg3,

$pxs_bg2,

$pxs_bg1,

1,

o.easing,

o.easingBg

);

});

}

}).error(function(){

alert('here')

}).attr('src',$img.attr('src'));

});

});

};

//текущая ширина окна

var w_w = $(window).width();

var slide = function(current,

$pxs_slider,

$pxs_bg3,

$pxs_bg2,

$pxs_bg1,

speed,

easing,

easingBg){

var slide_to = parseInt(-w_w * current);

$pxs_slider.stop().animate({

left : slide_to + 'px'

},speed, easing);

$pxs_bg3.stop().animate({

left : slide_to/2 + 'px'

},speed, easingBg);

$pxs_bg2.stop().animate({

left : slide_to/4 + 'px'

},speed, easingBg);

$pxs_bg1.stop().animate({

left : slide_to/8 + 'px'

},speed, easingBg);

}

var highlight = function($elem){

$elem.siblings().removeClass('selected');

$elem.addClass('selected');

}

var setWidths = function($pxs_slider,

$elems,

total_elems,

$pxs_bg1,

$pxs_bg2,

$pxs_bg3,

one_image_w,

$pxs_next,

$pxs_prev){

 

var pxs_slider_w = w_w * total_elems;

$pxs_slider.width(pxs_slider_w + 'px');

 

$elems.width(w_w + 'px');

/*

также устанавливаем ширину каждого div элемента для фона.

Значение для всех pxs_slider

*/

$pxs_bg1.width(pxs_slider_w + 'px');

$pxs_bg2.width(pxs_slider_w + 'px');

$pxs_bg3.width(pxs_slider_w + 'px');

/*

позиционирование элементов навигации

*/

var position_nav = w_w/2 - one_image_w/2 + 3;

$pxs_next.css('right', position_nav + 'px');

$pxs_prev.css('left', position_nav + 'px');

}

$.fn.parallaxSlider.defaults = {

auto : 0,

speed : 1000,

easing : 'jswing',

easingBg : 'jswing',

circular : true,

thumbRotation : true

};

//easeInOutExpo,easeInBack

})(jQuery);

Super Simple Parallax Effect с jQuery или Native JS

Для тех, кто знаком с миром веб-дизайна, в последние несколько лет постоянно желаемой особенностью дизайна является «параллаксная» прокрутка. Слово «параллакс» само по себе бессмысленно. Это может относиться к чему-то столь же простому, как фиксированный фон, к чему-то столь же сложному, как прокрутка видео, основанная на ваших полях прокрутки. Однако то, что большинство людей имеют в виду, когда говорят «параллакс», - это элемент, который прокручивается с немного другой скоростью, чем остальная часть страницы, создавая ощущение, что он находится «за» остальным контентом.Этого можно добиться несколькими способами. Для этого доступно множество плагинов jQuery, и его начали внедрять в такие фреймворки, как Materialize. Однако, если вы используете свои собственные JS и CSS, нет причин добавлять еще один HTTP-запрос на вашу страницу для эффекта, который можно легко реализовать с помощью 5 строк кода, как такового:

 $ (окно) .scroll (function () {
        var scrollTop = $ (окно) .scrollTop ();
        var imgPos = scrollTop / 2 + 'px';
        $ ('.герой '). find (' img '). css (' преобразование ',' translateY ('+ imgPos +') ');
    }); 

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

 function simpleParallax (интенсивность, элемент) {
        $ (окно) .scroll (function () {
            var scrollTop = $ (окно).scrollTop ();
            var imgPos = scrollTop / интенсивность + 'px';
            element.css ('преобразовать', 'translateY (' + imgPos + ')');
        });
    } 

Теперь мы можем легко создать экземпляр этой функции для любого элемента и настроить дифференциал скорости прокрутки с помощью свойства «интенсивность». В этих примерах предполагается, что вы используете jQuery, но это довольно легко сделать и с помощью ванильного JS. Посетите youmightnotneedjquery.com, чтобы узнать о ванильных альтернативах распространенным задачам jQuery.

19 jQuery Parallax

Коллекция бесплатных jQuery parallax примеров и плагинов (для вертикальной или горизонтальной прокрутки) .

  1. Эффекты прокрутки jQuery
  2. CSS-эффекты параллакса
  3. CSS-эффекты прокрутки
  1. Примеры параллакса jQuery
  2. Плагины параллакса jQuery
Автор
  • Иван Гроздич
О коде

Параллакс портфеля Страница

Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

отзывчивый: да

Зависимости: bootstrap.css, jquery.js

Автор
  • Андрей Шарапов
Сделано с
  • HTML (Мопс) / CSS (SCSS) / JS
О коде

jQuery Parallax Scrolling

CSS смешанный режим и потрясающая параллаксная прокрутка.

Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

отзывчивый: да

Зависимости: jquery.js

О коде

Параллакс Автопортрет

Используется jQuery для обнаружения наклона устройства или движения мыши для создания ощущения глубины рисунка.

Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

отзывчивый: да

Зависимости: jquery.js

Автор
  • Райан Тарсон
О коде

Свертывающийся параллакс Google

Google Android вдохновил свертывание параллакса в jQuery.

Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

отзывчивый: да

Зависимости: jquery.js

Автор
  • Кейси Каллис
Сделано с
  • HTML
  • CSS
  • JS (jquery.js, parallax.js)
О коде

Сетка параллакса

Используемый параллакс.js, чтобы настроить эту интерактивную сетку панорамирования изображений. Использует положение курсора, если вы находитесь на настольном компьютере или ноутбуке.

Автор
  • Албан Бужупай
О коде

Карточка 3D View Parallax

Карточка с параллаксом в трехмерном представлении в jQuery.

Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

Адаптивный: нет

Зависимости: jquery.js

Автор
  • Эмили Хейман
Сделано с
  • HTML
  • CSS / SCSS
  • JS (jquery.js, lodash.js)
О коде

Эффект прокрутки с параллаксом на всю страницу

Облегченный эффект прокрутки с параллаксом на всю страницу.

Автор
  • Romswell Roswell Parian Paucar
Сделано с
  • HTML
  • CSS
  • JS (jquery.js, jquery-ui.js)
О коде

Параллакс

Эксперимент с эффектами параллакса.

Автор
  • Джек Руджил
Сделано с
  • HTML
  • CSS
  • JS / CoffeeScript (jquery.js, sketch.js)
О коде

Холст горы Параллакс

Перемещайте мышь, чтобы изменять скорость и перемещаться вверх и вниз.

Автор
  • Марсель Шульц
О коде

Параллакс-прокрутка

Простая прокрутка с параллаксом.

Сделано в
  • PixelCog Inc.
О плагине

Параллакс.js

Простой эффект прокрутки параллакса, вдохновленный Spotify.com, реализованный как плагин jQuery.
Сделано в
  • Gijs Rogé
О плагине

Tilt.js

Крошечный эффект наведения при параллаксе и наклоне 60+ кадров в секунду для jQuery.
О плагине

Jparallax

Плагин
jQuery для создания интерактивного эффекта параллакса.
Сделано в
  • pixxelfactory
О плагине

jInvertScroll

Легкий плагин вертикальной прокрутки jQuery - горизонтального перемещения с эффектом параллакса.
Сделано в
  • Феликс Пфлаум
О плагине

Параллаксификация

Parallaxify - это плагин jQuery, который добавляет эффекты параллакса к элементам и фону на основе датчика гироскопа или ввода мыши.
Сделано в
  • Матье Шавиньи
О плагине

Параллакс прокрутки

Плавная анимация параллакса при вертикальной прокрутке страницы с использованием requestAnimationFrame и 3D-переходов CSS3.
О плагине

Paroller.js

Легкий плагин jQuery, обеспечивающий эффект параллаксной прокрутки.
О плагине

SimpleParallax

Плагин
jQuery для применения красивого эффекта параллакса к изображениям за минуту.
Сделано в
  • Ханс Кристиан Рейнл
О плагине

Hongkong.js

Плагин на основе jQuery для параллакс-прокрутки.

простой параллакс-jquery - npm

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

Там, где получение результатов через другие плагины может быть трудоемким, simpleParallax выделяется своей простотой и визуальной визуализацией. Эффект параллакса применяется непосредственно к тегам изображений, нет необходимости использовать фоновые изображения.

Подойдет любое изображение. Попробуйте!

1. Установите плагин

Убедитесь, что библиотека jQuery загружена перед плагином.

Копировать / вставить

Просто скопируйте / вставьте приведенный ниже фрагмент непосредственно перед закрывающим тегом :

 

или воспользуйтесь приведенной ниже ссылкой CDN, предоставленной jsDelivr.com

 

или

Установите его с помощью диспетчеров пакетов

 

npm install simple-parallax-jquery

yarn add simple-parallax-jquery

2.Инициализировать плагин

Предоставляем следующий HTML:

 

image

Просто добавьте следующий код jQuery:

 

$ ('. Эскиз'). SimpleParallax ();

3. Настройки

Ниже приведены различные настройки, которые можно применить к simpleParallax:

.
установка по умолчанию
задержка 0.6 добавить задержку для анимации параллакса - в секундах
ориентация вверх выберите эффект ориентации параллакса - вверх , вправо , вниз или влево
масштаб 1,2 выберите коэффициент масштабирования - должно быть больше 1,0
переполнение ложный по умолчанию изображение масштабируется для применения эффекта параллакса без переполнения исходного контейнера изображения.Если для параметра overflow установлено значение true, изображение будет переведено из естественного потока без какого-либо масштаба.
переход куб. Безье (0,0,0,1) выберите переход css (будет работать, только если задержка отличается от 0) - easy , linear , easy-in , и т. Д.
точка останова ложный выберите минимальную точку останова (в пикселях), где будет инициализирован simpleParallax - 768

Эти настройки можно применить с помощью следующего кода jQuery:

 

$ (img).simpleParallax ({задержка: 0, ориентация: 'вниз', масштаб: 1,30, overfow: true});

4. Методы

Ниже приведены различные методы, которые вы можете использовать:

уничтожить

 

$ ('. Эскиз'). Данные ('простойПараллакс'). Уничтожить ();

  • Чем выше установлен масштаб, тем более заметным будет эффект параллакса. В свою очередь, изображение будет терять в качестве (без потери качества, если для параметра overlow установлено значение false)

  • Этот плагин применяет параллакс к тегу изображения, а не к фоновому изображению.Это дает вам большую гибкость и может быть добавлено к любому изображению.

  • Вы можете применить simpleParallax к изображениям picture / srcset

Джеффри Синьорато

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

Parallax Slider - отзывчивый плагин jQuery от LambertGroup

Parallax Effect - Полная коллекция слайдеров представлена ​​в 4 версиях: Classic, Perpetuum Mobile, Mouse Interaction и Ultra. Каждая из этих 4 версий имеет 2 скина (пули и пальцы) и может использоваться как фиксированные размеры или как полная ширина.Пожалуйста, ознакомьтесь с функциями и проверьте предварительный просмотр этого слайдера в реальном времени и убедитесь в его качестве.


НУЖЕН ПЛАГИН WORDPRESS ДЛЯ ДАННОГО ПРОДУКТА? ВЫ МОЖЕТЕ СКАЧАТЬ ЗДЕСЬ: http://codecanyon.net/item/uberslider-layer-slider-wordpress-plugin/5836306

Parallax Effect - Полная коллекция слайдеров включает 4 типа слайдеров:

- Classic
- Perpetuum Mobile
- Взаимодействие с мышью
- Ultra

НОВИНКА: с помощью этих ползунков вы можете за считанные минуты создавать баннеры на боковой панели.

КЛАССИК

  • сенсорный экран навигации поддержка мобильных
  • отзывчивый дизайн . Доступный параметр для отключения отзывчивого поведения
  • 2 предопределенных скина: bullets & thumbs
  • слоистых элементов: позволяет использовать практически неограниченное количество слоев, изображений или текстов.
  • анимированный текст из любого направления: сверху, снизу, слева и справа. CSS и HTML в формате
  • Параметр внешней ссылки для каждого слайда
  • целевой параметр: _blank или _self
  • Параметры ширины и высоты
  • параметр автозапуска
  • параметр цикла
  • Показать / скрыть параметр контроллеров
  • показать / скрыть параметр нижних пальцев
  • Параметры кругового таймера для цвета, размеров, прозрачности
  • вы можете включить YouTube, Vimeo и HTML5
  • , вы можете вставить несколько экземпляров на одну страницу с той же обложкой или с другой обложкой.
  • - подробная справочная документация включена. Кроме того, все примеры, представленные в предварительном просмотре, включены в загружаемый ZIP-архив
  • .

ПЕРПЕТУУМ МОБИЛЬНЫЙ

  • сенсорный экран навигации поддержка мобильных
  • отзывчивый дизайн . Доступный параметр для отключения отзывчивого поведения
  • 2 предопределенных скина: bullets & thumbs
  • слоистых элементов: позволяет использовать практически неограниченное количество слоев, изображений или текстов.
  • анимированный текст из любого направления: сверху, снизу, слева и справа. CSS и HTML в формате
  • вечное движение : определите несколько фоновых элементов, которые могут иметь вечное движение. Для каждого фона вы можете включить или отключить это поведение.
  • непрерывное перемещение для слоев : вы можете выбрать, какой слой будет непрерывно перемещаться между 2 положениями, просто установив дополнительные параметры
  • вращательное движение для слоев : вы можете выбрать, какой слой будет вращаться, просто установив дополнительные параметры.Эта функция работает во всех браузерах, кроме IE7 и IE8
  • .
  • Параметры ширины и высоты
  • Параметр внешней ссылки для каждого слайда
  • целевой параметр: _blank или _self
  • параметр автозапуска
  • параметр цикла
  • Показать / скрыть параметр контроллеров
  • показать / скрыть параметр нижних пальцев
  • Параметры кругового таймера для цвета, размеров, прозрачности
  • вы можете включить YouTube, Vimeo и HTML5
  • , вы можете вставить несколько экземпляров на одну страницу с той же обложкой или с другой обложкой.
  • - подробная справочная документация включена. Кроме того, все примеры, представленные в предварительном просмотре, включены в загружаемый ZIP-архив
  • .

ВЗАИМОДЕЙСТВИЕ МЫШИ

  • сенсорный экран навигации поддержка мобильных
  • отзывчивый дизайн . Доступный параметр для отключения отзывчивого поведения
  • 2 предопределенных скина: bullets & thumbs
  • слоистых элементов: позволяет использовать практически неограниченное количество слоев, изображений или текстов.
  • анимированный текст из любого направления: сверху, снизу, слева и справа. CSS и HTML в формате
  • взаимодействие с мышью : при наведении курсора мыши на ползунок элементы будут реагировать. Доступный параметр для отключения этого поведения.
  • непрерывное перемещение для слоев : вы можете выбрать, какой слой будет непрерывно перемещаться между 2 положениями, просто установив дополнительные параметры
  • вращательное движение для слоев : вы можете выбрать, какой слой будет вращаться, просто установив дополнительные параметры.Эта функция работает во всех браузерах, кроме IE7 и IE8
  • .
  • Параметры ширины и высоты
  • Параметр внешней ссылки для каждого слайда
  • целевой параметр: _blank или _self
  • параметр автозапуска
  • параметр цикла
  • Показать / скрыть параметр контроллеров
  • показать / скрыть параметр нижних пальцев
  • Параметры кругового таймера для цвета, размеров, прозрачности
  • вы можете включить YouTube, Vimeo и HTML5
  • , вы можете вставить несколько экземпляров на одну страницу с той же обложкой или с другой обложкой.
  • - подробная справочная документация включена. Кроме того, все примеры, представленные в предварительном просмотре, включены в загружаемый ZIP-архив
  • .

УЛЬТРА

  • сенсорный экран навигации поддержка мобильных
  • отзывчивый дизайн . Доступный параметр для отключения отзывчивого поведения
  • 2 предопределенных скина: bullets & thumbs
  • слоистых элементов: позволяет использовать практически неограниченное количество слоев, изображений или текстов.
  • анимированный текст из любого направления: сверху, снизу, слева и справа. CSS и HTML в формате
  • асинхронное перемещение для фона : Определите несколько элементов фона, которые могут иметь асинхронное перемещение, настраиваемое с помощью параметров.
  • Параметры ширины и высоты
  • Параметр внешней ссылки для каждого слайда
  • целевой параметр: _blank или _self
  • параметр автозапуска
  • параметр цикла
  • Показать / скрыть параметр контроллеров
  • показать / скрыть параметр нижних пальцев
  • Параметры кругового таймера для цвета, размеров, прозрачности
  • вы можете включить YouTube, Vimeo и HTML5
  • , вы можете вставить несколько экземпляров на одну страницу с той же обложкой или с другой обложкой.
  • - подробная справочная документация включена. Кроме того, все примеры, представленные в предварительном просмотре, включены в загружаемый ZIP-архив
  • .

ДРУГИЕ РЕКОМЕНДУЕМЫЕ ПЛАГИНЫ


Ключевые слова: эффект параллакса, ротатор баннеров, заголовок, жидкость, галерея, изображение, jquery, мобильный, iOS, плагин, изменяемый размер, отзывчивый, слайдер, слайд-шоу, смахивание, касание

Если вам нужна дополнительная информация, не стесняйтесь обращаться к нам по адресу [email protected] Мы постараемся ответить вам как можно быстрее.

Наслаждайтесь!

10+ лучших бесплатных подключаемых модулей jQuery для создания сайтов с параллакс-прокруткой

Сегодняшний бесплатный пакет представляет собой набор из 10+ бесплатных подключаемых модулей jQuery и библиотек javascript, которые упрощают создание современного веб-сайта с эффектами вертикальной или горизонтальной прокрутки параллакса. Параллаксная прокрутка - это модный метод веб-дизайна, при котором фоновые изображения перемещаются путем прокрутки вниз / вверх медленнее, чем контент на переднем плане. Все эти замечательные плагины jQuery находятся под лицензией MIT, поэтому вы можете использовать их как в коммерческих, так и в личных проектах.

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

Легкий плагин для jQuery, который позволяет перемещаться по горизонтали с эффектом параллакса при прокрутке вниз.

Stellar.js - это плагин jQuery, который обеспечивает эффекты параллакса прокрутки для любого элемента прокрутки.

Автономная библиотека JavaScript с параллакс-скроллингом для мобильных устройств (Android, iOS и т. Д.) И настольных компьютеров, занимающая немногим более 9,6 КБ (уменьшенная) или 4.5k (минимизированный + сжатый).

Parrallax Scrolling отзывчивый фрейм.

Scrolly - это простой плагин параллакса jQuery.

JQuery и amd-совместимый плагин для создания эффекта параллакса с изображениями. Сильно вдохновлен сайтом spotify.com.

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

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

Плагин jQuery для создания супер-крутой анимации прокрутки.

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

jquery.parallax превращает узлы в абсолютно позиционированные слои, которые перемещаются в ответ на указатель мыши.В зависимости от их размеров и от переданных параметров эти слои перемещаются с разной скоростью, подобно параллактике.

Резюме:

Я обновлю список как можно скорее, если в сети будет опубликован новый плагин jQuery parallax scrolling. Пожалуйста, оставайтесь на связи с нами и не забывайте распространять мир.

Bootstrap Parallax - примеры и руководство

Параллакс

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

Плагин

Responsive Parallax, созданный с использованием последней версии Bootstrap 5. Множество примеров настройки анимации с эффектами прокрутки, например, задержка прокрутки, направление прокрутки.

Примечание: Прочтите вкладку API , чтобы найти все доступные параметры и расширенная настройка


Базовый пример

Чтобы инициализировать эффект Parallax, просто добавьте класс parallax к любому элементу и предоставить атрибут data-mdb-image-src с путем к вашему изображению

 
          

Направление

Измените направление прокрутки параллакса с помощью атрибута data-mdb-direction

 
          

Объединить горизонтальное и вертикальное направления

 
          

Задержка

Изменение задержки прокрутки с атрибутом data-mdb-delay

 
          

Масштаб

Изменить масштаб изображения с помощью атрибута data-mdb-scale

 
          

Прокрутка перехода

Измените функцию синхронизации перехода прокрутки по умолчанию с помощью data-mdb-transition

 
          

Макс переход

Измените максимальное значение прокрутки изображения с помощью атрибута data-mdb-max-transiton .Укажите значения в диапазоне 0–100

 
          

Макс.высота изображения

Установить максимальную высоту контейнера параллакса с помощью data-mdb-max-height

 
          

Выравнивание изображения

По умолчанию горизонтальное и вертикальное выравнивание изображения установлено по центру.Изменить по горизонтали выравнивание с помощью data-mdb-horizontal-alignment и вертикальное с data-mdb-vertical-alignment (вертикальное выравнивание работает только с data-mdb-max-height set)

Изображение с горизонтальным выравниванием

 
          

Изображение с вертикальным выравниванием

 
          

Перелив контейнера

Заставить параллакс переполнять свой контейнер с помощью data-mdb-overflow

 
          

Параллакс с контентом

Поместите любой контент внутри параллакса, добавив div с классом parallax-content и ваш контент внутри контейнера параллакса

Содержание параллакса

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

Кнопка
 
          
Название карточки

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

хороший слайдер содержимого CSS3 и jQuery с параллаксом

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

Идея для этого исходит от слайдера на домашней странице Kendo UI , фреймворка для современного пользовательского интерфейса HTML. Получив несколько запросов и вопросов о том, как сделать что-то подобное, мы решили воссоздать эффект.

Как это работает

Слайдер состоит из нескольких слайдов, на каждом из которых будет элемент h3, абзац, ссылка и раздел с изображением:

Заголовок

Некоторое описание

Подробнее…
 image01

Ядро этого слайдера - это анимация для каждого из элементов. Мы будем контролировать поведение элементов, присваивая «класс направления» соответствующему слайду.Например, когда мы сдвигаем текущий слайд вправо, мы присваиваем ему класс da-slide-toright. Будет четыре разных класса для каждого из возможных направлений и источников скольжения:

  • .da-slide-fromright
  • .da-slide-fromleft
  • .da-slide-toright
  • .da-слайд-толефт

Имея эти классы, мы можем управлять анимацией каждого элемента:

/ * Сдвиньте вправо * /
.da-slide-fromright h3 {
    анимация: fromRightAnim1 легкость 0,6 с, обе 0,8 с;
}
.da-slide-fromright p {
    анимация: fromRightAnim2 0,6 с легкость - 0,8 с обе;
}
.da-slide-fromright .da-link {
    анимация: fromRightAnim3 0.4s легкость-в 1.2s обе;
}
.da-slide-fromright .da-img {
    анимация: fromRightAnim4 0,6 с легкость - 0,8 с обе;
}
 
/ * Настраиваем анимацию для разного поведения каждого элемента: * /
@keyframes fromRightAnim1 {
    0% {осталось: 110%; непрозрачность: 0; }
    100% {осталось: 10%; непрозрачность: 1; }
}
@keyframes fromRightAnim2 {
    0% {осталось: 110%; непрозрачность: 0; }
    100% {осталось: 10%; непрозрачность: 1; }
}
@keyframes fromRightAnim3 {
    0% {осталось: 110%; непрозрачность: 0; }
    1% {осталось: 10%; непрозрачность: 0; }
    100% {осталось: 10%; непрозрачность: 1; }
}
@keyframes отRightAnim4 {
    0% {осталось: 110%; непрозрачность: 0; }
    100% {осталось: 60%; непрозрачность: 1; }
} 

Подробнее: http: // tympanus.

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

Ваш адрес email не будет опубликован. Обязательные поля помечены *