از یک خط خالی تا هرج و مرج: Elo’s Brutalist ، یک نمونه کارها درخشان ساخته شده با Web Stream و GSAP

سلام جهان ، آلووی بنوفی در اینجا (همچنین به عنوان 𝔩๏ȳ̶̮̰̈b نیز شناخته می شود) توسط مار دل پلاتا ، آرژانتین – که در حال حاضر در مادرید ، اسپانیا مستقر است. من یک طراح رابط کاربری آزمایشی ، توسعه دهنده WebFlow هستم و گاهی اوقات دوست دارم خودم را یک هنرمند Glitch بنامم. در این حالت ، من شما را از طریق چشم انداز و اجرای سایت نمونه کارها 2025 خود ترجمه می کنم.

این همه با یک سریع شروع شد: “واقعاً ، من واقعاً باید نمونه کارها خود را به روز کنم.”

همانطور که برخی از شما می دانید ، این ممکن است یکی از دشوارترین کارها برای فرود در دفتر خلاقیت باشد. من از سال 2022 همان سایت مینیمالیستی بسیار ساده را به صورت آنلاین داشتم ، که صادقانه بگویم ، واقعاً به مردم کمک کرد تا مرا پیدا کنند ، اما من دیگر نمایانگر ارتعاشات یا نوع کار خلاقانه ای نبودم که برای آن تلاش می کردم. بنابراین من از خودم پرسیدم: چگونه می توانم چیزی را بسازم که نه تنها پروژه های من را نشان دهد و به عنوان کانکتور با مشتریان بالقوه خدمت کند ، بلکه واقعاً ایده های من را برای فشار دادن مرزها ، مخالفت با هنجار و سرگرمی در حین انجام این کار ترجمه می کند؟

جواب به راحتی نیامد. من 16 تکرار را به FIGMA پشت سر گذاشتم و تقریباً یک سال است که بدون توقف آزمایش کردم تا اینکه بزرگترین قطعه الهام بخش را در کار قبلی خود پیدا کردم. این در نهایت به شکل دادن به کل جهان بصری سایت جدید من کمک کرد.

یک تجربه وب غیرپولوژیکی درخشان

آزمایش و دور انداختن ایده ها بیهوده نبود. برخی از آنها چندان خوب نبودند ، برخی از آنها سنگ های گرانبها را از دست دادند و یک دسته از آنها زندگی جدیدی پیدا کردند و در طراحی نهایی دوباره کار کردند. در گذشته نگر اکنون به وضوح می بینم که چگونه هر تلاش و اشتباه به من کمک می کند تا اصلاح کنم سه ایده کلیدی پشت انتخاب من برای این پروژه:

حداکثر گرایی: بیشتر بیشتر است من تصمیم گرفتم که تسلیم نشوم ، توابع یا جزئیات وضوح را کاهش نمی دهم ، و اجازه نمی دهم که سختگیر وارد این پروژه شود مگر اینکه کاملاً لازم باشد.

وحشیگری: چیزهایی خواهند بود که آنها خواهند بود ، و شما لازم نیست که کامل یا لطیف باشید. من به هر مورد اجازه می دهم جسورانه ، بی ادب و در چهره شما باشد. شکل ها می توانند تیز باشند ، اشکالات می توانند براق باشند و همه چیز باید سعی کند صادقانه صادق باشد.

سرگرم کننده: ما هرگز نباید در پروژه های شخصی خود تفریح ​​کنیم. من این را به عنوان مانترا درونی کرده ام: “این برای شما است – شما می توانید هر کاری را که می خواهید با آن انجام دهید. تنها محدودیت ها هوی و هوس خود شما است ؛ سعی کنید انتظارات را از نحوه درک آن توسط همسالان خود آزاد کنید و فقط آنچه را که می خواهید بسازید بسازید.

من سعی کردم این مفاهیم را به خاطر داشته باشم که تکرار نهایی سایت را طراحی کردم ، که همان چیزی بود که بیشتر از آن احساس کردم.

پشته فن آوری برای ایجاد هرج و مرج

هنگامی که طراحی آماده شد ، مجبور شدم به زندگی بیایم.

من به عنوان یک شریک معتبر WebFlow ، از ابتدا فهمیدم که این می تواند انتخاب طبیعی برای ساخت سایت باشد ، زیرا به من این امکان را می دهد تا طرح های پیچیده HTML و CSS را به روشی آسان و جامع کامپایل کنم.

