كيفاش تزيد Count Up للموقع ديالك

imadbelasri Html
HC

فهاد الدرس الجديد من سلسلة Html & Css غادي نشوفو كيفاش نزيدو Count Up لي هي javascript library ولي كتمكنا كيف شفنا فالفيديو نزيدو واحد l'effet لأرقام ديالنا فبزاف ديال المواقع مؤخرا ولاو كيخدمو بها باش كيعرضوا شحال عندهم ديال les j aimes ففيسبوك والمتابعين ديالهم فيوتوب فهاد  library كتزيد واحد ل animation لي كتعطي إضافة للموقع ديالك . 


نظرة سريعة بالفيديو


1- الملف index.html

أول حاجة زيد dossier جديد سميه لي بغيتي وزيدو فين بغيتي فيه زيد dossier جديد سميه css وواحد خور سميه js ف dossier الرئيسي زيد ملف جديد سميه index.html فيه غادي تكون structure html ديالنا ولي غادي يكونوا فيها روابط css وهنا خدمنا ب bootstrap 4 لي يمكنلك ت télécharger لملفات ديالو من الموقع الرسمي وعندنا ايضا ملفات اخرى غادي نزيدوها من بعد وعندي ايضا روابط لملفات js ومنها ديال library باش غادي نخدمو ولي يمكنلك télécharger من هنا منبعد كاين عندي كل h2 فيه span لي كتاخد la classe counter ولي هي لي خاص نعطيو ل tag لي بغينا نزيدولها ل animation الكود ديال الملف هو :

                                                    
                                                        <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" href="css/bootstrap.min.css">
    <link href="css/fontawesome-all.css" rel="stylesheet">
    <link href="https://fonts.googleapis.com/css?family=Raleway:100,100i,300,300i,400,400i,700,700i,900,900i" rel="stylesheet">
    <link rel="stylesheet" href="css/style.css">
    <title>Count Up</title>
</head>
<body>
    <section id="stats">
        <div class="container-fluid">
            <h3 class="mb-4 text-center mt-0 py-3 text-uppercase">
                Statistiques
            </h3>
            <div class="content">
                <div class="row mx-auto">
                    <div class="col-md-3">
                        <div class="stat-item">
                            <i class="fa fa-download fa-5x"></i>
                            <h2>
                                <span class="counter">1550</span>
                                <span>+</span>
                            </h2>
                            <p>Téléchargements</p>
                        </div>
                    </div>
                    <div class="col-md-3">
                        <div class="stat-item">
                            <i class="fa fa-star fa-5x"></i>
                            <h2>
                                <span class="counter">3000</span>
                                <span>+</span>
                            </h2>
                            <p>Favoris</p>
                        </div>
                    </div>
                    <div class="col-md-3">
                        <div class="stat-item">
                            <i class="fa fa-heart fa-5x"></i>
                            <h2>
                                <span class="counter">2500</span>
                                <span>+</span>
                            </h2>
                            <p>J'aime</p>
                        </div>
                    </div>
                    <div class="col-md-3">
                        <div class="stat-item">
                            <i class="fa fa-share fa-5x"></i>
                            <h2>
                                <span class="counter">8000</span>
                                <span>+</span>
                            </h2>
                            <p>Partages</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>
    <script src="js/jquery.js"></script> 
    <script src="js/main.js"></script>
    <script src="js/jquery.waypoints.min.js"></script>
    <script src="js/jquery.counterup.min.js"></script>
</body>
</html>
                                                    
                                                

2- الملف main.js

من بعد ف dossier js زيد ملف جديد سميه main.js فيه الكود لي كيمكن باش نزيدو ل animation ل span لي عندها la classe counter ف كنعطيها ل fonction counterUp لي كتاخد delay لي هو الوقت مابين كل augmentation ديال الرقم وهنا عطيناه 0.01 ثانية وعندنا ايضا duration لي هي المدة ديال ل animation ولي عطيناها 3000 جزء من الثانية ولي هي 3 ثواني الكود ديال الملف هو :

                                                        
                                                            /*========== countup plugin */
