جافاسكريبت - كيف يمكنني إنشاء ترس دوار باستخدام CSS3 و jQuery؟

لدي الموقع التالي الذي هو بتقنية فلاش مع تروس دوارة في الخلفية:

http://thedrivepartnership.com/index.html

أود إنشاء شيء مشابه باستخدام CSS و JavaScript - هل يعرف أحد أي أمثلة متوفرة؟

الإجابة رقم 1

أفترض أنه يمكنك إنشاء حاوية تملأ النافذة، ثم وضع معداتك في تلك الحاوية.

على سبيل المثال، قد تضع حاوية تحتوي على الرسوم المتحركة في أعلى الملف بمؤشر z منخفض جدًا يتناسب مع النافذة وله موضع ثابت. ستضع محتواك فوقها وتتظاهر بأن css4 قد صدر للتو مع دعم لملفات .avi كخلفيات. مجرد مزاح. الكود:

<body>
    <div id="cogs">
        // Your awesome cog pictures
    </div>
    <div id="content">
        // Your awesome content
    </div>
</body>

قد يبدو CSS لحاوية الرسوم المتحركة هكذا:

#cogs {
    width: 100%;
    height: 100%;
    position: fixed;
    text-align: center;
    overflow: hidden;
    z-index: -100;
}

تعمل الرسوم المتحركة القائمة على CSS هكذا، ولكن مع اختلاف بادئات المورد:

@keyframes rotateCogOne {
    0% {
        -webkit-transform:rotate(0deg);
    }
    100% {
        -webkit-transform:rotate(360deg);
    }
}

ثم تقوم بتطبيق الرسوم المتحركة هكذا:

#cogOne {
    animation: rotateCogOne 60s infinite linear;'
    // which means...
    animation: [name], [duration], [repeat], [easing]
}

دون كتابة نص برمجي لتحريك داخل عنصر القماش، أعتقد أنك ستكون محدودًا إلى حد كبير. على وجه الخصوص، سيكون من الصعب (أو قد يكون مستحيلًا؟) تغيير حجم الحركة لتناسب دقات مختلفة باستخدام CSS و HTML فقط. ومع ذلك، يمكن أن تبدو رائعة، لذا ربما لا يزال يلبي احتياجاتك. أيضًا، حيث لا تدعم الرسوم المتحركة، يمكنك لا يزال أن يكون لديك مجموعة رائعة من التروس في الخلفية، أو ببساطة العودة إلى الرسوم المتحركة المستندة إلى جافاسكريبت.

لقد جمعت مثالًا أساسيًا عن كيفية القيام بذلك باستخدام CSS و HTML. ها هو ملء الشاشة. أعتقد أن هناك مشاكل أخرى... هذا بالتأكيد غير مكتمل... لكن آمل أن يكون خطوة في الاتجاه الصحيح. يمكنك تمديد نفس الأساليب لعدد أكبر من التروس لتشبه صفحتك الحالية أكثر.

إذا قررت اتخاذ هذا المسار (ولست متأكدًا من أنني أوصي به)، سيكون من الأفضل تصميم الرسوم المتحركة بدقة تبدو جيدة في نطاق حوالي 800x600 حتى ربما 1400x100. إذا كانت لديك إحصاءات، فاعتمد على حجم نافذة المستخدمين الأكثر شيوعًا.

الإجابة رقم 2

جرب هذا في كروم. هذا خاص بمتصفحات ويبكيت، كروم وسفاري. استبدل "-webkit" بـ "-moz" لموزيلا و "-o" لأوبرا. أو قم بإزالته فقط لأحدث إصدارات المتصفحات.

.cog{
    -webkit-animation-name: spin;
    -webkit-animation-duration: 60000ms;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-direction: normal;
    -webkit-animation-timing-function: linear;
}

أو

 .cog{
    animation-name: spin;
    animation-duration: 60000ms;
    animation-iteration-count: infinite;
    animation-direction: normal;
    animation-timing-function: linear;
}