implemented parallax effect

https://github.com/pixelcog/parallax.js/
This commit is contained in:
bmen 2019-04-15 03:11:37 +02:00
parent ead7f7b582
commit 473f39764e
4 changed files with 17 additions and 8 deletions

View File

@ -1,4 +1,4 @@
<html> <!DOCTYPE html>
<head> <head>
<title>Open Source Ecology (OSE) Germany - Entwicklungsplattform</title> <title>Open Source Ecology (OSE) Germany - Entwicklungsplattform</title>
<link href="https://fonts.googleapis.com/css?family=Lora|Open+Sans:400,500,600,700,800,900" rel="stylesheet"> <link href="https://fonts.googleapis.com/css?family=Lora|Open+Sans:400,500,600,700,800,900" rel="stylesheet">
@ -8,6 +8,7 @@
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script> <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script src="js/searchfield-focus-show-filter.js"></script> <script src="js/searchfield-focus-show-filter.js"></script>
<script src="js/img-svg-color.js"></script> <script src="js/img-svg-color.js"></script>
<script src="js/parallax.min.js"></script>
</head> </head>
<body class="product-detail"> <body class="product-detail">
<div class="header"> <div class="header">
@ -408,7 +409,7 @@
<div class="clearer">&nbsp;</div> <div class="clearer">&nbsp;</div>
</div> </div>
</div> </div>
<div class="footer"> <div class="footer" data-parallax="scroll" data-image-src="img/backgroun03.jpg">
<div class="col-1040"> <div class="col-1040">
<div class="col-1-5"> <div class="col-1-5">
<h3>Categories</h3> <h3>Categories</h3>

View File

@ -1,4 +1,4 @@
<html> <!DOCTYPE html>
<head> <head>
<title>Open Source Ecology (OSE) Germany - Entwicklungsplattform</title> <title>Open Source Ecology (OSE) Germany - Entwicklungsplattform</title>
<link href="https://fonts.googleapis.com/css?family=Lora|Open+Sans:400,500,600,700,800,900" rel="stylesheet"> <link href="https://fonts.googleapis.com/css?family=Lora|Open+Sans:400,500,600,700,800,900" rel="stylesheet">
@ -8,6 +8,7 @@
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script> <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script src="js/searchfield-focus-show-filter.js"></script> <script src="js/searchfield-focus-show-filter.js"></script>
<script src="js/img-svg-color.js"></script> <script src="js/img-svg-color.js"></script>
<script src="js/parallax.min.js"></script>
</head> </head>
<body> <body>
<div class="header"> <div class="header">
@ -22,7 +23,7 @@
</ul> </ul>
<div class="clearer">&nbsp;</div> <div class="clearer">&nbsp;</div>
</div> </div>
<div class="banner"> <div class="banner" data-parallax="scroll" data-image-src="img/backgroun01.jpg">
<img src="img/oho_logo_WHITE.svg" /> <img src="img/oho_logo_WHITE.svg" />
</div> </div>
<div class="row home-search-intro"> <div class="row home-search-intro">
@ -358,7 +359,7 @@
<p>Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie conse</p> <p>Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie conse</p>
</div> </div>
</div> </div>
<div class="footer"> <div class="footer" data-parallax="scroll" data-image-src="img/backgroun02.jpg">
<div class="col-1040"> <div class="col-1040">
<div class="col-1-5"> <div class="col-1-5">
<h3>Categories</h3> <h3>Categories</h3>

6
js/parallax.min.js vendored Executable file

File diff suppressed because one or more lines are too long

View File

@ -222,11 +222,12 @@ a:hover {
} }
/****** BANNER ******/ /****** BANNER ******/
.banner { .banner {
background:url(img/backgroun01.jpg) 0 0 no-repeat; min-height: 300px;
padding:100px 0 40px 0; background: transparent;
} }
.banner img { .banner img {
width:392px; width:392px;
padding:130px 0 40px 0;
display:block; display:block;
margin:0 auto; margin:0 auto;
} }
@ -317,7 +318,7 @@ a:hover {
} }
/****** FOOTER ******/ /****** FOOTER ******/
.footer { .footer {
background:url(img/backgroun02.jpg) 0 0 no-repeat;
padding:60px 0; padding:60px 0;
} }
.footer h3 { .footer h3 {