javascript - Animate Div If Visible jQuery -

i have no clue relating jquery. new this. trying make divs class of #animated slide in bottom when page scrolled , div comes view. copied code

$(document).ready(function() {      (function($) {        /**       * copyright 2012, digital fusion       * licensed under mit license.       * http://teamdf.com/jquery-plugins/license/       *       * @author sam sehnert       * @desc small plugin checks whether elements within       *     user visible viewport of web browser.       *     accounts vertical position, not horizontal.       */        $.fn.visible = function(partial) {          var $t = $(this),          $w = $(window),          viewtop = $w.scrolltop(),          viewbottom = viewtop + $w.height(),          _top = $t.offset().top,          _bottom = _top + $t.height(),          comparetop = partial === true ? _bottom : _top,          comparebottom = partial === true ? _top : _bottom;          return ((comparebottom <= viewbottom) && (comparetop >= viewtop));        };      })(jquery);      var win = $(window);      var allmods = $(".module");      allmods.each(function(i, el) {      var el = $(el);      if (el.visible(true)) {        el.addclass("already-visible");      }    });      win.scroll(function(event) {        allmods.each(function(i, el) {        var el = $(el);        if (el.visible(true)) {          el.addclass("come-in");        }      });      });    });

from website code not work. did not change @ all. code not supposed do

so don't know do. downloaded jquery library , linked script , went main .js. text editor (adobe brackets) gave me errors (50 of them)

so question doing wrong. btw css flawless, know css , html don't know jquery , html in importing type of code, if makes sense.

edit: html , css if need it.

