Tema oluşturun: "Company"
Bu sayfa nasıl sıfırdan bir Bootstrap tema oluşturmak için size gösterecektir.
Biz basit bir HTML sayfası ile başlar ve biz tamamen işlevsel kişisel ve duyarlı web sitesi var kadar sonra, daha fazla bileşen katacak.
Sonuç aşağıdaki gibi görünecektir ve kullanmak veya onunla ne yapmak istiyorsanız, değiştirmek payı kaydetmek serbesttir:
HTML Başlangıç Sayfası
Aşağıdaki HTML sayfası ile başlar:
<!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>Önyükleme CDN ekleme ve jumbotron ekle
Önyükleme CDN ve jQuery bir bağlantı ekleyin ve içine HTML öğelerini koymak .jumbotron :
Örnek
<!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>Sonuç:
şirket
Biz blablabla uzmanlaşmak
Arkaplan Rengi ve Centre Metin Ekle
1. jumbotron için turuncu bir arka plan rengini ekleyin.
2. Ekle .text-center jumbotron içindeki metni ortalamak için sınıf:
Örnek
<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>Sonuç:
şirket
Biz blablabla uzmanlaşmak
Form ekle
Bir giriş alanına ve bir düğme ile bir form ekleyin:
Örnek
<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>Sonuç:
şirket
Biz blablabla uzmanlaşmak
Konteynerler ekle
İki konteyner ekleyin ( .container-fluid ) ve ikinci kaba özel bir sınıf eklemek ( .bg-grey - gri arka plan rengini ekler):
Örnek
<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>Sonuç:
Şirket Sayfa Hakkında
ipsum Lorem ..
ipsum Lorem ..
Degerlerimiz
MİSYON: Misyonumuz lorem ipsum ..
VİZYON: Vizyonumuz Lorem ipsum ..
Geciktirme ekle
jumbotron sağlayalım ve kaplar bazı dolgu ekleyerek iyi görünmesini:
Örnek
<style>
.jumbotron {
background-color: #f4511e;
color: #fff;
padding: 100px 25px;
}
.container-fluid {
padding: 60px
50px;
}
</style>Sonuç:
şirket
Biz blablabla uzmanlaşmak
Şirket Sayfa Hakkında
ipsum Lorem ..
ipsum Lorem ..
Degerlerimiz
MİSYON: Misyonumuz lorem ipsum ..
VİZYON: Vizyonumuz Lorem ipsum ..
Bir Izgara ekle
1. Bir simge ekle (or the company's logo) Her kaba.
2. simgesi ve Ayrı "about text" iki sütun (oluşturarak .col-sm-8 ve .col-sm-4 )
3. ortalamak için medya sorguları ekle "logo column" den küçük 768 piksel genişliğinde ekranlarda.
Örnek
<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>Sonuç:
Şirket Sayfa Hakkında
ipsum Lorem ..
ipsum Lorem ..
Degerlerimiz
MİSYON: Misyonumuz lorem ipsum ..
VİZYON: Vizyonumuz Lorem ipsum ..
Hizmetler Kapsayıcı ekle
Aynı genişlikte 2x3 sütun, bir kapsayıcı ekleme ( .col-sm-4 ) :
Örnek
<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>
Sonuç:
HİZMETLER
Teklifimiz
GÜÇ
Lorem ipsum dolor sit amet ..
AŞK
Lorem ipsum dolor sit amet ..
İŞ BİTMİŞ
Lorem ipsum dolor sit amet ..
YEŞİL
Lorem ipsum dolor sit amet ..
SERTİFİKALI
Lorem ipsum dolor sit amet ..
ZOR İŞ
Lorem ipsum dolor sit amet ..
stil Simgeler
Özel bir sınıf ekleyin ( .logo-small ) her glyphicon için "Services" kap. Onları görünümünün CSS kullanın:
Örnek
/* 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;
}
Sonuç:
Şirket Sayfa Hakkında
ipsum Lorem ..
ipsum Lorem ..
Degerlerimiz
MİSYON: Misyonumuz lorem ipsum ..
VİZYON: Vizyonumuz Lorem ipsum ..
HİZMETLER
Teklifimiz
GÜÇ
Lorem ipsum dolor sit amet ..
AŞK
Lorem ipsum dolor sit amet ..
İŞ BİTMİŞ
Lorem ipsum dolor sit amet ..
YEŞİL
Lorem ipsum dolor sit amet ..
SERTİFİKALI
Lorem ipsum dolor sit amet ..
ZOR İŞ
Lorem ipsum dolor sit amet ..
Portföy Kapsayıcı ekle
Eşit genişlikte, üç sütun ile, yeni bir tam genişlikli bir kap oluşturma ( .col-sm-4 ) :
Her sütunda içinde, bir görüntü ekleyin.
Ardından, kullanmak .img-thumbnail küçük resim görüntüyü şekillendirmeye sınıfı.
Normalde, eklersiniz .img-thumbnail doğrudan sınıfını <img> elemanı. biz de bir görüntü metni belirtebilirsiniz böylece bu örnekte, görüntünün etrafında bir minik konteyner yerleştirdik.
Örnek
<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>
Sonuç:
Portföy
biz yarattık neler
Paris
Evet, Paris'i inşa
New York
Biz New York inşa
San Francisco
Evet, San Fran bizimdir
Şekillendirme Küçük Resimlere
görüntüleri görünümünün CSS kullanın. Örneğimizde, biz onlara sınır kaldırarak, kartlar gibi görünmesi için çalıştı ve her görüntü üzerinde% 100 genişlik belirledik.
Örnek
.thumbnail {
padding: 0 0 15px 0;
border: none;
border-radius: 0;
}
.thumbnail img {
width: 100%;
height: 100%;
margin-bottom: 10px;
}
Sonuç:
Portföy
biz yarattık neler
Paris
Evet, Paris'i inşa
New York
Biz New York inşa
San Francisco
Evet, San Fran bizimdir
Bir Carousel ekle
Bir atlıkarınca ekleyin:
Örnek
<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>Sonuç:
Ne müşterilerimizin söylediği
Kendin dene "Stil Carousel
atlıkarınca görünümünün CSS kullanın:
Örnek
.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;
}Sonuç:
Ne müşterilerimizin söylediği
Kendin dene "Fiyatlandırma Kapsayıcı ekle
Eşit genişlikte, üç sütun ile, tam genişlikli bir kap oluşturma ( .col-sm-4 ) :
Her bir sütun içinde, bir panel ekleyin:
Örnek
<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>
Sonuç:
Fiyatlandırma
İşinize yarayacak bir ödeme planı seçme
Temel
20 Lorem
15 Ipsum
5 Dolor
2 Sit
Sonsuz Amet
profesyonel
50 Lorem
25 Ipsum
10 Dolor
5 Sit
Sonsuz Amet
Ödül
100 Lorem
50 Ipsum
25 Dolor
10 Sit
Sonsuz Amet
Şekillendirme Paneller
panellerini görünümünün CSS kullanın:
Örnek
.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;
}
Sonuç:
Fiyatlandırma
İşinize yarayacak bir ödeme planı seçme
Temel
20 Lorem
15 Ipsum
5 Dolor
2 Sit
Sonsuz Amet
profesyonel
50 Lorem
25 Ipsum
10 Dolor
5 Sit
Sonsuz Amet
Ödül
100 Lorem
50 Ipsum
25 Dolor
10 Sit
Sonsuz Amet
İletişim Kapsayıcı ekle
iletişim bilgileri ile yeni bir kapsayıcı ekleyin:
Örnek
<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>Sonuç:
TEMAS
Bize ulaşın ve biz 24 saat içinde size geri döneceğiz.
Chicago, ABD
+00 1515151515
Google Maps ekleyin
(Bizim okuma Daha fazla bilgi için Google Maps ekleyin Google Maps Tutoria l):
Örnek
<!-- 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>Sonuç:
Kendin dene "Bir Navbarınızı ekle
küçük ekranlarında çöker sayfanın üst kısmında bir navbar ekleyin:
Örnek
<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>Sonuç:
Kendin dene " İpucu: ile gezinti düğmelerini sağ hizaya navbar-right sınıfa.
Stil Navbar'ı
gezinme çubuğunu özelleştirmek için CSS kullanın:
Örnek
.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;
}Sonuç:
Kendin dene "Scrollspy ekle
otomatik kaydırma yaparken navbar bağlantıları güncelleştirmek için scrollspy ekleyin:
Örnek
<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"> Kendin dene " Bir Altbilgi Ekle
Bir ekleme "Up Arrow" tıklandığında sayfanın üst kullanıcıyı götürecek olan altbilgi simgeyi:
Örnek
<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>Sonuç:
Kendin dene "Pürüzsüz Kaydırma Ekleme
Düzgün kaydırma eklemek için jQuery kullanarak (when clicking on the links in the navbar) :
Örnek
<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> Kendin dene " Son dokunuş
Beğendiğiniz bir yazı ekleyerek Tema kişiselleştirin. Biz kullandık "Montserrat" ve "Lato" Google'ın Yazı Kütüphanesi'nden.
Içinde yazı bağlantı <head> bölümünde:
<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">
Sonra sayfasında kullanabilirsiniz:
Örnek
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;
}Ayrıca, bazı öğelere bazı ekstra stil ekledik:
Örnek
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;
} Kendin dene " Unsurları Slayt
Ayrıca Tomardaki elemanları sessizce gidecek bir animasyon efekti oluşturduk. Bunu kullanmak istiyorsanız, sadece ekleyebilir .slideanim İçinde slayt istiyorum elemana sınıf ve CSS ve jQuery (başlatmak için süre, opaklığı, değiştirmek için çekinmeyin için aşağıdaki zaman kaymak üzere ekleyin ve bunun gibi):
CSS Örneği
.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 Örnek
$(window).scroll(function() {
$(".slideanim").each(function(){
var pos = $(this).offset().top;
var winTop =
$(window).scrollTop();
if (pos < winTop + 600) {
$(this).addClass("slide");
}
});
}); Kendin dene "