الاضافة ستسهل على الكثيرين البحث عن القوالب أو الاضافات .

وواليكم خطوات شرح الاضافة وكيفية رفعها  ….

 

1- قم بتحميل الاضافة

 

2- والآن قم بالدخول إلى منصة الووردبريس الخاصة بموقعك…

3- والآن اذهب إلى  “Plugins” > واختر منها “Add New”

4- والآن انقر على زر  “Upload” الموجود فى القائمة العلوية.

 

5-واختر الملف المضغوط الذى قمت بتحميله سابقا على جهاز الكمبيوتر الخاص بك.

6- والآن انقر “Install Now”

7-وقت ما قمت بتثبيته انقر على زر Activate

 

8- وهنا سيظهر لك فى أسفل القائمة الاضافة الجديدة.

حذف

اليوم معى لكم سكريبت اختصار روابط اكثر من رائع وصغير جدا مع مميزات كثير جدا .

مع وجود صفحة تحويل يمكنك جعل الزائر ينتظر او يتم تحويله فى لحظة.

و هذا رابط التحميل

free short url script

 تنصيب الاسكريبت عادي جدا زي اي سكريبت

user : admin
pass :admin

Activatedrinks.com

في البدايه القسم الأول من الموقع سوف تلاحظ أن هناك زجاجه هذه الزجاجه يمكن للمستخدم ان يقوم بفتحها ويقوم بتدوير الغطاء كما يحدث بالواقع!

والقسم الثاني يعتمد إعتمادا كبيرا علي الرسومات الكبيره والجريئه في نفس الوقت وعلي الألون الحقيقيه للمنتج نفسه.

الموقع مصنوع من الجافا سكريبت وليس الفلاش لذا لن يتعين علي المستخدم انتظار وقت طويل للتحميل ولكنه سوف يكون سريعا وخفيفا ومريحا للزائر
لأن الفلاش قد انتهي وهو تقنيه رديئه الإستخدام وتاخذ وقتا طويلا بالتحميل

بمجرد أن يتم تحميل موقع نبدأ منطق تطوير الرسوم المتحركة. وتتألف من مكونين رئيسيين :

جافا سكريبت لعمل تويست
الفلاش للرسوم المتحركه الذي يعرض التقدم

نحقق ذلك عن طريق استخدام CSS لتحديد موقف الحركة  :

#intro-twist-wrapper {
position: fixed;
width: 100%;
height: 100%;
top: 0;
left: 0;
}

لكي نرسم مخططا للحركه نحن بحاجه الي تحديد عنصريين اساسيين وهما بدايه ونهايه الحركه. نحن ندعو هذه scrollMin وscrollMax.والفرق بينهم يتيح للزائر أن يقوم بالتدوير للغطاء كما يريد. نحن نسمي هذا scrollDistance.

لتحقيق هذا نطبق الصيغة التالية :

var scrollDistance = maxScroll – minScroll;
// …
var animationProgress = (currentScroll – minScroll) / scrollDistance;

وهذا الكود لتمرير الموقف ككل

الجزء الثاني العمق والمنظر:

ونحن الأن بحاجه إلي إضافة عمق ومظهر للزجاجات والجزيئات لكي يصبح الموقع حيويا ومتدفق ومتنوع بنفس الوقت.

خلق تيار الجسيمات

والأن لنجعل الجزيئات تتحرك وكأنها علي تيار أي نقوم بخلق تيار يحرك الجزيئات الموجوده علي صفحه الويب لكي بيدو الموضوع أكثر حيويه

for( var i=0; i<numParticles; i++ ){
var y = i * spacing;
var x = radius * Math.sin( y );
$("#my-particle-id").css( "left", windowWidth/2 + x );
$("#my-particle-id").css( "top", y );
}

ولتحقيق هذا عليك أن تقوم بتوير محو x قليلا بهذا الكود:

var delta = 2*Math.PI * y / sectionHeight;
var x = Math.sin( delta );

خلق العمق والحركة

وأنه كان لدينا الآن تدفق الجزيئات بمعدل الأداء اللائق ، وحان الوقت لوضع بعض الحياة فيها. بدلا من مجرد السماح للتدفق جزيئات من اليسار إلى اليمين أردنا منهم للالتفاف حول بعضهم البعض والعمل كدوامه من الجزيئات.

لجعل هذا يحدث عليك أن تقوم ببناء هذه الداله المسؤوله عن توير الجزيئات بالشكل الذي رايته:

var delta = 2*Math.PI * y / sectionHeight;
var x = Math.sin( delta );

var z = Math.cos( delta );

if( z < -0.9 || z > 0.9 ){
particle.addClass("layer3");
} else if( z < -0.4 || z > 0.4 ){
particle.addClass("layer2");
} else {
particle.addClass("layer1");
}

والأن أصبح لدينا العديد من الجزيئات التي تلتف حول محو x وحول محور y لتعطي لنا التأثير الذي نتمناه

وهذا التاثير سوف يعطي اختلافا بسيط للأشياء بدل من الحركه العموديه فقط:

والأن تجد ان الجافا سكريبت فعلا يمكنك العمل معها بكل سهوله و باعلي جوده وتحكم