$(function () {
    $('.counter').counterUp({
        delay: 10,
        time: 3000
    });
});
                                                        
                                                    

3- الملف style.css

منبعد ف dossier css زيد ملف جديد سميه style.css فيه غادي يكون لكود css لي غادي نحتاجو الكود ديال الملف هو :

                                                        
                                                            body{
    background-color: beige;
    font-family: 'Raleway',Verdana, Geneva, Tahoma, sans-serif;
}
h3{
    color: #fff;
    font-size: 40px;
    font-weight: 700;
    margin: 20px 0 40px 0 !important;
}
h2{
    color: #fff;
    font-size: 30px;
    font-weight: 500;
}
p{
    color: #fff;
    font-size: 20px;
    font-weight: 300;
    text-transform: uppercase;
}
#stats{
    height: 100vh;
    width: 100%;
    background: linear-gradient(rgba(0, 0, 0, 0.751),rgba(0, 0, 0, 0.751)),url('../boutique.jpg');
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
}
.content{
   margin: 200px auto !important;
   text-align: center;
}
i{
    color: #fff;
    margin: 10px 0;
}
                                                        
                                                    

دروس ذات صلة

HC

كيفاش نصاوب واجهة على شكل موقع التواصل الإجتماعي فيسبوك الجزء الاول

فهاد الدرس غادي نشوفو كيفاش نقادو الواجهة ديال موقع للتواصل الإجتماعي على شكل فيسبوك بإستعمال Html...


HC

كيفاش نصاوب واجهة على شكل موقع التواصل الإجتماعي فيسبوك الجزء الثاني

فهاد الجزء الثاني من هاد المشروع غادي نكملو باقي الصفحات لي هي الصفحة الرئيسية و الصفحات لي غادي تضم...


HC

كيفاش تعرض العنوان ديالك بإستعمال Html 5 géolocalisation

فهاد الدرس الأول من هاد السلسلة ديال html 5 géolocalisation غادي نشوفو كيفاش نقادو واحد المشروع بسيط...


HC

كيفاش تعرض الإحداثيات بإستعمال Html5 géolocalisation

فهاد الدرس الثاني من هاد السلسلة غادي نشوفو كيفاش نعرضو الإحداثيات ديالنا بالإضافة للموقع ديالنا على...


HC

كيفاش تعرض حالة الطقس بإستعمال Html5 géolocalisation

فهاد الدرس من هاد السلسلة غادي نشوفو كيفاش نقادو واحد المشروع لي كيمكن من عرض حالة الطقس فالموقع لي...


HC

كيفاش تعرض الرمز البريدي ديالك بإستعمال Html 5 géolocalisation

فهاد الدرس من هاد السلسلة غادي نشوفو كيفاش نقادو واحد المشروع لي كيمكن من عرض الرمز البريدي ديال الع...


HC

كيفاش ترسم مسار بإستعمال Html 5 géolocalisation

فهاد الدرس من هاد السلسلة غادي نشوفو كيفاش نرسمو مسار كيوضح كيفاش المستخدم يوصل لمدينة اختارها ومنبع...


HC

كيفاش تعرض معلومات على الخريطة بإستعمال Html 5 géolocalisation

فهاد الدرس من هاد السلسلة غادي نشوفو واحد المشروع لي كيمكن المستخدم من أنه يبحث على شي حاجة بغاها مث...


HC

كيفاش تعرض معلومات من قاعدة البيانات على الخريطة بإستعمال Html 5 géolocalisation

فهاد الدرس من هاد السلسلة غادي نشوفو كيفاش نعرضو معلومات مسجلين فقاعدة البيانات على الخريطة من خلال...


HC

موقع للمبتدئين بل Html و Css

فهاد الدرس الجديد من موقع للمبتدئين بل Html و Css ولي عبارة عن Template بسيطة للمبتدئين فيها صفحة و...