كيفاش تزيد animate.css & wow.js للموقع ديالك

كيفاش تزيد animate.css & wow.js للموقع ديالك


فهاد الدرس الجديد غادي نشوفوا كيفاش نزيدو animate.css و wow.js للموقع ديالنا فشنو كيمكنوني ندير هاد الإضافات :
ف animate.css كيمكني باش نزيد des animations للموقع ديالي
ولي يمكنلك تجربها فالموقع ديالهم من هنا .
أما wow.js فكيمكن باش نخلي les animations ديالي يتأخروا واحد الوقت محدد ولي يمكنلك تشوف معلومات عليه فالموقع ديالهم من هنا.

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

1- إضافة الملفات الأساسية

أول حاجة زيد projet جديد زيدو فين بغيتي فيه زيد dossier css & dossier js & dossier img لي غادي تكون فيه الصورة ديال ل background يمكنلك تستعمل شي صورة من عندك او دبا تلقاها فالسورس كود.
- ف dossier css تليشارجي animate.css من هنا  وزيد فيه ملف cusom.css لي غادي يكون فيه css ديالنا.
- ف dossier js زيد ملف custom.js فيه غادي يكون الكود javascript ديالنا وتليشارجي أو زيد cdn ديال wow.js من هنا.
- منبعد زيد fichier سميه index.html فيه كاين ال header لي فيه روابط css منبعد كاين section الأولى لي فيها ل header ولي عطيتو ل animation fadeInDown يعني كيهبط ول h3 عطيتو ل animation zoomIn أما ل bouton فعطيتو shake.
- فهاد les animations كلهم ديال ل animate.css ولي يمكنلك تشوف أخرين فالموقع ديالهم.
- منبعد ف section ديال les services فعطيناها ل animation fadeInDown وزدناها ل class wow لي كتزيد ل effet ديال wow.js وحددنا duration  ديال ل animation ف ثانية
وحددنا انها تأخر بنصف ثانية على ل animation ديال ل header.
أخيرا فل footer زدت les fichiers js ديالي الكود ديال الملف هو :

                                <!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">
    <title>Animate Css</title>
    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.1.1/css/all.css" integrity="sha384-O8whS3fhG2OnA5Kas0Y9l3cfpmYjapjI0E4theH4iuMD+pLhbf6JI0jIMfYcK3yZ" crossorigin="anonymous">
    <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/bootstrap.min.css">
    <link rel="stylesheet" href="css/custom.css">
    <link rel="stylesheet" href="css/animate.css">
</head>
<body>
    <section id="home">
        <div id="home-cover" class="parallax animated fadeInDown">
            <div id="home-content">
                <div id="home-inner-content">
                    <div id="home-heading" class="animated zoomIn">
                        <h3>Web Mars 
                            <br>Nous sommes les leaders de demain</h3>
                    </div>
                    <div id="home-button" class="animated shake">
                        <a href="#work" role="button" title="Réalisation" class="btn btn-lg btn-general btn-white">Voir plus</a>
                    </div>
                </div>
            </div>
        </div>
    </section>
    <div class="container">
        <section id="services">
            <div class="content-box">
                <div class="content-title animated wow fadeInDown" data-wow-duration="1s" data-wow-delay=".5s">
                    <h3>Services</h3>
                </div>
                <div class="container">
                    <div class="row animated wow fadeInUp" data-wow-duration="1s" data-wow-delay=".5s">
                        <div class="col-12 col-sm-4">
                            <div class="service-box">
                                <div class="service-icon">
                                    <i class="fa fa-paint-brush fa-3x"></i>
                                </div>
                                <div class="service-title">
                                    <h3>Web design</h3>
                                </div>
                                <div class="service-desc">
                                    <p>Lorem ipsum, dolor ab abab ab rerum, neque, tempora fugit.</p>
                                </div>
                            </div>
                        </div>
                        <div class="col-12 col-sm-4">
                            <div class="service-box">
                                <div class="service-icon">
                                    <i class="fa fa-desktop fa-3x"></i>
                                </div>
                                <div class="service-title">
                                    <h3>Web development</h3>
                                </div>
                                <div class="service-desc">
                                    <p>Lorem ipsum Nemo neque neque neque neque, tempora fugit.</p>
                                </div>
                            </div>
                        </div>
                        <div class="col-12 col-sm-4">
                            <div class="service-box">
                                <div class="service-icon">
                                    <i class="fa fa-mobile-alt fa-3x"></i>
                                </div>
                                <div class="service-title">
                                    <h3>Mobile development</h3>
                                </div>
                                <div class="service-desc">
                                    <p>Lorem ipsum, dolor sit rerum, neque, tempora fugit itaque.</p>
                                </div>
                            </div>
                        </div>
                        <div class="col-12 col-sm-4">
                            <div class="service-box">
                                <div class="service-icon">
                                    <i class="fa fa-search fa-3x"></i>
                                </div>
                                <div class="service-title">
                                    <h3>SEO</h3>
                                </div>
                                <div class="service-desc">
                                    <p>Lorem ipsum, dolor sit neque neque, tempora fugit itaque.</p>
                                </div>
                            </div>
                        </div>
                        <div class="col-12 col-sm-4">
                            <div class="service-box">
                                <div class="service-icon">
                                    <i class="fa fa-edit fa-3x"></i>
                                </div>
                                <div class="service-title">
                                    <h3>UX Design</h3>
                                </div>
                                <div class="service-desc">
                                    <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit.</p>
                                </div>
                            </div>
                        </div>
                        <div class="col-12 col-sm-4">
                            <div class="service-box">
                                <div class="service-icon">
                                    <i class="fab fa-adversal fa-3x"></i>
                                </div>
                                <div class="service-title">
                                    <h3>Publicité</h3>
                                </div>
                                <div class="service-desc">
                                    <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit.</p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </section>
    </div>
    <script src="js/jquery.js"></script>
    <script src="js/bootstrap.min.js"></script>
    <script src="js/wow.min.js"></script>
    <script src="js/custom.js"></script>
    </body>
