منتدى الابداع العربي

للإبداع لمسات ! ... ولمسـات الإبــداع إختصاصـنا !
 
الرئيسيةالرئيسية  المنشوراتالمنشورات  البوابةالبوابة  التسجيلالتسجيل  دخولدخول  


{ اتيليه فنون التقنيات } برمجيات وتقنيات حصرية جدا
 

 { اتيليه فنون التقنيات } برمجيات وتقنيات حصرية جدا

اذهب الى الأسفل 
كاتب الموضوعرسالة
JavaScript
سوبر الإبداع
سوبر الإبداع
JavaScript

ذكر
العقرب
عدد المساهمات : 116
نقاط النشاط : 178
السٌّمعَة : 24
بلد العضو : { اتيليه فنون التقنيات } برمجيات وتقنيات حصرية جدا  112
العمر : 29

{ اتيليه فنون التقنيات } برمجيات وتقنيات حصرية جدا  Empty
مُساهمةموضوع: { اتيليه فنون التقنيات } برمجيات وتقنيات حصرية جدا    { اتيليه فنون التقنيات } برمجيات وتقنيات حصرية جدا  Emptyالأحد أغسطس 26, 2018 11:01 pm

السلام عليكم ورحمة الله وبركاته





مرحبا من جديد اخوانى الاعضاء الكرام 
هذا الموضوع خاص جدا بـ عرض اعمالى وبعض التقنيات الحديثة الغير مرئى هنا وهناك 
مما قد يساعد اعضائنا الاحباء بكل جديد ومطور باحتراف جدا 

لذا يمنع منعا باتا بأى رد هنا بشكل نهائى 



اقتباس :

..وَلَا يَغْتَب بَّعْضُكُم بَعْضاً أَيُحِبُّ أَحَدُكُمْ أَن يَأْكُلَ لَحْمَ أَخِيهِ مَيْتاً فَكَرِهْتُمُوهُ وَاتَّقُوا اللَّهَ إِنَّ اللَّهَ تَوَّابٌ رَّحِيمٌ }.من رد عن عرض أخيه رد الله عن وجهه النار






الرجوع الى أعلى الصفحة اذهب الى الأسفل
http://3arb-way.a7larab.net/
JavaScript
سوبر الإبداع
سوبر الإبداع
JavaScript

ذكر
العقرب
عدد المساهمات : 116
نقاط النشاط : 178
السٌّمعَة : 24
بلد العضو : { اتيليه فنون التقنيات } برمجيات وتقنيات حصرية جدا  112
العمر : 29

{ اتيليه فنون التقنيات } برمجيات وتقنيات حصرية جدا  Empty
مُساهمةموضوع: كود جديد لعمل اشعار بتواجدك فى الصفحات   { اتيليه فنون التقنيات } برمجيات وتقنيات حصرية جدا  Emptyالأحد أغسطس 26, 2018 11:59 pm

كود جديد لعمل اشعار بتواجدك فى الصفحات ؟



هذا الرمز يعمل على كل النسخ ماعادة النسخة الجديدة 


وصف: يعمل هذا الرمز على اظهار اشعار بتواجدك فى اى صفحة فى المنتدى اى يعرض لك اسم الرابط الذى قمت بـ الضغط عليه مسبقا 

يعنى انا لو دخلت فى صفحة البحث راح يكتب لك اشعار بأنك فى صفحة البحث والخ 


الكود قمت بتصميمه بعد مشاهدة من قبل لذلك قمت بـ صنعه بأختصار شديد ليتفاعل مع منتديات احلى منتدى 


صورة الرمز 

{ اتيليه فنون التقنيات } برمجيات وتقنيات حصرية جدا  Ocia_a10
https://i.servimg.com/u/f38/19/42/07/18/ocia_a10.png

ادخل الى الجافا سكربت , ثم ضع الكود التالى , وحدد مكانه: فى كل الصفحات

الكود:
$(function(){
    $(function(){
        var a=document.title;
        $('#fa_toolbar').after('<div id="wehba_title"class="primary_title"style="display:none;">'+a+'</div>');
        var b=$('#wehba_title').css('width');
        $('#wehba_title').css('right',''+b+'px');
        $('#wehba_title').delay('1000').slideDown().delay('4000').slideUp()
    })
});
من هنا يمكنك تحديد من اليمين الى اليسار
اليمين right
اليسار left
الكود:
$('#wehba_title').css('right',''+b+'px');
ادخل الى ورقة التصميم الـ css وضع الرمز التالى 

الكود:
div#wehba_title{
  font-family:Helvetica,Arial,sans-serif;
  color:#fff;
  font-size:22px;
  font-weight:700;
  text-transform:uppercase;
  text-decoration:none;
  text-align:center;
  display:inline-block;
  cursor:pointer;
  border-radius:4px;
  padding: 22px 24px 32px;
  text-transform:none;
  top:52px;
  z-index:999;
  height:30px;
  line-height: 10px;
  position:fixed;
  left:1px;
}

.primary_title {
    color: #FFF;
background:#323232;
  transition:box-shadow .28s cubic-bezier(0.4,0,0.2,1);
  box-shadow:0 3px 4px 0 rgba(0,0,0,0.19),0 6px 13px 0 rgba(0,0,0,0.24);
}


والقادم اجمل انشاء الله تعالى 
يتابع...



اقتباس :

..وَلَا يَغْتَب بَّعْضُكُم بَعْضاً أَيُحِبُّ أَحَدُكُمْ أَن يَأْكُلَ لَحْمَ أَخِيهِ مَيْتاً فَكَرِهْتُمُوهُ وَاتَّقُوا اللَّهَ إِنَّ اللَّهَ تَوَّابٌ رَّحِيمٌ }.من رد عن عرض أخيه رد الله عن وجهه النار






الرجوع الى أعلى الصفحة اذهب الى الأسفل
http://3arb-way.a7larab.net/
JavaScript
سوبر الإبداع
سوبر الإبداع
JavaScript

ذكر
العقرب
عدد المساهمات : 116
نقاط النشاط : 178
السٌّمعَة : 24
بلد العضو : { اتيليه فنون التقنيات } برمجيات وتقنيات حصرية جدا  112
العمر : 29

{ اتيليه فنون التقنيات } برمجيات وتقنيات حصرية جدا  Empty
مُساهمةموضوع: كود: استشعار بتواجد المحتوى فى المساهمات    { اتيليه فنون التقنيات } برمجيات وتقنيات حصرية جدا  Emptyالخميس أغسطس 30, 2018 2:24 am

السلام عليكم ورحمة الله وبركاته 




كود: استشعار بتواجد المحتوى فى المساهمات 

نقدم لكم اليوم كود فريد من نوعه, وهو استشعار بتواجد المحتوى فى المساهمات

الرمز يخصص فى شعوره بتواجد الاشايء التالية ؟

الاكواد,الصور,الروابط,الاقتباس,الاكواد,الوجوه الضاحكة,تعديل المساهمات 

مما قد يؤدى الى اظهار ايقونات عند المرور عليها يحدد لك استشعار بـ وجود المحتوى التى اشرت اليه 

تنويه: هذا العمل على النسخة phpBB3 


صورة للمعاينه

{ اتيليه فنون التقنيات } برمجيات وتقنيات حصرية جدا  22222210
https://i.servimg.com/u/f49/19/21/93/22/22222210.gif

ادخل الى القوالب والتومبلات , ثم قالب viewtopic_body ثم ابحث عن الرمز التالى ؟

الكود:
{postrow.displayed.EDITED_MESSAGE}
قم بـ استبداله بـ الرمز التالى ؟

الكود:
            <div class="wehba_Editgetnotif">{postrow.displayed.EDITED_MESSAGE}</div>
وفى نفس القالب ابحث عن الرمز التالى ؟

الكود:
<div class="postbody">
ثم ضع هذا الرمز اسفله مباشرة 

