في مقالة سابقة وضّحنا طريقة عمل حركات بواسطة css3 transitions الآن سنستخدم طريقة مشابهة في عمل شرائح متحركة.
أولا نضح الشرائح بجانب بعضها عبر float:left أو right حسب الاتجاه داخل حاوية واحدة عرضها يكفي لإظهارها جميعا. ثم نضح حاوية ثانية تحتوي عرضها بعرض الشريحة الواحدة لكنها overflow:hidden وهنا تكمن الحيلة حيث نحرك الحاوية الداخلية لليمين واليسار فلا يظهر منها إلى شريحة واحدة.
كذلك لاحظ أن أضع متغير علامة على onmouseover/onmouseout حتى أعطل الحركة حتى يتمكن المستخدم من التفاعل معه الشريحة.
يمكنك استخدام jQuery أو ZeptoJS أو أي إطار جافاسكربت لتعميم الكود أو لإضافة onclick على الأزرار حتى تنتقل للشريحة الفلانية عبر
onlclick="slide_cur=X;"
ليست هناك تعليقات:
إرسال تعليق