ساخت انیمیشن در CSS

P O U R I A

مدیر مهندسی شیمی مدیر تالار گفتگوی آزاد
مدیر تالار
فهرست مطالب:

  1. تغییر رنگ پس زمینه یک عنصر div، با اشاره موس و به صورت سریع، در CSS
  2. تغییر رنگ پس زمینه یک عنصر div، با اشاره موس و به صورت تدریجی، با استفاده از انتقال (transition) در CSS
  3. تغییر رنگ پس زمینه و اندازه عرض یک عنصر div، با اشاره موس و به صورت تدریجی (به شکل انیمیشن)، با استفاده از انتقال (transition) در CSS
  4. ایجاد یک تاخیر (delay)، هنگام استفاده از انتقال (transition) در CSS
  5. طراحی بخش های ثابت در کنار صفحه که با اشاره موس، به داخل صفحه می آیند، با کدهای CSS


توجه: تنها تصاویر نتایج این اموزش ها قرار داده شده و در باشگاه نمی توان بصورت انیمیشن نتایج را نشان داد.
 

P O U R I A

مدیر مهندسی شیمی مدیر تالار گفتگوی آزاد
مدیر تالار
تغییر رنگ پس زمینه یک عنصر div، با اشاره موس و به صورت سریع، در CSS

تغییر رنگ پس زمینه یک عنصر div، با اشاره موس و به صورت سریع، در CSS

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

