شما می‌توانید با استفاده از SVG کارهای بسیار عجیب و غریبی را انجام دهید. این موضوع که توسعه دهندگان بتوانند کدهای گرافیکی را در مرورگر بدون استفاده از تصاویر پیاده‌سازی کنند، توسط Canvas و SVG مقدور است.
این موضوع در نهایت منجر به به‌وجود آمدن چشم‌انداز‌های زیبایی می‌شود که با SVG ساخته شده‌اند و من در این مطلب لیست کرده‌ام. تمام این پروژه به صورت کامل رایگان هستند و قابلیت ویرایش از طریق Codepen را دارند. به صورت اساسی آن‌ها با SVG ساخته شده اند اما برای انیمیشن دادن، افکت‌های مختلف و مواردی مانند این از CSS و javascript نیز استفاده شده است.
Hawke’s Bay
این مثال کوچک یک چشم‌اندازی از یک نهر زیبا است که توسط Louis Coyle ایجاد شده است. ظاهر و اشکالی که در این مورد استفاده شده تقریبا شبیه به اشکال چند ضلعی است که می‌توانیم در رندرینگ سه‌بعدی آن‌ها را مشاهده کنیم.
این افکت با استفاده از SVG و جاوااسکریپت پیاده‌سازی می‌شود اما واقعیت را بگوییم، ساختن آن ساده نیست.
توسعه‌دهنده این طرح برای ساخت انیمیشن و پیاده‌سازی آن که هم در ظاهر و هم در کدنویسی بسیار زیبا است، از کتابخانه TweenMax بهره گرفته است.
اگر می‌خواهید وارد دنیای SVG شوید و آن را یاد بگیرید، این مورد، چیزهای زیادی برای یادگیری در خود دارد.
Low Poly Landscape
این مورد نیز یکی دیگر از چشم‌اندازهاست که در آن از ظاهری با المان‌های چندضلعی استفاده شده است. این کار را Luke Reid ساخته و توجه بسیار بیشتری روی افکت‌های سه بعدی روی آن داشته است. لایه کلی این طرح به نظر بسیار واقعی می‌آید، در طراحی آسمان از یک گرادینت استفاده شده و با وجود ستاره‌ها در آسمان این طرح نفسی تازه گرفته و حس واقعی بودن را دو چندان کرده است.
اگر به کدهای جاوااسکریپت این طرح نگاه کنید، متوجه می‌شوید که موقعیت ستاره‌های واقع در این طرح بعد از هر بار نوسازی صفحه در یک موقعیت تصادفی قرار می‌گیرند. این موضوع برای زمانی که می‌خواهید پس زمینه‌های SVG یا یک استایل تصویر hero بسازید، ویژگی بسیار زیبایی است.
SVG Landscape Animation
توسعه‌دهنده این کار Evan Winston برای طراحی این طرح، از انیمیشن‌های سفارشی استفاده کرده که به صورتی تقریبا آهسته المان‌های طراحی را به پایین می‌آورد. و بعد از آن ناپدید می‌کند.
این افکت بسیار زیبایی است و تقریبا ساختن آن نیز بسیار پیچیده نیست. البته این طرح ممکن است برای انتخاب به عنوان پس زمینه بسیار مناسب نباشد، به این دلیل که معمولا پس زمینه یک وبسایت یا طرح به صورتی سریع بارگذاری می‌شود و در آن از انیمیشن‌هایی با سرعت پایین استفاده نمی‌شود.
اما می‌توانید از چنین موضوعی برای ساخت آیکون‌های SVG در وبسایت استفاده کنید. آموزش‌های بسیاری برای اینکه طرح‌های SVG بسازید و آن‌ها را متحرک سازید در فضای اینترنت وجود دارد که می‌توانید از آن‌ها بهره بگیرید.
Marine Landscape
برای اینکه چشم‌اندازی از یک دریاچه داشته باشید، این مورد بسیار مناسب است. در این طرح از انیمیشن‌های بسیار زیبایی برای موج آب و حرکت دادن ابرها در آسمان استفاده شده است.
پیاده‌سازی تمام این موارد در جاوااسکریپت ساده است. اما اگر به کدها دقت کنید متوجه می‌شوید که این طرح کاملا با استفاده از CSS طراحی شده است.
انیمیشن‌های مدرن سی‌اس‌اس ۳ در طراحی وبسایت و انیمیشن‌های مبتنی بر آن بسیار مفید و پر کاربرد است اما همچنین برای تصویرسازی نیز کاربرد دارد. این بخشی از تفریحات یک توسعه‌دهنده است.
Winter Landscape
این چشم‌انداز از زمستان ما را به یاد برف سفیدی می‌اندازد که هر سال مشاهده می‌کنیم.
Andrey Sorokin این طرح را با استفاده از SVG و مقداری جاوااسکریپت طراحی کرده است. همچنین در آن یک انیمیشن بسیار نامحسوس نیز قرار داده که اگر یک دقیقه صبر کنید می‌توانید به صورت کامل آن را مشاهده نمایید.
من واقعا از کیفیت افکت‌های موجود در این طرح شگفت زده شده‌ام. علاوه بر انیمیشن‌ی که در ابتدای پروژه ظاهر می‌شود بقیه موارد در طول اجرای این قطعه کد بسیار آهسته و آرام هستند.
SVG Scenery
در دنیای وب امروزی می‌توانیم شاهد رشد بسیار عظیم طراحی فلت باشیم، طراحی‌های تک رنگی که در آن از موجی از رنگ استفاده نمی‌شود.
این قطعه کد نیز از این قاعده پیروی می‌کند و در طراحی مواردی که مشاهده می‌کنید از زاویه‌های نوک‌تیز، سایه‌ها و گوشه‌ها استفاده کرده است.
این قطعه کد بسیار زیباست و اگر با SVG آشنایی داشته باشید ساخت آن نیز برای‌تان بسیار ساده و لذت بخش خواهد بود. حتی اگر با SVG کار نکرده باشید تنها با مقداری گوگل کردن و جستجو می‌توانید از این قطعه کد به خوبی متوجه شوید.
Natural Landscape
Amr Zakaria توسعه‌دهنده این کار با استفاده از طراحی مبتنی بر فلت و متحرک سازی قایق و هواپیما سعی در جلب توجه کاربران دارد.
پروژه کاملا براساس CSS ایجاد شده است و برای انیمیشن‌ها نیز از ویژگی keyframe بهره برده‌اند.
تمام این موارد می‌توانند به عنوان پس زمینه پروژه شما در نظر گرفته شوند. سخت‌ترین کاری که برای تبدیل آن به پس زمینه پروژه خود باید انجام دهید این است که آن را واکنشگرا نمایید.
Parallax Lights
خارج از دیگر افکت‌های پارالکس موجود در وب، این مورد بسیار ساده و پایه‌ای است. با این حال شگفت زده خواهید شد اگر بدانید که کلیت این پروژه براساس CSS اجرا می‌شود و خبری از هیچ اسکریپتی در آن نیست.
تمام المان‌های موجود در این طرح مانند لامپ‌ها، کوه‌ها و… کاملا با استفاده از اشکال SVG و افکت‌های CSS ساخته شده است.
اگر نزدیک‌تر به پروژه نگاه کنید، متوجه می‌شوید که برای واقعی‌تر نمودن پروژه تمام لامپ‌ها از افکت‌های سایه‌ای بهره می‌برند.
Basic Animations
در این طرح می‌توانید گروهی از المان‌ها را مشاهده کنید که انیمیشن‌های سفارشی دارند. سازنده این کار Stef van Dijk برای هر قسمت از این طراحی و متحرک‌سازی آن، توجه بسیاری را به خرج داده است. برای مثال وقتی که کوه‌ها در طرح ظاهر می‌شوند، زمین نیز همراه با آن تکان می‌خورد یا به عبارتی دیگر عقب نشینی می‌کند.
این درست چیزی‌ست که اگر روی جزئیات یک کار توجه زیادی داشته باشید به درستی دریافت می‌کنید.
SVG & CSS
به این طرح به منظور دریافت جالب‌ترین انیمیشن‌های مربوط به پس‌زمینه نگاه کنید. تمام چیزهای که مشاهده می‌کنید کاملا مبتنی بر CSS و SVG هستند و خبری از جاوااسکریپت نیست.
لایه‌های این طرح به زیبایی و آهسته وارد صحنه می‌شوند، تمام این موارد دارای انیمیشن‌های منحصر به فرد خود هستند. اما وقتی تمام المان‌ها سرجای خود قرار گرفتند متوجه می‌شوید که برخی از المان‌ها هنوز در حال حرکت‌ند (خورشید و ابرها).
طراحی چنین موردی زمان بسیار زیادی را می‌خواهد. اما باعث می‌شود که آشنایی بسیار عمیقی با SVG و پایه‌های انیمیشن‌های CSS را درک کنید.
Grass
در حالیکه این قطعه کد بسیار ساده می‌رسد اما من باور دارم که می‌توانید یک آموزنده بسیار عالی برای کدنویسان فرانت‌اند باشد.
Felix De Montis توسعه‌دهنده این کار، این قطعه کد را با استفاده از SVG ساخته است. تمام المان‌ها از جمله گیاهان، درختان و تپه‌ها با استفاده از آن درست شده اند. ویرایش موقعیت و جایگذاری آن‌ها در قسمت‌های مختلف با استفاده از CSS بسیار آسان است.
به صورت کلی اگر قصد داشته باشید که طراحی ساده‌ای مبتنی بر SVG را بیابید، این مورد نقطه بسیار عالی برای شروع است. همچنین در این طرح از پیش‌پردازنده LESS استفاده شده است.
Parallax Page
Chris Gruber توسعه‌دهنده این مورد، به صورتی این قطعه کد را طراحی کرده است که بر اساس حرکات موس، دوربین مشاهده را جابجا می‌کند.
در کنار این موارد دیگری در این طرح متحرک می‌شوند مانند قایق و پس زمینه صفحه.
تمام این موارد با کمی جاوااسکریپت پیاده‌سازی می‌شوند. تمامی این طرح با حدود کمتر از ۲۰ خط کد جی‌کوئری پیاده‌سازی شده است. تمام شگفت‌انگیز بودن این طرح در میزان توجه به جزئیات در آن است.
دیدگاه و پرسش
در حال دریافت نظرات از سرور، لطفا منتظر بمانید
در حال دریافت نظرات از سرور، لطفا منتظر بمانید