طراحی سایت و افکت های زیبا روی عکس
عوامل موفقیت مدیرعامل لینکدین
2016-01-24
راسموس لردورف کیست؟
2016-05-10طراحی سایت و افکت های زیبا روی عکس
با طراحی سایت می خواهیم روی تصاویر کارهایی انجام دهیم و آن هایی که به طراحی سایت علاقمندند، می توانند یکی از آن ترفندهای افکت گذاری روی عکس را با ما در ادامه دنبال کنند.
در واقع اینطور باید بگوییم که در طراحی سایت یکی از مواردی که باعث جذابیت و زیبایی سایت می شود محو بودن عکس ها و تصاویر در سایت است. حال ما برای شما قطعه کدی در طراحی سایت آورده ایم که می توانید با اجرای آن این افکت را به تصاویرتان بدهید. با این کار نه تنها باعث زیبایی سایت می شوید که خود همین جلوه های گرافیکی زیبایی سایت را دوبرابر می کنند. با افکت هایی که به تصاویر و عکس ها با کیفیت بالا می دهیم جذابیت طراحی سایت ما بالاتر می رود و اینجاست که کاربر علاقمند و جذب سایت ما می شود. مثلا یکسری عکس هایی هستند که با قرار دادن موس روی آن ها حالت محو می دهید یا اینکه افکت های دیگر. در هر صورت با این کار توجه کاربر را به این تصاویر جلب کرده و عکس هایتان آنقدر خاص می شود که تاثیر بسیار خوبی روی بهینه سازی سایت و یا سئو سایت هم خواهد داشت. در ادامه این اسکریپت های جاوا برای این کار را برایتان قرار دادیم که انقدر هم سخت نیست، به ادامه توجه کنید :
<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>
در کد نوشته شده در بالا همانطور که می بینید آدرس تصویر را می توانید درج کنید و به راحتی افکت موردنظر را روی سایت اجرا کرده و محو کردن تصویرهای سایت تان را در صفحه های سایت انجام دهید.
