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


فهاد الدرس الجديد من سلسلة 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;
}
                            


إشترك في قناتنا على اليوتيوب

بحث في الموقع


إشترك للتوصل بالجديد