• Najnowsze pytania
  • Bez odpowiedzi
  • Zadaj pytanie
  • Kategorie
  • Tagi
  • Zdobyte punkty
  • Ekipa ninja
  • IRC
  • FAQ
  • Regulamin
  • Książki warte uwagi

stopka jest zaslaniana przy scrollowaniu

VPS Starter Arubacloud
+1 głos
343 wizyt
pytanie zadane 5 sierpnia 2017 w HTML i CSS przez kamil29 Obywatel (1,230 p.)

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!

komentarz 7 sierpnia 2017 przez Comandeer Guru (599,730 p.)

Kod JS:


jQuery(document).ready(function($){
    //change this value if you want to change the speed of the scale effect
    var    scaleSpeed = 0.3,
    //change this value if you want to set a different initial opacity for the .cd-half-block
        boxShadowOpacityInitialValue = 0.7,
        animating = false;
     
    //check the media query
    var MQ = window.getComputedStyle(document.querySelector('body'), '::before').getPropertyValue('content').replace(/"/g, "").replace(/'/g, "");
    $(window).on('resize', function(){
        MQ = window.getComputedStyle(document.querySelector('body'), '::before').getPropertyValue('content').replace(/"/g, "").replace(/'/g, "");
    });
 
    //bind the animation to the window scroll event
    triggerAnimation();
    $(window).on('scroll', function(){
        triggerAnimation();
    });
 
    //move to next/previous section
    $('.cd-vertical-nav .cd-prev').on('click', function(){
        prevSection();
    });
    $('.cd-vertical-nav .cd-next').on('click', function(){
        nextSection();
    });
    $(document).keydown(function(event){
        if( event.which=='38' ) {
            prevSection();
            event.preventDefault();
        } else if( event.which=='40' ) {
            nextSection();
            event.preventDefault();
        }
    });
 
    function triggerAnimation(){
        if(MQ == 'desktop') {
            //if on desktop screen - animate sections
            (!window.requestAnimationFrame) ? animateSection() : window.requestAnimationFrame(animateSection);
        } else {
            //on mobile - remove the style added by jQuery
            $('.cd-section').find('.cd-block').removeAttr('style').find('.cd-half-block').removeAttr('style');
        }
        //update navigation arrows visibility
        checkNavigation();
    }
     
    function animateSection () {
        var scrollTop = $(window).scrollTop(),
            windowHeight = $(window).height(),
            windowWidth = $(window).width();
         
        $('.cd-section').each(function(){
            var actualBlock = $(this),
                offset = scrollTop - actualBlock.offset().top,
                scale = 1,
                translate = windowWidth/2+'px',
                opacity,
                boxShadowOpacity;
 
            if( offset >= -windowHeight && offset <= 0 ) {
                //move the two .cd-half-block toward the center - no scale/opacity effect
                scale = 1,
                opacity = 1,
                translate = (windowWidth * 0.5 * (- offset/windowHeight)).toFixed(0)+'px';
 
            } else if( offset > 0 && offset <= windowHeight ) {
                //the two .cd-half-block are in the center - scale the .cd-block element and reduce the opacity
                translate = 0+'px',
                scale = (1 - ( offset * scaleSpeed/windowHeight)).toFixed(5),
                opacity = ( 1 - ( offset/windowHeight) ).toFixed(5);
 
            } else if( offset < -windowHeight ) {
                //section not yet visible
                scale = 1,
                translate = windowWidth/2+'px',
                opacity = 1;
 
            } else {
                //section not visible anymore
                opacity = 0;
            }
             
            boxShadowOpacity = parseInt(translate.replace('px', ''))*boxShadowOpacityInitialValue/20;
             
            //translate/scale section blocks
            scaleBlock(actualBlock.find('.cd-block'), scale, opacity);
 
            var directionFirstChild = ( actualBlock.is(':nth-of-type(even)') ) ? '-': '+';
            var directionSecondChild = ( actualBlock.is(':nth-of-type(even)') ) ? '+': '-';
            if(actualBlock.find('.cd-half-block')) {
                translateBlock(actualBlock.find('.cd-half-block').eq(0), directionFirstChild+translate, boxShadowOpacity);
                translateBlock(actualBlock.find('.cd-half-block').eq(1), directionSecondChild+translate, boxShadowOpacity);    
            }
            //this is used to navigate through the sections
            ( offset >= 0 && offset < windowHeight ) ? actualBlock.addClass('is-visible') : actualBlock.removeClass('is-visible');        
        });
    }
 
    function translateBlock(elem, value, shadow) {
        var position = Math.ceil(Math.abs(value.replace('px', '')));
         
        if( position >= $(window).width()/2 ) {
            shadow = 0;    
        } else if ( position > 20 ) {
            shadow = boxShadowOpacityInitialValue;
        }
 
        elem.css({
            '-moz-transform': 'translateX(' + value + ')',
            '-webkit-transform': 'translateX(' + value + ')',
            '-ms-transform': 'translateX(' + value + ')',
            '-o-transform': 'translateX(' + value + ')',
            'transform': 'translateX(' + value + ')',
            'box-shadow' : '0px 0px 40px rgba(0,0,0,'+shadow+')'
        });
    }
 
    function scaleBlock(elem, value, opac) {
        elem.css({
            '-moz-transform': 'scale(' + value + ')',
            '-webkit-transform': 'scale(' + value + ')',
            '-ms-transform': 'scale(' + value + ')',
            '-o-transform': 'scale(' + value + ')',
            'transform': 'scale(' + value + ')',
            'opacity': opac
        });
    }
 
    function nextSection() {
        if (!animating) {
            if ($('.cd-section.is-visible').next().length > 0) smoothScroll($('.cd-section.is-visible').next());
        }
    }
 
    function prevSection() {
        if (!animating) {
            var prevSection = $('.cd-section.is-visible');
            if(prevSection.length > 0 && $(window).scrollTop() != prevSection.offset().top) {
                smoothScroll(prevSection);
            } else if(prevSection.prev().length > 0 && $(window).scrollTop() == prevSection.offset().top) {
                smoothScroll(prevSection.prev('.cd-section'));
            }
        }
    }
 
    function checkNavigation() {
        ( $(window).scrollTop() < $(window).height()/2 ) ? $('.cd-vertical-nav .cd-prev').addClass('inactive') : $('.cd-vertical-nav .cd-prev').removeClass('inactive');
        ( $(window).scrollTop() > $(document).height() - 3*$(window).height()/2 ) ? $('.cd-vertical-nav .cd-next').addClass('inactive') : $('.cd-vertical-nav .cd-next').removeClass('inactive');
    }
 
    function smoothScroll(target) {
        animating = true;
        $('body,html').animate({'scrollTop': target.offset().top}, 500, function(){ animating = false; });
    }
});

 

2 odpowiedzi

+1 głos
odpowiedź 7 sierpnia 2017 przez Comandeer Guru (599,730 p.)
$('.cd-section').each(function(){

Ten kod animuje każdą sekcję. A może wyłączenie animowania ostatniej naprawiłoby problem?

$('.cd-section').not(':last').each(function(){

 

komentarz 7 sierpnia 2017 przez kamil29 Obywatel (1,230 p.)
rzeczywiście teraz po dopisaniu .not(':last')  wszystko śmiga.Jedyna wada jest taka,ze po ostatnim slajdzie nie pojawia sie od razu stopka,lecz jest zwykle tlo i nadal przyciski nawigacyjne.
komentarz 7 sierpnia 2017 przez kamil29 Obywatel (1,230 p.)
wiesz jak jeszcze to naprawic?
0 głosów
odpowiedź 5 sierpnia 2017 przez xdmik23 Gaduła (3,000 p.)
sprawdz czy usuniecie w ktorejs sekcji z-index pomoze
komentarz 5 sierpnia 2017 przez kamil29 Obywatel (1,230 p.)
probowalem,ale nic z tego
komentarz 5 sierpnia 2017 przez xdmik23 Gaduła (3,000 p.)
przyczyna jest jak widac bardziej powazna bo probowalem wczesniej cos z tym pokombinowac i tez nic sie nie zmienilo.Powodzenia moze uda Ci sie rozwiazac ten problem
komentarz 5 sierpnia 2017 przez wxa123 Użytkownik (680 p.)
Ciekawy przypadek.Moze potrzeba jakiegos skryptu zatrzymujacego scrollowanie na ostatnim slajdzie
komentarz 5 sierpnia 2017 przez kamil29 Obywatel (1,230 p.)
tez mi sie tak wydaje,ale niestety nie znalazlem nigdzie w necie takiego skryptu

Podobne pytania

0 głosów
1 odpowiedź 419 wizyt
pytanie zadane 8 grudnia 2016 w HTML i CSS przez kon.bed21 Obywatel (1,610 p.)
+1 głos
1 odpowiedź 565 wizyt
pytanie zadane 18 września 2020 w HTML i CSS przez Wiciorny Ekspert (269,100 p.)
0 głosów
0 odpowiedzi 119 wizyt
pytanie zadane 27 sierpnia 2020 w HTML i CSS przez Hansik Nowicjusz (170 p.)

92,451 zapytań

141,261 odpowiedzi

319,073 komentarzy

61,853 pasjonatów

Motyw:

Akcja Pajacyk

Pajacyk od wielu lat dożywia dzieci. Pomóż klikając w zielony brzuszek na stronie. Dziękujemy! ♡

Oto polecana książka warta uwagi.
Pełną listę książek znajdziesz tutaj.

Akademia Sekuraka

Akademia Sekuraka 2024 zapewnia dostęp do minimum 15 szkoleń online z bezpieczeństwa IT oraz dostęp także do materiałów z edycji Sekurak Academy z roku 2023!

Przy zakupie możecie skorzystać z kodu: pasja-akademia - użyjcie go w koszyku, a uzyskacie rabat -30% na bilety w wersji "Standard"! Więcej informacji na temat akademii 2024 znajdziecie tutaj. Dziękujemy ekipie Sekuraka za taką fajną zniżkę dla wszystkich Pasjonatów!

Akademia Sekuraka

Niedawno wystartował dodruk tej świetnej, rozchwytywanej książki (około 940 stron). Mamy dla Was kod: pasja (wpiszcie go w koszyku), dzięki któremu otrzymujemy 10% zniżki - dziękujemy zaprzyjaźnionej ekipie Sekuraka za taki bonus dla Pasjonatów! Książka to pierwszy tom z serii o ITsec, który łagodnie wprowadzi w świat bezpieczeństwa IT każdą osobę - warto, polecamy!

...