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

Question

[Илья Матвийчук]

У меня в горизонтальном скролле карточки. На экране помещаются они по 3 штуки. Нужно, чтобы при скролле увеличивалась( scale(1.2) ) та, что посередине экрана


всё, что я пока сделал с карточками:

<div class="mainCardsRow ">
<div class="card">..</div>
<div class="card">..</div>
<div class="card">..</div>
<div class="card">..</div>
</div>

.mainCardsRow {
    width: 100%;
    overflow-x: scroll;
    height: 22em;
    display: flex;
}

.card {
    width: 200px;
    height: 50vh;
    display: inline-block;
    white-space: nowrap;
    font-size: 0px;
    position: relative;
    margin: 0px 20px;
}

Answer 1

[Илья Матвийчук]

Итак, я накостылял, но кое-как работает.

1. Установил свайпер
   
2. структура свайпера
   

                  <div class="glide">
                       <div class="glide__track" data-glide-el="track">
                           <ul class="glide__slides">
                               <li class="glide__slide">
                                   <div class="glide__slide">
                                       <div class="card">
                                       </div>
                               </li>
                               <li class="glide__slide">
                                   <div class="glide__slide">
                                       <div class="card">
                                       </div>
                               </li>
                               <li class="glide__slide">
                                   <div class="glide__slide">
                                       <div class="card">
                                       </div>
                               </li>
                               <li class="glide__slide">
                                   <div class="glide__slide">
                                       <div class="card">
                                       </div>
                               </li>
                           </ul>
                       </div>
                   </div>

   
   
   
3. css
   

   .glide__slide {
       /* Итак, во всех слайдерах слайды или 100% ширину имеют, или ровно 
       по 2/3/4/5/.. помещаются на экране.
       Но нельзя боковые слайды показывать только на ~10%.
       Поэтому все слайды сдвигаются влево, чтобы кусочек всегда справа был виден */
       transform: translateX(2.4em);
       transition: 0.1s ease-in-out;
       }
       .glide__slide--active {
           /* увеличил и выровнял по центру центральную(активную) карточку */
           transform: translateX(-2.4em) scale(1.1) !important; 
       }

   
   
4. объявление слайдера
   

   var gliide = new Glide('.glide', {
           swipeThreshold: 60,
           dragThreshold: 60,
           rewind: false,
           focusAt: 'center'
   });

   
   
5. Кхм, здесь алгоритм, я уверен, можно было сделать проще, но это работает
   

   gliide.on("run.after", () => {        //событие перелистывания
   
       if(gliide.index == 0){   
   //если перелистнули на первый слайд, то
   // только следующий подвигается влево, чтобы быть справа чуть-чуть видным
   
           $('.glide__slide--active')[0].nextElementSibling.style.transform='translateX(-7.1em)';
       }
       else if(gliide.index >= 1 && gliide.index < ($('.glide__slide').length/2)-1) {
   //если мы на любом, кроме первого и последнего, то следующий и предыдущий двигаются
           $('.glide__slide--active')[0].nextElementSibling.style.transform='translateX(-7.1em)';
           $('.glide__slide--active')[0].previousElementSibling.style.transform='translateX(2.4em)';
       }
       else if(gliide.index == ($('.glide__slide').length/2)-1) {
   //если последний слайд, то двигаем предыдущий
           $('.glide__slide--active')[0].previousElementSibling.style.transform='translateX(2.4em)';
       }
       
   });

   
   
6. 
   

   gliide.on(['mount.after'], () => {
   //при загрузке сайта и слайдера сразу двигаем следующий слайд
       $('.glide__slide--active')[0].nextElementSibling.style.transform='translateX(-7.1em)';
      });

   
   
7. инициализация слайдера
   gliide.mount();
   

Answer 2

[Николай]

Ну наверное, у центральной карточки есть, какой-то класс активации, например active, почему бы от него и не плясать в стилях?
Например, что-то в этом роде .item.active img { transform: scale(1.2) }

Comments

[Илья Матвийчук]

С чего вы взяли, что у неё есть класс? Как динамически определять, какая карточка центральная?

[Николай]

Илья Матвийчук, ну без кода, только такие мысли возникли))

[Илья Матвийчук]

Николай, js кода по поведению карточек пока нет. Хотел здесь идеи людей послушать.

[Тарас Шульга]

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

[Николай]

Илья Матвийчук, а еще потому возникла такая мысль, что она чуть выше остальных же?!

[Rustam Bainazarov]

Илья Матвийчук, код?

[Николай]

Илья Матвийчук, так и я говорил про стилевой способ, как раз подходит больше, так как js-логики нету, разве не так?!))

[Илья Матвийчук]

<div class="mainCardsRow ">
<div class="card">..</div>
<div class="card">..</div>
<div class="card">..</div>
<div class="card">..</div>
</div>

.mainCardsRow {
    width: 100%;
    overflow-x: scroll;
    height: 22em;
    display: flex;
}

.card {
    width: 200px;
    height: 50vh;
    display: inline-block;
    white-space: nowrap;
    font-size: 0px;
    position: relative;
    margin: 0px 20px;
}

[Илья Матвийчук]

Тарас Шульга, отредактировал вопрос

[Илья Матвийчук]

Тарас Шульга, нет. Это как вопрос — не знаю, как сделать попап, и просить показать, как.

[Николай]

Илья Матвийчук, без js, тогда наврятли получится ее определять или используйте готовые слайдеры.

[Илья Матвийчук]

Николай, Почему сразу без js?

[Илья Матвийчук]

The Wizard of Oz, Я думал, это достаточно просто, чтобы без внешних библиотек всё сделать. И у меня начинает получаться уже.

[Илья Матвийчук]

The Wizard of Oz, Я сейчас учусь, поэтому стараюсь делать всё максимально руками, а не библиотеками

[Николай]

Илья Матвийчук, хорошее дело, если получится, то поделитесь решением, будет интересно посмотреть

[Илья Матвийчук]

The Wizard of Oz, я попробовал несколько слайдеров и ни один не даёт добиться такого эффекта, как на картинке.

[Илья Матвийчук]

Николай, готово

[Илья Матвийчук]

The Wizard of Oz, хахах, я всё-таки сделал это

[Илья Матвийчук]

The Wizard of Oz, : -)