1 Востаннє редагувалося FakiNyan (16.10.2017 10:29:05)

Тема: Вебна каруселя Чароўного Трусіка

зацініть, яку каруселю я намудрував
https://fncamm.github.io/3d-carousel

Говоріть українською! Живіть українською! Відчувайте українською!
Подякували: /KIT\, ostap34PHP, Betterthanyou, 0xDADA11C7, Q-bart5

2

Re: Вебна каруселя Чароўного Трусіка

FakiNyan написав:

зацініть, яку каруселю я намудрував
https://fakinyan.github.io/webshit/Carousel/

симпатично
але, якщо викорристовувати ці  наробки для пошуку роботи, то , боюся, коло потенційних роботодавців буде дуже звужене:

https://en.wikipedia.org/wiki/Shit
Shit is a word considered vulgar and profane in Modern English. As a noun it refers to fecal matter, and as a verb it means to defecate;

fakinyan.github.io/webshit/Carousel/

First, solve the problem. Then, write the code. (c)JJ

3

Re: Вебна каруселя Чароўного Трусіка

ping написав:
FakiNyan написав:

зацініть, яку каруселю я намудрував
https://fakinyan.github.io/webshit/Carousel/

симпатично
але, якщо викорристовувати ці  наробки для пошуку роботи, то , боюся, коло потенційних роботодавців буде дуже звужене:

https://en.wikipedia.org/wiki/Shit
Shit is a word considered vulgar and profane in Modern English. As a noun it refers to fecal matter, and as a verb it means to defecate;

fakinyan.github.io/webshit/Carousel/

Це, насправді, "web's hit" - "удар мережі". Ну, кожен бачить те, що йому ближче.

Подякували: FakiNyan1

4

Re: Вебна каруселя Чароўного Трусіка

koala написав:
ping написав:
FakiNyan написав:

зацініть, яку каруселю я намудрував
https://fakinyan.github.io/webshit/Carousel/

симпатично
але, якщо викорристовувати ці  наробки для пошуку роботи, то , боюся, коло потенційних роботодавців буде дуже звужене:

https://en.wikipedia.org/wiki/Shit
Shit is a word considered vulgar and profane in Modern English. As a noun it refers to fecal matter, and as a verb it means to defecate;

fakinyan.github.io/webshit/Carousel/

Це, насправді, "web's hit" - "удар мережі". Ну, кожен бачить те, що йому ближче.

звісно-звісно. )

First, solve the problem. Then, write the code. (c)JJ
Подякували: FakiNyan1

5

Re: Вебна каруселя Чароўного Трусіка

тільки що помітив, що не туди написав те повідомлення...

Ну якщо комусь цікаво, то от невеличка сторі, як я то робив...

Спочатку я думав, що то можна зробити просто змінюючи `transform: rotateY()` елементів зі зміненою transform-origin (точка навколо котрої обертатися елементи мають), але воно також обертає сам елемент навколо своєї осі.
Потім я вже думаю - будемо йти в лоб, і почав використовувати синуси з косинусами. Воно виглядало вже краще, але була проблема - деякі слайди не змінювали свій z-index, як треба.
Я робив кількість z-index рівною кількості елементів, але потім зрозумів, що z-index - ціле число, і тої кількості недостатньо, тому я там почав домножувати кількість z-index на якесь число, чи то 5, чи то 10.
Далі мені дуже різало очі, як слайдер, що виходить на передній план залазить на той слайдер, що відходить на задній (він зліва має бути). Ця проблема виникає, коли є багацько слайдерів.
І тут я думаю - на момент, коли слайдер відходить на задній план і проходить через слайдер, котрий виходить на передній план, мені потрібно його (той, що на задній план відходить) зробити прозорим, а потім показати.
Тобто виглядає воно так - коли слайдер зліва наближається то слайдеру, що виходить на передній план (по осі Z), ми починаємо плавно зменшувати opacity лівого слайдера, і в момент, коли він вирівнюється по осі Z з правим слайдером - opacity має дорівнювати 0, після чого так само плавно ми збільшуємо opacity лівого слайдера до 1.

Спочатку я то робив порівнюючи значення Z а translate3D, потім я додав умову, що перевіряємо лише ті слайди, Z котрих знаходиться в певному діапазоні (це аби працювати лише з тими, що на передньому плані). Але було зрозуміло, що цей діапазон залежить від кількості слайдерів, адже коли вони ущільнюються, то й діапазон має ставати меншим.
І потім мене осінило (майже), і я почав вибирати слайдери на основі градусів (радіан), на котрі вони повернуті. При цьому всі слайдери мають однакову відстань в градусах між собою, тому я можу розрахувати на якому саме діапазоні градусів я маю працювати. І таким чином воно працює для будь-якого числа слайдерів, що крутяться з будь-якою швидкістю - момент та швидкість зміни opacity буде саме такою, як і треба.
Озьдо цей код (я кого закоментував для 3 слайдерів. бо вони там не проходять одне через одного)

/* fade in-out when going through neighbor slider */
            const fRad = rad%(Math.PI*2);
            const start = Math.PI/2+space/4;
            const end = Math.PI/2+3*space/4;
            const duration = end-start;
            if(fRad>start && fRad<end){
                lastIndex=index; // оце тре видалити, я його юзав, аби не обирати один й той самий слайдер декілька разів підряд в старій версії коду
                const time = 1-(fRad-start)/duration;
                el.style.opacity = Math.cos(time*Math.PI*2)*0.5+0.5;
            }
Говоріть українською! Живіть українською! Відчувайте українською!
Подякували: sensei1