آشنایی با چند پس‌زمینه‌ای در CSS3

سی‌اس‌اس ۳ دارای یک قابلیت تازه‌ است، قابلیتی که با استفاده از آن می‌شود پس‌زمینه‌هایی با چند لایه متفاوت از یکدیگر ایجاد کنیم. این قابلیت به شما اجازه می‌دهد که با قطعات کوچکی از تصاویر مختلف تصویری جدید را درست کنید. برای انجام چنین کاری قبلا می‌بایست همزمان از چندین المنت مختلف استفاده می‌کردید، اما حال تنها با یک المنت می‌توانید این کار را انجام دهید، مهمتر از همه لازم نیست نگران ویژگی z-indexing باشید، به این دلیل که به صورت خودکار پیاده‌سازی می‌شود.

در این آموزش قصد دارم یک سربرگ متحرک را با استفاده از این تکنیک پیاده‌سازی کنم. قرار است برای موقعیت المان‌ها یکسری انیمیشن در نظر بگیریم و برخی المان‌های تعاملی را به آن بیافزاییم.

شروع کار

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

آشنایی با چند پس‌زمینه‌ای در CSS3

اینجا یک نمونه از فایل HTMLی که قصد ساختن پروژه را با آن داریم می‌توانید مشاهده کنید:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8">
    <title>CSS3 Loading</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <style>
        
        body {
            margin: 0;
            padding: 0;
        }

        header#main {
            width: 100%;
            height: 250px;        
            overflow: hidden;
            position: relative;        
        }
        
        header#main h1 {
            color: #ffffff;
            font-family: Arial, Helvetica, sans-serif;
            margin: 0px;
        }
        
    </style>    
</head>
<body>
    <div id="page">        
        <header id="main" class="animation">
            <h1>LARGE SITE NAME</h1>
        </header>
    </div>       
</body>
</html>

ساختن پس زمینه

برای ساخت پس زمینه مورد نیازمان ابتدا باید یک مجموعه از تصاویر متوالی را در اختیار داشته باشیم. این توالی و ترتیب در تصاویر در واقع نشان دهنده خاصیت z-index ماست. خب من در اینجا یک پس زمینه آسمان را در اختیار دارد، پس کارم تا حدی ساده‌تر شده است. بعد از آن نیاز دارم که موارد دیگری مانند سنگ ها، گیاهان و مواردی دیگری را اضافه کنم.

header#main {
    background-image: url('Rock.png'), url('Tree Short.png'), url('Tree Short.png'), url('Tree Tall.png'), url('Tree Tall.png'), url('Grass Block.png'), url('Sky.png');

آشنایی با چند پس‌زمینه‌ای در CSS3 موقعیت

بعد از این کار قصد دارم به میزان خاصی موقعیت المان‌ها را تعیین کنم، مطمئن شوید که تنها تصویر آسمان و گیاهان تکرار می‌شود. من برای اینکار از خاصیت‌های background-position و background-repeat استفاده می‌کنم. من می‌توانم هر کدام از این خاصیت‌ها را در یک خاصیت پس زمینه قرار دهم. اما این موضوع کمی طولانی است و به نظر پیچیده می‌رسد.

header#main {
    background-image: url('Rock.png'), url('Tree Short.png'), url('Tree Short.png'), url('Tree Tall.png'), url('Tree Tall.png'), url('Grass Block.png'), url('Sky.png');
    background-position: 80% 50%, 90% 10%, 10% 90%, 40% top, 45% 10%, left bottom, left top;
    background-repeat: no-repeat, no-repeat, no-repeat, no-repeat, no-repeat, repeat-x, repeat-x;
}

آشنایی با چند پس‌زمینه‌ای در CSS3

اضافه کردن انیمیشن

بارگذاری تمام این المان‌ها تنها در یک موقعیت ثابت کمی خسته کننده است، به همین دلیل قصد دارم که یک انیمیشن برای تغییر موقعیت‌های تصویر در نظر بگیرم. برای اینکار قصد دارم که از خاصیت @keyframes در سی‌اس‌اس بهره بگیرم. برای اینکه مقادیر این المان‌ را قرار دهم از مقادیر درصدی استفاده می‌کنم. در کنار این برای اینکه مطمئن شویم تمام مرورگرها از این خاصیت استفاده می‌کنند ما از webkit و moz استفاده می‌کنیم.

@-webkit-keyframes move {
    0% { 
        background-position: 0 0, 0 0, 0 0, 0 0, 0 0, left bottom, left top;
    }        
    100% { 
        background-position: 80% 50%, 90% 10%, 10% 90%, 40% top, 45% 10%, left bottom, left top;
    }
}

