Erstellen Sie ein Thema: "Gesellschaft"
Diese Seite zeigt Ihnen, wie eine Bootstrap Thema von Grund auf neu zu bauen.
Wir werden mit einem einfachen HTML-Seite zu starten, und dann mehr und mehr Komponenten hinzufügen, bis wir eine voll funktionsfähige, persönliche und ansprechende Website.
Das Ergebnis sieht wie folgt aus, und Sie sind frei, zu verändern, zu speichern, zu teilen, verwenden oder tun, was man will:
HTML-Startseite
Wir werden mit der folgenden HTML-Seite zu starten:
<!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>In Bootstrap CDN und eine Jumbotron hinzufügen
In Bootstrap CDN und einen Link zu jQuery und HTML - Elemente in einem setzen .jumbotron :
Beispiel
<!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>Ergebnis:
Unternehmen
Wir sind spezialisiert auf blablabla
Fügen Sie Hintergrundfarbe und Text zentrieren
1. Fügen Sie eine orange Hintergrundfarbe zu der jumbotron.
2. Fügen Sie den .text-center - Klasse den Text innerhalb des jumbotron zum Zentrum:
Beispiel
<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>Ergebnis:
Unternehmen
Wir sind spezialisiert auf blablabla
Formular hinzufügen
Fügen Sie ein Formular mit einem Eingabefeld und einem Button:
Beispiel
<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>Ergebnis:
Unternehmen
Wir sind spezialisiert auf blablabla
In Container
In zwei Behälter ( .container-fluid ), und fügen Sie eine benutzerdefinierte Klasse zum zweiten Behälter ( .bg-grey - fügt eine graue Hintergrundfarbe):
Beispiel
<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>Ergebnis:
Über das Unternehmen Seite
Lorem ipsum ..
Lorem ipsum ..
Unsere Werte
Mission: Unsere Mission Lorem ipsum ..
VISION: Unsere Vision Lorem ipsum ..
In Padding
Läßt die jumbotron machen und die Behälter gut aussehen, indem Sie einige Polsterung und fügte hinzu:
Beispiel
<style>
.jumbotron {
background-color: #f4511e;
color: #fff;
padding: 100px 25px;
}
.container-fluid {
padding: 60px
50px;
}
</style>Ergebnis:
Unternehmen
Wir sind spezialisiert auf blablabla
Über das Unternehmen Seite
Lorem ipsum ..
Lorem ipsum ..
Unsere Werte
Mission: Unsere Mission Lorem ipsum ..
VISION: Unsere Vision Lorem ipsum ..
Fügen Sie ein Gitter
1. Fügen Sie ein Symbol (oder das Logo des Unternehmens) zu jedem Behälter.
2. Trennen Sie das Symbol und die "über Text" durch die Schaffung von zwei Spalten ( .col-sm-8 und .col-sm-4 )
3. Fügen Sie Medienanfragen die "logo-Spalte" auf den Bildschirmen zum Zentrum kleiner als 768 Pixel breit.
Beispiel
<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>Ergebnis:
Über das Unternehmen Seite
Lorem ipsum ..
Lorem ipsum ..
Unsere Werte
Mission: Unsere Mission Lorem ipsum ..
VISION: Unsere Vision Lorem ipsum ..
Dienste hinzufügen Container
Fügen Sie einen neuen Container, mit 2x3 Spalten mit gleicher Breite ( .col-sm-4 ):
Beispiel
<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>
Ergebnis:
DIENSTLEISTUNGEN
Was wir anbieten
POWER
Lorem ipsum dolor sit amet ..
LIEBE
Lorem ipsum dolor sit amet ..
JOB ERLEDIGT
Lorem ipsum dolor sit amet ..
GRÜN
Lorem ipsum dolor sit amet ..
ZUGE
Lorem ipsum dolor sit amet ..
HARTE ARBEIT
Lorem ipsum dolor sit amet ..
Styling-Icons
Fügen Sie eine benutzerdefinierte Klasse ( .logo-small ) zu jedem glyphicon im "Dienste" Container. Verwenden Sie CSS sie zu gestalten:
Beispiel
/* 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;
}
Ergebnis:
Über das Unternehmen Seite
Lorem ipsum ..
Lorem ipsum ..
Unsere Werte
Mission: Unsere Mission Lorem ipsum ..
VISION: Unsere Vision Lorem ipsum ..
DIENSTLEISTUNGEN
Was wir anbieten
POWER
Lorem ipsum dolor sit amet ..
LIEBE
Lorem ipsum dolor sit amet ..
JOB ERLEDIGT
Lorem ipsum dolor sit amet ..
GRÜN
Lorem ipsum dolor sit amet ..
ZUGE
Lorem ipsum dolor sit amet ..
HARTE ARBEIT
Lorem ipsum dolor sit amet ..
In Portfolio Container
Erstellen Sie ein neues voller Breite Behälter, mit drei Spalten mit gleicher Breite ( .col-sm-4 ):
In jeder Spalte, um ein Bild hinzuzufügen.
Verwenden Sie dann die .img-thumbnail - Klasse das Bild auf ein Bild um es zu formen.
Normalerweise würden Sie das Add .img-thumbnail - Klasse direkt mit dem Element <img>. In diesem Beispiel haben wir eine Miniatur Behälter um das Bild platziert, so dass wir ein Bild Text als auch angeben können.
Beispiel
<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>
Ergebnis:
Mappe
Was wir geschaffen haben
Paris
Ja, wir gebaut Paris
New York
Wir bauten in New York
San Francisco
Ja, San Fran ist unser
Styling Thumbnail Bilder
Verwenden Sie CSS, um die Bilder Stil. In unserem Beispiel haben wir versucht, um sie wie Karten aussehen zu lassen, durch ihre Grenze zu entfernen, und legen Sie eine Breite von 100% auf das jeweilige Bild.
Beispiel
.thumbnail {
padding: 0 0 15px 0;
border: none;
border-radius: 0;
}
.thumbnail img {
width: 100%;
height: 100%;
margin-bottom: 10px;
}
Ergebnis:
Mappe
Was wir geschaffen haben
Paris
Ja, wir gebaut Paris
New York
Wir bauten in New York
San Francisco
Ja, San Fran ist unser
Fügen Sie ein Karussell
Fügen Sie ein Karussell:
Beispiel
<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>Ergebnis:
Was unsere Kunden sagen
Versuch es selber "Style Das Karussell
Verwenden Sie CSS, das Karussell, um Stil:
Beispiel
.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;
}Ergebnis:
Was unsere Kunden sagen
Versuch es selber "In Pricing Container
Erstellen Sie eine vollständige Breite Container, mit drei Spalten mit gleicher Breite ( .col-sm-4 ):
In jeder Spalte, fügen Sie ein Panel:
Beispiel
<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>
Ergebnis:
Pricing
Wählen Sie eine Zahlungsplan, der für Sie arbeitet
Basic
20 Lorem
15 Ipsum
5 Dolor
2 Sit
Endlose Amet
Profi
50 Lorem
25 Ipsum
10 Dolor
5 Sit
Endlose Amet
Prämie
100 Lorem
50 Ipsum
25 Dolor
10 Sit
Endlose Amet
Styling Panels
Verwenden Sie CSS, um die Platten zu gestalten:
Beispiel
.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;
}
Ergebnis:
Pricing
Wählen Sie eine Zahlungsplan, der für Sie arbeitet
Basic
20 Lorem
15 Ipsum
5 Dolor
2 Sit
Endlose Amet
Profi
50 Lorem
25 Ipsum
10 Dolor
5 Sit
Endlose Amet
Prämie
100 Lorem
50 Ipsum
25 Dolor
10 Sit
Endlose Amet
Kontakt hinzufügen Container
Fügen Sie einen neuen Behälter mit Kontaktinformationen:
Beispiel
<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>Ergebnis:
KONTAKT
Kontaktieren Sie uns und wir werden innerhalb von 24 Stunden mit Ihnen in Verbindung setzen.
Chicago, USA
+00 1515151515
In Google Maps
In Google Maps (Für weitere Informationen lesen Sie unsere Google Maps Tutoria l):
Beispiel
<!-- 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>Ergebnis:
Versuch es selber "Fügen Sie einen Navbar
Fügen Sie ein navbar am oberen Rand der Seite, die auf kleineren Bildschirmen zusammenbricht:
Beispiel
<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>Ergebnis:
Versuch es selber " | Tipp: Mit der rechten richten Sie die Navigationstasten mit der navbar-right - Klasse. |
|---|
Style Die Navbar
Verwenden Sie CSS, um die Navigationsleiste anpassen:
Beispiel
.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;
}Ergebnis:
Versuch es selber "In Scrollspy
In scrollspy automatisch navbar links aktualisiert beim Scrollen:
Beispiel
<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"> Versuch es selber " Fügen Sie einen Footer
Fügen Sie ein "Pfeil nach oben" -Symbol in die Fußzeile, die den Benutzer auf die oben auf der Seite nehmen, wenn darauf geklickt:
Beispiel
<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>Ergebnis:
Versuch es selber "Hinzufügen Sanftes Rollen
Verwenden Sie jQuery smooth scrolling hinzuzufügen (wenn in der Navigationsleiste auf die Links zu klicken):
Beispiel
<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> Versuch es selber " Letzter Schliff
Personalisieren Sie Ihre Themen eine Schriftart durch Zugabe, die Sie mögen. Wir haben "Montserrat" und "Lato" aus dem Google-Font Library verwendet.
Link zur Schriftart im <head> Sektion:
<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">
Dann können Sie sie in der Webseite:
Beispiel
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;
}Außerdem haben wir einige zusätzliche Stil zu einigen Elementen:
Beispiel
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;
} Versuch es selber " Schieben Sie in Elements
Wir haben auch einen Animationseffekt erzeugt, die in den Elementen auf Scroll gleiten. Wenn Sie es verwenden möchten, fügen Sie einfach die .slideanim Klasse mit dem Element , das Sie in gleiten möchten, und fügen Sie folgendes zu Ihrem CSS und jQuery (fühlen Sie sich frei , die Dauer, die Opazität zu ändern, wo ich anfangen soll , wenn sie in zu gleiten, und so weiter):
CSS Beispiel
.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 Beispiel
$(window).scroll(function() {
$(".slideanim").each(function(){
var pos = $(this).offset().top;
var winTop =
$(window).scrollTop();
if (pos < winTop + 600) {
$(this).addClass("slide");
}
});
}); Versuch es selber "