نشر على ٢٥-٠٩-٢٠١٩

كيفية إعادة إنشاء بانكسي الفني تقطيع باستخدام CSS الشبكة

CodePen المدرجة

يضم تمزيق

يوم الجمعة ، مزقت بانكسي العالم مرة أخرى من خلال تمزيق "Girl With Balloon" بعد الحصول على 1.4 مليون دولار في المزاد. بينما يناقش الجميع ما إذا كان العمل الفني قد ارتفع أو انخفض بسبب هذا ، اعتقدت أنه سيكون من الجيد إعادة التأثير في CodePen.IO باستخدام CSS Grid. يمكنك التحقق من نتائج جلسة حرة لمدة ساعة واحدة على CodePen ومواصلة القراءة للحصول على نظرة عامة سريعة على نهجي.

لم أكن خجولة لإنشاء مجموعة من العناصر حول هذا الحل القاسي ، لذلك تراكمت على سلسلة من divs تم وضعها في الغالب بشكل مطلق ثم ركزت على العنصر الأصل #piece في منتصف الصفحة.

  
    
      
        
        
        
        
        
        
        
        
        
        
        
             
          

مباشرة داخل #piece هما divs: #window و #frame. #frame هي ببساطة صورة إطار عمل فني 100٪ × 100٪ سنضعها فوق كل شيء. يقع #window أدناه ويتركز أيضًا داخل #piece. تحتوي #window على div #paint التي تتضمن كلا من الصورة الأصلية و # تمزيقه. يحدث السحر الحقيقي داخل # تمزيقه عبر سلسلة من divs .shred التي سنستخدمها مزيجًا من صورة الخلفية وشبكة CSS لإنشاء إصدارات تمزيقها من صورة العمل الفني لدينا. كل. shred مواقف الخلفية قليلا إلى اليسار.

#shredded {
  الخلفية: عنوان url (ARTWORK_URL) ؛
  أسفل: 0؛
  عرض: الشبكة.
  شبكة عمود الفجوة: 3px ؛
  شبكة أعمدة القالب: كرر (11 ، 1fr) ؛
  الموقف: مطلق ؛
}
#shredded .shred: nth-child (1) {background-position: 0٪ 0٪؛ }
#shredded .shred: nth-child (2) {background-position: 10٪ 0٪؛ }
#shredded .shred: nth-child (3) {background-position: 20٪ 0٪؛ }
#shredded .shred: nth-child (4) {background-position: 30٪ 0٪؛ }
#shredded .shred: nth-child (5) {background-position: 40٪ 0٪؛ }
#shredded .shred: nth-child (6) {background-position: 50٪ 0٪؛ }
#shredded .shred: nth-child (7) {خلفية الموقع: 60٪ 0٪؛ }
#shredded .shred: nth-child (8) {خلفية الموقع: 70٪ 0٪؛ }
#shredded .shred: nth-child (9) {خلفية الموقع: 80٪ 0٪؛ }
#shredded .shred: nth-child (10) {background-position: 90٪ 0٪؛ }
#shredded .shred: nth-child (11) {background-position: 100٪ 0٪؛ }

بعد ذلك ، يقوم حل hacky الخاص بي بتمرير #painting بأكمله باستخدام translateY مع تغيير حجم ارتفاع العمل الفني الأصلي إلى 0. بما أن div #original يتم وضعه على أعلى #redred و # تمزيقه إلى أسفل ، فإن طرحه يكشف عن تمزيقه الصورة أدناه. يمكنك بسهولة إنجاز هذه الرسوم المتحركة مباشرة في CSS. ومع ذلك ، قررت رمي ​​في Anime.JS لذلك كان لدي المزيد من السيطرة على إيقاف وإعادة تعيين الرسوم المتحركة لأنني كنت أعرف أنني ذاهب لإضافة القدرة على تغيير الصورة. إليك كيفية عمل Anime.JS على العمل السهل للرسوم المتحركة:

أنيمي ({
  الأهداف: "الأصلي" ،
  الارتفاع: 0
  المدة: 100000 ،
  تخفيف: "الخطي"
})
أنيمي ({
  الأهداف: "#painting" ،
  ترجم Y: '100 ٪'
  المدة: 100000 ،
  تخفيف: "الخطي"
})

وهذا عن ذلك. يمكنك التنقيب في بقية CodePen لترى كيف سرت مني القدرة على تغيير الصورة باستخدام مكتبة Javascript Load Image الممتازة من Vue و Blue Imp.

كان هذا اختراقًا لمدة ساعة واحدة لذلك أنا متأكد من أن القراء سيكون لديهم حل أكثر أناقة في الاعتبار. هل قال شخص التدرجات الخطية؟ أحب أن أسمع كيف ستفعل ذلك ونوع التحسينات التي قد تقوم بها. تمزيق سعيد!

أنظر أيضا

يجب أن أعترف الهزيمةأفضل فناني الرسم في العالم: LI و LIAO و LEBEAUT و VILKEVICIUSبانكسي آرت ستانت هي عبقرية اقتصاديةاستفزاز بدون خوفالعمل يتبع الهويةالحالات استخدام كارت