انیمیشن در وب

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

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

کرده ایم که بصورت
style= background: url(https://sargonco.com//Uploads/Public/article/HTML/newhtml/749fda0c833043d6ad309907e67a918a.jpg)

خواهد بود پس شما باید یک آدرس url از عکس خود داشته باشید برای این کار کافیست عکس خود را در پوشه تصاویر قرار دهید. شخصا از یک تصویر با رزولوشن 596*1200 استفاده کرده ام و مقداری شفافیت تصویر را با فتوشاپ کاسته ام در واقع در فتوشاپ یک لایه جدید با رنگ سفید روی عکس اصلی انداخته و شفافیت آن را کم کردم تا به نتیجه ی دلخواه برسم فراموش نکنید این مرحله کاملا اختیاری است اگر تصویر واضحی می خواهید از خود تصویر استفاده کنید.در زیر نمایش جلوه مد نظر را می بینید.

محل درج تصویر با افکت.
برای ایجاد این جلوه شما باید یک فایل html بسازید . نگاهی به کدهای زیر بیاندازید.

<!DOCTYPE html>
<html>
<head >
<link href="css/Main.css" type="text/css" rel="stylesheet">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="language" content="fa">
</head>
<body>
<P>

درج چند خط متن تا صفحه اسکرول داشته باشد.

</p>
<div class="row">
<div class="div_slogan" style="background: url(http://urladdress/gal-bg.jpg) no-repeat center center; background-attachment: fixed; background-size: cover; ">
<div class="col-sm-10 col-sm-offset-1">
<section style="visibility: visible; animation-duration: 1s; animation-delay: 0.6s; animation-name: bounceIn;" class="wow bounceIn" data-wow-duration="1s" data-wow-delay="0.6s">
<div class="slogantitle text-center">عنوان مطالب درون عکس اختیاری</div>
</section>
<section style="visibility: visible; animation-duration: 1s; animation-delay: 0.8s; animation-name: bounceIn;" class="wow bounceIn" data-wow-duration="1s" data-wow-delay="0.8s">
<div class="slogandesc text-center">متن درون عکس اختیاری</div>
</section>
</div>
</div>
<P>

درج چند سطر متن برای اسکرول داشتن بعد از عکس

</P>
</body>
</html>

قبل از اینکه سراغ کد های css برویم بگذارید مجدد یادآوری کنم که در خط

شما باید آدرس واقعی css خود را بدهید که محتوای آن را برایتان خواهم نوشت.
و در خط

<div class="div_slogan" style="background: url(http://urladdress/gal-bg.jpg)

شما باید بجای urladdress آدرس سایت خود را بدهید.

کد های css که من با عنوان Main.css ذخیره کرده ام و شما نام انتخابی خود را خواهید داشت

.div_slogan{overflow:hidden;position:relative;padding:60px 0 70px}

.slogantitle,.slogandesc{color:#fff;padding:15px 0;font-size:35px;text-shadow:0 1px 5px #000}

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

مشاهده نتیجه