@-moz-keyframes move {
    0% { 
        background-position: 0 0, 0 0, 0 0, 0 0, 0 0, left bottom, left top;
    }        
    100% { 
        background-position: 80% 50%, 90% 10%, 10% 90%, 40% top, 45% 10%, left bottom, left top;
    }
}

@keyframes move {
    0% { 
        background-position: 0 0, 0 0, 0 0, 0 0, 0 0, left bottom, left top;
    }        
    100% { 
        background-position: 80% 50%, 90% 10%, 10% 90%, 40% top, 45% 10%, left bottom, left top;
    }
}

همانطور که مشاهده می‌کنید تمام موارد تنظیم شده است، مشاهده می‌کنید که مقدار موقعیت مربوط به آسمان و گیاهان برابر 0 0 قرار گرفته است. این مقادیر برابر با سمت بالا و چپ است. در انتهای انیمیشن این انتظار را دارم که تمام موارد به درستی در مکان خود قرار گرفته باشند. حال که ما انیمیشن‌ها را در اختیار داریم نیاز است که آن‌ها را به کدهای‌مان اضافه کنیم. برای اینکار از خاصیت انیمیشن در سی‌اس‌اس استفاده می‌کنیم و آن را به header#main اعمال می‌کنیم.

header#main {
    width: 100%;
    height: 250px;        
    overflow: hidden;
    position: relative;
    background-image: url('Rock.png'), url('Tree Short.png'), url('Tree Short.png'), url('Tree Tall.png'), url('Tree Tall.png'), url('Grass Block.png'), url('Sky.png');
    background-position: 80% 50%, 90% 10%, 10% 90%, 40% top, 45% 10%, left bottom, left top;
    background-repeat: no-repeat, no-repeat, no-repeat, no-repeat, no-repeat, repeat-x, repeat-x;            
            
    -webkit-animation: move 3s ease 1;
    -moz-animation: move 3s ease 1;
    animation: move 3s ease 1;
}

آشنایی با چند پس‌زمینه‌ای در CSS3

حال که پروژه را اجرا می‌کنید انتظار می‌رود که المان‌ها بعد از ۳ ثانیه در جای خود به کلی قرار بگیرند.

اضافه کردن تعاملات

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

<header id="main" class="animation">
    <h1>LARGE SITE NAME</h1>
    <img class="character1" src="Character Pink Girl.png">
    <img class="character2" src="Character Cat Girl.png">
</header>

در حالت اولیه قصد ندارم آن ها را نمایش دهم برای همین موقعیت آن ها را روی absolute قرار می‌دهم و از صفحه خارج‌شان می‌کنم. بعد از این برای هرکدام از این موارد خاصیت transition را پیاده‌سازی می‌کنم. برای اولی از سمت چپ و برای دومی از سمت راست این خاصیت را پیاده‌سازی می‌کنم. بعد از آن باید دوره زمانی را تعیین کنم که برای هر دو مورد از یک تابع زمانی استفاده می‌کنم.

header#main img.character1{
    position: absolute;
    left: 110%;
    top: 50%;
    -webkit-transition: left 0.5s ease-in-out;
    -moz-transition: left 0.5s ease-in-out;
    -o-transition: left 0.5s ease-in-out;
    transition: left 0.5s ease-in-out;            
}

header#main img.character2{
    position: absolute;
    left: 10%;
    top: 110%;
    -webkit-transition: top 1.5s ease-in-out;
    -moz-transition: top 1.5s ease-in-out;
    -o-transition: top 1.5s ease-in-out;
    transition: top 1.5s ease-in-out;            
}

حال برای اینکه این کارها را به صورت واقعی به صفحه‌مان اعمال کنیم نیاز است برای هر کدام از تصاویر از پیش کلاس :hover استفاده کنم. بعد از آن خاصیت‌های چپ و بالا را تعیین می‌کنم و آن‌ها را در موقعیت مناسب خودشان قرار می‌دهم.

header#main:hover img.character1{                
    left: 90%;
}    

header#main:hover img.character2{                
    top: 50%;
}

حال که روی تصویر هاور می‌کنیم متوجه می‌شویم که دو کاراکتر وارد صفحه می‌شوند.

آشنایی با چند پس‌زمینه‌ای در CSS3

مشاهده پیش‌نمایش زنده - دانلود پروژه

منبع

دوره‌های آموزشی

مسیرهای یادگیری

پیشرفت من

دوره‌های رایگان

گواهی پایان دوره

آشنایی با چند پس‌زمینه‌ای در CSS3

ارسطو عباسی

کارشناس تولید و بهینه‌سازی محتوا

پست های مشابه

آشنایی با چند کتابخانه php

آشنایی با چند توزیع لینوکس مناسب برای توسعه دهندگان

آشنایی با چند ویژگی منحصر به فرد Nodejs که آن را متمایز می‌کند

دیدگاه و پرسش