/* slide in */    @import "compass/css3";   * {    @include box-sizing(border-box);  }  .animated {    overflow: hidden;  }  .come-in {    transform: translatey(150px);    animation: come-in 0.8s ease forwards;  }  .come-in:nth-child(odd) {    animation-duration: 0.6s;  }  .already-visible {    transform: translatey(0);    animation: none;  }  @keyframes come-in {    {      transform: translatey(0);    }  }  /* background */    #background {    position: fixed;    top: 0;    left: 0;    /* preserve aspet ratio */    min-width: 100%;    min-height: 100%;    z-index: -2;  }  /* header */    #headerbg {    position: absolute;    top: 0px;    left: 0px;    width: 100%;    background-color: rgba(255, 153, 0, 0.79);  }  #header {    width: 100%;    padding-top: 15px;  }  @media (min-width: 550px) {    /* header */    #header {      margin-left: 10%;      position: relative;      margin-top: 28px;      padding-bottom: 40px;    }  }  @media (min-width: 730px) {    #header {      margin-top: 25px;    }  }  @media (min-width: 900px) {    #header {      margin-top: 15px;    }  }  @media (min-width: 1000px) {    #header {      margin-left: 20%;    }  }  /* navigation */    nav {    position: relative;    width: 100%;    text-align: center;    padding-top: 10px;  }  nav li {    display: inline;    /* makes links on same line */  }  nav {    margin: 0 5px;    /* space out words */    color: #151413;    font-size: 1.3rem;    text-decoration: none;    text-transform: uppercase;    border-bottom: 2px solid transparent;    padding-bottom: 0.125em;    transition: border-bottom-color 0.75s linear 0s;    font-weight: 600;  }  @media (min-width: 350px) {    nav {      font-size: 1.4rem;      margin: 0 12px;    }  }  @media (min-width: 550px) {    nav {      font-size: 1.2rem;    }    nav {      padding-top: 48px;    }  }  @media (min-width: 600px) {    nav {      font-size: 1.3rem;    }    nav {      padding-top: 52px;    }  }  @media (min-width: 650px) {    nav {      font-size: 1.4rem;    }  }  @media (min-width: 1000px) {    nav {      margin: 0 15px;    }    nav {      padding-top: 56px;    }  }  @media (min-width: 1000px) {    nav {      margin-right: 20%;    }  }  nav a:hover,  nav a.active {    border-bottom-color: #151413;    color: #151413;  }  nav ul {    list-style-type: none;    list-style: none;  }  /* */    .container2 {    position: relative;    top: 140px;    z-index: -1;    width: 100%;    max-width: 960px;    margin: 0 auto;    padding: 0 20px;    box-sizing: border-box;  }  @media (min-width: 350px) {    .container2 {      top: 145px;    }  }  @media (min-width: 360px) {    .container2 {      top: 150px;    }  }  @media (min-width: 450px) {    .container2 {      top: 160px;    }  }  @media (min-width: 510px) {    .container2 {      top: 170px;    }  }  @media (min-width: 540px) {    .container2 {      top: 180px;    }  }  @media (min-width: 550px) {    .container2 {      top: 130px;    }  }  @media (min-width: 650px) {    .container2 {      top: 140px;    }  }  @media (min-width: 850px) {    .container2 {      top: 150px;    }  }  @media (min-width: 1100px) {    .container2 {      top: 155px;    }  }  #about {    text-align: center;  }  p {    width: 100%;    margin: 0 auto;    text-align: center;  }  @media (min-width: 550px) {    p {      width: 50%;    }  }  #aboutbar {    background-color: #151413;    height: 5px;    margin-top: 20px;    margin-left: 50%;    transform: translatex(-50%);    width: 100%  }  @media (min-width: 550px) {    #aboutbar {      background-color: #151413;      height: 5px;      width: 56.6666666667%;      margin-top: 20px;      margin-left: 50%;      transform: translatex(-50%);    }  }  /* managers */    #managersbg {    position: absolute;    left: 0px;    top: 475px;    z-index: -1;    width: 100%;    background-color: rgba(255, 153, 0, 0.79)  }  @media (min-width: 340px) {    #managersbg {      top: 445px;    }  }  @media (min-width: 350px) {    #managersbg {      top: 450px;    }  }  @media (min-width: 360px) {    #managersbg {      top: 455px;    }  }  @media (min-width: 365px) {    #managersbg {      top: 435px;    }  }  @media (min-width: 417px) {    #managersbg {      top: 410px;    }  }  @media (min-width: 450px) {    #managersbg {      top: 420px;    }  }  @media (min-width: 485px) {    #managersbg {      top: 400px;    }  }  @media (min-width: 510px) {    #managersbg {      top: 410px;    }  }  @media (min-width: 540px) {    #managersbg {      top: 420px;    }  }  @media (min-width: 550px) {    #managersbg {      top: 475px;    }  }  @media (min-width: 624px) {    #managersbg {      top: 455px;    }  }  @media (min-width: 650px) {    #managersbg {      top: 460px;    }  }  @media (min-width: 674px) {    #managersbg {      top: 435px;    }  }  @media (min-width: 778px) {    #managersbg {      top: 415px;    }  }  @media (min-width: 850px) {    #managersbg {      top: 425px;    }  }  @media (min-width: 914px) {    #managersbg {      top: 405px;    }  }  @media (min-width: 1100px) {    #managersbg {      top: 410px;    }  }  #screamer,  #swezii,  #kinzu {    width: 60px;    height: 60px;    border-radius: 50%;    border-color: rgba(255, 255, 255, 0);    background-image: url(../images/screamer.png);    background-size: 100%;    margin: 0 auto;  }  #screamer {    margin-bottom: 150px;  }  #swezii {    margin-bottom: 150px;  }  h4 {    text-align: center;  }  #managers {    margin-top: 20px;    margin-bottom: 30px;  }  #manager1,  #manager2,  #manager3 {    position: relative;    display: inline-block;    text-align: center;  }  #manager1 {    top: -410px;  }  #manager2 {    top: -220px;  }  #manager3 {    top: -60px;  }  @media (min-width: 550px) {    #manager1,    #manager2,    #manager3 {      left: 50%;      transform: translatex(-50%);    }  }  #text1,  #text2 {    margin-bottom: 110px;  }  #text1,  #text2,  #text3 {    text-align: center;    position: relative;  }  #text1 {    top: -450px;  }  #text2 {    top: -420px;  }  #text3 {    top: -370px;  }