الكود:
  <div class="wehba_totalCompt" style="width: 20px;height: auto;margin-top:45px;position: absolute;float: right;margin-right: -27px;">
  <div class="wehba_compCita" style="display:none;border-bottom:1px solid #eee;cursor:pointer;line-height:14px;height:14px;width:14px;padding: 2px 3px;font-size: 12px;text-align:center;color: #fff;"></div>
  <div class="wehba_comptCode" style="display:none;border-bottom:1px solid #eee;cursor:pointer;line-height:14px;height:14px;width:14px;padding: 2px 3px;font-size: 12px;text-align:center;color: #fff;"></div>
  <div class="wehba_comptSpoiler" style="display:none;border-bottom:1px solid #eee;cursor:pointer;line-height:14px;height:14px;width:14px;padding: 2px 3px;font-size: 12px;text-align:center;color: #fff;"></div>
  <div class="wehba_compLink" style="display:none;border-bottom:1px solid #eee;cursor:pointer;line-height:14px;height:14px;width:14px;padding: 2px 3px;font-size: 12px;text-align:center;color: #fff;"></div>
  <div class="wehba_compImg" style="display:none;border-bottom:1px solid #eee;cursor:pointer;line-height:14px;height:14px;width:14px;padding: 2px 3px;font-size: 12px;text-align:center;color: #fff;"></div>
  <div class="wehba_compSmil" style="display:none;border-bottom:1px solid #eee;cursor:pointer;line-height:14px;height:14px;width:14px;padding: 2px 3px;font-size: 12px;text-align:center;color: #fff;"></div>                                
  <div class="wehba_compEdit" style="display:none;border-bottom:1px solid #eee;cursor:pointer;line-height:14px;height:14px;width:14px;padding: 2px 3px;font-size: 12px;text-align:center;color: #fff;"></div>
                          </div>
ثم ادخل الى الجافا سكربت وضع الكود التالى مع تحديد مكانه فى المواضيع

الكود:

//وهبة الساحر /2018
$(function(){
    $('.postbody').each(function(){
        $(this).find('cite').closest('blockquote').addClass('wehba_QuoteCite');
        $('.wehba_Editgetnotif').hide();
        var wehba_colorQuote=$(this).find('blockquote').css('borderColor');
        var wehba_colorCode=$(this).find('dl.codebox dt:contains("الكود:")').css('borderColor');
        var wehba_colorSpoiler=$(this).find('.codebox.spoiler').css('borderColor');
        var wehba_comptQuote=$(this).find('blockquote').length;
        var wehba_comptCode=$(this).find('dl.codebox dt:contains("الكود:")').length;
        var wehba_comptSpoiler=$(this).find('.codebox.spoiler').length;
        var wehba_compLink=$(this).find('.content').find('a[href]:not(.mentiontag)').length;
        var wehba_compEdit=$(this).find('.wehba_Editgetnotif').length;
        var wehba_compEditText=$(this).find('.wehba_Editgetnotif').text();
        var wehba_compImg=$(this).find('.content').find('img:not([longdesc])').length;
        var wehba_compSmil=$(this).find('.content').find('img[longdesc]').length;
        if(wehba_comptQuote){
            $(this).find('.wehba_compCita').show().attr('title','يوجد '+wehba_comptQuote+' اقتباس')
        }
        if(wehba_comptCode){
            $(this).find('.wehba_comptCode').show().attr('title','يوجد '+wehba_comptCode+' اكواد')
        }
        if(wehba_comptSpoiler){
            $(this).find('.wehba_comptSpoiler').show().attr('title','يوجد '+wehba_comptSpoiler+' اخفاء الرسائل')
        }
        if(wehba_compLink){
            $(this).find('.wehba_compLink').show().attr('title','يوجد '+wehba_compLink+' روابط')
        }
        if(wehba_compImg){
            $(this).find('.wehba_compImg').show().attr('title','يوجد '+wehba_compImg+' صور')
        }
        if(wehba_compSmil){
            $(this).find('.wehba_compSmil').show().attr('title','يوجد '+wehba_compSmil+' الوجوه الضاحكة')
        }
        if(wehba_compEdit){
            $(this).find('.wehba_compEdit').show().attr('title','معلومات: '+wehba_compEditText+'')
        }

        $('.wehba_compCita').each(function(){
            $(this).hover(function(){
                $(this).closest('.postbody').find('blockquote').css('borderColor',' red')
            }
            ,function(){
                $(this).closest('.postbody').find('blockquote').css('borderColor',wehba_colorQuote)
            })
        });
        $('.wehba_comptCode').each(function(){
            $(this).hover(function(){
                $(this).closest('.postbody').find('dl.codebox dt:contains("الكود:")').closest('dl').css('borderColor',' red')
            }
            ,function(){
                $(this).closest('.postbody').find('dl.codebox dt:contains("الكود:")').closest('dl').css('borderColor',wehba_colorCode)
            })
        });
        $('.wehba_comptSpoiler').each(function(){
            $(this).hover(function(){
                $(this).closest('.postbody').find('.codebox.spoiler').css('borderColor',' red')
            }
            ,function(){
                $(this).closest('.postbody').find('.codebox.spoiler').css('borderColor',wehba_colorSpoiler)
            })
        });
        $('.wehba_compSmil').each(function(){
            $(this).hover(function(){
                $(this).closest('.postbody').find('img[longdesc]').css('borderBottom','2px solid red')
            }
            ,function(){
                $(this).closest('.postbody').find('img[longdesc]').css('borderBottom','2px solid transparent')
            })
        });
        $('.wehba_compImg').each(function(){
            $(this).hover(function(){
                $(this).closest('.postbody').find('.content').find('img:not([longdesc])').css('borderBottom','2px solid red')
            }
            ,function(){
                $(this).closest('.postbody').find('.content').find('img:not([longdesc])').css('borderBottom','2px solid transparent')
            })
        });
        $('.wehba_compLink').each(function(){
            $(this).hover(function(){
                $(this).closest('.postbody').find('.content').find('a[href]:not(.mentiontag)').css('borderBottom','2px solid red')
            }
            ,function(){
                $(this).closest('.postbody').find('.content').find('a[href]:not(.mentiontag)').css('borderBottom','2px solid transparent')
            }
            )}
        )}
    )});

ثم ادخل الى ورقة التصميم الـ css وضع الكود التالى

الكود:
/*وهبة الساحر /2018*/
.postbody img[longdesc],.postbody .content img:not([longdesc]){border-bottom:2px solid transparent;padding-bottom: 3px;}

/*روابط*/
.wehba_compLink:before {content: "\f0c1";font-size: 12px;margin-left: -5px;position: absolute;color:black;font-family: FontAwesome;}
/*اقتباس*/
.wehba_compCita:before {content: "\f10e";font-size: 12px;margin-left: -6px;position: absolute;color:black;font-family: FontAwesome;}
/*اكواد*/
.wehba_comptCode:before {content: "\f121";font-size: 12px;margin-left: -6px;position: absolute;color:black;font-family: FontAwesome;}
/* اخر تعديل*/
.wehba_compEdit:before {content: "\f040";font-size: 12px;margin-left: -4px;position: absolute;color:black;font-family: FontAwesome;}
/* اخفاء الرسائل*/
.wehba_comptSpoiler:before {content: "\f079";font-size: 12px;margin-left:-6px;position: absolute;color:black;font-family: FontAwesome;}
/*صور*/
.wehba_compImg:before {content: "\f03e";font-size: 12px;margin-left: -6px;position: absolute;color:black;font-family: FontAwesome;}
/*الوجوه الضاحكة*/
.wehba_compSmil:before {content: "\f118";font-size: 12px;margin-left: -5px;position: absolute;color:black;font-family: FontAwesome;}



والى هنا ينتهى موضعنا لهذا اليوم والى لقائا اخر انشاء الله تعالى
يتابع ..



اقتباس :

..وَلَا يَغْتَب بَّعْضُكُم بَعْضاً أَيُحِبُّ أَحَدُكُمْ أَن يَأْكُلَ لَحْمَ أَخِيهِ مَيْتاً فَكَرِهْتُمُوهُ وَاتَّقُوا اللَّهَ إِنَّ اللَّهَ تَوَّابٌ رَّحِيمٌ }.من رد عن عرض أخيه رد الله عن وجهه النار






الرجوع الى أعلى الصفحة اذهب الى الأسفل
http://3arb-way.a7larab.net/
JavaScript
سوبر الإبداع
سوبر الإبداع
JavaScript

ذكر
العقرب
عدد المساهمات : 116
نقاط النشاط : 178
السٌّمعَة : 24
بلد العضو : { اتيليه فنون التقنيات } برمجيات وتقنيات حصرية جدا  112
العمر : 29

