let slidesNext = this.swiperBottomEl.find(".swiper-slide-active").nextAll()
let slidesPrev = this.swiperBottomEl.find(".swiper-slide-active").prevAll()
let slideActive = this.swiperBottomEl.find(".swiper-slide-active")
- const rules = {
- opacity: function (index) {
+ let rules = {
+ ease: "power1.inOut",
+ stagger: .15,
+ onComplete: function () {
+ $(this.target).removeClass("not-visible")
+ }
+ }
+
+ if (this.quiz.data.theme.matchOtherOpacity < 100) {
+ rules.opacity = function (index) {
let opacity = 0
if (index === 0) {
opacity = 0.8
opacity = 0.4
}
return opacity
- },
- ease: "power1.inOut",
- stagger: .15,
- onComplete: function () {
- $(this.target).removeClass("not-visible")
- }
+ };
+ } else {
+ rules.opacity = 1;
}
+
this.timeline = gsap.timeline({delay: .5})
this.timeline.to(".active-screen .top-slider-container", {
let abspos = Math.abs(position);
let angle = (position * 4);
- let opacity = 1 - (abspos * 0.2);
+ let opacity = this.quiz.data.theme.matchOtherOpacity == 100 ? 1 : 1 - (abspos * 0.2);
let floorpos = Math.floor(abspos)
let ceilpos = Math.ceil(abspos);
let top = tops[floorpos];
&-container
position: relative
+
&:after
height: 0
width: 0
transition: background-color $transition-time, border $transition-time
border: 2px solid transparent
transform-origin: 50% 50%
- +opacity(.24, background-color, var(--match-color))
+ +opacity($card-disabled-opacity, background-color, var(--match-color))
opacity: 0
text-align: center
&-active
background-color: var(--match-color)
- border: 2px solid $texts-color
+ border: 2px solid $active-stroke-color
top: 0 !important
&:not(.not-visible)
&-prev,
&-next
- +opacity(.24, background-color, $card-disabled-background)
+ +opacity($card-disabled-opacity, background-color, $card-disabled-background)
color: $card-disabled-color
&:not(.swiper-slide-active):not(.swiper-slide-prev):not(.swiper-slide-next)
- +opacity(.24, background-color, $card-disabled-background)
+ +opacity($card-disabled-opacity, background-color, $card-disabled-background)
color: $card-disabled-color