Холиварофорум

Анон

Re: [музло] побеждает зло… и прочее [дыбр][языки][кино][еда][ИИ][yescomm]

Я ещё вот над какой задачей думаю: можно ли у нумерованного списка счётчик из :before самого элемента списка переместить в :before дочернего элемента? Просто узнала о современной возможности CSS, позволяющей делать кастомные маркеры у нумерованных списков — например, добавлять нулик перед каждым номером, чего по стандарту не предусмотрено. А если мне ещё и вот так вот нужно? Чтобы и в семантику попасть, и в дизайн. Попробую…

Да! Вуху! Это работает!

Хорошо. Проще будет допилить адаптив.

Анон

Re: [музло] побеждает зло… и прочее [дыбр][языки][кино][еда][ИИ][yescomm]

Ё… попробовала повращать камеру вебжлную, поприближать и поудалять, но я вообщееееее не понимаю, где эти оси находятся, по которым она типа движется. Если эмпирически потыкать, то ничего не понятно. Ещё одна головная болька.

Анон

Re: [музло] побеждает зло… и прочее [дыбр][языки][кино][еда][ИИ][yescomm]

Эх, задачи снова разделились на «это тупое душнилово, сделаю, когда наберусь моральных сил» и «это я вообще не знаю как делать, вернусь к задаче, когда поумнею».

Но тут ждало новое препятствие. Согласно ТЗ, в меню должны обрабатываться параллельно и общий скролл всей секции, и наводка на конкретный элемент списка. А у меня они конфликтуют друг с другом, элементы перехватывают друг у друга события, и что делать? Эээээээ.

Сначала думала разделить их территориально, проставив у списка мэрджины, и оставив в мэрджинах обработку скролла, а у списка — обработку наведения на элемент. Но увы, но это не выход, так как мы можем навести курсор на элемент списка и дальше продолжить скроллить, ожидая, что скролл так и будет работать… Ууу, может, по событию скролл на списке генерировать событие скролла на всей секции контейнера? Та ещё головоломка, конечно, капец.

Анон

Re: [музло] побеждает зло… и прочее [дыбр][языки][кино][еда][ИИ][yescomm]

Одно радует, осталось уже немного. Вместе с сегодняшним пять дней. Не справлюсь — ну… не убьют меня точно. Хотя, кто знает. Но вероятность летального исхода мала.

Итоги:
- поработала с анимированными *.fbx, библиотечкой Masonry, библиотечками скролла и GSAP
- в принципе узнала, чем занимаются люди, и какие «в природе» бывают заказы
- живительная сила прокрастинации — появилась масса вдохновения на музыку, игру на музыкальных инструментах и так далее

Анон

Re: [музло] побеждает зло… и прочее [дыбр][языки][кино][еда][ИИ][yescomm]

Сначала думала разделить их территориально, проставив у списка мэрджины, и оставив в мэрджинах обработку скролла, а у списка — обработку наведения на элемент. Но увы, но это не выход, так как мы можем навести курсор на элемент списка и дальше продолжить скроллить, ожидая, что скролл так и будет работать… Ууу, может, по событию скролл на списке генерировать событие скролла на всей секции контейнера? Та ещё головоломка, конечно, капец.

В общем, нашла совершенно дикое, но рабочее решение — вешать обработчик для mouseover на весь документ; проверять, отображается ли тот самый список (у него появляется класс visible, когда мы проскралливаем страницу на определённый процент вьюпорта); проверять для каждого элемента списка по очереди, попадает ли clientY ивента в getBoundingClientRect данного пункта списка, и если да, то проскралливать к нему.

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

Анон

Re: [музло] побеждает зло… и прочее [дыбр][языки][кино][еда][ИИ][yescomm]