{ اتيليه فنون التقنيات } برمجيات وتقنيات حصرية جدا  Empty
مُساهمةموضوع: كود سلايد شو احترافى متعدد   { اتيليه فنون التقنيات } برمجيات وتقنيات حصرية جدا  Emptyالخميس أغسطس 30, 2018 3:50 pm



السلام عليكم ورحمة الله وبركاته


اليوم اقدم لكم كود سلايد شو احترافى متعدد  
مميزات : يتحرك تلقائى . به اكثر من صورة , منظم بشكل احترافى , منسق كـ مظهر والخ
تنويه: يعمل على جميع النسخ
صورة للمعاينه

{ اتيليه فنون التقنيات } برمجيات وتقنيات حصرية جدا  Hhhhh10
https://i.servimg.com/u/f62/19/08/62/30/hhhhh10.png

ادخل الى لوحة الادارة \مظهر المنتدى \ التومبلايتات و القوالب\ادارة عامة\overall_header

ثم قم بالبحث عن هذا الرمز ؟
الكود:
<!-- BEGIN switch_user_logged_in -->
ثم ضع هذا الكود اسفله مباشرة

الكود:
<script src="https://rawgit.com/hamesashek/slide/master/js/wehba.slider-26.7.0.min.js" type="text/javascript"></script>
<section id="{wehba}" class="borderwrap" data-name="المعرض">
    <div class="maintitle clearfix">
        <h2>المعرض</h2>
        <div class="contract" id="bc0" onclick="toggleCategory2('c0');">  &nbsp;</div>
    </div>
    <div id="c0" class="maincontent">
           <div id="jssor_1" style="width: 906px;">
        <!-- Loading Screen -->
        <div data-u="loading" class="jssorl-009-spin" style="position:absolute;top:0px;left:0px;width:100%;height:100%;text-align:center;background-color:rgba(0,0,0,0.7);">
            <img style="margin-top:-19px;position:relative;top:50%;width:100px;height:100px;" src="https://static.wixstatic.com/media/252f12_eefb5d7ac88d40458d4b919508db1238~mv2.gif" />
        </div>
        <div data-u="slides" style="cursor:default;position:relative;top:0px;left:0px;width:980px;height:380px;overflow:hidden;">
            <div data-p="170.00">
                <img data-u="image" src="https://i62.servimg.com/u/f62/19/21/93/22/63644-10.jpg" />
                <div data-u="thumb">
                    <img data-u="thumb" class="i" src="https://i62.servimg.com/u/f62/19/21/93/22/63644-10.jpg" />
                    <span class="ti"><a href="http://3arb-way.a7larab.net/t226-topic">أساتذة وطلاب الجامعات المصرية يتظاهرون تنديدًا بقرار ترامب بشأن القدس</a></span><br />
                    <span class="d">تظاهرون تنديدًا بقرار ترامب بشأن القدس</span>
                </div>
            </div>
            <div data-p="170.00">
                <img data-u="image" src="http://i21.servimg.com/u/f21/19/08/62/30/eu_00110.png" />
                <div data-u="thumb">
                    <img data-u="thumb" class="i" src="http://i21.servimg.com/u/f21/19/08/62/30/eu_00110.png" />
                    <span class="ti"><a href="http://3arb-way.a7larab.net/t208-topic">كود تغليف الفئات بأكملها للنسخة الثانية فقط</a></span><br />
                    <span class="d">وضع ثمانية قطع بين الفئات من الاسفل الاعلى شمال يمين</span>
                </div>
            </div>
            <div data-p="170.00">
                <img data-u="image" src="https://i62.servimg.com/u/f62/19/21/93/22/seo10.jpg" />
                <div data-u="thumb">
                    <img data-u="thumb" class="i" src="https://i62.servimg.com/u/f62/19/21/93/22/seo10.jpg" />
                    <span class="ti"><a href="http://3arb-way.a7larab.net/t168-topic">طرق اكتساب روابط خارجية بطريقة سليمة</a></span><br />
                    <span class="d">طرق اكتساب روابط خارجية</span>
                </div>
            </div>
            <div data-p="170.00">
                <img data-u="image" src="https://i62.servimg.com/u/f62/19/21/93/22/seo-po10.jpg" />
                <div data-u="thumb">
                    <img data-u="thumb" class="i" src="https://i62.servimg.com/u/f62/19/21/93/22/seo-po10.jpg" />
                    <span class="ti"><a href="http://3arb-way.a7larab.net/t167-topic">كيف يزحف جوجل الي موقعك</a></span><br />
                    <span class="d">كيف يتعرف جوجل علي موقعك</span>
                </div>
            </div>
            <div data-p="170.00">
                <img data-u="image" src="https://i62.servimg.com/u/f62/19/21/93/22/blog_s10.jpg" />
                <div data-u="thumb">
                    <img data-u="thumb" class="i" src="https://i62.servimg.com/u/f62/19/21/93/22/blog_s10.jpg" />
                    <span class="ti"><a href="http://3arb-way.a7larab.net/t164-topic">ارسال موقعك بطريقة احترافية الى جوجل كامل</a></span><br />
                    <span class="d">ارسال موقعك جوجل</span>
                </div>
            </div>
            <div data-p="170.00">
                <img data-u="image" src="https://i62.servimg.com/u/f62/19/21/93/22/13044510.jpg" />
                <div data-u="thumb">
                    <img data-u="thumb" class="i" src="https://i62.servimg.com/u/f62/19/21/93/22/13044510.jpg" />
                    <span class="ti"><a href="http://3arb-way.a7larab.net/t145-topic">(( مَقْبَرةُ ذِكْرَاكَ تَقْتُلُنِيْ ))</a></span><br />
                    <span class="d">الشعر الحزين</span>
                </div>
            </div>
            <div data-p="170.00">
                <img data-u="image" src="http://syncqatar.com/uploads/coming_soon.png" />
                <div data-u="thumb">
                    <img data-u="thumb" class="i" src="http://syncqatar.com/uploads/coming_soon.png" />
                    <span class="ti"><a href="#">قريبا</a></span><br />
                    <span class="d">قريبا</span>
                </div>
            </div>
            <div data-p="170.00">
                <img data-u="image" src="http://syncqatar.com/uploads/coming_soon.png" />
                <div data-u="thumb">
                    <img data-u="thumb" class="i" src="http://syncqatar.com/uploads/coming_soon.png" />
                    <span class="ti"><a href="#">قريبا</a></span><br />
                    <span class="d">قريبا</span>
                </div>
            </div>
             <div data-p="170.00">
                <img data-u="image" src="http://syncqatar.com/uploads/coming_soon.png" />
                <div data-u="thumb">
                    <img data-u="thumb" class="i" src="http://syncqatar.com/uploads/coming_soon.png" />
                    <span class="ti"><a href="#">قريبا</a></span><br />
                    <span class="d">قريبا</span>
                </div>
            </div>
             <div data-p="170.00">
                <img data-u="image" src="http://syncqatar.com/uploads/coming_soon.png" />
                <div data-u="thumb">
                    <img data-u="thumb" class="i" src="http://syncqatar.com/uploads/coming_soon.png" />
                    <span class="ti"><a href="#">قريبا</a></span><br />
                    <span class="d">قريبا</span>
                </div>
            </div>
             <div data-p="170.00">
                <img data-u="image" src="https://i62.servimg.com/u/f62/19/21/93/22/30551410.jpg" />
                <div data-u="thumb">
                    <img data-u="thumb" class="i" src="https://i62.servimg.com/u/f62/19/21/93/22/30551410.jpg" />
                    <span class="ti"><a href="http://3arb-way.a7larab.net/t227-topic">قرار ترامب بإعلان القدس عاصمة لإسرائيل وحد الفصائل الفلسطينية فى الأراضى المحتلة.. أعاد القضية من جديد</a></span><br />
                    <span class="d">توحيد الفصائل الفلسطينية</span>
                </div>
            </div>
            <div data-p="170.00">
                <img data-u="image" src="https://i58.servimg.com/u/f58/19/08/62/30/_ooua_10.png" />
                <div data-u="thumb">
                    <img data-u="thumb" class="i" src="https://i58.servimg.com/u/f58/19/08/62/30/_ooua_10.png" />
                    <span class="ti"><a href="http://3arb-way.a7larab.net/t220-topic">اخر المواضيع 3 اعمدة والاكثر مشاهدة</a></span><br />
                    <span class="d">اخر المواضيع 3 اعمدة</span>
                </div>
            </div>
        </div>
        <!-- Thumbnail Navigator -->
        <div data-u="thumbnavigator" class="jssort121" style="position:absolute;left:0px;top:0px;width:268px;height:380px;overflow:hidden;cursor:default;" data-autocenter="2" data-scale-left="0.75">
            <div data-u="slides">
                <div data-u="prototype" class="p" style="width:268px;height:68px;">
                    <div data-u="thumbnailtemplate" class="t"></div>
                </div>
            </div>
        </div>
        <!-- Bullet Navigator -->
        <div data-u="navigator" class="jssorb111" style="position:absolute;bottom:12px;right:12px;" data-scale="0.5">
            <div data-u="prototype" class="i" style="width:24px;height:24px;font-size:12px;line-height:24px;">
                <svg viewbox="0 0 16000 16000" style="position:absolute;top:0;left:0;width:100%;height:100%;z-index:-1;">
                    <circle class="b" cx="8000" cy="8000" r="3000"></circle>
                </svg>
                <div data-u="numbertemplate" class="n"></div>
            </div>
        </div>
    </div>
    <script type="text/javascript">jssor_1_slider_init();</script>

    </div>
