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

Анон

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

Сегодня договорились созвониться с заказчиком. Узнаю, что там.

Сложно. Большой объём работы. Я думаю пока, соглашаться или нет. Но меня действительно вдохновляет это задание, и это круто. Третий день залипаю во всякие креативные фронтендерские штуки, попробовала впервые запилить вершинный шейдер и познакомилась с GSAP.

Анон

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

Сложно. Большой объём работы. Я думаю пока, соглашаться или нет. Но меня действительно вдохновляет это задание, и это круто. Третий день залипаю во всякие креативные фронтендерские штуки, попробовала впервые запилить вершинный шейдер и познакомилась с GSAP.

Согласилась.
Итак, процесс пошёл. Вернее, завтра приступлю, а пока просто набрасываю первые наметки.

Вроде, тут нет ничего такого, с чем я ещё не имела дело, кроме упомянутого GSAP, но эта библиотечка кажется суперпростой в освоении — по крайней мере, на том уровне, который необходим для вёрстки представленного макета.

Договорилась на 100к и срок месяц. Отчёт, так понимаю, начнётся с завтрашнего дня.

Отписываться о процессе буду теперь ежедневно.

Анон

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

Итак, прошло два дня. В первый день я морочалась с гсаповской библиотечкой — точнее, плагином — ScrollTrigger, пытаясь получить от него то, что мне нужно. Получилось только наполовину. Во второй, т.е. сегодня пыталась добить оставшуюся половину эффектов скролла. Сначала думала задействовать свайпер, затем CSS'овский scroll-snap-type, но что-то неизменно шло не так, и я отказалась от этого. Немного переделала структуру HTML, чтобы ScrollTrigger отрабатывал именно так, как мне нужно, и добавила ещё из библиотечек альтернативную ScrollMagic. Пока что приходится талмуды написывать, чтобы всё работало так, как мне нужно — в лучшем случае, просто генерируя код циклом. Видимо, так плохо знаю пока эти библиотеки.

Скорость вёрстки оставляет желать лучшего, но времени в запасе, к счастью, пока достаточно.

Анон

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

День третий. Сегодня подвисла на этапе воссоздания хитровыдуманной сетки, псевдохаотической, типа masonry, только ещё хитрее. Пока не решила эту проблему, тыкаюсь в Codepen, ищу наводку на подходящее решение там.

Анон

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

День третий. Сегодня подвисла на этапе воссоздания хитровыдуманной сетки, псевдохаотической, типа masonry, только ещё хитрее. Пока не решила эту проблему, тыкаюсь в Codepen, ищу наводку на подходящее решение там.

Невероятно, но, кажется, я это превозмогла!

Что ж, вроде, по вёрстке всё самое сложное позади, осталась лишь рутинная нудятина всякая. Ей сейчас и займусь.

Анон

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

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

Я верстаю медленно, относительно медленно.
Но медленно не значит плохо.
К тому же — видимо, в отличие от многих других разработчиков — я знаю WebGL!

И всё-таки лучше работать пошустрее, как говорится — в темпе.

Анон

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

День четвёртый, скинула им то, что успела сделать. Страшно. Хотя что самое страшное может случиться? Откажутся от дальнейшего сотрудничества, не смертельно.

Анон

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

Хотела бы за сегодня отделаться уже от вёрстки хотя бы десктопной версии. Но что-то пока подтормаживаю.

Волнительно.

Анон

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

Хотела бы за сегодня отделаться уже от вёрстки хотя бы десктопной версии. Но что-то пока подтормаживаю.

Волнительно.

Мозги уже варят плохо, выдохлась. Сижу и залипаю тупо в то, что уже сделала — красиво же.

Анон

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

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

Анон

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

Зелёная Сова как тамагоччи — когда тебе нефиг делать, она тебя нормально занимает и развлекает, но когда у тебя есть мало-мальски серьёзное занятие в течение дня, оно отвлекает своими уведомлениями и угрозами сдохнуть от того, что её вовремя не покормили.

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

Отредактировано (2023-05-28 13:03:21)

Анон

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

День шестой. Решила, что на выходных я тоже работаю, но умеренно, мозги надо перезагружать.
Потихоньку подходит к концу этап вёрстки десктопной версии. Со скроллом пока не шибко разобралась, но работает, вроде, как надо — просто код довольно-таки громоздкий и грязный, нужен рефакторинг.