Ещё одна головная болька — анимация, якобы, должна происходить по принципу «один скролл — один экран». И как же, блин, это реализовывать, если событие скролл происходит не один раз, когда мы двинули колесо мыши, а генерируется непрерывно в процессе прокрутки? Есть, вроде, Свайпер, где слайды можно скроллить — можно глянуть, как там это реализовано… Ещё есть вариант с тем же scroll-snap-type, но то свойство, которое отвечает за то, чтобы больше одного слайда за раз не прокручивалось, работает далеко не во всех браузерах. И это по всей странице придётся задавать эти поинты начальной позиции скролла, а значит, создавать стопиццот фиктивных элементов в начале страницы, когда там по скроллу просто слайды меняются… Жесть, в общем.

Есть, конечно, ещё событие wheel, но на тач-устройствах его тупо не будет, надо ещё и над обработкой для touchstart и touchend медитировать. Аааааааааааааааааааааааа.

Анон

Re: [музло] побеждает зло… и прочее [дыбр][языки][кино][еда][ИИ][yescomm]

Переделала ещё и анимацию по-человечески.

Из разряда

«это тупое душнилово, сделаю, когда наберусь моральных сил»

остался преимущественно адаптив.

Анон

Re: [музло] побеждает зло… и прочее [дыбр][языки][кино][еда][ИИ][yescomm]

160 дней и пять пройденных юнитов в курсе иврита.

Главное — не злоупотреблять прокрастинацией.

Уже семь юнитов прошла, как-то סשסקסא он у меня пошёл.

И вдогонку ещё седьмой юнит в шведском тоже закончила.

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

Анон

Re: [музло] побеждает зло… и прочее [дыбр][языки][кино][еда][ИИ][yescomm]

Морочаюсь теперь с шейдерами. Оказалось, что если заменить материал просто на ShaderMaterial, то скиннинг слетает (и как следствие, подготовленные в файлах *.fbx анимации — тоже). Вроде, есть ещё у материалов такое свойство, как onBeforeCompile, и посредством него как раз можно лепить шейдеры. Сейчас я это и попробую сделать.

Вот пример: https://codepen.io/prisoner849/embed/BvxBPW?#result-box

Анон

Re: [музло] побеждает зло… и прочее [дыбр][языки][кино][еда][ИИ][yescomm]

Ура! Один из шейдеров запилила, осталось ещё два.

И я сюда ещё хотела выложить коллекцию всяких полезных материалов по шейдерам, в основном — референсы.
Предыдущий сделала на основе одного из этих: https://codesandbox.io/p/github/wass08/ … glsl:17,27

А следующие попытаюсь на основе этого: https://codesandbox.io/s/grain-light-sh … hader.glsl

Отредактировано (2023-06-20 21:02:29)

Анон

Re: [музло] побеждает зло… и прочее [дыбр][языки][кино][еда][ИИ][yescomm]

Это в целом коллекция пример шейдеров: https://webgl-shaders.com/

Это серия уроков по шейдерам от ShaderToy: https://inspirnathan.com/posts/47-shade … al-part-1/

Это, вроде, уже постила, но можно и повторить, тоже серия последовательных уроков: https://thebookofshaders.com/?lan=ru

Просто интересный туториал, уже не первый раз из него идеи притыриваю: https://tympanus.net/codrops/2022/03/07 … -three-js/

Анон

Re: [музло] побеждает зло… и прочее [дыбр][языки][кино][еда][ИИ][yescomm]

Как говорится, если долго мучиться, что-нибудь получится.

Домучила шейдерные VFX. По мелочи могу ещё какие-нибудь правки повносить, но в целом эта часть работы закрыта.

Постараюсь сейчас расправиться с остальным.

Анон

Re: [музло] побеждает зло… и прочее [дыбр][языки][кино][еда][ИИ][yescomm]

Это в целом коллекция пример шейдеров: https://webgl-shaders.com/

Это серия уроков по шейдерам от ShaderToy: https://inspirnathan.com/posts/47-shade … al-part-1/

Это, вроде, уже постила, но можно и повторить, тоже серия последовательных уроков: https://thebookofshaders.com/?lan=ru

Просто интересный туториал, уже не первый раз из него идеи притыриваю: https://tympanus.net/codrops/2022/03/07 … -three-js/

Забыла ещё вот это: https://dtf.ru/gamedev/152957-animaciya … ra-v-unity