</section>

ادخل الى لوحة الادارة \مظهر المنتدى \ الصور و الألوان\ الوان\ ورقة التصميم الـ css
ثم ضع الكود التالى

الكود:
/* wehba slider loading skin spin css */
        .jssorl-009-spin img {
            animation-name: jssorl-009-spin;
            animation-duration: 1.6s;
            animation-iteration-count: infinite;
            animation-timing-function: linear;
        }

        @keyframes jssorl-009-spin {
            from {
                transform: rotate(0deg);
            }

            to {
                transform: rotate(360deg);
            }
        }

         #jssor_1 {position: relative;margin: 0px auto;top: 0px;left: 0px;width: 906px;height: 392.583px;overflow: hidden;visibility: visible;}
        .jssorb111 .i {position:absolute;color:#fff;font-family:"Helvetica neue",Helvetica,Arial,sans-serif;text-align:center;cursor:pointer;z-index:0;}
        .jssorb111 .i .n {display:none;}
        .jssorb111 .i .b {fill:#fff;stroke:#000;stroke-width:500;stroke-miterlimit:10;stroke-opacity:.5;}
        .jssorb111 .i:hover .b {fill:#fea900;stroke:#fea900;stroke-width:6000;stroke-opacity:1;}
        .jssorb111 .iav .b {fill:#000;stroke-width:6000;stroke-opacity:1;}
        .jssorb111 .i.idn {opacity:.3;}
        .jssorb111 .iav .n, .jssorb111 .i:hover .n {display:block;}

        .jssort121 .p {position:absolute;top:0;left:0;border-bottom:1px solid rgba(255,255,255,.2);box-sizing:border-box;color:#fff;background:rgba(0,0,0,.1);opacity:.7;}
        .jssort121 .p .t {position:absolute;padding:10px;box-sizing:border-box;top:0;left:0;width:100%;height:100%;line-height:24px;overflow:hidden;}
        .jssort121 .p .i {margin-right:10px;position:relative;top:0;left:0;width:96px;height:48px;border:none;float:left;}
        .jssort121 .pav, .jssort121 .p:hover {color:#000;background:rgba(255,255,255,.7);}
        .jssort121 .p:hover {opacity:.75;}
        .jssort121 .pav, .jssort121 .p:hover.pdn {opacity:1;}
        .jssort121 .ti {position:relative;font-size:14px;font-weight:bold;}
        .jssort121 .d {position:relative;font-size:12px;}
        /*.jssort121 .d:before {content:'\a';white-space:pre;}*/
ثم ادخل الى لوحة الادارة \ عناصر اضافية \  أكواد Javascript \ ثم اضغط انشاء
العنوان : اختار ما تريد
أضف الكود الى :جميع الصفحات
وضع الكود التالى واضغط قدم

الكود:
jssor_1_slider_init = function() {

            var jssor_1_SlideshowTransitions = [
              {$Duration:800,x:0.3,$During:{$Left:[0.3,0.7]},$Easing:{$Left:$Jease$.$InCubic,$Opacity:$Jease$.$Linear},$Opacity:2},
              {$Duration:800,x:-0.3,$SlideOut:true,$Easing:{$Left:$Jease$.$InCubic,$Opacity:$Jease$.$Linear},$Opacity:2},
              {$Duration:800,x:-0.3,$During:{$Left:[0.3,0.7]},$Easing:{$Left:$Jease$.$InCubic,$Opacity:$Jease$.$Linear},$Opacity:2},
              {$Duration:800,x:0.3,$SlideOut:true,$Easing:{$Left:$Jease$.$InCubic,$Opacity:$Jease$.$Linear},$Opacity:2},
              {$Duration:800,y:0.3,$During:{$Top:[0.3,0.7]},$Easing:{$Top:$Jease$.$InCubic,$Opacity:$Jease$.$Linear},$Opacity:2},
              {$Duration:800,y:-0.3,$SlideOut:true,$Easing:{$Top:$Jease$.$InCubic,$Opacity:$Jease$.$Linear},$Opacity:2},
              {$Duration:800,y:-0.3,$During:{$Top:[0.3,0.7]},$Easing:{$Top:$Jease$.$InCubic,$Opacity:$Jease$.$Linear},$Opacity:2},
              {$Duration:800,y:0.3,$SlideOut:true,$Easing:{$Top:$Jease$.$InCubic,$Opacity:$Jease$.$Linear},$Opacity:2},
              {$Duration:800,x:0.3,$Cols:2,$During:{$Left:[0.3,0.7]},$ChessMode:{$Column:3},$Easing:{$Left:$Jease$.$InCubic,$Opacity:$Jease$.$Linear},$Opacity:2},
              {$Duration:800,x:0.3,$Cols:2,$SlideOut:true,$ChessMode:{$Column:3},$Easing:{$Left:$Jease$.$InCubic,$Opacity:$Jease$.$Linear},$Opacity:2},
              {$Duration:800,y:0.3,$Rows:2,$During:{$Top:[0.3,0.7]},$ChessMode:{$Row:12},$Easing:{$Top:$Jease$.$InCubic,$Opacity:$Jease$.$Linear},$Opacity:2},
              {$Duration:800,y:0.3,$Rows:2,$SlideOut:true,$ChessMode:{$Row:12},$Easing:{$Top:$Jease$.$InCubic,$Opacity:$Jease$.$Linear},$Opacity:2},
              {$Duration:800,y:0.3,$Cols:2,$During:{$Top:[0.3,0.7]},$ChessMode:{$Column:12},$Easing:{$Top:$Jease$.$InCubic,$Opacity:$Jease$.$Linear},$Opacity:2},
              {$Duration:800,y:-0.3,$Cols:2,$SlideOut:true,$ChessMode:{$Column:12},$Easing:{$Top:$Jease$.$InCubic,$Opacity:$Jease$.$Linear},$Opacity:2},
              {$Duration:800,x:0.3,$Rows:2,$During:{$Left:[0.3,0.7]},$ChessMode:{$Row:3},$Easing:{$Left:$Jease$.$InCubic,$Opacity:$Jease$.$Linear},$Opacity:2},
              {$Duration:800,x:-0.3,$Rows:2,$SlideOut:true,$ChessMode:{$Row:3},$Easing:{$Left:$Jease$.$InCubic,$Opacity:$Jease$.$Linear},$Opacity:2},
              {$Duration:800,x:0.3,y:0.3,$Cols:2,$Rows:2,$During:{$Left:[0.3,0.7],$Top:[0.3,0.7]},$ChessMode:{$Column:3,$Row:12},$Easing:{$Left:$Jease$.$InCubic,$Top:$Jease$.$InCubic,$Opacity:$Jease$.$Linear},$Opacity:2},
              {$Duration:800,x:0.3,y:0.3,$Cols:2,$Rows:2,$During:{$Left:[0.3,0.7],$Top:[0.3,0.7]},$SlideOut:true,$ChessMode:{$Column:3,$Row:12},$Easing:{$Left:$Jease$.$InCubic,$Top:$Jease$.$InCubic,$Opacity:$Jease$.$Linear},$Opacity:2},
              {$Duration:800,$Delay:20,$Clip:3,$Assembly:260,$Easing:{$Clip:$Jease$.$InCubic,$Opacity:$Jease$.$Linear},$Opacity:2},
              {$Duration:800,$Delay:20,$Clip:3,$SlideOut:true,$Assembly:260,$Easing:{$Clip:$Jease$.$OutCubic,$Opacity:$Jease$.$Linear},$Opacity:2},
              {$Duration:800,$Delay:20,$Clip:12,$Assembly:260,$Easing:{$Clip:$Jease$.$InCubic,$Opacity:$Jease$.$Linear},$Opacity:2},
              {$Duration:800,$Delay:20,$Clip:12,$SlideOut:true,$Assembly:260,$Easing:{$Clip:$Jease$.$OutCubic,$Opacity:$Jease$.$Linear},$Opacity:2}
            ];

            var jssor_1_options = {
              $AutoPlay: 1,
              $Cols: 1,
              $Align: 0,
              $SlideshowOptions: {
                $Class: $JssorSlideshowRunner$,
                $Transitions: jssor_1_SlideshowTransitions,
                $TransitionsOrder: 1
              },
              $BulletNavigatorOptions: {
                $Class: $JssorBulletNavigator$
              },
              $ThumbnailNavigatorOptions: {
                $Class: $JssorThumbnailNavigator$,
                $Cols: 6,
                $Orientation: 2,
                $Align: 156
              }
            };

            var jssor_1_slider = new $JssorSlider$("jssor_1", jssor_1_options);

            /*#region responsive code begin*/

            var MAX_WIDTH = 906;

            function ScaleSlider() {
                var containerElement = jssor_1_slider.$Elmt.parentNode;
                var containerWidth = containerElement.clientWidth;

                if (containerWidth) {

                    var expectedWidth = Math.min(MAX_WIDTH || containerWidth, containerWidth);

                    jssor_1_slider.$ScaleWidth(expectedWidth);
                }
                else {
                    window.setTimeout(ScaleSlider, 30);
                }
            }

            ScaleSlider();

            $Jssor$.$AddEvent(window, "load", ScaleSlider);
            $Jssor$.$AddEvent(window, "resize", ScaleSlider);
            $Jssor$.$AddEvent(window, "orientationchange", ScaleSlider);
            /*#endregion responsive code end*/
};

والى هنا ينتهى موضعنا لهذا اليوم والى لقائا اخر انشاء الله تعالى
يتابع ..




اقتباس :

..وَلَا يَغْتَب بَّعْضُكُم بَعْضاً أَيُحِبُّ أَحَدُكُمْ أَن يَأْكُلَ لَحْمَ أَخِيهِ مَيْتاً فَكَرِهْتُمُوهُ وَاتَّقُوا اللَّهَ إِنَّ اللَّهَ تَوَّابٌ رَّحِيمٌ }.من رد عن عرض أخيه رد الله عن وجهه النار






الرجوع الى أعلى الصفحة اذهب الى الأسفل
http://3arb-way.a7larab.net/
JavaScript
سوبر الإبداع
سوبر الإبداع
JavaScript

ذكر
العقرب
عدد المساهمات : 116
نقاط النشاط : 178
السٌّمعَة : 24
بلد العضو : { اتيليه فنون التقنيات } برمجيات وتقنيات حصرية جدا  112
العمر : 29

{ اتيليه فنون التقنيات } برمجيات وتقنيات حصرية جدا  Empty
مُساهمةموضوع: كود سلايدشو يتحرك بـ عجلة الماوس بشكل متحرف   { اتيليه فنون التقنيات } برمجيات وتقنيات حصرية جدا  Emptyالخميس أغسطس 30, 2018 4:28 pm

السلام عليكم ورحمة الله وبركاته






اقدم لكم كود سلايدشو يتحرك بـ عجلة الماوس بشكل متحرف 
يحتوى هذا السليد شو على صورتين + به روابط , يتحرك بـ عجلة الماوس له تأثير طريف جدا فى المنتدى
تنويه: هذا العمل على جميع النسخ


صورة للمعاينه
{ اتيليه فنون التقنيات } برمجيات وتقنيات حصرية جدا  Ezgif-10
https://i.servimg.com/u/f12/19/08/62/30/ezgif-10.gif

ادخل الى لوحة الادارة \مظهر المنتدى \ التومبلايتات و القوالب\ادارة عامة\index_body
ضع هذا الرمز اعلى القالب مباشرة

الكود:
<div class="cont" id="shadow">
   <div class="mouse"></div>
   <div class="app initial">
      <div class="app__bgimg">
         <div class="app__bgimg-image app__bgimg-image--1">
         </div>
         <div class="app__bgimg-image app__bgimg-image--2">
         </div>
      </div>
      <div class="app__img">
         <img onmousedown="return false" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/537051/whiteTest4.png" alt="city">
      </div>
      
      <div class="app__text app__text--1">
         <div class="app__text-line app__text-line--4">عنوان 2 </div>
         <div class="app__text-line app__text-line--3">عنوان ثانوى 2</div>
         <div class="app__text-line app__text-line--2"><a href="#">رابط</a> </div>
         <div class="app__text-line app__text-line--1"><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/537051/opus-attachment.png" alt=""></div>
      </div>
      
      <div class="app__text app__text--2">
         <div class="app__text-line app__text-line--4">عنوان</div>
         <div class="app__text-line app__text-line--3">عنوان ثانوى</div>
         <div class="app__text-line app__text-line--2"><a href="#">رابط</a></div>
         <div class="app__text-line app__text-line--1"><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/537051/opus-attachment.png" alt=""></div>
      </div>
   </div>
   <div class="pages"  data-tooltip="اختار العرض">
      <ul class="pages__list">
         <li data-target="1" class="pages__item pages__item--1 page__item-active"></li>
         <li data-target="2" class="pages__item pages__item--2"></li>
      </ul>
   </div>
</div>
                  <style class="cp-pen-styles">
.cont {
  position: relative;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  overflow: hidden;
      border-radius: 50px;
    border: 3px solid rgba(255, 255, 255, 0.8);
    padding: 10px;
}

.app {
  position: relative;
  min-width: 990px;
  height: 540px;
  -webkit-box-shadow: 0 0 60px rgba(0, 0, 0, 0.3);
          box-shadow: 0 0 60px rgba(0, 0, 0, 0.3);
  overflow: hidden;
}
.app__bgimg {
  position: absolute;
  top: 0;
  left: -2.5%;
  width: 105%;
  height: 100%;
  -webkit-transition: -webkit-transform 3.5s 770ms;
  transition: -webkit-transform 3.5s 770ms;
  transition: transform 3.5s 770ms;
  transition: transform 3.5s 770ms, -webkit-transform 3.5s 770ms;
}
.app__bgimg-image {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
}
.app__bgimg-image--1 {
  background: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/537051/city22222.jpg") center center no-repeat;
  background-size: cover;
}
.app__bgimg-image--2 {
  background: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/537051/forest.jpg") center center no-repeat;
  background-size: cover;
  opacity: 0;
  -webkit-transition: opacity 0ms 1300ms;
  transition: opacity 0ms 1300ms;
  will-change: opacity;
}
.app__text {
    position: absolute;
    right: 100px;
    top: 150px;
    font-family: 'Roboto', sans-serif;
    text-transform: uppercase;
    z-index: 1;
    text-align: center;
}
.app__text-line {
  -webkit-transition: opacity 750ms 500ms, -webkit-transform 1500ms 400ms;
  transition: opacity 750ms 500ms, -webkit-transform 1500ms 400ms;
  transition: transform 1500ms 400ms, opacity 750ms 500ms;
  transition: transform 1500ms 400ms, opacity 750ms 500ms, -webkit-transform 1500ms 400ms;
  will-change: transform, opacity;
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
}
.app__text-line--4 {
  -webkit-transition: opacity 1500ms 1500ms, -webkit-transform 1500ms 1500ms;
  transition: opacity 1500ms 1500ms, -webkit-transform 1500ms 1500ms;
  transition: transform 1500ms 1500ms, opacity 1500ms 1500ms;
  transition: transform 1500ms 1500ms, opacity 1500ms 1500ms, -webkit-transform 1500ms 1500ms;
}
.app__text-line--3 {
  -webkit-transition: opacity 1500ms 1750ms, -webkit-transform 1500ms 1600ms;
  transition: opacity 1500ms 1750ms, -webkit-transform 1500ms 1600ms;
  transition: transform 1500ms 1600ms, opacity 1500ms 1750ms;
  transition: transform 1500ms 1600ms, opacity 1500ms 1750ms, -webkit-transform 1500ms 1600ms;
}
.app__text-line--2 {
  -webkit-transition: opacity 1500ms 2000ms, -webkit-transform 1500ms 1700ms;
  transition: opacity 1500ms 2000ms, -webkit-transform 1500ms 1700ms;
  transition: transform 1500ms 1700ms, opacity 1500ms 2000ms;
  transition: transform 1500ms 1700ms, opacity 1500ms 2000ms, -webkit-transform 1500ms 1700ms;
}
.app__text-line--1 {
  -webkit-transition: opacity 1500ms 2250ms, -webkit-transform 1500ms 1800ms;
  transition: opacity 1500ms 2250ms, -webkit-transform 1500ms 1800ms;
  transition: transform 1500ms 1800ms, opacity 1500ms 2250ms;
  transition: transform 1500ms 1800ms, opacity 1500ms 2250ms, -webkit-transform 1500ms 1800ms;
}
.app__text-line--4 {
  font-size: 50px;
  font-weight: 700;
  color: #0A101D;
}
.app__text-line--3 {
  font-size: 40px;
  font-weight: 300;
}
.app__text-line--2 {
  margin-top: 10px;
  font-size: 14px;
  font-weight: 500;
  color: #0099CC;
}
.app__text-line--1 {
  margin-top: 15px;
}
.app__text-line--1 img {
  width: 50px;
}
.app__text--1 .app__text-line {
  -webkit-transform: translate3d(0, -125px, 0);
          transform: translate3d(0, -125px, 0);
  opacity: 0;
}
.app__text--2 {
    right: initial;
    top: 250px;
    left: 40px;
    z-index: -1;
    -webkit-transition: z-index 1500ms;
    transition: z-index 1500ms;
    text-align: center;
}
.app__text--2 .app__text-line--4 {
  opacity: 0;
  -webkit-transition: opacity 400ms 125ms, -webkit-transform 1500ms -75ms;
  transition: opacity 400ms 125ms, -webkit-transform 1500ms -75ms;
  transition: transform 1500ms -75ms, opacity 400ms 125ms;
  transition: transform 1500ms -75ms, opacity 400ms 125ms, -webkit-transform 1500ms -75ms;
}
.app__text--2 .app__text-line--3 {
  opacity: 0;
  -webkit-transition: opacity 400ms 200ms, -webkit-transform 1500ms 0ms;
  transition: opacity 400ms 200ms, -webkit-transform 1500ms 0ms;
  transition: transform 1500ms 0ms, opacity 400ms 200ms;
  transition: transform 1500ms 0ms, opacity 400ms 200ms, -webkit-transform 1500ms 0ms;
}
.app__text--2 .app__text-line--2 {
  opacity: 0;
  -webkit-transition: opacity 400ms 275ms, -webkit-transform 1500ms 75ms;
  transition: opacity 400ms 275ms, -webkit-transform 1500ms 75ms;
  transition: transform 1500ms 75ms, opacity 400ms 275ms;
  transition: transform 1500ms 75ms, opacity 400ms 275ms, -webkit-transform 1500ms 75ms;
}
.app__text--2 .app__text-line--1 {
  opacity: 0;
  -webkit-transition: opacity 400ms 350ms, -webkit-transform 1500ms 150ms;
  transition: opacity 400ms 350ms, -webkit-transform 1500ms 150ms;
  transition: transform 1500ms 150ms, opacity 400ms 350ms;
  transition: transform 1500ms 150ms, opacity 400ms 350ms, -webkit-transform 1500ms 150ms;
}
.app__img {
  position: absolute;
  -webkit-transform: translate3d(0, -750px, 0);
          transform: translate3d(0, -750px, 0);
  width: 990px;
  height: 100%;
  -webkit-transition: -webkit-transform 3s cubic-bezier(0.6, 0.13, 0.31, 1.02);
  transition: -webkit-transform 3s cubic-bezier(0.6, 0.13, 0.31, 1.02);
  transition: transform 3s cubic-bezier(0.6, 0.13, 0.31, 1.02);
  transition: transform 3s cubic-bezier(0.6, 0.13, 0.31, 1.02), -webkit-transform 3s cubic-bezier(0.6, 0.13, 0.31, 1.02);
  will-change: transform;
}
.app__img img {
  min-width: 100%;
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
}

.initial .app__img {
  -webkit-transform: translate3d(0, 0, 0);
          transform: translate3d(0, 0, 0);
}
.initial .app__text--1 .app__text-line--1 {
  -webkit-transform: translate3d(0, 0, 0);
          transform: translate3d(0, 0, 0);
  -webkit-transition: opacity 400ms 1600ms, -webkit-transform 1500ms 1400ms;
  transition: opacity 400ms 1600ms, -webkit-transform 1500ms 1400ms;
  transition: transform 1500ms 1400ms, opacity 400ms 1600ms;
  transition: transform 1500ms 1400ms, opacity 400ms 1600ms, -webkit-transform 1500ms 1400ms;
  opacity: 1;
}
.initial .app__text--1 .app__text-line--2 {
  -webkit-transform: translate3d(0, 0, 0);
          transform: translate3d(0, 0, 0);
  -webkit-transition: opacity 400ms 1675ms, -webkit-transform 1500ms 1475ms;
  transition: opacity 400ms 1675ms, -webkit-transform 1500ms 1475ms;
  transition: transform 1500ms 1475ms, opacity 400ms 1675ms;
  transition: transform 1500ms 1475ms, opacity 400ms 1675ms, -webkit-transform 1500ms 1475ms;
  opacity: 1;
}
.initial .app__text--1 .app__text-line--3 {
  -webkit-transform: translate3d(0, 0, 0);
          transform: translate3d(0, 0, 0);
  -webkit-transition: opacity 400ms 1750ms, -webkit-transform 1500ms 1550ms;
  transition: opacity 400ms 1750ms, -webkit-transform 1500ms 1550ms;
  transition: transform 1500ms 1550ms, opacity 400ms 1750ms;
  transition: transform 1500ms 1550ms, opacity 400ms 1750ms, -webkit-transform 1500ms 1550ms;
  opacity: 1;
}
.initial .app__text--1 .app__text-line--4 {
  -webkit-transform: translate3d(0, 0, 0);
          transform: translate3d(0, 0, 0);
  -webkit-transition: opacity 400ms 1825ms, -webkit-transform 1500ms 1625ms;
  transition: opacity 400ms 1825ms, -webkit-transform 1500ms 1625ms;
  transition: transform 1500ms 1625ms, opacity 400ms 1825ms;
  transition: transform 1500ms 1625ms, opacity 400ms 1825ms, -webkit-transform 1500ms 1625ms;
  opacity: 1;
}

.active .app__bgimg {
  -webkit-transform: translate3d(10px, 0, 0) scale(1.05);
          transform: translate3d(10px, 0, 0) scale(1.05);
  -webkit-transition: -webkit-transform 5s 850ms ease-in-out;
  transition: -webkit-transform 5s 850ms ease-in-out;
  transition: transform 5s 850ms ease-in-out;
  transition: transform 5s 850ms ease-in-out, -webkit-transform 5s 850ms ease-in-out;
}
.active .app__bgimg .app__bgimg-image--2 {
  opacity: 1;
  -webkit-transition: opacity 0ms 1500ms;
  transition: opacity 0ms 1500ms;
}
.active .app__img {
  -webkit-transition: -webkit-transform 3s cubic-bezier(0.6, 0.13, 0.31, 1.02);
  transition: -webkit-transform 3s cubic-bezier(0.6, 0.13, 0.31, 1.02);
  transition: transform 3s cubic-bezier(0.6, 0.13, 0.31, 1.02);
  transition: transform 3s cubic-bezier(0.6, 0.13, 0.31, 1.02), -webkit-transform 3s cubic-bezier(0.6, 0.13, 0.31, 1.02);
  -webkit-transform: translate3d(0, -1410px, 0);
          transform: translate3d(0, -1410px, 0);
}
.active .app__text--1 {
  z-index: -1;
  -webkit-transition: z-index 0ms 1500ms;
  transition: z-index 0ms 1500ms;
}
.active .app__text--1 .app__text-line--1 {
  -webkit-transform: translate3d(0, -125px, 0);
          transform: translate3d(0, -125px, 0);
  -webkit-transition: opacity 400ms 500ms, -webkit-transform 1500ms 300ms;
  transition: opacity 400ms 500ms, -webkit-transform 1500ms 300ms;
  transition: transform 1500ms 300ms, opacity 400ms 500ms;
  transition: transform 1500ms 300ms, opacity 400ms 500ms, -webkit-transform 1500ms 300ms;
  opacity: 0;
}
.active .app__text--1 .app__text-line--2 {
  -webkit-transform: translate3d(0, -125px, 0);
          transform: translate3d(0, -125px, 0);
  -webkit-transition: opacity 400ms 575ms, -webkit-transform 1500ms 375ms;
  transition: opacity 400ms 575ms, -webkit-transform 1500ms 375ms;
  transition: transform 1500ms 375ms, opacity 400ms 575ms;
  transition: transform 1500ms 375ms, opacity 400ms 575ms, -webkit-transform 1500ms 375ms;
  opacity: 0;
}
.active .app__text--1 .app__text-line--3 {
  -webkit-transform: translate3d(0, -125px, 0);
          transform: translate3d(0, -125px, 0);
  -webkit-transition: opacity 400ms 650ms, -webkit-transform 1500ms 450ms;
  transition: opacity 400ms 650ms, -webkit-transform 1500ms 450ms;
  transition: transform 1500ms 450ms, opacity 400ms 650ms;
  transition: transform 1500ms 450ms, opacity 400ms 650ms, -webkit-transform 1500ms 450ms;
  opacity: 0;
}
.active .app__text--1 .app__text-line--4 {
  -webkit-transform: translate3d(0, -125px, 0);
          transform: translate3d(0, -125px, 0);
  -webkit-transition: opacity 400ms 725ms, -webkit-transform 1500ms 525ms;
  transition: opacity 400ms 725ms, -webkit-transform 1500ms 525ms;
  transition: transform 1500ms 525ms, opacity 400ms 725ms;
  transition: transform 1500ms 525ms, opacity 400ms 725ms, -webkit-transform 1500ms 525ms;
  opacity: 0;
}
.active .app__text--2 {
  z-index: 1;
}
.active .app__text--2 .app__text-line--1 {
  -webkit-transform: translate3d(0, -125px, 0);
          transform: translate3d(0, -125px, 0);
  -webkit-transition: opacity 1300ms 1300ms, -webkit-transform 2500ms 1100ms;
  transition: opacity 1300ms 1300ms, -webkit-transform 2500ms 1100ms;
  transition: transform 2500ms 1100ms, opacity 1300ms 1300ms;
  transition: transform 2500ms 1100ms, opacity 1300ms 1300ms, -webkit-transform 2500ms 1100ms;
  opacity: 1;
}
.active .app__text--2 .app__text-line--2 {
  -webkit-transform: translate3d(0, -125px, 0);
          transform: translate3d(0, -125px, 0);
  -webkit-transition: opacity 1300ms 1575ms, -webkit-transform 2500ms 1175ms;
  transition: opacity 1300ms 1575ms, -webkit-transform 2500ms 1175ms;
  transition: transform 2500ms 1175ms, opacity 1300ms 1575ms;
  transition: transform 2500ms 1175ms, opacity 1300ms 1575ms, -webkit-transform 2500ms 1175ms;
  opacity: 1;
}
.active .app__text--2 .app__text-line--3 {
  -webkit-transform: translate3d(0, -125px, 0);
          transform: translate3d(0, -125px, 0);
  -webkit-transition: opacity 1300ms 1850ms, -webkit-transform 2500ms 1250ms;
  transition: opacity 1300ms 1850ms, -webkit-transform 2500ms 1250ms;
  transition: transform 2500ms 1250ms, opacity 1300ms 1850ms;
  transition: transform 2500ms 1250ms, opacity 1300ms 1850ms, -webkit-transform 2500ms 1250ms;
  opacity: 1;
}
.active .app__text--2 .app__text-line--4 {
  -webkit-transform: translate3d(0, -125px, 0);
          transform: translate3d(0, -125px, 0);
  -webkit-transition: opacity 1300ms 2125ms, -webkit-transform 2500ms 1325ms;
  transition: opacity 1300ms 2125ms, -webkit-transform 2500ms 1325ms;
  transition: transform 2500ms 1325ms, opacity 1300ms 2125ms;
  transition: transform 2500ms 1325ms, opacity 1300ms 2125ms, -webkit-transform 2500ms 1325ms;
  opacity: 1;
}

.mouse {
    position: absolute;
    margin-left: 10px;
    min-width: 50px;
    height: 80px;
    border-radius: 30px;
    border: 5px solid rgba(255, 255, 255, 0.8);
    left: 0;
}
.mouse:after {
  content: '';
  position: absolute;
  top: 20px;
  left: 50%;
  -webkit-transform: translate(-50%, 0);
          transform: translate(-50%, 0);
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background-color: #fff;
  -webkit-animation: scroll 1s infinite alternate;
          animation: scroll 1s infinite alternate;
}
@-webkit-keyframes scroll {
  100% {
    -webkit-transform: translate(-50%, 15px);
            transform: translate(-50%, 15px);
  }
}
@keyframes scroll {
  100% {
    -webkit-transform: translate(-50%, 15px);
            transform: translate(-50%, 15px);
  }
}
.pages {
    margin-right: 25px;
    right: 0;
    position: absolute;
}
.pages__list {
  list-style-type: none;
}
.pages__item {
  position: relative;
  margin-bottom: 10px;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  border: 3px solid #fff;
  cursor: pointer;
}
.pages__item:after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%) scale(0, 0);
          transform: translate(-50%, -50%) scale(0, 0);
  width: 75%;
  height: 75%;
  border-radius: 50%;
  background-color: #fff;
  opacity: 0;
  -webkit-transition: 500ms;
  transition: 500ms;
}
.pages__item:hover:after {
  -webkit-transform: translate(-50%, -50%) scale(1, 1);
          transform: translate(-50%, -50%) scale(1, 1);
  opacity: 1;
}

.page__item-active:after {
  -webkit-transform: translate(-50%, -50%) scale(1, 1);
          transform: translate(-50%, -50%) scale(1, 1);
  opacity: 1;
}

.icon-link {
  position: absolute;
  left: 5px;
  bottom: 5px;
  width: 50px;
}
.icon-link img {
  width: 100%;
  vertical-align: top;
}
.icon-link--twitter {
  left: auto;
  right: 5px;
}
</style>

ثم ادخل الى لوحة الادارة \ عناصر اضافية \  أكواد Javascript \ ثم اضغط انشاء
العنوان : اختار ما تريد
أضف الكود الى :الصفحة الرئيسية
وضع الكود التالى واضغط قدم

الكود:


$(document).ready(function () {
   var $app = $('.app');
   var $img = $('.app__img');
   var $pageNav1 = $('.pages__item--1');
   var $pageNav2 = $('.pages__item--2');
   var animation = true;
   var curSlide = 1;
   var scrolledUp = void 0,
       nextSlide = void 0;

   var pagination = function pagination(slide, target) {
      animation = true;
      if (target === undefined) {
         nextSlide = scrolledUp ? slide - 1 : slide + 1;
      } else {
         nextSlide = target;
      }

      $('.pages__item--' + nextSlide).addClass('page__item-active');
      $('.pages__item--' + slide).removeClass('page__item-active');

      $app.toggleClass('active');
      setTimeout(function () {
         animation = false;
      }, 3000);
   };

   var navigateDown = function navigateDown() {
      if (curSlide > 1) return;
      scrolledUp = false;
      pagination(curSlide);
      curSlide++;
   };

   var navigateUp = function navigateUp() {
      if (curSlide === 1) return;
      scrolledUp = true;
      pagination(curSlide);
      curSlide--;
   };

   setTimeout(function () {
      $app.addClass('initial');
   }, 1500);

   setTimeout(function () {
      animation = false;
   }, 4500);

   $(document).on('mousewheel DOMMouseScroll', function (e) {
      var delta = e.originalEvent.wheelDelta;
      if (animation) return;
      if (delta > 0 || e.originalEvent.detail < 0) {
         navigateUp();
      } else {
         navigateDown();
      }
   });

   $(document).on("click", ".pages__item:not(.page__item-active)", function () {
      if (animation) return;
      var target = +$(this).attr('data-target');
      pagination(curSlide, target);
      curSlide = target;
   });
});




والى هنا ينتهى موضعنا لهذا اليوم والى لقائا اخر انشاء الله تعالى
يتابع ..


اقتباس :

..وَلَا يَغْتَب بَّعْضُكُم بَعْضاً أَيُحِبُّ أَحَدُكُمْ أَن يَأْكُلَ لَحْمَ أَخِيهِ مَيْتاً فَكَرِهْتُمُوهُ وَاتَّقُوا اللَّهَ إِنَّ اللَّهَ تَوَّابٌ رَّحِيمٌ }.من رد عن عرض أخيه رد الله عن وجهه النار






الرجوع الى أعلى الصفحة اذهب الى الأسفل
http://3arb-way.a7larab.net/
JavaScript
سوبر الإبداع
سوبر الإبداع
JavaScript

ذكر
العقرب
عدد المساهمات : 116
نقاط النشاط : 178
السٌّمعَة : 24
بلد العضو : { اتيليه فنون التقنيات } برمجيات وتقنيات حصرية جدا  112
العمر : 29

{ اتيليه فنون التقنيات } برمجيات وتقنيات حصرية جدا  Empty
مُساهمةموضوع: حصرى نافذة الترحيب على الرئيسية للزوار بشكل متطور    { اتيليه فنون التقنيات } برمجيات وتقنيات حصرية جدا  Emptyالسبت سبتمبر 01, 2018 12:37 am

السلام عليكم ورحمة الله وبركاته



 حصرى نافذة الترحيب على الرئيسية للزوار بشكل متطور 
هذا العمل يعمل على اظهار نافذة ترحيب متطورة, تختفى بعدد معين  من الثوانى وبعد انهاء الوقت المحدد تختفى ,
تنويه: يعمل على جميع النسخ
صورة للمعاينه

{ اتيليه فنون التقنيات } برمجيات وتقنيات حصرية جدا  Screen10
https://i.servimg.com/u/f62/19/08/62/30/screen10.png

ثم ادخل الى لوحة الادارة \ عناصر اضافية \  أكواد Javascript \ ثم اضغط انشاء
العنوان : اختار ما تريد
أضف الكود الى :جميع الصفحات
وضع الكود التالى واضغط قدم

الكود:
$(document).ready(function() {
  if (!_userdata.session_logged_in) {
 $('.bodylinewidth').prepend('<div id="Notification"><b>! </b><span>اهلا وسهلا بك عزيزى الزائر</span></div>');
 $('head').append('<style>#Notification{display:block;position:fixed;top:20%;left:-50%;margin:0;z-index:999}#Notification b{position:relative;top:-5px;padding-top:6px;padding-left:16px;padding-right:8px;padding-bottom:8px;color:#efefef;font-family:"Open Sans",sans-serif;font-size:1.5em;background-color:#16CC33}#Notification span{padding:10px;vertical-align:top;color:#171717;font-family:"Open Sans",sans-serif;font-size:1.2em;background-color:#efefef;box-shadow:8px 5px 20px -5px rgba(0,0,0,.5)}</style>');
        $("#Notification").delay(500).animate({
            "left": "0"
        });
        $("#Notification").delay(8000).animate({
            "left": "-50%"
        })
    }
});
هذا يعني انها تختفي بعد 8 ثواني يمكن التحكم في رقم 8 و تغيره بوضع عدد ثواني معينه
يمكنك التحكم به عن طريق

الكود:
delay(8000)

والى هنا ينتهى موضعنا لهذا اليوم والى لقائا اخر انشاء الله تعالى
يتابع ..


اقتباس :

..وَلَا يَغْتَب بَّعْضُكُم بَعْضاً أَيُحِبُّ أَحَدُكُمْ أَن يَأْكُلَ لَحْمَ أَخِيهِ مَيْتاً فَكَرِهْتُمُوهُ وَاتَّقُوا اللَّهَ إِنَّ اللَّهَ تَوَّابٌ رَّحِيمٌ }.من رد عن عرض أخيه رد الله عن وجهه النار






الرجوع الى أعلى الصفحة اذهب الى الأسفل
http://3arb-way.a7larab.net/
JavaScript
سوبر الإبداع
سوبر الإبداع
JavaScript

ذكر
العقرب
عدد المساهمات : 116
نقاط النشاط : 178
السٌّمعَة : 24
بلد العضو : { اتيليه فنون التقنيات } برمجيات وتقنيات حصرية جدا  112
العمر : 29

{ اتيليه فنون التقنيات } برمجيات وتقنيات حصرية جدا  Empty
مُساهمةموضوع: تحريك الصورة الرمزية فى جدول اخر مساهمة    { اتيليه فنون التقنيات } برمجيات وتقنيات حصرية جدا  Emptyالأربعاء سبتمبر 05, 2018 5:28 pm


السلام عليكم ورحمة الله وبركاته










#تحريك_الصورة_الرمزية_فى_جدول_اخر_مساهمة_ 
كود جديد من باب المرح نعرض لكم اضافة طريفة على الرمزية التى متواجدة فى جدول اخر مساهة على الرئيسية 
تنويه: يعمل على النسخة الثالثة  phpBB3
صورة للمعاينه 

{ اتيليه فنون التقنيات } برمجيات وتقنيات حصرية جدا  Ezgif_10
https://i.servimg.com/u/f12/19/08/62/30/ezgif_10.gif


ثم ادخل الى لوحة الادارة \ عناصر اضافية \  أكواد Javascript \ ثم اضغط انشاء
العنوان : اختار ما تريد
أضف الكود الى : الصفحة الريسية 
وضع الكود التالى واضغط قدم

الكود:

//2018 تم التصميم بواسطة }وهبة الساحر
$(document).ready(function(){
    jQuery('head').after('<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/csshake/1.5.3/csshake-slow.css"/>');
    $(".lastpost-avatar img").addClass("shake-slow shake-constant--hover");

});


والى هنا ينتهى موضعنا لهذا اليوم والى لقائا اخر انشاء الله تعالى
يتابع ..


اقتباس :

..وَلَا يَغْتَب بَّعْضُكُم بَعْضاً أَيُحِبُّ أَحَدُكُمْ أَن يَأْكُلَ لَحْمَ أَخِيهِ مَيْتاً فَكَرِهْتُمُوهُ وَاتَّقُوا اللَّهَ إِنَّ اللَّهَ تَوَّابٌ رَّحِيمٌ }.من رد عن عرض أخيه رد الله عن وجهه النار