</html>
                            

2- إضافة les styles css فالملف custom.css

فالملف css كنزيد les styles css لي غادي نحتاج باش ننظم la page ديالي فالكود لي زدنا هو :

                                /** 
    font family : Lato
    color : #34C6D3 (buttons icons links lines & backgrounds)
    color : #41464B (headings)
    color : #64707B (paragraphs)
**/

/** general Styles**/

html,
body {
    font-family: 'Raleway', sans-serif;
    height: 100%;
}

p {
    color: #64707B;
    font-size: 16px;
    font-weight: 300;
}

h3 {
    color: #41464B;
    text-transform: uppercase;
}

/** buttons Styles**/

.parallax {
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    background-attachment: fixed;
}

/** home Styles**/

#home {
    height: 100%;
}

#home-cover {
    background-image: url('../img/bg-home.jpg');
    height: 100%;
}

#home-content {
    height: 100%;
    width: 100%;
    display: table;
}

#home-inner-content {
    display: table-cell;
    vertical-align: middle;
    text-align: center;
}

#home-heading h3 {
    color: #fff;
    font-size: 55px;
    font-weight: 700;
    margin: 20px 0;
}

/** Buttons Styles**/

.btn-general {
    border-width: 2px;
    border-radius: 0;
    padding: 12px 26px;
    font-size: 16px;
    font-weight: 700;
    text-transform: uppercase;
}

.btn-white {
    border-color: #fff;
    color: #fff;
}
.btn-white:hover,
.btn-white:focus {
    background-color: #fff;
    color: #41464B;
}

/** Animation Delays**/

#home-cover,
#home-heading,
#home-button {
    animation-duration: .5s;
}

#home-cover {
    animation-delay: .1s;
}

#home-heading {
    animation-delay: .5s;
}

#home-button {
    animation-delay: 1s;
}

/** content box styles**/

.content-box {
    padding: 20px 0;
}

.content-title h3 {
    text-align: center;
    font-size: 30px;
    font-weight: 700;
    margin-bottom: 30px;
}

/** services styles**/

.service-box {
    padding: 20px 0;
    cursor: pointer;
}

.service-icon i {
    color: #34C6D3;
    padding: 13px;
    float: left;
    margin-right: 25px;
    width: 75px;
    height: 75px;
    text-align: center;
    transition: color .3s;
}

.service-box:hover .service-icon i {
    color: #64707B;
    border-radius: 5px;
}

.service-title h3 {
    font-size: 20px;
    font-weight: 400;
    margin-bottom: 10px;
}

.service-desc p {
    margin: 0;
    padding-left: 85px;
}
                            

3- إضافة كود تفعيل wow.js للملف custom.js

فباش نستعمل wow.js كنزيد الكود لي كيمكني من هادشي فالملف custom.js.

الكود لي زدنا هو :

                                $(function () {
    new WOW().init();
});
                            


بحث في الموقع


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