Анон

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

Библиотеки, которые я использую в этом проекте:

- GSAP с прилагающимся к нему ScrollTrigger и MotionPath
- ScrollMagic
- Masonry
- Swiper
- jQuery как условие для работы Masonry

Честно говоря, я не знаю, каким образом это всё грамотно сочетать с Реактом, на который я собираюсь переложить свою вёрстку. Придётся гуглить.

Анон

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

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

Анон

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

Поговорили. Много правок прилетело, но в целом у ребят настрой вполне дружелюбный.
Очень хочется надеяться, что я всё-таки успею это всё завершить и не облажаюсь.

Анон

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

День восьмой. Вернее, уже настал девятый, но пока напишу про восьмой.

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

Самое сложное теперь — выбрать библиотечки для параллакса и скроллинга и разобраться в их документации, чтобы сделать то, что мне нужно. С Locomotive Scroll сегодня что-то не получилось воспроизвести задуманный эффект. И ещё у шрифтов почему-то разные отступы сверху и снизу в браузерах здорового человека и в Сафари. Может быть, нормалайз не дописан? Хотелось бы надеяться, что это решаемо посредством допиливания нормалайза, иначе я без понятия, что делать вообще, если честно.

В общем, есть, чем заняться.

Анон

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

День одиннадцатый, запилила шейдер на плащ, чтобы он развевался, и мурашки по нему бежали.

---

Тем временем мне сообщили, что на моей прошлой работе умер руководитель айти-отдела. А на нём весь отдел и держался.

Отредактировано (2023-06-02 23:34:44)

Анон

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

Я боюсь что-то делать, потому что боюсь начать не с того. Надо бы перед тем, как сделать адаптив, по-нормальному прозвать везде классы к элементам и прописать везде обращения по ним, а не как придётся. Пофигу на БЭМ, как получится. Любые, блин, названия — и таблицу стилей под эти названия. Почему-то это так страшно, всё же будет ломаться наверняка в процессе, и вёрстку придётся чинить, борясь за каждый пиксель часами… Ааааа, нет-нет-нет.

Анон

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

В общем, лучше скролл и всякие связанные с ним штуки оставить напоследок, чтобы процесс не стопорился. Потому что это слишком уж заморочно, попробую всё-таки сначала сделать адаптив. Хотя вскоре придётся встраивать модельку… Ууу, щет. Без отлаженного скролла с ним будет тяжко.

Ладно, адаптив так адаптив, решено.

Анон

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

Смотрела креативные дизайнерские сайты. Этот, к сожалению, в первозданном виде не сохранился, до наших дней дошли только скриншоты и видео:
https://youtu.be/f2svlZH0fIs
Соцсеть под названием Hanai World. Это слово мне показалось звучащим подозрительно по-гавайски, и точно!

Hãnai is a term used in the Hawaiian culture that refers to finding your tribe. It’s about a family taking in someone as their own as an informal adoption.

In the words of Lilo and Stitch, it’s where Ohana means family, and family means no one is left behind or forgotten.  Hānai is a place where friends become family. Where our tribe is found. Where we become better together.

— отсюда: https://www.hanaiaz.com/our-story

---

А ещё поисковый запрос "ScrollSmoother.min.js" привёл меня на сайт hawaii.edu, где тоже много интересного контента на тему, с позволения сказать, гаваистики. Вот, например, рубрика «гавайское слово в неделю»: https://www.hawaii.edu/news/tag/olelo-of-the-week/

Анон

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

Хочу ещё рассказать про свой процесс, что делала и что пошло не так.

Принцип построения страницы макета такой.
1. Первая секция при скролле свайпается на вторую.
2. При скролле второй секции на ней меняется контент (как бы прокручиваются пункты списка в определённом поле).
3. Третья секция просто скроллится со свайпами и параллаксом, как список.

Так вот, что я делала и что пошло не так.
Я решила первую секцию назвать условно ScrollSection и для неё назначить обработчик скролла, созданный при помощи scrollTrigger. Эта секция и третья, на которую навешан тоже свой обработчик, у меня на position: relative. Они следуют друг за другом, и соответственно, сначала действует обработчик скролла для первой, затем обработчик скролла для другой (третьей, далее буду называть её второй). Обработчик скролла для второй на ScrollMagiс, там пока всё простенько. Обработчик скролла для первой на гсаповском плагине скроллтриггер. Я думала сделать просто: как только мы прокручиваем первую секцию на 100vh (пропадает с глаз изначально размещённый там контент), появляется секция из пункта номер два, у которой position: absolute. Соответственно, сначала у неё меняется позиция по игреку, затем начинает меняться тот самый контент. Я думала сделать так — навесить первой секции обработчики для 100vh, 120vh, 130vh, 140vh и так далее. Но что-то пошло не так.

