Последние учебники веб-разработки
 

Bootstrap Тема "Компания"


Создать тему: "Компания"

Эта страница покажет вам, как построить тему Bootstrap с нуля.

Мы начнем с простой HTML-страницы, а затем добавлять все больше и больше компонентов, пока у нас есть полностью функциональный, личный и адаптивный веб-сайт.

Результат будет выглядеть следующим образом, и вы можете изменять, сохранять, делиться, использовать или делать все, что вы хотите с ним:


HTML Стартовая страница

Мы начнем со следующего HTML-страницы:

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Theme Company</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>

<h1>Company</h1>
<p>We specialize in blablabla</p>

</body>
</html>

Добавить Bootstrap CDN и добавить JumboTron

Добавить Bootstrap CDN и ссылку на JQuery и поместить HTML - элементы внутри .jumbotron :

пример

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Theme Company</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
  <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
</head>
<body>

<div class="jumbotron">
  <h1>Company</h1>
  <p>We specialize in blablabla</p>
</div>

</body>
</html>

Результат:

Компания

Мы специализируемся на блаблабла

Попробуй сам "

Добавить цвет фона и центра текстовых

1. Добавьте оранжевый цвет фона в JumboTron.

2. Добавьте .text-center класса к центру текст внутри JumboTron:

пример

<style>
.jumbotron {
    background-color: #f4511e; /* Orange */
    color: #ffffff;
}
</style>

<body>
  <div class="jumbotron text-center">
    <h1>Company</h1>
    <p>We specialize in blablabla</p>
  </div>
</body>

Результат:

Компания

Мы специализируемся на блаблабла

Попробуй сам "

Добавить анкету

Добавить форму с полем ввода и кнопки:

пример

<div class="jumbotron text-center">
  <h1>Company</h1>
  <p>We specialize in blablabla</p>
  <form class="form-inline">
    <input type="email" class="form-control" size="50" placeholder="Email Address">
    <button type="button" class="btn btn-danger">Subscribe</button>
  </form>

</div>

Результат:

Компания

Мы специализируемся на блаблабла

Попробуй сам "

Добавить Контейнеры

Добавить два контейнера ( .container-fluid ), а также добавить пользовательский класс ко второй контейнер ( .bg-grey - добавляет серый цвет фона):

пример

<style>
.bg-grey {
    background-color: #f6f6f6;
}
</style>

<div class="container-fluid">
  <h2>About Company Page</h2>
  <h4>Lorem ipsum..</h4>
  <p>Lorem ipsum..</p>
  <button class="btn btn-default btn-lg">Get in Touch</button>
</div>

<div class="container-fluid bg-grey">
  <h2>Our Values</h2>
  <h4><strong>MISSION:</strong> Our mission lorem ipsum..</h4>
  <p><strong>VISION:</strong> Our vision Lorem ipsum..
</div>

Результат:

О компании Page

Lorem Ipsum ..

Lorem Ipsum ..

Наши ценности

МИССИЯ: Наша миссия Lorem Ipsum ..

VISION: Наше видение Lorem Ipsum ..

Попробуй сам "

Добавить Padding

Позволяет сделать JumboTron и контейнеры хорошо выглядеть, добавляя некоторое дополнение:

пример

<style>
.jumbotron {
    background-color: #f4511e;
    color: #fff;
    padding: 100px 25px;
}

.container-fluid {
    padding: 60px 50px;
}
</style>

Результат:

Компания

Мы специализируемся на блаблабла

О компании Page

Lorem Ipsum ..

Lorem Ipsum ..

Наши ценности

МИССИЯ: Наша миссия Lorem Ipsum ..

VISION: Наше видение Lorem Ipsum ..

Попробуй сам "

Добавление сетки

1. Добавление значка (или логотип компании) для каждого контейнера.

2. Отделить значок и "о" текст путем создания двух столбцов ( .col-sm-8 и .col-sm-4 )

3. Добавьте медиа-запросы к центру колонке "логотип" на экранах меньше, чем 768 пикселей в ширину.

пример

<style>
.logo {
    font-size: 200px;
}
@media screen and (max-width: 768px) {
    .col-sm-4 {
        text-align: center;
        margin: 25px 0;
    }
}
</style>