الرجوع الى أعلى الصفحة اذهب الى الأسفل
http://3arb-way.a7larab.net/
AL-SHAM5
مؤسس الإبداع
مؤسس الإبداع
AL-SHAM5

ذكر
عدد المساهمات : 92533
نقاط النشاط : 102387
السٌّمعَة : 702
بلد العضو : { اتيليه فنون التقنيات } برمجيات وتقنيات حصرية جدا  Ioao10

{ اتيليه فنون التقنيات } برمجيات وتقنيات حصرية جدا  Empty
مُساهمةموضوع: رد: { اتيليه فنون التقنيات } برمجيات وتقنيات حصرية جدا    { اتيليه فنون التقنيات } برمجيات وتقنيات حصرية جدا  Emptyالخميس مايو 14, 2020 10:37 pm

شكرا لك

بوركت ودام عطائك
الرجوع الى أعلى الصفحة اذهب الى الأسفل
 
{ اتيليه فنون التقنيات } برمجيات وتقنيات حصرية جدا
الرجوع الى أعلى الصفحة 
صفحة 1 من اصل 1

صلاحيات هذا المنتدى:لاتستطيع الرد على المواضيع في هذا المنتدى
منتدى الابداع العربي ::  تقنيات احلى منتدى ::  تقنيات أحلى منتدى :: التقنيات المتقدمة-
انتقل الى:  
جميع الحقوق محفوظة لمنتدى الإبداع العربي 2020