1. Координаты прокруткой нельзя задать в vh, нужно брать процент window.innerHeight.
2. Я надеялась сообщить элементам следующее: «при прокрутке от 120vh к 130vh ты появляешься, а при прокрутке от 140vh к 150vh исчезаешь», рассчитывая, что если прокрутка до 120vh либо больше 150vh, элемент не виден, а если в диапазоне между 130vh и 140vh, то, соответственно, виден на полной непрозрачности. Но я, видимо, не умею готовить scrollTrigger, потому что у меня это по итогу отрабатывало совершенно иным образом.
А именно, я назначала отдельно таймлайн для каждого такого промежутка, вот таким образом:

        gsap.timeline({
            scrollTrigger: {
                trigger: '.scrollSection', start: '950', end: '951', scrub: 1, ease:
                    Power0.easeNone
            }
        })

И к каждому такому назначенному таймлайну прописывала соответствующий .fromTo().
Так вот, мне приходилось для каждого таймлайна по итогу прописывать состояние у каждого элемента, состояние которого меняется в любом из промежутков. То есть, от 0 до 120vh я прописывала что-то вроде:

.fromTo('.item', { opacity: 0 }, { opacity: 0 }, 0)

И так далее. Код, естественно, выглядит вследствие этого совершенно безобразно, а также его затруднительно отлаживать.

Анон

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

Так как мой безблог читают практически исключительно мои воображаемые друзья, позволю себе запостить столь душную и неразборчивую телегу (имею в виду ту, что выше). И дополню ещё немного.

Кроме этого, для той секции, где меняется контент по скроллу, в ТЗ указано: если мы наводим курсор на соответствующий пункт списка, страница должна реагировать так, как будто мы прокрутили страницу к определённому месту.
Так вот, если использовать window.scrollTo, то вот эти обработчики скролла не отрабатывают так, как надо! Они будто просто не знают, что произошло событие скролла. Я думала, что если я вместо этого использую гсаповский ScrollToPlugin, то это будет исправлено, но нет — ровно та же самая проблема. Ааааа! Я понятия пока не имею, как это решать, если честно.

Анон

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

Точнее, моё предложение самой себе — попробовать заменить scrollTrigger на scrollMagic, там на их официальной странице есть примеры, и я думаю, что проще будет разобраться. С windows.scrollTo — проверила сейчас — не конфликтует, ведёт себя так же, как и при обычном скролле. Только надо перекомпоновать секции, не обязательно всё останется так, что у тех двух относительное позиционирование и ещё у одной абсолютной. А может быть, и этот вариант подойдёт... надо проверить, потестить. Но завтра, уже завтра.

Анон

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

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

Со шрифтами, скорее всего, проблема в том, что line-height некошерно проставлен, но это надо разбираться, я не хочу сейчас на такой мелочи застревать.

Локомотив Скролл оставлю в покое и попробую сделать параллакс-эффект тоже с использованием ScrollMagic.

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

Анон

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

2. Я надеялась сообщить элементам следующее: «при прокрутке от 120vh к 130vh ты появляешься, а при прокрутке от 140vh к 150vh исчезаешь», рассчитывая, что если прокрутка до 120vh либо больше 150vh, элемент не виден, а если в диапазоне между 130vh и 140vh, то, соответственно, виден на полной непрозрачности. Но я, видимо, не умею готовить scrollTrigger, потому что у меня это по итогу отрабатывало совершенно иным образом.

Да-а-а, все эти скроллилки работают немного по-другому принципу. Даёшь им элемент и позицию относительно вьюпорта (то есть, видимой области экрана), и когда элемент в ней, соответствующие анимации воспроизводятся…

Блин, но у меня когнитивное несварение, не знаю, как это к своему случаю применить. Вообще башка на этот счёт не варит. Создавать серию фиктивных элементов-триггеров и относительно них анимации задавать? Что-то как-то ну не знаю.

Отредактировано (2023-06-05 16:45:44)