<div class="container-fluid">
  <div class="row">
    <div class="col-sm-8">
      <h2>About Company Page</h2>
      <h4>Lorem ipsum..</h4>
      <p>Lorem ipsum..</p>
      <button class="btn btn-default btn-lg">Get in Touch</button>
    </div>
    <div class="col-sm-4">
      <span class="glyphicon glyphicon-signal logo"></span>
    </div>
  </div>
</div>

<div class="container-fluid bg-grey">
  <div class="row">
    <div class="col-sm-4">
      <span class="glyphicon glyphicon-globe logo"></span>
    </div>
    <div class="col-sm-8">
      <h2>Our Values</h2>
      <h4><strong>MISSION:</strong> Our mission lorem ipsum..</h4>
      <p><strong>VISION:</strong> Our vision Lorem ipsum..</p>
    </div>
  </div>
</div>

Результат:

О компании Page

Lorem Ipsum ..

Lorem Ipsum ..

Наши ценности

МИССИЯ: Наша миссия Lorem Ipsum ..

VISION: Наше видение Lorem Ipsum ..

Попробуй сам "

Добавить услуги Контейнерные

Добавьте новый контейнер с 2х3 столбцов одинаковой ширины ( .col-sm-4 ):

пример

<div class="container-fluid text-center">
  <h2>SERVICES</h2>
  <h4>What we offer</h4>
  <br>
  <div class="row">
    <div class="col-sm-4">
      <span class="glyphicon glyphicon-off"></span>
      <h4>POWER</h4>
      <p>Lorem ipsum dolor sit amet..</p>
    </div>
    <div class="col-sm-4">
      <span class="glyphicon glyphicon-heart"></span>
      <h4>LOVE</h4>
      <p>Lorem ipsum dolor sit amet..</p>
    </div>
    <div class="col-sm-4">
      <span class="glyphicon glyphicon-lock"></span>
      <h4>JOB DONE</h4>
      <p>Lorem ipsum dolor sit amet..</p>
    </div>
    </div>
    <br><br>
  <div class="row">
    <div class="col-sm-4">
      <span class="glyphicon glyphicon-leaf"></span>
      <h4>GREEN</h4>
      <p>Lorem ipsum dolor sit amet..</p>
    </div>
    <div class="col-sm-4">
      <span class="glyphicon glyphicon-certificate"></span>
      <h4>CERTIFIED</h4>
      <p>Lorem ipsum dolor sit amet..</p>
    </div>
    <div class="col-sm-4">
      <span class="glyphicon glyphicon-wrench"></span>
      <h4>HARD WORK</h4>
      <p>Lorem ipsum dolor sit amet..</p>
    </div>
  </div>
</div>

Результат:

СЕРВИСЫ

Что мы предлагаем


МОЩНОСТЬ

Lorem Ipsum Dolor сидят Амет ..

ЛЮБЛЮ

Lorem Ipsum Dolor сидят Амет ..

РАБОТА ВЫПОЛНЕНА

Lorem Ipsum Dolor сидят Амет ..



ЗЕЛЕНЫЙ

Lorem Ipsum Dolor сидят Амет ..

ПРОВЕРЕННЫЙ

Lorem Ipsum Dolor сидят Амет ..

ТЯЖЕЛАЯ РАБОТА

Lorem Ipsum Dolor сидят Амет ..

Попробуй сам "

Стайлинг Иконки

Добавить пользовательский класс ( .logo-small ) для каждого glyphicon в контейнере «Услуги». Используйте CSS, чтобы их стиль:

пример

/* Add an orange color to all icons and set the font-size */
.logo-small {
    color: #f4511e;
    font-size: 50px;
}

.logo {
    color: #f4511e;
    font-size: 200px;
}

Результат:

О компании Page

Lorem Ipsum ..

Lorem Ipsum ..


Наши ценности

МИССИЯ: Наша миссия Lorem Ipsum ..

VISION: Наше видение Lorem Ipsum ..

СЕРВИСЫ

Что мы предлагаем


МОЩНОСТЬ

Lorem Ipsum Dolor сидят Амет ..

ЛЮБЛЮ

Lorem Ipsum Dolor сидят Амет ..

РАБОТА ВЫПОЛНЕНА

Lorem Ipsum Dolor сидят Амет ..