[h=4]نتیجه :[/h]Untitled.jpg
برای این منظور، کدهای صفحه را به صورت زیر می نویسیم :
کد:
[COLOR=#000000][FONT=Tahoma][FONT=monospace]<html[COLOR=#00AA00]>[/COLOR]
 
<head[COLOR=#00AA00]>[/COLOR]
<style type[COLOR=#00AA00]=[/COLOR][COLOR=#FF0000]"text/css"[/COLOR][COLOR=#00AA00]>[/COLOR]
div [COLOR=#00AA00]{[/COLOR]
    [B]width[/B][COLOR=#00AA00]:[/COLOR] [COLOR=#993333]3em[/COLOR][COLOR=#00AA00];[/COLOR]
    [B]height[/B][COLOR=#00AA00]:[/COLOR] [COLOR=#993333]3em[/COLOR][COLOR=#00AA00];[/COLOR]
    [B]background-color[/B][COLOR=#00AA00]:[/COLOR] [COLOR=#993333]red[/COLOR][COLOR=#00AA00];[/COLOR]
[COLOR=#00AA00]}[/COLOR]
div[COLOR=#3333FF]:hover [/COLOR][COLOR=#00AA00]{[/COLOR]  
    [B]background-color[/B][COLOR=#00AA00]:[/COLOR] [B]blue[/B][COLOR=#00AA00];[/COLOR] 
[COLOR=#00AA00]}[/COLOR]                                        
</style[COLOR=#00AA00]>[/COLOR]
</head[COLOR=#00AA00]>[/COLOR]
 
<body[COLOR=#00AA00]>[/COLOR]

<div[COLOR=#00AA00]>[/COLOR]
</div[COLOR=#00AA00]>[/COLOR]

</body[COLOR=#00AA00]>[/COLOR]
</html[COLOR=#00AA00]>[/COLOR][/FONT]
[/FONT][/COLOR]
همان طور که مشاهده می کنید، درون تگ body از صفحه HTML ، یک عنصر div ساخته ایم. کدهای CSS ، درون زوج تگ style نوشته شده اند.

به این بخش از کدهای CSS توجه کنید :
کد:
[COLOR=#000000][FONT=Tahoma][FONT=monospace]div [COLOR=#00AA00]{[/COLOR]
    [B]width[/B][COLOR=#00AA00]:[/COLOR] [COLOR=#993333]3em[/COLOR][COLOR=#00AA00];[/COLOR]
    [B]height[/B][COLOR=#00AA00]:[/COLOR] [COLOR=#993333]3em[/COLOR][COLOR=#00AA00];[/COLOR]
    [B]background-color[/B][COLOR=#00AA00]:[/COLOR] [COLOR=#993333]red[/COLOR][COLOR=#00AA00];[/COLOR]
[COLOR=#00AA00]}[/COLOR][/FONT]
[/FONT][/COLOR]
همان طور که مشاهده می کنید، برای عنصر div ، سه مشخصه تعریف کرده ایم. مشخصه width ، برای تعیین عرض عنصر div ، مشخصه height ، برای تعیین ارتفاع عنصر div و مشخصه background-color ، برای تعیین رنگ پس زمینه عنصر div می باشد (برابر رنگ قرمز).

ادامه کدهای CSS ، به صورت زیر می باشد :
کد:
[COLOR=#000000][FONT=Tahoma][FONT=monospace]div[COLOR=#3333FF]:hover [/COLOR][COLOR=#00AA00]{[/COLOR]  
    [B]background-color[/B][COLOR=#00AA00]:[/COLOR] [B]blue[/B][COLOR=#00AA00];[/COLOR] 
[COLOR=#00AA00]}[/COLOR][/FONT]
[/FONT][/COLOR]
عبارت div:hover به این معنی است که مشخصه هایی که تعیین می کنیم، زمانی به عنصر div اعمال شوند که کاربر، موس خود را بر روی آن برده باشد. مشخصه background-color را برابر blue (آبی) در نظر گرفته ایم که باعث می شود وقتی کاربر موس خود را بر روی عنصر div می برد، رنگ پس زمینه آن، به رنگ آبی تغییر پیدا کند.
 

P O U R I A

مدیر مهندسی شیمی مدیر تالار گفتگوی آزاد
مدیر تالار
تغییر رنگ پس زمینه یک عنصر div، با اشاره موس و به صورت تدریجی، با استفاده از انتقال (transition) در CSS

تغییر رنگ پس زمینه یک عنصر div، با اشاره موس و به صورت تدریجی، با استفاده از انتقال (transition) در CSS

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

[h=4]نتیجه :[/h]Untitled.jpg
برای این منظور، کدهای صفحه را به صورت زیر می نویسیم :
کد:
[COLOR=#000000][FONT=Tahoma][FONT=monospace]<html[COLOR=#00AA00]>[/COLOR]
 
<head[COLOR=#00AA00]>[/COLOR]
<style type[COLOR=#00AA00]=[/COLOR][COLOR=#FF0000]"text/css"[/COLOR][COLOR=#00AA00]>[/COLOR]
div [COLOR=#00AA00]{[/COLOR]
    [B]width[/B][COLOR=#00AA00]:[/COLOR] [COLOR=#993333]3em[/COLOR][COLOR=#00AA00];[/COLOR]
    [B]height[/B][COLOR=#00AA00]:[/COLOR] [COLOR=#993333]3em[/COLOR][COLOR=#00AA00];[/COLOR]
    [B]background-color[/B][COLOR=#00AA00]:[/COLOR] [COLOR=#993333]red[/COLOR][COLOR=#00AA00];[/COLOR]
    transition-property[COLOR=#00AA00]:[/COLOR] [B]background-color[/B][COLOR=#00AA00];[/COLOR]
    transition-duration[COLOR=#00AA00]:[/COLOR] 4s[COLOR=#00AA00];[/COLOR]
[COLOR=#00AA00]}[/COLOR]
div[COLOR=#3333FF]:hover [/COLOR][COLOR=#00AA00]{[/COLOR]  
    [B]background-color[/B][COLOR=#00AA00]:[/COLOR] [B]blue[/B][COLOR=#00AA00];[/COLOR] 
[COLOR=#00AA00]}[/COLOR]                                        
</style[COLOR=#00AA00]>[/COLOR]
</head[COLOR=#00AA00]>[/COLOR]
 
<body[COLOR=#00AA00]>[/COLOR]

<div[COLOR=#00AA00]>[/COLOR]
</div[COLOR=#00AA00]>[/COLOR]

</body[COLOR=#00AA00]>[/COLOR]
</html[COLOR=#00AA00]>[/COLOR][/FONT]
[/FONT][/COLOR]
همان طور که مشاهده می کنید، درون تگ body از صفحه HTML ، یک عنصر div ساخته ایم. کدهای CSS ، درون زوج تگ style نوشته شده اند.

به این بخش از کدهای CSS توجه کنید :
کد:
[COLOR=#000000][FONT=Tahoma][FONT=monospace]div [COLOR=#00AA00]{[/COLOR]
    [B]width[/B][COLOR=#00AA00]:[/COLOR] [COLOR=#993333]3em[/COLOR][COLOR=#00AA00];[/COLOR]
    [B]height[/B][COLOR=#00AA00]:[/COLOR] [COLOR=#993333]3em[/COLOR][COLOR=#00AA00];[/COLOR]
    [B]background-color[/B][COLOR=#00AA00]:[/COLOR] [COLOR=#993333]red[/COLOR][COLOR=#00AA00];[/COLOR]
    transition-property[COLOR=#00AA00]:[/COLOR] [B]background-color[/B][COLOR=#00AA00];[/COLOR]
    transition-duration[COLOR=#00AA00]:[/COLOR] 4s[COLOR=#00AA00];[/COLOR]
[COLOR=#00AA00]}[/COLOR][/FONT]
[/FONT][/COLOR]
همان طور که مشاهده می کنید، برای عنصر div ، پنج مشخصه تعریف کرده ایم. مشخصه width ، برای تعیین عرض عنصر div ، مشخصه height ، برای تعیین ارتفاع عنصر div و مشخصه background-color ، برای تعیین رنگ پس زمینه عنصر div می باشد (برابر رنگ قرمز). مشخصه transition-property در CSS ، برای اعمال تغییرات مورد نظرمان، به صورت تدریجی می باشد. همچنین دقت داشته باشید که مشخصه transition-property را به صورت زیر تعریف کرده ایم :
کد:
[COLOR=#000000][FONT=Tahoma][FONT=monospace]transition-property[COLOR=#00AA00]:[/COLOR] [B]background-color[/B][COLOR=#00AA00];[/COLOR][/FONT]
[/FONT][/COLOR]
این عبارت، تعیین کرده است که تغییرات تدریجی، تنها باید برای مشخصه background-color اعمال شود. اگر بخواهیم موارد دیگری نیز به صورت تدریجی تغییر کنند، باید آنها را در جلوی عبارت، ذکر کنیم. مثلا فرض کنید اگر می خواستیم که مشخصه width نیز دارای تغییرات تدریجی باشد، باید کد زیر را می نوشتیم :
کد:
[COLOR=#000000][FONT=Tahoma][FONT=monospace]transition-property[COLOR=#00AA00]:[/COLOR] [B]background-color[/B][COLOR=#00AA00],[/COLOR] [B]width[/B][COLOR=#00AA00];[/COLOR][/FONT]
[/FONT][/COLOR]
مشخصه transition-duration ، تعیین می کند که تغییرات تدریجی، در چه مدت زمانی، اعمال شوند، مثلا ما در این کدها، زمان 4 ثانیه را در نظر گرفته ایم.

ادامه کدهای CSS ، به صورت زیر می باشد :
کد:
[COLOR=#000000][FONT=Tahoma][FONT=monospace]div[COLOR=#3333FF]:hover [/COLOR][COLOR=#00AA00]{[/COLOR]  
    [B]background-color[/B][COLOR=#00AA00]:[/COLOR] [B]blue[/B][COLOR=#00AA00];[/COLOR] 
[COLOR=#00AA00]}[/COLOR][/FONT]
[/FONT][/COLOR]
عبارت div:hover به این معنی است که مشخصه هایی که تعیین می کنیم، زمانی به عنصر div اعمال شوند که کاربر، موس خود را بر روی آن برده باشد. مشخصه background-color را برابر blue (آبی) در نظر گرفته ایم که باعث می شود وقتی کاربر موس خود را بر روی عنصر div می برد، رنگ پس زمینه آن، به رنگ آبی تغییر پیدا کند.
 

P O U R I A

مدیر مهندسی شیمی مدیر تالار گفتگوی آزاد
مدیر تالار
تغییر رنگ پس زمینه و اندازه عرض یک عنصر div، با اشاره موس و به صورت تدریجی (به شکل انیمیشن)، با استفاده از انتقال (transition)

تغییر رنگ پس زمینه و اندازه عرض یک عنصر div، با اشاره موس و به صورت تدریجی (به شکل انیمیشن)، با استفاده از انتقال (transition)

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

[h=4]نتیجه :[/h]Untitled.jpg
برای این منظور، کدهای صفحه را به صورت زیر می نویسیم :
کد:
[COLOR=#000000][FONT=Tahoma][FONT=monospace]<html[COLOR=#00AA00]>[/COLOR]
 
<head[COLOR=#00AA00]>[/COLOR]
<style type[COLOR=#00AA00]=[/COLOR][COLOR=#FF0000]"text/css"[/COLOR][COLOR=#00AA00]>[/COLOR]
div [COLOR=#00AA00]{[/COLOR]
    [B]width[/B][COLOR=#00AA00]:[/COLOR] [COLOR=#993333]3em[/COLOR][COLOR=#00AA00];[/COLOR]
    [B]height[/B][COLOR=#00AA00]:[/COLOR] [COLOR=#993333]3em[/COLOR][COLOR=#00AA00];[/COLOR]
    [B]background-color[/B][COLOR=#00AA00]:[/COLOR] [COLOR=#993333]red[/COLOR][COLOR=#00AA00];[/COLOR]
    transition-property[COLOR=#00AA00]:[/COLOR] [B]background-color[/B][COLOR=#00AA00],[/COLOR] [B]width[/B][COLOR=#00AA00];[/COLOR]
    transition-duration[COLOR=#00AA00]:[/COLOR] 4s[COLOR=#00AA00];[/COLOR]
[COLOR=#00AA00]}[/COLOR]
div[COLOR=#3333FF]:hover [/COLOR][COLOR=#00AA00]{[/COLOR]
    [B]width[/B][COLOR=#00AA00]:[/COLOR] [COLOR=#993333]10em[/COLOR][COLOR=#00AA00];[/COLOR] 
    [B]background-color[/B][COLOR=#00AA00]:[/COLOR] [B]blue[/B][COLOR=#00AA00];[/COLOR] 
[COLOR=#00AA00]}[/COLOR]                                        
</style[COLOR=#00AA00]>[/COLOR]
</head[COLOR=#00AA00]>[/COLOR]
 
<body[COLOR=#00AA00]>[/COLOR]

<div[COLOR=#00AA00]>[/COLOR]
</div[COLOR=#00AA00]>[/COLOR]

</body[COLOR=#00AA00]>[/COLOR]
</html[COLOR=#00AA00]>[/COLOR][/FONT]
[/FONT][/COLOR]
همان طور که مشاهده می کنید، درون تگ body از صفحه HTML ، یک عنصر div ساخته ایم. کدهای CSS ، درون زوج تگ style نوشته شده اند.

به این بخش از کدهای CSS توجه کنید :
کد:
[COLOR=#000000][FONT=Tahoma][FONT=monospace]div [COLOR=#00AA00]{[/COLOR]
    [B]width[/B][COLOR=#00AA00]:[/COLOR] [COLOR=#993333]3em[/COLOR][COLOR=#00AA00];[/COLOR]
    [B]height[/B][COLOR=#00AA00]:[/COLOR] [COLOR=#993333]3em[/COLOR][COLOR=#00AA00];[/COLOR]
    [B]background-color[/B][COLOR=#00AA00]:[/COLOR] [COLOR=#993333]red[/COLOR][COLOR=#00AA00];[/COLOR]
    transition-property[COLOR=#00AA00]:[/COLOR] [B]background-color[/B][COLOR=#00AA00],[/COLOR] [B]width[/B][COLOR=#00AA00];[/COLOR]
    transition-duration[COLOR=#00AA00]:[/COLOR] 4s[COLOR=#00AA00];[/COLOR]
[COLOR=#00AA00]}[/COLOR]
div[COLOR=#3333FF]:hover [/COLOR][COLOR=#00AA00]{[/COLOR]
    [B]width[/B][COLOR=#00AA00]:[/COLOR] [COLOR=#993333]10em[/COLOR][COLOR=#00AA00];[/COLOR] 
    [B]background-color[/B][COLOR=#00AA00]:[/COLOR] [B]blue[/B][COLOR=#00AA00];[/COLOR] 
[COLOR=#00AA00]}[/COLOR][/FONT]
[/FONT][/COLOR]
همان طور که مشاهده می کنید، برای عنصر div ، پنج مشخصه تعریف کرده ایم. مشخصه width ، برای تعیین عرض عنصر div ، مشخصه height ، برای تعیین ارتفاع عنصر div و مشخصه background-color ، برای تعیین رنگ پس زمینه عنصر div می باشد (برابر رنگ قرمز). مشخصه transition-property در CSS ، برای اعمال تغییرات مورد نظرمان، به صورت تدریجی می باشد. همچنین دقت داشته باشید که مشخصه transition-property را به صورت زیر تعریف کرده ایم :
کد:
[COLOR=#000000][FONT=Tahoma][FONT=monospace]transition-property[COLOR=#00AA00]:[/COLOR] [B]background-color[/B][COLOR=#00AA00],[/COLOR] [B]width[/B][COLOR=#00AA00];[/COLOR][/FONT]
[/FONT][/COLOR]
با این خط از کدهای CSS ، تعیین کرده ایم که تغییرات تدریجی، تنها باید برای مشخصه های background-color و width اعمال شود.

مشخصه transition-duration ، تعیین می کند که تغییرات تدریجی، در چه مدت زمانی، اعمال شوند، مثلا ما در این کدها، زمان 4 ثانیه را در نظر گرفته ایم.

ادامه کدهای CSS ، به صورت زیر می باشد :
کد:
[COLOR=#000000][FONT=Tahoma][FONT=monospace]div[COLOR=#3333FF]:hover [/COLOR][COLOR=#00AA00]{[/COLOR]
    [B]width[/B][COLOR=#00AA00]:[/COLOR] [COLOR=#993333]10em[/COLOR][COLOR=#00AA00];[/COLOR] 
    [B]background-color[/B][COLOR=#00AA00]:[/COLOR] [B]blue[/B][COLOR=#00AA00];[/COLOR] 
[COLOR=#00AA00]}[/COLOR][/FONT]
[/FONT][/COLOR]
عبارت div:hover به این معنی است که مشخصه هایی که تعیین می کنیم، زمانی به عنصر div اعمال شوند که کاربر، موس خود را بر روی آن برده باشد. مشخصه background-color را برابر blue (آبی) در نظر گرفته ایم که باعث می شود وقتی کاربر موس خود را بر روی عنصر div می برد، رنگ پس زمینه آن، به صورت تدریجی، به رنگ آبی تغییر پیدا کند و مشخصه width را هم برابر 10em تعیین کرده ایم که چون مقدار آن، با مقدار حالت عادی که مشخص کرده ایم، متفاوت است، بنابراین وقتی کاربر موس را بر روی عنصر div می برد، اندازه عرض آن، به تدریج افزایش می یابد.
 

P O U R I A

مدیر مهندسی شیمی مدیر تالار گفتگوی آزاد
مدیر تالار
ایجاد یک تاخیر (delay)، هنگام استفاده از انتقال (transition) در CSS

ایجاد یک تاخیر (delay)، هنگام استفاده از انتقال (transition) در CSS

قبلا مفهوم انتقال (transition) در CSS را شرح دادیم و گفتیم که با استفاده از مشخصه های مربوط به انتقال (transition) در CSS ، می توانیم یک سری تغییرات را به صورت تدریجی و مشابه انیمیشن، به عناصر صفحه اعمال کنیم. در این مبحث می خواهیم با مشخصه transition-delay آشنا شویم که می تواند یک مقدار زمان به عنوان تاخیر (delay)، قبل از اعمال تغییرات تدریجی، به وجود بیاورد.

به عنوان مثال، می خواهیم که برای یک عنصر div که پس زمینه آن رنگی است، هنگامی که کاربر موس خود را بر روی آن می برد، ابتدا 3 ثانیه تاخیر داشته باشیم و سپس، اندازه عرض عنصر div ، به تدریج بزرگتر شود. نتیجه نهایی به صورت زیر می باشد (موس خود را بر روی قسمت رنگی برده و لحظاتی صبر کنید) :

[h=4]نتیجه :[/h]Untitled.jpg
برای این منظور، کدهای صفحه را به صورت زیر می نویسیم :
کد:
[COLOR=#000000][FONT=Tahoma][FONT=monospace]<html[COLOR=#00AA00]>[/COLOR]
 
<head[COLOR=#00AA00]>[/COLOR]
<style type[COLOR=#00AA00]=[/COLOR][COLOR=#FF0000]"text/css"[/COLOR][COLOR=#00AA00]>[/COLOR]
div [COLOR=#00AA00]{[/COLOR]
    [B]width[/B][COLOR=#00AA00]:[/COLOR] [COLOR=#993333]3em[/COLOR][COLOR=#00AA00];[/COLOR]
    [B]height[/B][COLOR=#00AA00]:[/COLOR] [COLOR=#993333]3em[/COLOR][COLOR=#00AA00];[/COLOR]
    [B]background-color[/B][COLOR=#00AA00]:[/COLOR] [COLOR=#993333]red[/COLOR][COLOR=#00AA00];[/COLOR]
    transition-property[COLOR=#00AA00]:[/COLOR] [B]width[/B][COLOR=#00AA00];[/COLOR]
    transition-duration[COLOR=#00AA00]:[/COLOR] 4s[COLOR=#00AA00];[/COLOR]
    transition-delay[COLOR=#00AA00]:[/COLOR] 3s[COLOR=#00AA00];[/COLOR]
[COLOR=#00AA00]}[/COLOR]
div[COLOR=#3333FF]:hover [/COLOR][COLOR=#00AA00]{[/COLOR]
    [B]width[/B][COLOR=#00AA00]:[/COLOR] [COLOR=#993333]10em[/COLOR][COLOR=#00AA00];[/COLOR] 
[COLOR=#00AA00]}[/COLOR]                                        
</style[COLOR=#00AA00]>[/COLOR]
</head[COLOR=#00AA00]>[/COLOR]
 
<body[COLOR=#00AA00]>[/COLOR]

<div[COLOR=#00AA00]>[/COLOR]
</div[COLOR=#00AA00]>[/COLOR]

</body[COLOR=#00AA00]>[/COLOR]
</html[COLOR=#00AA00]>[/COLOR][/FONT]
[/FONT][/COLOR]
همان طور که مشاهده می کنید، درون تگ body از صفحه HTML ، یک عنصر div ساخته ایم. کدهای CSS ، درون زوج تگ style نوشته شده اند.

به این بخش از کدهای CSS توجه کنید :
کد:
[COLOR=#000000][FONT=Tahoma][FONT=monospace]div [COLOR=#00AA00]{[/COLOR]
    [B]width[/B][COLOR=#00AA00]:[/COLOR] [COLOR=#993333]3em[/COLOR][COLOR=#00AA00];[/COLOR]
    [B]height[/B][COLOR=#00AA00]:[/COLOR] [COLOR=#993333]3em[/COLOR][COLOR=#00AA00];[/COLOR]
    [B]background-color[/B][COLOR=#00AA00]:[/COLOR] [COLOR=#993333]red[/COLOR][COLOR=#00AA00];[/COLOR]
    transition-property[COLOR=#00AA00]:[/COLOR] [B]width[/B][COLOR=#00AA00];[/COLOR]
    transition-duration[COLOR=#00AA00]:[/COLOR] 4s[COLOR=#00AA00];[/COLOR]
    transition-delay[COLOR=#00AA00]:[/COLOR] 3s[COLOR=#00AA00];[/COLOR]
[COLOR=#00AA00]}[/COLOR][/FONT]
[/FONT][/COLOR]
همان طور که مشاهده می کنید، برای عنصر div ، شش مشخصه تعریف کرده ایم. مشخصه width ، برای تعیین عرض عنصر div ، مشخصه height ، برای تعیین ارتفاع عنصر div و مشخصه background-color ، برای تعیین رنگ پس زمینه عنصر div می باشد (برابر رنگ قرمز). مشخصه transition-property در CSS ، برای اعمال تغییرات مورد نظرمان، به صورت تدریجی می باشد. همچنین دقت داشته باشید که مشخصه transition-property را به صورت زیر تعریف کرده ایم :
کد:
[COLOR=#000000][FONT=Tahoma][FONT=monospace]transition-property[COLOR=#00AA00]:[/COLOR] [B]width[/B][COLOR=#00AA00];[/COLOR][/FONT]
[/FONT][/COLOR]
با این خط از کدهای CSS ، تعیین کرده ایم که تغییرات تدریجی، تنها باید برای مشخصه width اعمال شود.

مشخصه transition-duration ، تعیین می کند که تغییرات تدریجی، در چه مدت زمانی، اعمال شوند، مثلا ما در این کدها، زمان 4 ثانیه را در نظر گرفته ایم. transition-delay هم برابر 3 ثانیه در نظر گرفته شده است و بنابراین قبل از اعمال تغییرات تدریجی، 3 ثانیه تاخیر (delay) خواهیم داشت.

ادامه کدهای CSS ، به صورت زیر می باشد :
کد:
[COLOR=#000000][FONT=Tahoma][FONT=monospace]div[COLOR=#3333FF]:hover [/COLOR][COLOR=#00AA00]{[/COLOR]
    [B]width[/B][COLOR=#00AA00]:[/COLOR] [COLOR=#993333]10em[/COLOR][COLOR=#00AA00];[/COLOR] 
[COLOR=#00AA00]}[/COLOR][/FONT]
[/FONT][/COLOR]
عبارت div:hover به این معنی است که مشخصه هایی که تعیین می کنیم، زمانی به عنصر div اعمال شوند که کاربر، موس خود را بر روی آن برده باشد. مشخصه width را برابر 10em تعیین کرده ایم که چون مقدار آن، با مقدار حالت عادی که مشخص کرده ایم، متفاوت است، بنابراین وقتی کاربر موس را بر روی عنصر div می برد، اندازه عرض آن، به تدریج افزایش می یابد.
 

P O U R I A

مدیر مهندسی شیمی مدیر تالار گفتگوی آزاد
مدیر تالار
طراحی بخش های ثابت در کنار صفحه که با اشاره موس، به داخل صفحه می آیند، با کدهای CSS

طراحی بخش های ثابت در کنار صفحه که با اشاره موس، به داخل صفحه می آیند، با کدهای CSS

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

Untitled.jpg
Untitled.jpg

در ابتدا تنها یک کادر دیده می شود ولی هنگامی که کاربر موس خود را بر روی آن کادر می برد، آن کادر به درون صفحه آمده و یک لینک نمایش داده می شود که کاربر با کلیک بر روی آن، می تواند به یک صفحه دیگر برود.

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

ابتدا بخش مربوط به لینک را به صورت وقتی که کامل درون صفحه است، طراحی می کنیم :
کد:
[COLOR=#000000][FONT=Tahoma][FONT=monospace]<html[COLOR=#00AA00]>[/COLOR]
<head[COLOR=#00AA00]>[/COLOR]
<style type[COLOR=#00AA00]=[/COLOR][COLOR=#FF0000]"text/css"[/COLOR][COLOR=#00AA00]>[/COLOR]
[COLOR=#6666FF].button[/COLOR] [COLOR=#00AA00]{[/COLOR]
        [B]height[/B][COLOR=#00AA00]:[/COLOR][COLOR=#993333]30px[/COLOR][COLOR=#00AA00];[/COLOR]
        [B]width[/B][COLOR=#00AA00]:[/COLOR][COLOR=#993333]150px[/COLOR][COLOR=#00AA00];[/COLOR]
        [B]position[/B][COLOR=#00AA00]:[/COLOR] [COLOR=#993333]fixed[/COLOR][COLOR=#00AA00];[/COLOR]
        [B]left[/B][COLOR=#00AA00]:[/COLOR] [COLOR=#993333]0px[/COLOR][COLOR=#00AA00];[/COLOR]
        [B]top[/B][COLOR=#00AA00]:[/COLOR] [COLOR=#993333]30px[/COLOR][COLOR=#00AA00];[/COLOR]
        [B]background-color[/B][COLOR=#00AA00]:[/COLOR] [COLOR=#CC00CC]#0F6[/COLOR][COLOR=#00AA00];[/COLOR]
        [B]text-align[/B][COLOR=#00AA00]:[/COLOR] [COLOR=#993333]center[/COLOR][COLOR=#00AA00];[/COLOR]
        [B]padding-top[/B][COLOR=#00AA00]:[/COLOR] [COLOR=#993333]12px[/COLOR][COLOR=#00AA00];[/COLOR]
[COLOR=#00AA00]}[/COLOR]
</style[COLOR=#00AA00]>[/COLOR]
</head[COLOR=#00AA00]>[/COLOR]

<body[COLOR=#00AA00]>[/COLOR]

<a href[COLOR=#00AA00]=[/COLOR][COLOR=#FF0000]"http://www.kelidestan.com/index.php"[/COLOR][COLOR=#00AA00]>[/COLOR]<div class[COLOR=#00AA00]=[/COLOR][COLOR=#FF0000]"button"[/COLOR][COLOR=#00AA00]>[/COLOR]لینک</div[COLOR=#00AA00]>[/COLOR]</a[COLOR=#00AA00]>[/COLOR]

</body[COLOR=#00AA00]>[/COLOR]
</html[COLOR=#00AA00]>[/COLOR][/FONT]
[/FONT][/COLOR]
اکنون باید کدها را به گونه ای تغییر دهیم که ابتدا تنها بخشی از دکمه، درون صفحه دیده شود و سپس زمانی که موس را بر روی آن می بریم، دکمه به صورت کامل نمایش داده شود. برای این منظور، کدها را به صورت زیر تغییر می دهیم :
کد:
[COLOR=#000000][FONT=Tahoma][FONT=monospace]<html[COLOR=#00AA00]>[/COLOR]
<head[COLOR=#00AA00]>[/COLOR]
<style type[COLOR=#00AA00]=[/COLOR][COLOR=#FF0000]"text/css"[/COLOR][COLOR=#00AA00]>[/COLOR]
[COLOR=#6666FF].button[/COLOR] [COLOR=#00AA00]{[/COLOR]
        [B]height[/B][COLOR=#00AA00]:[/COLOR][COLOR=#993333]30px[/COLOR][COLOR=#00AA00];[/COLOR]
        [B]width[/B][COLOR=#00AA00]:[/COLOR][COLOR=#993333]150px[/COLOR][COLOR=#00AA00];[/COLOR]
        [B]position[/B][COLOR=#00AA00]:[/COLOR] [COLOR=#993333]fixed[/COLOR][COLOR=#00AA00];[/COLOR]
        [B]left[/B][COLOR=#00AA00]:[/COLOR] [COLOR=#993333]-120px[/COLOR][COLOR=#00AA00];[/COLOR]
        [B]top[/B][COLOR=#00AA00]:[/COLOR] [COLOR=#993333]30px[/COLOR][COLOR=#00AA00];[/COLOR]
        [B]background-color[/B][COLOR=#00AA00]:[/COLOR] [COLOR=#CC00CC]#0F6[/COLOR][COLOR=#00AA00];[/COLOR]
        [B]text-align[/B][COLOR=#00AA00]:[/COLOR] [COLOR=#993333]center[/COLOR][COLOR=#00AA00];[/COLOR]
        [B]padding-top[/B][COLOR=#00AA00]:[/COLOR] [COLOR=#993333]12px[/COLOR][COLOR=#00AA00];[/COLOR]
[COLOR=#00AA00]}[/COLOR]
[COLOR=#6666FF].button[/COLOR][COLOR=#3333FF]:hover [/COLOR][COLOR=#00AA00]{[/COLOR]
        [B]left[/B][COLOR=#00AA00]:[/COLOR] [COLOR=#993333]0px[/COLOR][COLOR=#00AA00];[/COLOR]
[COLOR=#00AA00]}[/COLOR]
</style[COLOR=#00AA00]>[/COLOR]
</head[COLOR=#00AA00]>[/COLOR]

<body[COLOR=#00AA00]>[/COLOR]

<a href[COLOR=#00AA00]=[/COLOR][COLOR=#FF0000]"http://www.kelidestan.com/index.php"[/COLOR][COLOR=#00AA00]>[/COLOR]<div class[COLOR=#00AA00]=[/COLOR][COLOR=#FF0000]"button"[/COLOR][COLOR=#00AA00]>[/COLOR]لینک</div[COLOR=#00AA00]>[/COLOR]</a[COLOR=#00AA00]>[/COLOR]

</body[COLOR=#00AA00]>[/COLOR]
</html[COLOR=#00AA00]>[/COLOR][/FONT]
[/FONT][/COLOR]
اگر موس را بروی قسمت نمایش داده شده ببرید، آنگاه دکمه به صورت کامل به درون صفحه می آید و کاربر می تواند آن را به طور کامل ببیند.

اما نوع نمایش بالا زیاد خوب نیست زیرا که دکمه سریعا درون صفحه نمایش داده می شود، اما ما می خواهیم حرکت آمدن دکمه به درون صفحه، به گونه ای باشد که کاربر این حرکت را به صورت تدریجی ببیند (اینگونه زیباتر است). بنابراین کدها را به صورت زیر تغییر می دهیم :
کد:
[COLOR=#000000][FONT=Tahoma][FONT=monospace]<html[COLOR=#00AA00]>[/COLOR]
<head[COLOR=#00AA00]>[/COLOR]
<style type[COLOR=#00AA00]=[/COLOR][COLOR=#FF0000]"text/css"[/COLOR][COLOR=#00AA00]>[/COLOR]
[COLOR=#6666FF].button[/COLOR] [COLOR=#00AA00]{[/COLOR]
        [B]height[/B][COLOR=#00AA00]:[/COLOR][COLOR=#993333]30px[/COLOR][COLOR=#00AA00];[/COLOR]
        [B]width[/B][COLOR=#00AA00]:[/COLOR][COLOR=#993333]150px[/COLOR][COLOR=#00AA00];[/COLOR]
        [B]position[/B][COLOR=#00AA00]:[/COLOR] [COLOR=#993333]fixed[/COLOR][COLOR=#00AA00];[/COLOR]
        [B]left[/B][COLOR=#00AA00]:[/COLOR] [COLOR=#993333]-120px[/COLOR][COLOR=#00AA00];[/COLOR]
        [B]top[/B][COLOR=#00AA00]:[/COLOR] [COLOR=#993333]30px[/COLOR][COLOR=#00AA00];[/COLOR]
        [B]background-color[/B][COLOR=#00AA00]:[/COLOR] [COLOR=#CC00CC]#0F6[/COLOR][COLOR=#00AA00];[/COLOR]
        [B]text-align[/B][COLOR=#00AA00]:[/COLOR] [COLOR=#993333]center[/COLOR][COLOR=#00AA00];[/COLOR]
        [B]padding-top[/B][COLOR=#00AA00]:[/COLOR] [COLOR=#993333]12px[/COLOR][COLOR=#00AA00];[/COLOR]
        -moz-transition[COLOR=#00AA00]:[/COLOR]all 0.3s ease-in[COLOR=#00AA00];[/COLOR]
        -webkit-transition[COLOR=#00AA00]:[/COLOR]all 0.3s ease-in[COLOR=#00AA00];[/COLOR]
        -o-transition[COLOR=#00AA00]:[/COLOR]all 0.3s ease-in[COLOR=#00AA00];[/COLOR]
        -ms-transition[COLOR=#00AA00]:[/COLOR]all 0.3s ease-in[COLOR=#00AA00];[/COLOR]
[COLOR=#00AA00]}[/COLOR]
[COLOR=#6666FF].button[/COLOR][COLOR=#3333FF]:hover [/COLOR][COLOR=#00AA00]{[/COLOR]
        [B]left[/B][COLOR=#00AA00]:[/COLOR] [COLOR=#993333]0px[/COLOR][COLOR=#00AA00];[/COLOR]
[COLOR=#00AA00]}[/COLOR]
</style[COLOR=#00AA00]>[/COLOR]
</head[COLOR=#00AA00]>[/COLOR]

<body[COLOR=#00AA00]>[/COLOR]

<a href[COLOR=#00AA00]=[/COLOR][COLOR=#FF0000]"http://www.kelidestan.com/index.php"[/COLOR][COLOR=#00AA00]>[/COLOR]<div class[COLOR=#00AA00]=[/COLOR][COLOR=#FF0000]"button"[/COLOR][COLOR=#00AA00]>[/COLOR]لینک</div[COLOR=#00AA00]>[/COLOR]</a[COLOR=#00AA00]>[/COLOR]

</body[COLOR=#00AA00]>[/COLOR]
</html[COLOR=#00AA00]>[/COLOR][/FONT]
[/FONT][/COLOR]
همان طور که مشاهده می کنید، از مشخصه transition برای ایجاد حرکت آرام (تغییرات تدریجی) استفاده کرده ایم. پیشوندهای قبل از مشخصه transition ، مربوط به مرورگرهای اینترنتی مختلف می باشد.
 

Similar threads

بالا