من این پلتفرم را دوست دارم زیرا به ساخت بهتر و سریعتر کمک می کند ، اما اگر می خواهید با یک کد سفارشی درگیر شوید ، دخالت نمی کند و این بسیار عالی است که به شما امکان می دهد تا چیزها را فراتر از امکانات اساسی خود قرار دهید.

من می دانستم که این جنبش یک عنصر اصلی خواهد بود – نه تنها به عنوان یک دکوراسیون ، بلکه به عنوان راهی برای هدایت توجه ، ایجاد یک ریتم و تقویت سه ایده در پشت تجسم. GSAP انتخاب روشنی برای انیمیشن بود. انعطاف پذیری آن به من این امکان را می داد که آزادانه آزمایش کنم ، از ایجاد میکروینتر ها به انتقال های بزرگ و مهلت های پیچیده. افزونه های GSAP از هر مرحله از راه پشتیبانی می کردند و به لطف آنها تمام افزونه های حق بیمه خود را به صورت رایگان آزاد می کنند ، من توانستم از بسیاری از آنها استفاده کنم:

در زیر برخی از قطعات کد را به اشتراک می گذارم تا بتوانید نحوه ساخت انیمیشن های خود را بررسی کنید.

وای در نگاه اول: انیمیشن شارژ در بخش قهرمان

من بر اساس طراحی قطعه طبیعت خود ، تماشای دارایی های دید و نسخه های ASCII از آنها را به عنوان یک دکوراسیون مشاهده می کنم. من می خواستم بخش مقدمه مانند یک گسترش انیمیشن از این قطعه باشد ، در حالی که اطلاعات درستی در مورد من ، آنچه را که انجام می دهم ، از کجا آمده ام و چگونه می توانم با من تماس بگیرم.

ایده پشت انیمیشن لودر این بود که با یک نسخه بدون لباس از تجسم های کامل و سپس اضافه کردن عناصر در هنگام گسترش کانتینر شروع شود. با رشد نوار بارگذاری ، کل بخش کاهش می یابد که بعداً ناوبر می شود.

مکان تخم مرغ عید پاک

پس از بارگیری محتویات ، یک عنصر کوچک عید پاک در محل (سمت چپ) (سمت چپ) وجود دارد. من می خواستم هم موقعیت فعلی (مادرید) و هم زادگاهم (مار دل پلاتا) را درج کنم ، بنابراین وقتی آن را نگه دارید ، متن بین این نام های مکان ، مناطق زمانی و مختصات تغییر می کند.

این کار با یک جاوا اسکریپت بسیار مستقیم انجام شد. اول ، من یک ویژگی را برای تغییر متن مکان Mar Del Plata’s Madrid ایجاد کردم ، که شامل خط زمانی GSAP است و از افزونه متن برای پردازش تغییرات در متن متن استفاده می کند. دوم ، من یک شنونده را به رویدادی اضافه کردم که باعث عملکرد شود مسخره:

function setLocationMardel() {
  let LocationToMardel = gsap.timeline();
    
  LocationToMardel.fromTo(
    "[location-type-01][type-txt]",
    {
      text: {
        value: ">>>based in madrid, spain",
      },
    },
    {
      text: {
        value: ">>>born in mar del plata, arg",
        speed: 1,
        preserveSpaces: true,
        padSpace: true,
        type: "diff",
      },
      duration: 0.3,
      ease: "none",
    },
    0
  )
  .fromTo(
    "[location-type-02][type-txt]",
    {
      text: {
        value: "[timezone:gmt+2]",
      },
    },
    {
      text: {
        value: "[timezone:gmt-3]",
        speed: 1,
        preserveSpaces: true,
        padSpace: true,
        type: "diff",
      },
      duration: 0.3,
      ease: "none",
    },
    0
  )
  .fromTo(
    "[location-type-03][type-txt]",
    {
      text: {
        value: "40.416775 // -3.703790",
      },
    },
    {
      text: {
        value: "-37.979858 // -57.589794",
        preserveSpaces: true,
        padSpace: true,
        speed: 1,
        type: "diff",
      },
      duration: 0.3,
      ease: "none",
    },
    0
  );
}

const heroMeta = document.querySelector(".hero-meta");

heroMeta.addEventListener("mouseenter", () => {
  setLocationMardel();
});

گل Scobacks SVG