ЗЕЛЕНЫЙ

Lorem Ipsum Dolor сидят Амет ..

ПРОВЕРЕННЫЙ

Lorem Ipsum Dolor сидят Амет ..

ТЯЖЕЛАЯ РАБОТА

Lorem Ipsum Dolor сидят Амет ..

Попробуй сам "

Добавить Портфолио Контейнер

Создать новый контейнер полной ширины, с тремя колонками одинаковой ширины ( .col-sm-4 ):

Внутри каждого столбца, добавить изображение.

Затем, используя .img-thumbnail класс , чтобы сформировать изображение в виде эскиза.

Как правило, вы бы добавить .img-thumbnail класс непосредственно к элементу <IMG>. В этом примере, мы поместили контейнер эскиз вокруг изображения, так что мы можем указать текст изображения, а также.

пример

<div class="container-fluid text-center bg-grey">
  <h2>Portfolio</h2>
  <h4>What we have created</h4>
  <div class="row text-center">
    <div class="col-sm-4">
      <div class="thumbnail">
        <img src="paris.jpg" alt="Paris">
        <p><strong>Paris</strong></p>
        <p>Yes, we built Paris</p>
      </div>
    </div>
    <div class="col-sm-4">
      <div class="thumbnail">
        <img src="newyork.jpg" alt="New York">
        <p><strong>New York</strong></p>
        <p>We built New York</p>
      </div>
    </div>
    <div class="col-sm-4">
      <div class="thumbnail">
        <img src="sanfran.jpg" alt="San Francisco">
        <p><strong>San Francisco</strong></p>
        <p>Yes, San Fran is ours</p>
      </div>
    </div>
</div>

Результат:

портфолио


То, что мы создали

Париж

Париж

Да, мы построили Париж

Нью-Йорк

Нью-Йорк

Мы построили Нью-Йорк

Сан-Франциско

Сан-Франциско

Да, Сан-Фран наша

Попробуй сам "

Стайлинг уменьшенные изображения

Использование CSS для стилизации изображения. В нашем примере, мы постарались сделать их похожими на карты, удалив их границы, и установите ширину 100% на каждом изображении.

пример

.thumbnail {
    padding: 0 0 15px 0;
    border: none;
    border-radius: 0;
}

.thumbnail img {
    width: 100%;
    height: 100%;
    margin-bottom: 10px;
}

Результат:

портфолио


То, что мы создали

Париж

Париж

Да, мы построили Париж

Нью-Йорк

Нью-Йорк

Мы построили Нью-Йорк

Сан-Франциско

Сан-Франциско

Да, Сан-Фран наша

Попробуй сам "

Добавить Carousel

Добавить карусель:

пример

<h2>What our customers say</h2>
<div id="myCarousel" class="carousel slide text-center" data-ride="carousel">
  <!-- Indicators -->
  <ol class="carousel-indicators">
    <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
    <li data-target="#myCarousel" data-slide-to="1"></li>
    <li data-target="#myCarousel" data-slide-to="2"></li>
  </ol>

  <!-- Wrapper for slides -->
  <div class="carousel-inner" role="listbox">
    <div class="item active">
    <h4>"This company is the best. I am so happy with the result!"<br><span style="font-style:normal;">Michael Roe, Vice President, Comment Box</span></h4>
    </div>
    <div class="item">
      <h4>"One word... WOW!!"<br><span style="font-style:normal;">John Doe, Salesman, Rep Inc</span></h4>
    </div>
    <div class="item">
      <h4>"Could I... BE any more happy with this company?"<br><span style="font-style:normal;">Chandler Bing, Actor, FriendsAlot</span></h4>
    </div>
  </div>

  <!-- Left and right controls -->
  <a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev">
    <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
    <span class="sr-only">Previous</span>
  </a>
  <a class="right carousel-control" href="#myCarousel" role="button" data-slide="next">
    <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
    <span class="sr-only">Next</span>
  </a>
</div>

Результат:

Что говорят наши клиенты

Попробуй сам "

Стиль The Carousel

Используйте CSS для стиля карусель:

пример

.carousel-control.right, .carousel-control.left {
    background-image: none;
    color: #f4511e;
}

.carousel-indicators li {
    border-color: #f4511e;
}

.carousel-indicators li.active {
    background-color: #f4511e;
}

