Animatet Content Scroll
Animierter Hintergrund und Animierte Texte und Bilder beim Scrollen der Seite
Der hier verwendete Code
<style>
@import url(http://fonts.googleapis.com/css?family=Raleway:400,300,400italic,700);
@font-face {
font-family: 'icomoon';
src: url('/fonts_webseite/icomoon.eot?t91ftr');
src: url('/fonts_webseite/icomoon.eot?t91ftr#iefix') format('embedded-opentype'),
url('/fonts_webseite/icomoon.ttf?t91ftr') format('truetype'),
url('/fonts_webseite/icomoon.woff?t91ftr') format('woff'),
url('/fonts_webseite/icomoon.svg?t91ftr#icomoon') format('svg');
font-weight: normal;
font-style: normal;
}
[class^="icon-"], [class*=" icon-"] {
font-family: 'icomoon' !important;
speak: none;
font-style: normal;
font-weight: normal;
font-variant: normal;
text-transform: none;
line-height: 1;
}
.icon-forward:before {
content: "\e903";
}
.icon-down:before {
content: "\e904";
}
.icon-up:before {
content: "\e905";
}
.icon-times:before {
content: "\e902";
}
.icon-back:before {
content: "\e900";
}
.icon-playground:before {
content: "\e901";
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body, html {
font-family: 'Raleway', sans-serif;
font-size: 1rem;
line-height: 1.875rem;
background: #358ebc;
}
h1 {
font-size: 2em;
margin: 0.67em 0;
margin-top: 0;
font-weight: 300;
}
h3 {
color: #fff;
text-align: center;
margin-bottom: 15px;
}
header {
background: #303d4d;
color: #fff;
padding: 20px 0;
}
header a {
color: #fff;
text-decoration: none;
opacity: 0.5;
}
header a:hover,header a.active {
opacity: 1.0;
}
header svg {
color: #fff;
}
.back-navi {
font-size: 1.5rem;
position: absolute;
left: 50px;
top: 30px;
}
.back-navi a{
opacity: 0.8;
}
.back-navi a:hover {
opacity: 1;
text-decoration: none;
color: #fff;
}
.arlogo {
position: absolute;
right: 50px;
top: 17px;
display: block;
width: 70px;
height: 70px;
background: url(image/logo-trans.png);
background-size: contain;
opacity: 1.0;
text-indent: -10000px;
}
.demo-navigation {
margin: 20px auto 0;
max-width: 1170px;
text-align: center;
}
.section {
padding: 150px 0;
color: #fff;
}
.section .col-md-6 img {
max-width: 200px;
text-align: center;
margin: auto;
}
#section1 {
background: #358ebc;
}
#section2 {
background: #F36A71;
}
#section3 {
background: #efc75e;
}
#section4 {
background: #a7e2a0;
}
#section4 .col-md-4 img{
max-width: 150px;
text-align: center;
margin: auto;
}
.desktop .animate-down {
opacity: 0;
visibility: hidden;
transform: translate(0, -100px)
}
.desktop .animate-down.animated {
opacity: 1;
visibility: visible;
backface-visibility: hidden;
transform: translate(0, 0);
transition: all 600ms ease-out 100ms
}
.desktop .animate-up {
opacity: 0;
visibility: hidden;
transform: translate(0, 100px)
}
.desktop .animate-up.animated {
opacity: 1;
visibility: visible;
backface-visibility: hidden;
transform: translate(0, 0);
transition: transform 400ms ease-out 100ms, opacity 400ms ease-out 100ms
}
.desktop .animate-right {
opacity: 0;
visibility: hidden;
transform: translate(-100px, 0)
}
.desktop .animate-right.animated {
opacity: 1;
visibility: visible;
backface-visibility: hidden;
transform: translate(0, 0);
transition: transform 400ms ease-out 100ms, opacity 400ms ease-out 100ms
}
.desktop .animate-left {
opacity: 0;
visibility: hidden;
transform: translate(100px, 0)
}
.desktop .animate-left.animated {
opacity: 1;
visibility: visible;
backface-visibility: hidden;
transform: translate(0, 0);
-webkit-transition: -webkit-transform 400ms ease-out 100ms, opacity 400ms ease-out 100ms;
-moz-transition: -moz-transform 400ms ease-out 100ms, opacity 400ms ease-out 100ms;
transition: transform 400ms ease-out 100ms, opacity 400ms ease-out 100ms
}
@media (max-width: 767px){
h1 {
font-size: 1.5rem;;
}
.back-navi {
display: block;
position: static;
top: 0;
margin-left: 15px;
}
.arlogo {
display: none;
}
}
</style>
<body>
<header>
<div class="back-navi">
<a title="Back to Article" href="">
<i class="icon-back"></i>
</a>
/
<a title="Back to Playground" href="">
<i class="icon-playground"></i>
</a>
</div>
<div class="demo-navigation">
<h1>Animate content on appear in viewport</h1>
</div>
<a title="Go to Homepage" href="" class="arlogo">Logo</a>
</header>
<div class="section" id="section1">
<div class="container">
<div class="row">
<div class="animate-right col-md-6">
<img class="img-responsive" src="image/apple.png" />
<h3>Animieren-Rechts</h3>
<p>Der Schmerz selbst ist ein großer Schmerz, er hat im Laufe der Jahre geschmerzt, aber es ist an der Zeit, den Schmerz zu beneiden, und der Schmerz ist aufregend, er war aufregend, aber er war kompliziert. Aber ich endete mit nur zwei Schmerzen und subventionierte sie. Lass die clita kasd gubergren, no sea takimata sei heilig Der Schmerz selbst ist ein großer Schmerz, er hat im Laufe der Jahre geschmerzt, aber es ist an der Zeit, den Schmerz zu beneiden, und der Schmerz ist aufregend, er war aufregend, aber er war kompliziert. Aber ich endete mit nur zwei Schmerzen und subventionierte sie. Lass die clita kasd gubergren, no sea takimata sei heili.</p>
</div>
<div class="animate-left col-md-6">
<img class="img-responsive" src="image/strawberry.png" />
<h3>Animieren-Links</h3>
<p>Der Schmerz selbst ist ein großer Schmerz, er hat im Laufe der Jahre geschmerzt, aber es ist an der Zeit, den Schmerz zu beneiden, und der Schmerz ist aufregend, er war aufregend, aber er war kompliziert. Aber ich endete mit nur zwei Schmerzen und subventionierte sie. Lass die clita kasd gubergren, no sea takimata sei heilig Der Schmerz selbst ist ein großer Schmerz, er hat im Laufe der Jahre geschmerzt, aber es ist an der Zeit, den Schmerz zu beneiden, und der Schmerz ist aufregend, er war aufregend, aber er war kompliziert. Aber ich endete mit nur zwei Schmerzen und subventionierte sie. Lass die clita kasd gubergren, no sea takimata sei heilig.</p>
</div>
</div>
</div>
</div>
<div class="section" id="section2">
<div class="container">
<div class="row animate-up">
<div class="col-md-4">
<img class="img-responsive" src="image/pear.png" />
</div>
<div class="col-md-8">
<h3>Nach oben animieren</h3>
<p>Der Schmerz selbst ist ein großer Schmerz, er hat im Laufe der Jahre geschmerzt, aber es ist an der Zeit, den Schmerz zu beneiden, und der Schmerz ist aufregend, er war aufregend, aber er war kompliziert. Aber ich endete mit nur zwei Schmerzen und subventionierte sie. Lass die clita kasd gubergren, no sea takimata sei heilig Der Schmerz selbst ist ein großer Schmerz, er hat im Laufe der Jahre geschmerzt, aber es ist an der Zeit, den Schmerz zu beneiden, und der Schmerz ist aufregend, er war aufregend, aber er war kompliziert. Aber ich endete mit nur zwei Schmerzen und subventionierte sie. Lass die clita kasd gubergren, no sea takimata sei heilig Der Schmerz selbst ist ein großer Schmerz, er hat im Laufe der Jahre geschmerzt, aber es ist an der Zeit, den Schmerz zu beneiden, und der Schmerz ist aufregend, er war aufregend, aber er war kompliziert. Aber ich endete mit nur zwei Schmerzen und subventionierte sie.
</p><p>
Der Schmerz des Schmerzes im Präsidium bei Olympia, oder der Schmerz im Präsidium bei Olympia, er will ein Ärgernis sein, um die Konsequenzen zu ziehen, oder er leidet unter dem Schmerz des eu-Immunsystems an der Wahrheit, dem Eros und der Verbraucher und der regelmäßige Hass auf die zzril. Der Schmerz selbst ist die Liebe </p>
</div>
</div>
</div>
</div>
<div class="section" id="section3">
<div class="container">
<div class="row animate-down">
<div class="col-md-8">
<h3>Animieren-nach unten</h3>
<p>Der Schmerz selbst ist ein großer Schmerz, er hat im Laufe der Jahre geschmerzt, aber es ist an der Zeit, den Schmerz zu beneiden, und der Schmerz ist aufregend, er war aufregend, aber er war kompliziert. Aber ich endete mit nur zwei Schmerzen und subventionierte sie. Lass die clita kasd gubergren, no sea takimata sei heilig Der Schmerz selbst ist ein großer Schmerz, er hat im Laufe der Jahre geschmerzt, aber es ist an der Zeit, den Schmerz zu beneiden, und der Schmerz ist aufregend, er war aufregend, aber er war kompliziert. Aber ich endete mit nur zwei Schmerzen und subventionierte sie. Lass die clita kasd gubergren, no sea takimata sei heilig Der Schmerz selbst ist ein großer Schmerz, er hat im Laufe der Jahre geschmerzt, aber es ist an der Zeit, den Schmerz zu beneiden, und der Schmerz ist aufregend, er war aufregend, aber er war kompliziert. Aber ich endete mit nur zwei Schmerzen und subventionierte sie.
</p><p>
Der Schmerz des Schmerzes im Präsidium bei Olympia, oder der Schmerz im Präsidium bei Olympia, er will ein Ärgernis sein, um die Konsequenzen zu ziehen, oder er leidet unter dem Schmerz des eu-Immunsystems an der Wahrheit, dem Eros und der Verbraucher und der regelmäßige Hass auf die zzril. Der Schmerz selbst ist die Liebe </p>
</div>
<div class="col-md-4">
<img class="img-responsive" src="image/autumn.png" />
</div>
</div>
</div>
</div>
<div class="section" id="section4">
<div class="container">
<div class="row">
<div class="col-md-4 animate-right">
<h3>Animieren-Rechts</h3>
<img class="img-responsive" src="image/citrus.png" />
<p>Der Schmerz des Schmerzes im Präsidium bei Olympia, oder der Schmerz im Präsidium bei Olympia, er will ein Ärgernis sein, um die Konsequenzen zu ziehen, oder er leidet unter dem Schmerz des eu-Immunsystems an der Wahrheit, dem Eros und der Verbraucher und der regelmäßige Hass auf die zzril. Der Schmerz selbst ist die Liebe. </p>
</div>
<div class="col-md-4 animate-up">
<h3>Animieren-Unten</h3>
<img class="img-responsive" src="image/cherry.png" />
<p>Der Schmerz des Schmerzes im Präsidium bei Olympia, oder der Schmerz im Präsidium bei Olympia, er will ein Ärgernis sein, um die Konsequenzen zu ziehen, oder er leidet unter dem Schmerz des eu-Immunsystems an der Wahrheit, dem Eros und der Verbraucher und der regelmäßige Hass auf die zzril. Der Schmerz selbst ist die Liebe. </p>
</div>
<div class="col-md-4 animate-left">
<h3>Animieren-Links</h3>
<img class="img-responsive" src="image/pineapple.png" />
<p>Der Schmerz des Schmerzes im Präsidium bei Olympia, oder der Schmerz im Präsidium bei Olympia, er will ein Ärgernis sein, um die Konsequenzen zu ziehen, oder er leidet unter dem Schmerz des eu-Immunsystems an der Wahrheit, dem Eros und der Verbraucher und der regelmäßige Hass auf die zzril. Der Schmerz selbst ist die Liebe. </p>
</div>
</div>
</div>
</div>
<script src='js_webseite/jquery.js'></script>
<script src='js_webseite/appear.js'></script>
<script>
var isMobile = false;
$(function(){
if (/Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent)) {
isMobile = true;
$('html').addClass('mobile');
} else {
isMobile = false;
$('html').addClass('desktop');
}
windowScrollAnimations();
$(window).scroll();
});
function windowScrollAnimations() {
var $animate = $('.animate-up, .animate-down, .animate-left, .animate-right');
if (!isMobile) {
$animate.appear();
$animate.on('appear', function(event, affected) {
for (var i = 0; i < affected.length; i++) {
$(affected[i]).addClass('animated');
}
});
$.force_appear();
}
}
</script>
</body>