همانطور که شخصیت را با پیمایش به پایین می گذارید ، گل پس زمینه ASCII شروع به از دست دادن شخصیت های خود می کند. این به لطف SVG و GSAP ScrollTrigger امکان پذیر شد. من روی جاده های جداگانه داخل نمودار SVG تمرکز کردم و سپس هنگام حرکت از طریق ظرف ، آنها را گیر کردم:

let tlHeroSVG = gsap.timeline({
  scrollTrigger: {
    trigger: '.hero-section',
    start: 'top bottom',
    end: 'bottom-=50% top',
    scrub: 8,
  },
});

tlHeroSVG.to('.hero-flower_03 path', {
  stagger: {
    each: 0.1,
    from: 'random',
  },
  opacity: 0,
  duration: 2,
  ease: 'bounce.inOut',
});

اینجا ، به کار من نگاه کن

پس از پیچیدگی بخش قهرمان ، ممکن است فرد وسوسه شود که خنک شود و اجازه دهد کاربر آرام شود – اما این مخالف من خواهد بود بیشتر بیشتر است سرود هنگامی که به بخش کار رسیدید ، خواهید دید که این ممکن است حداقلی ترین بخش سایت باشد ، به این معنا که عناصر کمتری وجود دارد. با این حال ، من سعی کردم آنها را از طریق حرکت متمایز کنم. من از دو انیمیشن اساسی برای به خاطر سپردن استفاده کردم:

عنوان مبهوت کننده ایجاد کنید

عنوان این بخش به عنوان عنوان “کار انتخاب شده” و به عنوان انتقال بین هرج و مرج قهرمان و محتوای کار است. برای ساختن این انیمیشن ، من چند خط تقسیم با آنها ایجاد کردم منقضی: پنهان در سه ارتفاع مختلف. در هر یک از آنها حداقل سه نسخه از متن “کار انتخاب شده” وجود دارد که به صورت عمودی مرتب شده اند. من یک مرز GSAP ساده با Scrolltrigger و Staggers ایجاد کردم تا آنها را جابجا کنم عبادی با نسخه های مختلف هنگام حرکت به پایین ، این اثر مایع را ایجاد می کنید.

let tlWorkScroll = gsap.timeline({
  scrollTrigger: {
    trigger: '.work-section',
    start: 'top bottom',
    end: 'bottom-=60% top',
    scrub: 0.6,
  },
});

tlWorkScroll.fromTo(
  '.work-header .title-row_33 .title-txt',
  {
    yPercent: 0,
  },
  {
    yPercent: -300,
    ease: 'power3.in',
    duration: 2,
    stagger: {
      amount: 2,
      from: 'start',
    },
  },
  0
);
tlWorkScroll.fromTo(
  '.work-header .title-row_66 .title-txt',
  {
    yPercent: 0,
  },
  {
    yPercent: -300,
    ease: 'power2.in',
    duration: 2,
    stagger: {
      amount: 2,
      from: 'start',
    },
  },
  0
);
tlWorkScroll.fromTo(
  '.work-header .title-row_main .title-txt',
  {
    yPercent: 0,
  },
  {
    yPercent: -300,
    ease: 'power1.in',
    duration: 2,
    stagger: {
      amount: 2,
      from: 'start',
    },
  },
  0
);

مقدمه خشن با کار من

پروژه های منتخب من در کشویی های افقی ساخته شده با نمایش داده می شوند کشنده وت بی تحرکی افزونه ها من می خواستم چیزی غیرمعمول برای آشکار کردن محتوای آنها ، بنابراین من یک جدول زمانی چهار مرحله ای ایجاد کردم که سنگ را در هر برنامه گرافیکی قابل مشاهده در طی این مقادیر مقیاس تنظیم می کند: 1.75 → 1.5 → 1.25 → 1 ، با کمی تاخیر 0.15s بین مراحل.

برای اضافه کردن هرج و مرج بیشتر به آن ، من تنظیم کردم تحول از هر نمودار تا موقعیت های مختلف ، بنابراین اثر مقیاس گذاری همگن نخواهد بود.

