if (($('#name').val().length >= 3) && ($('#phone').inputmask('isComplete')) && ($('#message').val().length >= 9))В данном случае у меня только одна форма работает - №2. а первая выдает в консоли ошибки
if (($('#name').val().length >= 3) && ($('#phone').inputmask('isComplete')) && ($('#message').val().length >= 9))<div class="info">
<div class="wrapper-info">
<div class="container">
<div class="info-slider">
<div class="info-slider__item">
<div class="info-slider__image-wrapper"><img class="info-slider__image" src="путь к картинке" alt="описание"></div>
<div class="info-slider__text">
<div class="info-slider__name">Имя</div>
</div>
</div>
</div>
</div>
</div>
</div>info-slider__image-wrapper в данном случае подойдет только для одной картинки ? <div class="info-slider__photo"><img class="info-slider__photo-preview" src="путь к картинке" alt="описание"></div>var routes = [{
path: '/index.html',
name: 'home'
}, {
path: '/about.html',
name: 'about'
}];
// tell Barba to use the router with your custom routes
barba.use(barbaRouter, {
routes
});
barba.init({
routes: routes,
transitions: [{
name: 'custom-transition',
from: {
// define a custom rule based on the trigger class
custom: ({ trigger }) => {
return trigger.classList && trigger.classList.contains('use-custom-transition');
},
// define rule based on multiple route names
route: [
'index',
'about'
]
},
to: {
// define rule based on multiple namespaces
namespace: [
'home',
'about'
]
},
leave: function (data) {
var done = this.async();
TweenMax.to(data.current.container, 1, {
css: {
display: 'none',
opacity: 0
},
onComplete: done
});
},
enter: function (data) {
var done = this.async();
TweenMax.from(data.next.container, 1, {
css: {
display: 'block',
opacity: 1
},
onComplete: done
});
}
}]
});<div data-barba="wrapper">
<div data-barba="container" data-barba-namespace="home">
<!-- put here the content you wish to change between your pages -->
<h1>Home Page</h1>
</div>
</div>var transitionAnimation = Barba.BaseTransition.extend({
start: function() {
Promise
.all([this.newContainerLoading, this.startTransition()])
.then(this.fadeIn.bind(this));
},
startTransition: function() {
var transitionPromise = new Promise(function(resolve) {
var outTransition = new TimelineMax();
outTransition
.to(".title", 1, {y:-50, autoAlpha: 0, ease: Power2.easeOut})
.set(".color-wipe", {display:'block', y: "100%"}, "-=0.7")
.staggerFromTo(".color-wipe", 1, {y: "100%"},{y: "-100%", ease: Expo.easeOut}, 0.2, "-=0.7")
.to(".loader", 1, {autoAlpha:1, onComplete: function() {
resolve();
}},)
.staggerFromTo(".color-wipe", 1, {y: "-100%"},{y: "-200%", ease: Expo.easeIn}, 0.2,"-=0.5")
.set(".color-wipe", {display:'none'})
});
return transitionPromise;
},
fadeIn: function() {
$(window).scrollTop(0);
var _this = this;
var $el = $(this.newContainer);
TweenMax.set($(this.oldContainer), { display: "none" });
TweenMax.set($el, { visibility: "visible", opacity: 0, });
TweenMax.to(".loader", 1, {y:-50, autoAlpha: 0, ease: Expo.easeOut})
TweenMax.fromTo(".title", 1.5, {y:30, autoAlpha: 0},{delay:0.8, y:0, autoAlpha: 1, ease: Expo.easeOut})
TweenMax.to($el, 0.1, {
opacity: 1,
onComplete: function() {
_this.done();
console.log("done");
}
});
}
});
Barba.Pjax.getTransition = function() {
return transitionAnimation;
};
Мне нужно что-то похожее сделать: vintagetechnics.ru
Там при повторном клике добавляются только нужные данные, без всякого дублирования