وب دیزاین

اینتروی زیبا با jquery ، آموزش و دمو

—

توسط

امید شاملو
در
1 Star2 Stars3 Stars4 Stars5 Stars 16 امتیاز

Loading…

بسم الله الرحمن الرحیم

در مطلبی در مورد صفحات اسپلش توضیحاتی را نوشتیم و اینکه چه هستند و چه کاربردی دارند،در این مطلب آستین ها را بالا زده و یک اینتروی زیبا با jquery  برای سایت خواهیم ساخت تا در صورت نیاز در طراحی سایت های خودتان از آن استفاده کنید.نیازمندی این آموزش دانش CSS , JS , HTML بوده و سطح آن ساده می باشد.

 

چگونه یک اینتروی زیبا با jquery برای سایتمان بسازیم؟

خب روند کار رو به صورت کلی خدمتتان عرض می کنم تا یک دید صحیحی داشته باشید و بتوانید آموزش را بهتر درک کنید.

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

مشخص کردن استراتژی اینترو

خب هرچیزی اگر برنامه ریزی شده پیش برود نتیجه بهتری دربرخواهد داشت،بهتر است ما نیز برای این اینتروی زیبا با jquery  یک برنامه ای بچینیم،موافقید؟

ما سه المنت خواهیم داشت:

  1. متن “شهاب نت”
  2. یک خط افقی
  3. متن “خوش آمدید”

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

لذا ما برای این کارها نیاز به کمی استایل با CSS جهت مخفی کردن و زیبایی کار و همچنین به کتابخانه jQuery جهت ایجاد افکتها نیاز خواهیم داشت.

کدهای HTML صفحه اینتروی ما

ابتدا المنتهای در صفحه را توسط HTML به این صورت خواهیم داشت:

<div class="middle">
    <div class="cutoff">
        <p class="text">شهاب نت</p>
        <div class="hr"></div>
        <p class="desc"><span class="descText">خوش آمدید</span></p>
    </div>
</div>

می بینید که علاوه بر چینش المنت ها به هر المنت کلاس هایی جهت کنترل آن ها خواهیم داشت.

کدهای CSS صفحه اینترو

اجازه بدهید کمی استایل به کار بدهیم:

*{margin:0;padding:0;font-family:"b yekan";}

.middle {
    width: 249px;
    height: 120px;
    margin: auto;
    position: absolute;
    top: 0; bottom: 0; left: 0; right: 0;
    overflow: hidden;
}
.text {
    font-weight: 300;
    font-size: 32px;
    color: #EF5350;
    text-align: center;
    opacity: 0;
    top: 50px;
    position: relative;
}
.hr {
    margin-top: 12px;
    height: 1px;
    width: 262px;
    margin-left: -262px;
    background-color: #bbb;
}
.desc {
    font-weight: 301;
    font-size: 20px;
    color: #333;
    text-align: center;
    overflow: hidden;
}
.desc span {
    margin-top: -24px;
    display: block;
}

خط 1 برای حذف حاشیه و تعیین فونت کار هست،اسم فونتی که اینجا استفاده شده است باید در سیستم کاربر موجود باشد ، در غیر این صورت با فونتهای پیشفرض ، صفحه را مشاهده خواهد کرد،فرض بر این است که شما فونت را به صفحه و سایتتان اضافه کرده اید و نام فونت “b yekan” می باشد.

خطوط 3 تا 10 برای وسط چین کردن کل کار استفاده شده،این تکنیک المنت طول و عرض داده شده را افقی و عمودی وسط چین می کند،به این صورت که طول و عرضی را برای المنت مشخص کرده،سپس خاصیت position آن را absolute داده و مقادیر top,right,bottom,left را صفر می گذاریم،با این کار موقعیت وسطچینی المنت بر عهده خود مرورگر گذاشته شده و لذا المنت در وسط صفحه جای داده خواهد شد.خاصیت مهم دیگر در این قسمت خاصیت overflow می باشد که hidden داده شده است،در این حالت اگر ما فرزندی را از این المنت به خارج از حیطه مادر آن بکشیم،دیگر قابل نمایش نخواهد بود،این موارد به افکت های ما کمک می کند،در ادامه ان شاءالله متوجه خواهید شد.

خطوط 11 تا 19 مربوط به متن “شهاب نت” می باشد که استایلهایی داده شده است،موارد مهم در این قسمت خط 16 خط 17 می باشند،اولی المنت را مخفی می کند،البته به روش opacity و دومی فاصله از بالا را 50px مشخص می کند،اما چرا؟ این دو خاصیت دقیقا برای افکت ما در نظر گرفته شده اند،ما میخواهیم المنت مقادیر اولیه ش این ها باشد و سپس ما این مقادیر را به ترتیب یه 1 جهت نمایان شدن المنت و به 0 جهت تداعی حرکت المنت از بالا به پایین ، تغییر دهیم.لذا 50px جهت خارج شدن از حیطه المنت مادر و opacity جهت محو کردن استفاده شده است.

و اما خطوط 20 تا 26 ! این خطوط استایل آن خط جداکننده ما را انجام می دهند و باز در این مورد خاصیت margin-left برای ما مهم است.این خاصیت مقداری را گرفته که خود را خارج از حیطه المنت مادر برده است.

