الفكرة :
هل شعرت من قبل ان أظهار محتوى موقعك صعب للغاية؟
اليوم ولأول مرة على الوب العربى طريقة جديدة وفريدة لأظهار صورك ومحتويات موقعك بشكل جذاب ورائع
الفكرة كالتالى :
يقوم سكربت wave Display بإظهار مصغرات لصور موقعك على شكل موجة مائية.
عند الضغط على الصورة المصغرة مرة واحدة تقوم بعمل تكبير للصورة وتقريبا وعند الضغط مرة أخرى تقوم بأظهار مساحة كتابة تحتوى على وصف الصورة + مقال يجانب الصورة نفسها
طريقة تعديل الصور :
كود:
<div class="wd-element"> <img src="images/1.jpg" alt="Some Image" /> <div class="wd-info"> <div class="wd-info-title"> <h2>Some title</h2> </div> <div class="wd-info-desc"> <p>Some Description</p> </div> </div> </div>
<div class="wd-element"> <img src="images/1.jpg" alt="Some Image" /> <div class="wd-info"> <div class="wd-info-title"> <h2>Some title</h2> </div> <div class="wd-info-desc"> <p>Some Description</p> </div> </div> </div>
الخيارات :
هناك العديد من الخيارات التى توجد بهذا السكربت الرائع لتعديل التأثيرات الجميلية الخاصة بالموجة.
فلننظر إلى هذة الخيارات معا :
كود:
// speed for the animations easing : 'easeInOutExpo', // easing for the animations minImgW : 50, // minimum width the thumbnail // will have (randomly set) maxImgW : 90, // maximum width the thumb // image will have (randomly set) minImgAngle : -15, // minimum rotation angle the // thumbnail will have (randomly set) maxImgAngle : 15, // maximum rotation angle // the thumbnail will have (randomly set) leftFactor : 40, // space between images on the x-axis startFactor : 1, // the higher this value, the more // space between the first thumbnail and // the left of the container sinusoidFunction : { A : 100, // amplitude T : 700, // period P : 0 // phase }
روابط مختصرة :
فلننظر إلى هذة الخيارات معا :
كود:
// speed for the animations easing : 'easeInOutExpo', // easing for the animations minImgW : 50, // minimum width the thumbnail // will have (randomly set) maxImgW : 90, // maximum width the thumb // image will have (randomly set) minImgAngle : -15, // minimum rotation angle the // thumbnail will have (randomly set) maxImgAngle : 15, // maximum rotation angle // the thumbnail will have (randomly set) leftFactor : 40, // space between images on the x-axis startFactor : 1, // the higher this value, the more // space between the first thumbnail and // the left of the container sinusoidFunction : { A : 100, // amplitude T : 700, // period P : 0 // phase }
روابط مختصرة :