Witam! Pobralem dziś taki darmowy komponent ze strony codyhouse.co:
https://codyhouse.co/gem/page-scroll-effects/
Dopiero zaczynam webmasterke,wiec nie jeszcze w stanie zrobić takiego efektu samodzielnie,wiec bazuje na gotowych projektach i staram się je lekko modyfikować. No i tak:dodalem stopke i okazało się,ze przy dotraciu do ostatniego slajdu jest opcja jeszcze dalej zjechać(pojawia siē wtedy dodatkowy slajd zaslaniajacy stopke. )Czy ktoś moglby doradzić mi jak takie coś naprawić?Oprocz tego okazało się,ze nawigacja do slidow wiaruje(czasem działa,czasem nie).Wiecie czym to może być spowodowane? Ponizej umieszczę swój kod html i css,ale gdyby ktoś miał ochote zbadac problem to caly pakiet(z js i przyciskami nawigacyjnymi znajduje się pod linkiem,ktory podalem).
<!doctype html>
<html lang="en" class="no-js">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href='http://fonts.googleapis.com/css?family=Open+Sans:400,300,700' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="css/reset.css"> <!-- CSS reset -->
<link rel="stylesheet" href="css/style.css"> <!-- Resource style -->
<script src="js/modernizr.js"></script> <!-- Modernizr -->
<title>Page Scroll Effects | CodyHouse</title>
</head>
<!-- hijacking: on/off - animation: none/scaleDown/rotate/gallery/catch/opacity/fixed/parallax -->
<body data-hijacking="off" data-animation="scaleDown">
<section class="cd-section visible">
<div>
<h2>Page Scroll Effects</h2>
</div>
</section>
<section class="cd-section">
<div>
<h2>Section 2</h2>
</div>
</section>
<section class="cd-section">
<div>
<h2>Section 3</h2>
</div>
</section>
<section class="cd-section">
<div>
<h2>Section 4</h2>
</div>
</section>
<section class="cd-section">
<div>
<h2>Section 5</h2>
</div>
</section>
<nav>
<ul class="cd-vertical-nav">
<li><a href="#0" class="cd-prev inactive">Next</a></li>
<li><a href="#0" class="cd-next">Prev</a></li>
</ul>
</nav> <!-- .cd-vertical-nav -->
<script src="js/jquery-2.1.4.js"></script>
<script src="js/velocity.min.js"></script>
<script src="js/velocity.ui.min.js"></script>
<script src="js/main.js"></script> <!-- Resource jQuery -->
<footer class="footer-distributed">
<div class="footer-left">
<div class="description">
</div>
<div class="description">
</div>
</div>
<div class="footer-center">
<div>
</div>
<div>
</div>
<div>
</div>
</div>
<div class="footer-right">
<div class="footer-icons">
</div>
</div>
</footer>
</body>
</html>
/* --------------------------------
Primary style
-------------------------------- */
*, *::after, *::before {
box-sizing: border-box;
}
html {
font-size: 62.5%;
}
body {
font-size: 1.6rem;
font-family: "Open Sans", sans-serif;
color: #ffffff;
background-color: #22283f;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
body::before {
/* never visible - this is used in jQuery to check the current MQ */
content: 'mobile';
display: none;
}
@media only screen and (min-width: 1050px) {
body::before {
/* never visible - this is used in jQuery to check the current MQ */
content: 'desktop';
}
}
a {
color: #267481;
text-decoration: none;
}
/* --------------------------------
Main Components
-------------------------------- */
@media only screen and (min-width: 1050px) {
body[data-hijacking="on"] {
overflow: hidden;
}
}
.cd-section {
height: 100vh;
}
.cd-section h2 {
line-height: 100vh;
text-align: center;
font-size: 2.4rem;
}
.cd-section:first-of-type > div {
background-color: #2b334f;
}
.cd-section:first-of-type > div::before {
/* alert -> all scrolling effects are not visible on small devices */
content: 'Effects not visible on mobile!';
position: absolute;
width: 100%;
text-align: center;
top: 20px;
z-index: 2;
font-weight: bold;
font-size: 1.3rem;
text-transform: uppercase;
color: #6a7083;
}
.cd-section:nth-of-type(2) > div {
background-color: #2e5367;
}
.cd-section:nth-of-type(3) > div {
background-color: #267481;
}
.cd-section:nth-of-type(4) > div {
background-color: #fcb052;
}
.cd-section:nth-of-type(5) > div {
background-color: #f06a59;
}
[data-animation="parallax"] .cd-section > div, [data-animation="fixed"] .cd-section > div, [data-animation="opacity"] .cd-section > div {
background-position: center center;
background-repeat: no-repeat;
background-size: cover;
}
[data-animation="parallax"] .cd-section:first-of-type > div, [data-animation="fixed"] .cd-section:first-of-type > div, [data-animation="opacity"] .cd-section:first-of-type > div {
background-image: url("../img/img-1.jpg");
}
[data-animation="parallax"] .cd-section:nth-of-type(2) > div, [data-animation="fixed"] .cd-section:nth-of-type(2) > div, [data-animation="opacity"] .cd-section:nth-of-type(2) > div {
background-image: url("../img/img-2.jpg");
}
[data-animation="parallax"] .cd-section:nth-of-type(3) > div, [data-animation="fixed"] .cd-section:nth-of-type(3) > div, [data-animation="opacity"] .cd-section:nth-of-type(3) > div {
background-image: url("../img/img-3.jpg");
}
[data-animation="parallax"] .cd-section:nth-of-type(4) > div, [data-animation="fixed"] .cd-section:nth-of-type(4) > div, [data-animation="opacity"] .cd-section:nth-of-type(4) > div {
background-image: url("../img/img-4.jpg");
}
[data-animation="parallax"] .cd-section:nth-of-type(5) > div, [data-animation="fixed"] .cd-section:nth-of-type(5) > div, [data-animation="opacity"] .cd-section:nth-of-type(5) > div {
background-image: url("../img/img-5.jpg");
}
@media only screen and (min-width: 1050px) {
.cd-section h2 {
font-size: 4rem;
font-weight: 300;
}
[data-hijacking="on"] .cd-section {
opacity: 0;
visibility: hidden;
position: absolute;
top: 0;
left: 0;
width: 100%;
}
[data-hijacking="on"] .cd-section > div {
visibility: visible;
}
[data-hijacking="off"] .cd-section > div {
opacity: 0;
}
[data-animation="rotate"] .cd-section {
/* enable a 3D-space for children elements */
-webkit-perspective: 1800px;
-moz-perspective: 1800px;
perspective: 1800px;
}
[data-hijacking="on"][data-animation="rotate"] .cd-section:not(:first-of-type) {
-webkit-perspective-origin: center 0;
-moz-perspective-origin: center 0;
perspective-origin: center 0;
}
[data-animation="scaleDown"] .cd-section > div, [data-animation="gallery"] .cd-section > div, [data-animation="catch"] .cd-section > div {
box-shadow: 0 0 0 rgba(25, 30, 46, 0.4);
}
[data-animation="opacity"] .cd-section.visible > div {
}
}
@media only screen and (min-width: 1050px) {
.cd-section:first-of-type > div::before {
display: none;
}
}
@media only screen and (min-width: 1050px) {
.cd-section > div {
position: fixed;
top: 0;
left: 0;
width: 100%;
/* Force Hardware Acceleration */
-webkit-transform: translateZ(0);
-moz-transform: translateZ(0);
-ms-transform: translateZ(0);
-o-transform: translateZ(0);
transform: translateZ(0);
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
}
[data-hijacking="on"] .cd-section > div {
position: absolute;
}
[data-animation="rotate"] .cd-section > div {
-webkit-transform-origin: center bottom;
-moz-transform-origin: center bottom;
-ms-transform-origin: center bottom;
-o-transform-origin: center bottom;
transform-origin: center bottom;
}
}
.cd-vertical-nav {
/* lateral navigation */
position: fixed;
z-index: 1;
right: 3%;
top: 50%;
bottom: auto;
-webkit-transform: translateY(-50%);
-moz-transform: translateY(-50%);
-ms-transform: translateY(-50%);
-o-transform: translateY(-50%);
transform: translateY(-50%);
display: none;
}
.cd-vertical-nav a {
display: block;
height: 40px;
width: 40px;
/* image replace */
overflow: hidden;
text-indent: 100%;
white-space: nowrap;
background: url(../img/cd-icon-arrow.svg) no-repeat center center;
}
.cd-vertical-nav a.cd-prev {
-webkit-transform: rotate(180deg);
-moz-transform: rotate(180deg);
-ms-transform: rotate(180deg);
-o-transform: rotate(180deg);
transform: rotate(180deg);
margin-bottom: 10px;
}
.cd-vertical-nav a.inactive {
visibility: hidden;
opacity: 0;
-webkit-transition: opacity 0.2s 0s, visibility 0s 0.2s;
-moz-transition: opacity 0.2s 0s, visibility 0s 0.2s;
transition: opacity 0.2s 0s, visibility 0s 0.2s;
}
@media only screen and (min-width: 1050px) {
.cd-vertical-nav {
display: block;
}
}
footer{
position: fixed;
bottom: 0;
}
@media (max-height:800px){
footer { position: static; }
}
.footer-distributed{
background-color: #99ccff;
box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.12);
box-sizing: border-box;
width: 100%;
text-align: left;
font: bold 16px sans-serif;
padding: 39px 30px;
margin-top: 80px;
}
.footer-distributed .footer-left,
.footer-distributed .footer-center,
.footer-distributed .footer-right{
display: inline-block;
vertical-align: middle;
}
/* Footer left */
.footer-distributed .footer-left{
width: 40%;
}
.footer-distributed .footer-left p{
display: inline-block;
color: #ffffff;
vertical-align: middle;
margin:0;
text-align:center;
}
.footer-left{
text-align:center;
}
.footer-distributed .footer-left .description img{
color: #ffffff;
width: 54px;
height: 54px;
text-align: center;
line-height: 42px;
margin: 10px 15px;
vertical-align: middle;
}
/* Footer Center */
.footer-distributed .footer-center{
width: 35%;
}
.footer-distributed .footer-center img{
color: #ffffff;
font-size: 25px;
width: 54px;
height: 54px;
text-align: center;
line-height: 42px;
margin: 10px 15px;
vertical-align: middle;
}
.footer-distributed .footer-center p{
display: inline-block;
color: #ffffff;
vertical-align: middle;
margin:0;
font-size:18px;
}
/* Footer Right */
.footer-distributed .footer-right{
width: 20%;
}
.footer-distributed .footer-icons{
margin-top: 25px;
}
.footer-distributed .footer-icons a{
display: inline-block;
width: 40px;
height: 40px;
cursor: pointer;
background-color: #fff;
border-radius: 2px;
position:relative;
overflow:hidden;
z-index:1;
transition:.4s ease-in-out;
font-size: 20px;
color: #000;
text-align: center;
line-height: 40px;
margin-right: 3px;
margin-bottom: 5px;
}
.footer-distributed .footer-icons a:before{
content: '';
width:100%;
height:100%;
position:absolute;
top:0;
left:-100%;
background:#ccc;
z-index:-1;
transform:scale(.4);
transition: .2s ease-in-out;
}
.footer-distributed .footer-icons a:hover:before{
left:0;
transform: scale(.9);
}
.footer-distributed .footer-icons a:nth-child(1):before{
background:#3b5999;
}
.footer-distributed .footer-icons a:nth-child(2):before {
background:#55acee;
}
.footer-distributed .footer-icons a:nth-child(3):before {
background:#0077B5;
}
.footer-distributed .footer-icons a:after{
content: '';
width:50%;
height:100%;
position:absolute;
top:0;
right:-100%;
background:rgba(255,255,255,.3);
transition: .4s ease-in-out;
transition-delay: .1s;
}
.footer-distributed .footer-icons a:hover:after{
right:0%;
transform: scale(.9);
}
.footer-distributed .footer-icons .fa {
transition: .3s ease-in-out;
}
.footer-distributed .footer-icons a:hover .fa
{
color:#fff;
}
/* If you don't want the footer to be responsive, remove these media queries */
@media (max-width: 880px) {
.footer-distributed{
font: bold 14px sans-serif;
}
.footer-distributed .footer-left,
.footer-distributed .footer-center,
.footer-distributed .footer-right{
display: block;
width: 100%;
margin-bottom: 40px;
text-align: center;
}
.footer-distributed .footer-center i{
margin-left: 0;
Z gory wielkie dzięki za pomoc!