Для общего развития и вдохновения, воспроизвести подобное для меня было бы крайне сложно на данном этапе.
Но круто. Мощь!

Анон

Re: [музло] побеждает зло… и прочее [дыбр][языки][кино][еда][ИИ][yescomm]

Такое чувство, что чем больше я чего-то делаю по этому заданию, тем больше работы ещё остаётся. Вскрываются новые пласты подзадач.

Вчера тупила, пытаясь повернуть камеру так, как мне надо. Сначала почему-то не пришивались OrbitControls, с помощью которых я мануально хотела выставить нужное мне положение камеры, чтобы взять координаты с него. Потом справилась с этим, но ждала новая засада — перемещения камеры вращали модель по дуге, и я никак не могла выставить её таким образом в нужное положение. Пришлось ещё и саму модель двигать. Потом искала, как с помощью GSAP анимировать эти перемещения-повороты, чтобы привязать их ко скроллу. Ну, вроде, справилась, но голову сломала — как-то тяжко думается мне в последнее время.

Анон

Re: [музло] побеждает зло… и прочее [дыбр][языки][кино][еда][ИИ][yescomm]

А ещё вчера выкатили третью айдл-анимацию, и мне пришлось переписывать алгоритм их чередования. Это оказалось значительно мозголомнее, чем просто чередовать их две, проверяя попутно, загружена ли вообще в данный момент вторая. Я нагородила говнокод с кучей повторений, который ещё и нестабильно отрабатывает, к тому же — иногда после проигрывания одной-единственной анимации произведение останавливается, и больше ничего не происходит. Тоже морока ещё та, проще, конечно, было бы по циклу их пустить, чем прописывать выбор рандомной.

Созванивались ещё вчера с мультипликатором. Интересная у них терминология, хотя дизайнеров интерфейса я, конечно же, намного лучше понимаю. Запомнилось выражение «принцип танка» — это когда отдельно одна анимация отрабатывает, например, на ногах у модели, а другая отдельно — допустим, на голове.

Анон

Re: [музло] побеждает зло… и прочее [дыбр][языки][кино][еда][ИИ][yescomm]

Я ещё боюсь задаваться вопросом, что там со сроками? По идее, сегодня как раз должен быть дедлайн, так как мы договаривались на срок в месяц,и приступила я к работе 22 мая. Но анимации пока ещё не всё присутствуют даже, которые мне нужны, сегодня оставшиеся мне скинут.

Анон

Re: [музло] побеждает зло… и прочее [дыбр][языки][кино][еда][ИИ][yescomm]

Что уже сделала:
- адаптив на трёх страницах и частично на двух оставшихся
- параллакс-эффект
- анимация при загрузке страницы
- интерактивная анимация по скроллу
- ролловер в сочетании со скроллом
- встраивание анимированной модели
- шейдерные VFX
- анимация шестиугольников
- пагинация
- вращение камеры

Но этого всего мало, блин… ещё полно работы. Мне просто хотелось увидеть свои успехи, проделанный путь, чтобы руки не опускались.

Анон

Re: [музло] побеждает зло… и прочее [дыбр][языки][кино][еда][ИИ][yescomm]

Что ещё нужно сделать:

- допилить адаптив для Свайпера
- доделать анимацию камеры
- доделать адаптив списка с параллаксом
- доделать тот самый сраный скролл по принципу «один скролл — один слайд» (гррр)
- поправить вёрстку ролловера
- поправить механику проигрывания анимаций
- сделать скрипт анимаций модели для каждой отдельной страницы (надо подумать, как это лучше реализовать, учитывая асинхронность)

Ааааааааа.
В общем, проорусь и приступлю, пожалуй.

upd.
- привязать анимацию шестигранников к позиции скролла
- добавить предзагрузку

Отредактировано (2023-06-22 11:17:50)

Анон

Re: [музло] побеждает зло… и прочее [дыбр][языки][кино][еда][ИИ][yescomm]

Сейчас ещё вот с такой проблемой столкнулась: https://github.com/mrdoob/three.js/issues/17730

