Topic text with changing word. JQUERY or CSS

by Akram kamal

HTML

<body>
    <header></header>
    <section>
        <div id="wrapper">
            <div id="presents">
                <img id="remax-logo" src="img/remax_logo.png" alt="Remax logo">
                <p id="presents-paragraph">esittää</p>
                 <h1 class="negative-topic">EXPERIENCE SERVICES OF 
              <span id="changing-word">SPECIAL</span><br /> REAL ESTATE AGENT
            </h1>

                <div id="nav-div">
                    <ul id="nav-list">
                        <li id="nav-kristina">Kristina Nikkari</li>
                        <li id="nav-testimonial">Suositukset</li>
                        <li id="nav-invite">Yhteystiedot</li>
                    </ul>
                </div>
                <!-- <div id="scroll-down">
            <img id="scroll-down-top" src="img/scroll_down.svg" alt="Nuoli alaspäin">
          </div>
--></div>
            <div id="kristina">
                <div id="kristina-content">
                    <img id="kristina-avatar" src="img/kristina.jpg" alt="Kristina Nikkari kiinteistövälittäjä">
                    <div id="kristina-text-content">
                         <h3>OLEN KRISTINA <span id="kristina-topic-color">JA AUTAN IHMISIÄ LÖYTÄMÄÄN</span><br id="kristina-topic-br"> HYVIÄ KOTEJA</h3> 
                        <p>Tämä on jotain ihan muuta kuin perus kiinteistönvälitystä. Näillä sivuillani näytän sinulle erinomaisen kiinteistövälittäjän palvelun kokonaisuudessaan. Sellaisen palvelun mitä saat minulta ja mitä sinun pitäisi vaatia muiltakin. Kiinteistövälittäjänä minua kuvaillaan kolmella tavalla: loppumaton energia, erinomainen myyntitulos ja huippu asenne sekä arvostus asiakastani kohtaan. Välitystyölläni osoitan kuinka työ suoritetaan mainiosti ja vahvalla ammattitaidolla.</p>
                        <p>Suoritan tällä hetkellä KiAT tutkintoa (Kiinteistönvälitysalan ammattitutkinto) jonka jälkeen LKV ja LVV sekä uudiskohteiden/uudistuotantoon erikoistuminen. Olen urheilullinen ja...

CSS

#changing-word{
    display:inline-block;
    width:300px;
    max-width:300px;
}




/*************************
FONTS
*************************/
 @font-face {
    font-family:'icomoon';
    src:url('../fonts/icomoon.eot?-t7qoba');
    src:url('../fonts/icomoon.eot?#iefix-t7qoba') format('embedded-opentype'), url('../fonts/icomoon.woff?-t7qoba') format('woff'), url('../fonts/icomoon.ttf?-t7qoba') format('truetype'), url('../fonts/icomoon.svg?-t7qoba#icomoon') format('svg');
    font-weight: normal;
    font-style: normal;
}
[class^="icon-"], [class*=" icon-"] {
    font-family:'icomoon';
    speak: none;
    font-style: normal;
    font-weight: normal;
    font-variant: normal;
    text-transform: none;
    line-height: 1;
    /* Better Font Rendering =========== */
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}
.icon-office:before {
    content:"\e903";
}
.icon-arrow-down:before {
    content:"\ea36";
}
.icon-facebook2:before {
    content:"\ea8d";
}
/*************************
STYLE
*************************/
 * {
    box-sizing: border-box;
    /* The box-sizing property is used to tell the browser what the sizing properties (width and height) should include.

Should they include the border-box or just the content-box which is the default value of the width and height properties. */
}
body {
    background: #171310 url('../pattern/abstract_white.jpg');
}
#wrapper, footer {
    max-width: 960px;
    margin: 0 auto;
    -webkit-box-shadow: 0px 0px 16px 0px #6c6c6c;
    -moz-box-shadow: 0px 0px 16px 0px #6c6c6c;
    box-shadow: 0px 0px 16px 0px #6c6c6c;
    background: #fff;
}
img {
    max-width: 100%;
}
a:link, a:visited {
    text-decoration: none;
    color: #4176d9;
}
a:hover, a:active {
    text-decoration: underline;
    color: #98a3b5;
}
h1, h2, h3, h4, h5 {
    font-family:'Oswald', sans-serif;
    text-align: center;
    color: #404040;
    letter-spacing: .5px;
}
h1 {
    font-size: 2.4em;
}
@media screen and...

JavaScript

(function () {

    // List your words here:
    var words = [
        'SPECIAL',
        'DILIGENT',
        'FRIENDLY',
        'WISE'],
        i = 0,
        delay = 1;
    forever()
    function forever() {
        $('#changing-word').fadeOut(function () {
            var word = words[i = (i + 1) % words.length]
            console.log("i : " + i);
            $(this).html(word).fadeIn();
            $(this).css('color', 'orange'); // or color of choice

            if (word == 'SPECIAL') {
                delay = 3;
            } else {
                delay = 1;
            }
           setTimeout(forever , delay * 1000);
        });
    }

})();


// Nav scrolling

$("#nav-kristina").click(function () {
    $('html, body').animate({
        scrollTop: $("#kristina").offset().top
    }, 1000);
});

$("#nav-testimonial").click(function () {
    $('html, body').animate({
        scrollTop: $("#testimonial").offset().top
    }, 2000);
});

$("#nav-invite").click(function () {
    $('html, body').animate({
        scrollTop: $("#invite").offset().top
    }, 2000);
});

// Back to top

$("#back-to-top").click(function () {
    $('html, body').animate({
        scrollTop: $("body").offset().top
    }, 1000);
});


//Tarve esittää puhelin kuvakaappauksia yksi kerrallaan
//Ratkaisu: Painamalla viesti, sähköposti tai kamera kuvaketta ilmestyy painettuun kuvakkeeseen sidoksissa oleva kuvakaappaus

// SMS
"use strict";
$("#sms").click(function () {
    $("#phone_layers img").hide("slide");
});

$("#sms").click(function () {
    $("#phone_sms").show("slow");
});

// EMAIL
$("#email").click(function () {
    $("#phone_layers img").hide("slide");
});

$("#email").click(function () {
    $("#phone_email").show("slow");
});

// PHOTO
$("#photo").click(function () {
    $("#phone_layers img").hide("slide");
});

$("#photo").click(function () {
    $("#phone_photo").show("slow");
});