<!doctype html>  <html lang="en">    <head>      <!-- basic page needs    –––––––––––––––––––––––––––––––––––––––––––––––––– -->    <meta charset="utf-8">    <title>theversionarts studio</title>    <meta name="description" content="theversionarts private design studio. provide clients quality design @ small cost.">    <meta name="author" content="theversionarts">      <!-- mobile specific metas    –––––––––––––––––––––––––––––––––––––––––––––––––– -->    <meta name="viewport" content="width=device-width, initial-scale=1">      <!-- font    –––––––––––––––––––––––––––––––––––––––––––––––––– -->    <link href='http://fonts.googleapis.com/css?family=raleway:400,500,600,700' rel='stylesheet' type='text/css'>      <!-- css      –––––––––––––––––––––––––––––––––––––––––––––––––– -->    <link rel="stylesheet" href="css/normalize.css">    <link rel="stylesheet" href="css/skeleton.css">    <link rel="stylesheet" href="css/base.css">      <!-- favicon      –––––––––––––––––––––––––––––––––––––––––––––––––– -->    <link rel="icon" type="image/png" href="images/favicon.png">      <!-- scripts  	-------------------------------------------------- -->    <script type="text/javascript" src="main.js"></script>    <script src="main.js"></script>      </head>    <body>      <!-- primary page layout  	–––––––––––––––––––––––––––––––––––––––––––––––––– -->    <img src="images/bg.png" id="background">      <div id="headerbg">      <div class="container">        <div class="row">          <div class="five columns">            <img src="images/thv-header.png" id="header">          </div>          <div class="seven columns">            <nav>              <ul>                <li><a href="#about">about</a>                </li>                <li><a href="#contact">contact</a>                </li>                <li><a href="#designers">designers</a>                </li>              </ul>            </nav>          </div>        </div>      </div>    </div>    <div id="aboutbg">      <div class="container2">        <div class="row">          <div class="twelve columns">            <h4 id="about">about us</h4>          </div>          <div class="animated">            <div class="twelve columns">              <p>theversionarts private design studio. founded in winter of 2014. connect clients designers need. our goal serve high quality design @ affordable price through internet. strive impress our                clients. don't sell graphics, or designs. sell art , colours.</p>            </div>          </div>          <div class="animated">            <div class="seven columns" id="aboutbar"></div>          </div>        </div>      </div>    </div>    <div id="managersbg">      <div class="container3">        <div class="row">          <div class="animated">            <h4 id="managers">our managers</h4>          </div>        </div>        <div class="row">          <div class="animated">            <div class="one-third-column" id="screamer">            </div>            <div class="one-third-column" id="swezii">            </div>            <div class="one-third-column" id="kinzu">            </div>          </div>        </div>        <div class="row">          <div class="animated">            <div class="one-third-column">              <p id="manager1">screamer</p>            </div>            <div class="one-third-column">              <p id="manager2">swezii</p>            </div>            <div class="one-third-column">              <p id="manager3">kinzu</p>            </div>          </div>        </div>        <div class="row">          <div class="animated">            <div class="seven columns">              <p id="text1">i guy loves things in head onto paper. have great ideas blow minds! ready!</p>            </div>          </div>          <div class="animated">            <div class="seven columns">              <p id="text2">i love web, app , other designing. goal rid of bad design in city.</p>            </div>          </div>          <div class="animated">            <div class="seven columns">              <p id="text3">i'm guy chilling on computer, creating fantastic art you.</p>            </div>          </div>        </div>      </div>    </div>    <!-- end document    –––––––––––––––––––––––––––––––––––––––––––––––––– -->  </body>    </html>

change class in jquery here: var allmods = $(".module"); should var allmods = $(".animated"); – should work.