Анимации в цикле как будто не доигрывались до конца, и я не могла понять, почему. Гугление навело меня на этот тред, помогло.

Анон

Re: [музло] побеждает зло… и прочее [дыбр][языки][кино][еда][ИИ][yescomm]

Ещё одна головная болька — анимация, якобы, должна происходить по принципу «один скролл — один экран». И как же, блин, это реализовывать, если событие скролл происходит не один раз, когда мы двинули колесо мыши, а генерируется непрерывно в процессе прокрутки? Есть, вроде, Свайпер, где слайды можно скроллить — можно глянуть, как там это реализовано… Ещё есть вариант с тем же scroll-snap-type, но то свойство, которое отвечает за то, чтобы больше одного слайда за раз не прокручивалось, работает далеко не во всех браузерах. И это по всей странице придётся задавать эти поинты начальной позиции скролла, а значит, создавать стопиццот фиктивных элементов в начале страницы, когда там по скроллу просто слайды меняются… Жесть, в общем.

Есть, конечно, ещё событие wheel, но на тач-устройствах его тупо не будет, надо ещё и над обработкой для touchstart и touchend медитировать. Аааааааааааааааааааааааа.

…К тому же, оно также отрабатывает несколько раз за одно прокручивание колёсиком мыши.

Scroll-snap-type, я выбираю тебя. Решила назначить это свойство контейнеру именно списка, чтобы он скроллился, как надо. Правда есть такая проблема: содержимое контейнера внутри него начинает скроллиться до того, как сам контейнер доедет до верхушки вьюпорта.

Ладно, в крайнем случае, добавлю те самые стопиццот фиктивных элементов и перепишу целиком всю страницу на scroll-snap-type.

Анон

Re: [музло] побеждает зло… и прочее [дыбр][языки][кино][еда][ИИ][yescomm]

Каким-то чудом механизм «один скролл — один слайд» заработал. Правда, ролловер поломался в процессе (и есть подозрение, что в Фаерфоксе он изначально не отрабатывал как надо). Но хоть какой-то прогресс. Сафари, не подведи! К сожалению, я не могу мониторить, что происходит в этом, столь чудесном, браузере, потому что у меня нет макоси. Не ставить же её себе чисто ради Сафари.

Анон

Re: [музло] побеждает зло… и прочее [дыбр][языки][кино][еда][ИИ][yescomm]

Что же такое, почти разобралась с доками ScrollMagic, и тут оказывается, что анимация получилась с фризами, а свойство will-change не помогает…

По совету со stackoverflow поставила в свойствах перемещаемых элементов transition: .5s, и анимация правда стала гораздо плавнее. Но мне говорят, что она всё равно рывками. Ну, что ж такое, а у меня такая же нога и не болит, щито поделать десу.

М-да, а для другого элемента точно такой же приём не сработал. Анимация тупо останавливается на нулевом кадре. Что, как, почему.
Я уже задолбалась пытаться это как-то пофиксить.

Анон

Re: [музло] побеждает зло… и прочее [дыбр][языки][кино][еда][ИИ][yescomm]

Причём, если этой падле поставить в Хроме в element.style transition-duration, то она отрабатывает как нужно!

Вот за это и я ненавижу вёрстку.

upd. И ещё одно примечательное наблюдение. В ФАЕРФОКСЕ ТОЖЕ ВСЁ РАБОТАЕТ КАК НАДО!

Отредактировано (2023-06-22 17:02:28)

Анон

Re: [музло] побеждает зло… и прочее [дыбр][языки][кино][еда][ИИ][yescomm]

Надо передохнуть.
Надо отдышаться.

После долгих мытарств нашла костыльное решение — заменила гсаповский метод .from на .fromTo. Почему вообще возникла проблема — без понятия, и сил/времени разбираться нет.

По-прежнему ненавижу вёрстку, вот за такие эксцессы.

Анон

Re: [музло] побеждает зло… и прочее [дыбр][языки][кино][еда][ИИ][yescomm]

Новости, конечно, просто огонь.