خطوط 27 تا 37 مربوط به متن “خوش آمدید” می باشد و باز از همان قوانین که برای افکت نیاز است استفاده می کند،لذا در این قسمت باید به خاصیت margin-top دقت کرد.

 

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

 

کدهای Javascript / jQuery صفحه اینترو

خب نوبتی هم که باشد نوبت به این کتابخانه دوست داشتنی می رسد تا کمک حال ما در انجام افکتها باشد تا به یک اینتروی زیبا با jquery برسیم.

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

jQuery('document').ready(function($) {
    
    var a = $(".text");
    var b = $(".hr");
    var c = $(".descText");
    
    a.delay(1000).animate({top: "0", opacity: "1"}, 1000, function() {
        b.delay(500).animate({marginLeft: "0"}, 800, function() {
            c.animate({marginTop: "8"}, 800,function(){
        $('body').animate({opacity: "0"}, 1000);
      });
        });
    });
    
    
});

جی کوئری کارها می دانند که ما برای اینکه کدهایمان اجرا شود نیاز داریم تا المنتها در صفحه آماده استفاده شوند و کاملا بارگزاری شده باشند،این المنتها و بساطشان را می گویند DOM ، در جی کوئری برای حاضر شدن این آقای DOM ، بایستی گوش وایساد و بعد کدها را اجرایی کرد،که سبک jQuery برای این کار به صورت بالا صورت می پذیرد،یعنی کدها در بلاک مخصوص به این کار قرار می گیرند:

jQuery('document').ready(function($) {
   //کدها اینجا قرار می گیرند
});

خطوط 3تا5 همان سه المنت اصلی صفحه را نشانه می روند تا بتوان از آنها استفاده کرد.برای رعایت ترتیب کار از a,b و c استفاده شده است.

خب! برای ادامه کار بایستی توابعی از جی کوئری را توضیح دهیم.

تابع delay : این تابع مقداری از زمان را به میلی ثانیه می گیرد و بعد از آن ردیف بعد از خود را اجرا می کند.

پس الان خط 7 مشخص شد که ما می خواهیم یک ثانیه بعد از لود صفحه کدهایمان اجرا شود.

تابع animate : این تابع خواص CSS ی را می گیرد و به مرور و با افکت آن را تغییر می دهد که نتیجه برای ما می شود:حرکت انیمشنی المنت!

که پارامتر اول در قالب یک آرایه جاوااسکریپت مقادیر را می گیرد،پارامتر دوم زمان انجام این تغییر و سوم در اینجا تابعیست که بعد از اتمام کار بایستی اجرا شود.

پس الان متوجه شده اید که بعد از اجرای نمایش المنت اول باید اجرای نمایش المنت دوم آغاز گردد و این ترتیب به این صورت که ذکر شد رعایت می گردد.

در خطوط پایانی با همین منطق انیمیشنهای دیگر اجرایی می گردد و مقادیر به جاهای اصلی خود تغییر پیدا می کنند تا المنت ها ظاهر گردند.

تنها در خط 10 و پس از اتمام تمام نمایش ها المنت body نیز با افکت مخفی می شود تا کار زیبایی خاصی داشته باشد.

کل کد را به صورت یک جا ببینید

خب خدا قوت به همه شما،دموی کار رو ببینید:

دموی اینتروی زیبا با جی کوئری

و کل کد:

<!DOCTYPE html>
<html lang="fa">
<head>
<meta charset="utf8">
<style>
*{margin:0;padding:0;font-family:"b yekan";}

.middle {
    width: 249px;
    height: 120px;
    margin: auto;
    position: absolute;
    top: 0; bottom: 0; left: 0; right: 0;
    overflow: hidden;
}
.text {
    font-weight: 300;
    font-size: 32px;
    color: #EF5350;
    text-align: center;
    opacity: 0;
    top: 50px;
    position: relative;
}
.hr {
    margin-top: 12px;
    height: 1px;
    width: 262px;
    margin-left: -262px;
    background-color: #bbb;
}
.desc {
    font-weight: 301;
    font-size: 20px;
    color: #333;
    text-align: center;
    overflow: hidden;
}
.desc span {
    margin-top: -24px;
    display: block;
}

</style>
</head>
<body>
<div class="middle">
    <div class="cutoff">
        <p class="text">شهاب نت</p>
        <div class="hr"></div>
        <p class="desc"><span class="descText">خوش آمدید</span></p>
    </div>
</div>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
jQuery('document').ready(function($) {
    
    var a = $(".text");
    var b = $(".hr");
    var c = $(".descText");
    
    a.delay(1000).animate({top: "0", opacity: "1"}, 1000, function() {
        b.delay(500).animate({marginLeft: "0"}, 800, function() {
            c.animate({marginTop: "8"}, 800,function(){
        $('body').animate({opacity: "0"}, 1000);
      });
        });
    });
    
    
});
</script>
</body>
</html>

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

لازم به ذکر است کدهای استفاده شده از این آموزش این دوست خوبمون برداشته شده است که جهت ادای امانت لینک آن را می گذاریم:

 

دیدگاه‌ها

دیدگاهتان را بنویسید

ارسال تیکت
ارسال