بسم الله الرحمن الرحيم
jParallax عبارة عن تطبيق JQuery , يقوم بتحويل العناصر المختارة إلى
نافذة أو عرض , فتتحرك هذه الطبقات تبعا لحركة مؤشر الفأرة
لمشاهدة تطبيق عملي لفكرة عمل الـParallax تفضل بزيارة الرابط التالي
:
تفضل
استخدام jParallax
سأقوم بتبسيط كيفية الإستخدام بخطوات عملية وسهلة .
إضافة الـHTML
نصنع قائمة UL , وبداخلها LI ونقوم بعمل DIV ونسميه parallax كي نضيف الـCSS
<div id="parallax"> <img style="width: 400px;" src="images/0.png" alt="" />
<img style="width: 500px;" src="images/1.png" alt="" />
<img style="width: 600px;" src="images/2.png" alt="" />
<img style="width: 550px;" src="images/3.png" alt="" /></div>
إضافة الـCSS
بكل بساطة أضف الكود التالي إلى ملف الـStyle Sheet أو إلى صفحة العمل مباشرة
راجع
لمعرفة كيفية ادراج كود الـCSS
#parallax
{position:relative; overflow:hidden; width:800px; height:450px;border:none;
margin:0 auto 20px auto;}
إضافة ملفات الـJavaScript
نقوم بتحميل الثلاث ملفات الخاصة بالتطبيق وهي إضافة الـLightBox و إطار العمل
jQuery آخر اصدار , وكذلك ملف الإضافة نفسه الخاص بالـParallax
ونقوم بإضافة الكود التالي إلى وسم الـHEAD في الصفحة
<script src="js/jquery-1.3.2.js" type="text/javascript"><!--mce:0--></script>
<script src="js/jquery.lightbox-0.5.min.js"
type="text/javascript"><!--mce:1--></script>
<script src="js/jquery.jparallax.js"
type="text/javascript"><!--mce:2--></script>
وأيضا كود الـJavaScript
<script type="text/javascript">
<!--
// jQuery.noConflict();
// RUN
jQuery(document).ready(function(){
jQuery('#parallax').jparallax({yparallax:false},{xtravel: '100px'},{xtravel:
'300px'});
$(function() {
$('#gallery a').lightBox();
});
});
//-->
</script>
إضافة الصور
نضيف بعض الصور في كود الـHTML الذي قمنا بكتابته
مسبقا ( راجع إضافة الـHTML )
مواقع تستخدم التطبيق :
قريبا موقعي بإذن الله 
أخيرا يمكنك تحميل التطبيق الذي قمت به
من هنا
تحياتي ,
ياسر مصطفى كامل
التعليقات (5 )
الف شكر اخي العزيز ” ياسر مصطفى ” على هالدرس الرائع
وارجوا منك التأكد من الملف المرفق ( المثال ) ، لانهُ لا يعمل بالشكل المطلوب !
تحياتي
( ردّ )
مرحبا أخي ياسر مصطفى
وما شاء الله درس جميل والتطبيق راائع ولأول مرة يمر علي
وفي انتظار اضافته لموقعك
تحياتي لك
( ردّ )
مرحبا عزيزي نذار
, قمت بإنزال الملف والتأكد من أنه يعمل بشكل صحيح , وقد كان , ما المشكلة بالظبط 
!
مرحبا أخي محمد القرني
الحمد لله إنه عجيك , بإذن الله قريبا …
تحياتي ,
( ردّ )
يااااي مذهل..
ايضاً لأول مره أعرف ..افكر بالتطبيق لاحقاً
شوكراً
( ردّ )
ما شاء الله فعلاً شيء رائع
( ردّ )