tlWorkCardReveal.fromTo(
  wCardItems,
  {
    scale: 1.75,
  },
  {
    scale: 1.5,
    duration: 0.25,
    ease: 'power3.in',
    stagger: {
      amount: 0.2,
      from: 'random',
      ease: 'power1.out',
    },
  },
  0
);
tlWorkCardReveal.fromTo(
  wCardItems,
  {
    scale: 1.5,
  },
  {
    scale: 1.25,
    duration: 0.2,
    ease: 'power3.inOut',
    stagger: {
      amount: 0.15,
      from: 'random',
      ease: 'power1.inOut',
    },
  },
  '>=-0.15'
);
tlWorkCardReveal.fromTo(
  wCardItems,
  {
    scale: 1.25,
  },
  {
    scale: 1,
    duration: 0.15,
    ease: 'power3.out',
    stagger: {
      amount: 0.1,
      from: 'random',
      ease: 'power1.out',
    },
  },
  '>=-0.15'
);

بحرانی

بعد از این انیمیشن های شدید ، من به سادگی نتوانستم سایت را با یک کولون ساده پایین به پایان برسانم. در عوض ، من تزئینات ASCII را برگرداندم ، منو را مجبور به باز و پیاده سازی دستگاه کلونینگ مربوط به حرکت ماوس کردم.

فقط یک عنصر از دکمه وجود دارد – یک DIV بسیار ساده با رنگ پس زمینه و متن “کلیک برای اتصال” در داخل آن. با استفاده از JavaScript ، من یک ویژگی را ایجاد کردم که هر بار که ماوس 200px را در هر جهت حرکت می دهد ، دو بار عنصر را کپی می کند ، تا 200 نسخه و کلونها را در مکان های مطلق دلخواه قرار می دهد. Div Button CSS دارد حالت مختلط “تفاوت” را تنظیم کنید تا هنگام برخورد رنگ ها ، همپوشانی را از نظر بصری جالب تر کنید. سپس ، هنگامی که ماوس عنصر کولینگ پایین را ترک می کند ، تمام نسخه ها برداشته می شوند.

هر دسته جدید از نسخه ها با انیمیشن و سفارشی GSAP مرحله ای وارد و برگ می شوند با عقب کشیدن تسکین:

gsap.to(generatedCopies, {
  opacity: 0,
  scale: 0.6,
  duration: 0.2,
  ease: 'back.in(1.7)',
  stagger: {
    amount: 0.4,
    from: 'random',
    ease: 'power1.out',
  },
});

برخی از آخرین افکار

اگرچه من سعی کردم انتظارات خارجی را با این آزمایش آزاد کنم ، اما نمی توانم از نحوه دستیابی به آن ترسیده باشم. این امر باعث شده است تا برخی از مکالمات در رسانه های اجتماعی در مورد بازاریابی در برابر هنر ، مینیمالیسم در برابر حداکثر و جایی که خط به قابلیت استفاده کشیده می شود. چندین متخلف وجود داشتند که بسیار نگران این تبدیل بودند ، و همچنین چند نفر که آن را کاملاً دریافت کردند.

حقیقت این است که ساخت این نمونه کارها برای تحویل یک فروشگاه بازاریابی جلا کمتر و بیشتر برای ایجاد فضایی که من به عنوان یک زمین بازی از آن استفاده می کنم – مکانی که در آن سبک طراحی من ، مهارت های رمزگذاری و احمقانه با نوع نوع نوع مقابله می شود. بیشتر و یک سایت پر زرق و برق که می خواستم در وب ببینم. اشتباهات یا اشتباهات گاه به گاه به ویژگی های تبدیل شده است ، انیمیشن ها خیلی وحشی پراکنده شده اند و من تمام تلاش خود را کردم تا همه چیز را یک قدم فراتر از آن بردارم. سرگرم کننده بود!

پس از راه اندازی من ، سایت من با ذکر افتخاری Awwwards ، سایت GSAP روز و CSSDA بهترین رابط کاربری ، بهترین UX ، بهترین نوآوری ها و Kudo ویژه شناخته شد.

با پایان دادن به یک یادداشت شخصی ، احساس می کنم که در این دوره جدید از محتوای هوش مصنوعی تولید و بهینه سازی شده برای الگوهای فروش ، باید فضایی را برای اصالت ، شدت و حتی با کیفیت انسان فراهم کنیم که احتمالاً بیشتر از همیشه مرتبط خواهد بود.

با تشکر از شما برای خواندن در مورد روند من. اگر سایت من را با جرقه ای از فتنه ، لبخند هرج و مرج یا تمایل به شکستن چند قانون در کار خودم ترک کنید ، پس ماموریت من برآورده شد – و شما از قبل می دانید که همیشه می توانید برای اتصال کلیک کنیدحرف