테마 만들기 : "회사"
이 페이지는 방법을 처음부터 부트 스트랩 테마를 구축하는 방법을 보여줍니다.
우리는 간단한 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>부트 스트랩 CDN을 추가하고 대형 기기 추가
부트 스트랩 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>결과:
회사
우리는 blablabla 전문
배경 색상 및 센터 텍스트 추가
1. 대형 기기에 오렌지 배경 색상을 추가합니다.
2. 추가 .text-center 대형 기기 내부의 텍스트를 중앙에 클래스를 :
예
<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>결과:
회사
우리는 blablabla 전문
폼 추가
입력 필드와 버튼을 사용하여 양식을 추가 :
예
<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>결과:
회사
우리는 blablabla 전문
컨테이너 추가
이 용기 (추가 .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>결과:
회사 소개 페이지
ipsum의가 lorem ..
ipsum의가 lorem ..
우리의 가치
임무 : 우리의 임무가 lorem ipsum의 ..
VISION : 우리의 비전 LOREM의 ipsum의 ..
패딩 추가
대형 기기를 만들 수 있습니다 및 용기 일부 패딩을 추가하여 좋아 보인다 :
예
<style>
.jumbotron {
background-color: #f4511e;
color: #fff;
padding: 100px 25px;
}
.container-fluid {
padding: 60px
50px;
}
</style>결과:
회사
우리는 blablabla 전문
회사 소개 페이지
ipsum의가 lorem ..
ipsum의가 lorem ..
우리의 가치
임무 : 우리의 임무가 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>결과:
회사 소개 페이지
ipsum의가 lorem ..
ipsum의가 lorem ..
우리의 가치
임무 : 우리의 임무가 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의 슬픔은 AMET 앉아 ..
애정
가 lorem ipsum의 슬픔은 AMET 앉아 ..
작업 완료
가 lorem ipsum의 슬픔은 AMET 앉아 ..
녹색
가 lorem ipsum의 슬픔은 AMET 앉아 ..
CERTIFIED
가 lorem ipsum의 슬픔은 AMET 앉아 ..
힘든 일
가 lorem ipsum의 슬픔은 AMET 앉아 ..
스타일 아이콘
사용자 정의 클래스 (추가 .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;
}
결과:
회사 소개 페이지
ipsum의가 lorem ..
ipsum의가 lorem ..
우리의 가치
임무 : 우리의 임무가 lorem ipsum의 ..
VISION : 우리의 비전 LOREM의 ipsum의 ..
서비스
우리가 제공하는
힘
가 lorem ipsum의 슬픔은 AMET 앉아 ..
애정
가 lorem ipsum의 슬픔은 AMET 앉아 ..
작업 완료
가 lorem ipsum의 슬픔은 AMET 앉아 ..
녹색
가 lorem ipsum의 슬픔은 AMET 앉아 ..
CERTIFIED
가 lorem ipsum의 슬픔은 AMET 앉아 ..
힘든 일
가 lorem ipsum의 슬픔은 AMET 앉아 ..
포트폴리오 컨테이너 추가
동일한 폭 (세 열, 새로운 전체 폭 컨테이너를 작성 .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;
}
결과:
포트폴리오
우리가 만든 무엇
파리
예, 우리는 파리를 구축
뉴욕
우리는 뉴욕을 건설
샌프란시스코
예, 샌 프랜은 우리입니다
캐 러셀 추가
회전 목마를 추가합니다 :
예
<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>결과:
어떤 고객이 말하는
»그것을 자신을 시도스타일 회전 목마
회전 목마 스타일을 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 슬픔
이 앉아
끝없는 AMET
찬성
50 LOREM
25 Ipsum 제품
10 슬픔
5 앉아
끝없는 AMET
프리미엄
(100)가 lorem
50 Ipsum 제품
25 슬픔
10 앉아
끝없는 AMET
스타일링 패널
패널의 스타일을 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 슬픔
이 앉아
끝없는 AMET
찬성
50 LOREM
25 Ipsum 제품
10 슬픔
5 앉아
끝없는 AMET
프리미엄
(100)가 lorem
50 Ipsum 제품
25 슬픔
10 앉아
끝없는 AMET
연락 컨테이너 추가
연락처 정보와 새 컨테이너를 추가합니다 :
예
<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>결과:
접촉
Google지도 추가
(우리의 읽기, 자세한 내용은 Google지도를 추가 Google지도 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에 추가
작은 화면에 붕괴 페이지 상단에 네비게이션 바 추가 :
예
<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 클래스를. |
|---|
스타일 네비게이션 바에
탐색 모음을 사용자 정의하는 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 추가
자동으로 스크롤 할 때를 Navbar의 링크를 업데이트 할 scrollspy 추가 :
예
<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"> »그것을 자신을 시도 바닥 글 추가
클릭하면 페이지 상단에 사용자가 걸릴 것이다, 바닥 글에 "위쪽 화살표"아이콘을 추가합니다 :
예
<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> »그것을 자신을 시도 최종 터치
원하는 글꼴을 추가하여 테마 두세요. 우리는 "몬 세라"구글의 글꼴 라이브러리에서 "라토"를 사용하고 있습니다.
에서 글꼴 링크 <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;
} »그것을 자신을 시도 요소에서 슬라이드
우리는 또한 스크롤의 요소에 미끄러 애니메이션 효과를 만들었습니다. 당신이 그것을 사용하려는 경우, 그냥 추가 .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");
}
});
}); »그것을 자신을 시도