+- انجمن های تخصصی فلش خور (http://www.flashkhor.com/forum)
+-- انجمن: رایانه (http://www.flashkhor.com/forum/forumdisplay.php?fid=27)
+--- انجمن: آموزش رایانه و اینترنت (http://www.flashkhor.com/forum/forumdisplay.php?fid=60)
+--- موضوع: آموزش ایجاد ایفکت های زیبا در طراحی سایت (/showthread.php?tid=257958)
آموزش ایجاد ایفکت های زیبا در طراحی سایت - maryamimani - 17-05-2016
در دیدن لینک ها برای شما امکان پذیر نیست. لطفا ثبت نام کنید یا وارد حساب خود شوید تا بتوانید لینک ها را ببینید.
طراحی سایت یکی از مواردی که باعث جذابیت و زیبایی سایت می شود محو بودن عکس ها و تصاویر در سایت است.
تعبیه تصویرهای گرافیکی باعث زیبا شدن طراحی سایت می گردد. دادن ایفکت به تصویرها و عکس های با کیفیت بالا باعث می شود جذابیت طراحی وب سایت شما بیشتر از قبل بالا برود و کاربر را به خودش جذب کند. حتمن عکس هایی را دیده اید که با قرار دادن موس بر روی آنها حالت محوی به خود می گیرند این کار در طراحی سایت خودش را نشان می دهد و از طرفی توجه کاربرها را جلب می کند و از طرفی دیگر عکس ها و تصاویر شما را خاص می کند که تاثیر بسیار خوبی بر روی بهینه سازی سایت نیز دارد. در این مطلب روش دیدن لینک ها برای شما امکان پذیر نیست. لطفا ثبت نام کنید یا وارد حساب خود شوید تا بتوانید لینک ها را ببینید.
طراحی وب سایت و نحوه محو نمودن تصویرها را به وسیله اسکریپ های جاوا توضیح می دهیم که کار چندان سختی نیست فقط کافی است از کد نوشته شده در زیر استفاده کنید.
<script><link rel="stylesheet" type="text/css" href="/demo/checkboxtoggler.css" />
<script type="text/j-avascript" src="/demo/StackBoxBlur.js"></script>
<script type="text/j-avascript" src="/demo/StackBoxBlurWrapper.js"></script>
<script>
window.on-load = function(){ // when window loads
var hayden1 = new stackBoxBlurIt('hayden1') // reference original image to blur
var checkbox1 = document.getElementById('checkbox1') // reference checkbox to toggle image blur
if (checkbox1.checked == false){ // if checkbox isn't checked when page is loaded
hayden1.blurit(40) // blur it
}
checkbox1.on-change = function(){ // whenever checkbox state changes
hayden1.blurit( this.checked? 0 : 40 ) // blur or not to blur
}
}
</script>
<body>
<img id="hayden1" border="0" src="/demo/hayden.jpg" width="280" height="350">
<div class="toggler">
<input type="checkbox" id="checkbox1" />
<label for="checkbox1"></label>
</div>
</body>
<script type="text/j-avascript" src="/demo/StackBoxBlur.js"></script>
<script type="text/j-avascript" src="/demo/StackBoxBlurWrapper.js"></script>
<script>
window.on-load = function(){ // when window loads
var hayden1 = new stackBoxBlurIt('hayden1') // reference original image to blur
var checkbox1 = document.getElementById('checkbox1') // reference checkbox to toggle image blur
if (checkbox1.checked == false){ // if checkbox isn't checked when page is loaded
hayden1.blurit(40) // blur it
}
checkbox1.on-change = function(){ // whenever checkbox state changes
hayden1.blurit( this.checked? 0 : 40 ) // blur or not to blur
}
}
</script>
<body>
<img id="hayden1" border="0" src="/demo/hayden.jpg" width="280" height="350">
<div class="toggler">
<input type="checkbox" id="checkbox1" />
<label for="checkbox1"></label>
</div>
</body>
در کد نوشته شده در بالا همانطور که می بینید آدرس تصویر را می توانید درج کنید و به راحتی طراحی سایت و افکت موردنظر و محو کردن تصویرهای سایت تان را در صفحه های سایت انجام دهید.
دیدن لینک ها برای شما امکان پذیر نیست. لطفا ثبت نام کنید یا وارد حساب خود شوید تا بتوانید لینک ها را ببینید.
طراحی وب سایت وب کندو