.item h4 {
    font-size: 19px;
    line-height: 1.375em;
    font-weight: 400;
    font-style: italic;
    margin: 70px 0;
}

.item span {
    font-style: normal;
}

Результат:

Что говорят наши клиенты

Попробуй сам "

Добавить контейнер Цены

Создание полного контейнера шириной, с тремя колонками одинаковой ширины ( .col-sm-4 ):

Внутри каждого столбца, добавьте панель:

пример

<div class="container-fluid">
  <div class="text-center">
    <h2>Pricing</h2>
    <h4>Choose a payment plan that works for you</h4>
  </div>
  <div class="row">
    <div class="col-sm-4">
      <div class="panel panel-default text-center">
        <div class="panel-heading">
          <h1>Basic</h1>
        </div>
        <div class="panel-body">
          <p><strong>20</strong> Lorem</p>
          <p><strong>15</strong> Ipsum</p>
          <p><strong>5</strong> Dolor</p>
          <p><strong>2</strong> Sit</p>
          <p><strong>Endless</strong> Amet</p>
        </div>
        <div class="panel-footer">
          <h3>$19</h3>
          <h4>per month</h4>
          <button class="btn btn-lg">Sign Up</button>
        </div>
      </div>
    </div>
    <div class="col-sm-4">
      <div class="panel panel-default text-center">
        <div class="panel-heading">
          <h1>Pro</h1>
        </div>
        <div class="panel-body">
          <p><strong>50</strong> Lorem</p>
          <p><strong>25</strong> Ipsum</p>
          <p><strong>10</strong> Dolor</p>
          <p><strong>5</strong> Sit</p>
          <p><strong>Endless</strong> Amet</p>
        </div>
        <div class="panel-footer">
          <h3>$29</h3>
          <h4>per month</h4>
          <button class="btn btn-lg">Sign Up</button>
        </div>
      </div>
    </div>
   <div class="col-sm-4">
      <div class="panel panel-default text-center">
        <div class="panel-heading">
          <h1>Premium</h1>
        </div>
        <div class="panel-body">
          <p><strong>100</strong> Lorem</p>
          <p><strong>50</strong> Ipsum</p>
          <p><strong>25</strong> Dolor</p>
          <p><strong>10</strong> Sit</p>
          <p><strong>Endless</strong> Amet</p>
        </div>
        <div class="panel-footer">
          <h3>$49</h3>
          <h4>per month</h4>
          <button class="btn btn-lg">Sign Up</button>
        </div>
      </div>
    </div>
  </div>
</div>

Результат:

ценообразование

Выберите тарифный план, который работает для вас

базовый

20 Lorem

15 Ipsum

5 Dolor

2 Sit

Бесконечные Амет

профессионал

50 Lorem

25 Ipsum

10 Dolor

5 Sit

Бесконечные Амет

премия

100 Lorem

50 Ipsum

25 Dolor

10 Sit

Бесконечные Амет

Попробуй сам "

Стилизация панели

Используйте CSS для оформления панелей:

пример

.panel {
    border: 1px solid #f4511e;
    border-radius:0;
    transition: box-shadow 0.5s;
}

.panel:hover {
    box-shadow: 5px 0px 40px rgba(0,0,0, .2);
}

.panel-footer .btn:hover {
    border: 1px solid #f4511e;
    background-color: #fff !important;
    color: #f4511e;
}

.panel-heading {
    color: #fff !important;
    background-color: #f4511e !important;
    padding: 25px;
    border-bottom: 1px solid transparent;
    border-top-left-radius: 0px;
    border-top-right-radius: 0px;
    border-bottom-left-radius: 0px;
    border-bottom-right-radius: 0px;
}

.panel-footer {
    background-color: #fff !important;
}

.panel-footer h3 {
    font-size: 32px;
}

.panel-footer h4 {
    color: #aaa;
    font-size: 14px;
}

.panel-footer .btn {
    margin: 15px 0;
    background-color: #f4511e;
    color: #fff;
}

Результат:

ценообразование

Выберите тарифный план, который работает для вас

базовый

20 Lorem

15 Ipsum

5 Dolor

2 Sit

Бесконечные Амет

профессионал

50 Lorem

25 Ipsum

10 Dolor

5 Sit

