هذا تأثير خاص لأساليب مختلفة من عروض شرائح تخطيط الصفحة مع تأثيرات رائعة للغاية. في هذا التأثير الخاص ، يتم تبديل عرض الشرائح من خلال أزرار التنقل الأمامية والخلفية ، والتأثيرات في كل شريحة لها تأثيرات تخطيط مختلفة.
يستخدم تأثير الشريحة هذا anime.js لإنشاء تأثيرات الرسوم المتحركة للشرائح ويستخدم العديد من خصائص CSS3. يتطلب أحدث إصدار من المتصفحات الحديثة لمعرفة التأثيرات. بالنسبة لمتصفح IE ، يمكن رؤية التأثيرات السابقة في المتصفحات مع IE11 وما فوق. لا يمكن رؤية التأثير الأخير لأن متصفح IE لا يدعم سمة SVG Clip-Path.
كيفية استخدام
هيكل HTML
هيكل HTML الأساسي لهذه الشريحة هو كما يلي: كل شريحة لها فئة من فئة التصميم الخاصة بها وخاصية وضع البيانات لإنشاء تأثيرات الرسوم المتحركة الخاصة بها.
<viv> <div data-layout = "layout1"> <viv> <viv> <div style = "prossection-image: url (img/1.jpg) ؛"> </viv> </viv> <viv> <div style = "backgroundy-image: url (IMG/2.JPG) ؛ url (img/3.jpg) ؛ "> </viv> </viv> </viv> <viv> <h3> الآن أو أبدًا </h3> <p> ... <a href ="#"> اقرأ المزيد </a> </p> </p> </fiv> <!-/slide-> /عرض الشرائح ->
نمط CSS
هنا هو نمط CSS لأحد التخطيطات:
/ * التصميم 1: 3 صور الشبكة */. شريحة-layout-1 .slide__ig {الموضع: Absolute ؛ العرض: calc (50 ٪ - 1em) ؛ . الارتفاع: 100 ٪ . الارتفاع: حساب (50 ٪ - 0.5em) ؛ .تظهر النتائج في الشكل أدناه:
جافا سكريبت
يتم تعريف تأثيرات الرسوم المتحركة لكل تصميم شريحة في ملف JS. الهيكل هو: [اسم التصميم]: {out: {sevigating out properties} ، في: {التنقل في الخصائص}}. يمكن ضبط تأثيرات الرسوم المتحركة المختلفة للدخول وترك الشرائح. الرمز التالي هو رمز العينة للتخطيط الأول:
mlslideshow.prototype.options = {// موضع البداية. StartIdx: 0 ، // تكوين التصميم. ] } ، prev: function (el ، index) {return anime.random (0 ، 15) ؛ }} ، التعتيم: 0 ، المدة: 1200 ، تسهيل: 'Easeoutquint' ، headsdelay: 80} ، في: {resetProps: {translatex: {next: '100 ٪' ، prev: '-100 ٪'} ، rotatez: {next: function (el ، index) {propect aime.rodom (0 ، 15) ؛ } ، prev: function (el ، index) {return anime.random (-15 ، 0) ؛ }} ، التعتيم: 0 ،} ، translatex: '0 ٪' ، rotatez: 0 ، التعتيم: 1 ، المدة: 700 ، تسهيل: 'EaseoutQuint' ، headsdelay: 80}} ، layout2: { / * /} ، layout3: { / * /} ، / * /}ما سبق هو كل محتوى هذه المقالة. آمل أن يكون ذلك مفيدًا لتعلم الجميع وآمل أن يدعم الجميع wulin.com أكثر.