Бесконечные Амет

премия

100 Lorem

50 Ipsum

25 Dolor

10 Sit

Бесконечные Амет

Попробуй сам "

Добавление контакта контейнера

Добавить новый контейнер с контактной информацией:

пример

<div class="container-fluid bg-grey">
  <h2 class="text-center">CONTACT</h2>
  <div class="row">
    <div class="col-sm-5">
      <p>Contact us and we'll get back to you within 24 hours.</p>
      <p><span class="glyphicon glyphicon-map-marker"></span> Chicago, US</p>
      <p><span class="glyphicon glyphicon-phone"></span> +00 1515151515</p>
      <p><span class="glyphicon glyphicon-envelope"></span> [email protected]</p>
    </div>
    <div class="col-sm-7">
      <div class="row">
        <div class="col-sm-6 form-group">
          <input class="form-control" id="name" name="name" placeholder="Name" type="text" required>
        </div>
        <div class="col-sm-6 form-group">
          <input class="form-control" id="email" name="email" placeholder="Email" type="email" required>
        </div>
      </div>
      <textarea class="form-control" id="comments" name="comments" placeholder="Comment" rows="5"></textarea><br>
      <div class="row">
        <div class="col-sm-12 form-group">
          <button class="btn btn-default pull-right" type="submit">Send</button>
        </div>
      </div>
    </div>
  </div>
</div>

Результат:

CONTACT

Свяжитесь с нами, и мы свяжемся с вами в течение 24 часов.

Чикаго, США

+00 1515151515

[email protected]


Попробуй сам "

Добавить Google Maps

Добавить Google Maps (Для получения более подробной информации ознакомьтесь с Google Maps Tutoria л):

пример

<!-- Set height and width with CSS -->
<div id="googleMap" style="height:400px;width:100%;"></div>

<!-- Add Google Maps -->
<script src="http://maps.googleapis.com/maps/api/js"></script>
<script>
var myCenter = new google.maps.LatLng(41.878114, -87.629798);

function initialize() {
var mapProp = {
center:myCenter,
zoom:12,
scrollwheel:false,
draggable:false,
mapTypeId:google.maps.MapTypeId.ROADMAP
};

var map = new google.maps.Map(document.getElementById("googleMap"),mapProp);

var marker = new google.maps.Marker({
position:myCenter,
});

marker.setMap(map);
}

google.maps.event.addDomListener(window, 'load', initialize);
</script>

Результат:

Попробуй сам "

Добавление NavBar

Добавьте NavBar в верхней части страницы, которая падает на небольших экранах:

пример

<nav class="navbar navbar-default navbar-fixed-top">
  <div class="container">
    <div class="navbar-header">
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <a class="navbar-brand" href="#">Logo</a>
    </div>
    <div class="collapse navbar-collapse" id="myNavbar">
      <ul class="nav navbar-nav navbar-right">
        <li><a href="#about">ABOUT</a></li>
        <li><a href="#services">SERVICES</a></li>
        <li><a href="#portfolio">PORTFOLIO</a></li>
        <li><a href="#pricing">PRICING</a></li>
        <li><a href="#contact">CONTACT</a></li>
      </ul>
    </div>
  </div>
</nav>

Результат:

Попробуй сам "

Заметка Совет: правой кнопкой выравнивания кнопок навигации с navbar-right класса.


Стиль Navbar

Используйте CSS, чтобы настроить панель навигации:

пример

.navbar {
    margin-bottom: 0;
    background-color: #f4511e;
    z-index: 9999;
    border: 0;
    font-size: 12px !important;
    line-height: 1.42857143 !important;
    letter-spacing: 4px;
    border-radius: 0;
}

.navbar li a, .navbar .navbar-brand {
    color: #fff !important;
}

.navbar-nav li a:hover, .navbar-nav li.active a {
    color: #f4511e !important;
    background-color: #fff !important;
}

.navbar-default .navbar-toggle {
    border-color: transparent;
    color: #fff !important;
}

Результат:

Попробуй сам "

Добавить Scrollspy

Добавить scrollspy для автоматического обновления NavBar ссылки при прокрутке:

пример

<body id="myPage" data-spy="scroll" data-target=".navbar" data-offset="60">

<div id="about" class="container-fluid">
<div id="services" class="container-fluid">
<div id="portfolio" class="container-fluid">
<div id="pricing" class="container-fluid">
<div id="contact" class="container-fluid">
Попробуй сам "

Добавление Footer

Добавьте значок "Стрелка вверх" к сноске, который будет принимать пользователя к началу страницы при нажатии на:

пример

<style>
footer .glyphicon {
    font-size: 20px;
    margin-bottom: 20px;
    color: #f4511e;
}
</style>

<footer class="container-fluid text-center">
  <a href="#myPage" title="To Top">
    <span class="glyphicon glyphicon-chevron-up"></span>
  </a>
  <p>Bootstrap Theme Made By <a href="http://www.w3ii.com" title="Visit w3ii">www.w3ii.com</a></p>
</footer>

Результат:

Попробуй сам "

Добавление плавную прокрутку

Используйте JQuery, чтобы добавить плавную прокрутку (при нажатии на ссылки в навигационной панели):

пример

<script>
$(document).ready(function(){
  // Add smooth scrolling to all links in navbar + footer link
  $(".navbar a, footer a[href='#myPage']").on('click', function(event) {

  // Prevent default anchor click behavior
  event.preventDefault();

  // Store hash
  var hash = this.hash;

  // Using jQuery's animate() method to add smooth page scroll
  // The optional number (900) specifies the number of milliseconds it takes to scroll to the specified area
  $('html, body').animate({
    scrollTop: $(hash).offset().top
  }, 900, function(){

    // Add hash (#) to URL when done scrolling (default click behavior)
    window.location.hash = hash;
    });
  });
})
</script>
Попробуй сам "

Последнее прикосновение

Сделайте свою тему, добавив шрифт, который вам нравится. Мы использовали "Монсерат" и "Lato" из библиотеки шрифтов Google.

Ссылка на шрифт в <head> раздел:

<link href="http://fonts.googleapis.com/css?family=Montserrat" rel="stylesheet" type="text/css">

<link href="http://fonts.googleapis.com/css?family=Lato" rel="stylesheet" type="text/css">

Затем вы можете использовать их на странице:

пример

body {
    font: 400 15px Lato, sans-serif;
    line-height: 1.8;
    color: #818181;
}

.jumbotron {
    font-family: Montserrat, sans-serif;
}

.navbar {
    font-family: Montserrat, sans-serif;
}

Мы также добавили некоторые дополнительные стиль к некоторым элементам:

пример

h2 {
    font-size: 24px;
    text-transform: uppercase;
    color: #303030;
    font-weight: 600;
    margin-bottom: 30px;
}

h4 {
    font-size: 19px;
    line-height: 1.375em;
    color: #303030;
    font-weight: 400;
    margin-bottom: 30px;
}
Попробуй сам "

Slide в элементах

Мы также создали эффект анимации, который будет скользить в элементах на свитке. Если вы хотите использовать его, просто добавьте .slideanim класс к элементу , который Вы хотите скользить, и добавьте следующие строки в CSS и JQuery ( не стесняйтесь изменять продолжительность, непрозрачность, с чего начать, когда скользить в, и так далее):

CSS Пример

.slideanim {visibility:hidden;}
.slide {
    /* The name of the animation */
    animation-name: slide;
    -webkit-animation-name: slide;
    /* The duration of the animation */
    animation-duration: 1s;
    -webkit-animation-duration: 1s;
    /* Make the element visible */
    visibility: visible;
}

/* Go from 0% to 100% opacity (see-through) and specify the percentage from when to slide in the element along the Y-axis */
@keyframes slide {
    0% {
        opacity: 0;
        -webkit-transform: translateY(70%);
    }
    100% {
        opacity: 1;
        -webkit-transform: translateY(0%);
    }
}
@-webkit-keyframes slide {
    0% {
        opacity: 0;
        -webkit-transform: translateY(70%);
    }
    100% {
        opacity: 1;
        -webkit-transform: translateY(0%);
    }
}

JQuery Пример

$(window).scroll(function() {
  $(".slideanim").each(function(){
    var pos = $(this).offset().top;

    var winTop = $(window).scrollTop();
    if (pos < winTop + 600) {
      $(this).addClass("slide");
    }
  });
});
Попробуй сам "

Complete "Компания" Theme