Здравствуйте.
У меня проблема: почему-то этот js код
https://jsfiddle.net/tcloninger/e5qaD/ работает в jsfiddle, но не работает у меня на странице (не убирает прозрачность). В чём ошибка? На всякий случай скину полный код.
<style type="text/css"><!--
@font-face {
font-family: sp1;
src: url(Шрифты/Rokkitt-Regular.ttf);
src: local(sp1), url(Шрифты/Rokkitt-Regular.ttf);}
@font-face {
font-family: sp;
src: url(Шрифты/CrimsonText-Regular.ttf);
src: local(sp), url(Шрифты/CrimsonText-Regular.ttf);}
body, html, #parallax {
overflow-x: hidden;
overflow-y: auto;}
#parallax {
perspective: 1px;
height: 100vh;}
/*........FIRST-LAYER.......*/
#layer-back {
position: relative;
height: 100vh;
transform-style: preserve-3d;}
#back {
background: url(Foto/mainSpidey.jpg) no-repeat 100%;
background-size: cover;
position: absolute;
top: 0;
left: -9px !important;
right: 9px !important;
bottom: 0;
transform: translateZ(-1px) scale(2);}
/*.......TEXT........*/
#text {
position: relative;
top: 50%;
left: 79px;
transform: translateY(-50%);
width: 55%;
font: 3.5vh/200% sp1, sans-serif;
color: #DDD;}
#text:after {
content: "Peter Parker";
position: absolute;
top: 100%;
right: 0;
font: 3vh/12vh sp, sans-serif;
color: #DDD;}
/*.......SECOND-LAYER........*/
#layer-base {
position: relative;
height: 300vh;}
main {
display: block;
height: 300vh;
background: url(Foto/back2.1.jpg) repeat-y 100% 0;
background-size: contain;}
.hideme {
opacity: 0;}
/*........PIC-BLOCK........*/
article {
display: block;
padding-top: 8px;
background: url(Foto/backblack1.1.jpg) repeat-y 100% 0;
background-size: contain;}
#pic-position {
max-width: 1294px;
margin: 0 auto;}
section, aside, footer {
float: left;
display: block;
width: 635px;
width: calc(50% - 12px);
margin-left: 8px;
margin-bottom: 8px;}
/*........FIRST-PIC........*/
article section div, article aside div, article footer div {
display: block;
padding-top: 62.5%;
border-radius: 3px;
box-shadow: 4px 4px 5px -1px rgb(0,0,0);
box-shadow: 4px 4px 5px -1px rgba(0,0,0,0.75);}
article section div {
background: url(Foto/top3.2.jpg);
background-size: cover;}
/*.......SECOND-PIC........*/
aside {
margin-right: 8px;}
article aside div {
background: url(Foto/top3.1.jpg) no-repeat 0 0;
background-size: cover;}
/*.......THIRD-PIC........*/
footer {
width: 1278px;
width: calc(100% - 16px);
margin-right: 8px;}
#pic-position:after {
content:".";
display: block;
height: 0;
clear: both;
overflow: hidden;}
article footer div {
padding-top: 44.7%;
background: url(Foto/top3.jpg) no-repeat 50% 100%;
background-size: cover;}
/*.........SLIDE-SHOW..........*/
#slider {
margin: 30vh auto 0;
width: 70%;
max-width: 1100px;}
.flexslider .slides li.item {
padding-top: 56.25%;
background-repeat: no-repeat;
background-position: center center;
background-size: cover;}
--></style>
<!--|........PREFIXFREE........|-->
<script src="Prefixfree/prefixfree.js"></script>
<!--|.......JQUERY.......|-->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<!--|........OHNEMULL........|-->
<link rel="stylesheet" type="text/css" href="ohnemull.css">
<!--|.........SLIDESHOW........|-->
<link rel="stylesheet" href="FlexSlider/flexslider.css" type="text/css" media="screen">
<!--|........SCROLL-MAGIC........|-->
</head>
<body>
<div id="parallax">
<div id="layer-back">
<div id="back"><div id="text">Whatever comes our way, whatever battle we have raging inside us, we always have a choice. It's the choices that make us who
we are, and we can always choose to do what's right.</div></div>
</div>
<div id="layer-base">
<main>
<article>
<div id="pic-position">
<section class="hideme">
<div></div>
</section>
<aside class="hideme">
<div></div>
</aside>
<footer class="hideme">
<div></div>
</footer>
</div>
</article>
<div id="slider">
<div class="flexslider">
<ul class="slides hideme">
<li class="item" style="background-image: url(Foto/Slide1.jpg);"></li>
<li class="item" style="background-image: url(Foto/Slide2.jpg);"></li>
<li class="item" style="background-image: url(Foto/Slide4.jpg); background-size: contain;"></li>
<li class="item" style="background-image: url(Foto/Slide5.jpg);"></li>
<li class="item" style="background-image: url(Foto/Slide6.jpg);"></li>
<li class="item" style="background-image: url(Foto/Slide7.jpg);"></li>
<li class="item" style="background-image: url(Foto/Slide9.jpg); background-size: contain;"></li>
<li class="item" style="background-image: url(Foto/Slide12.jpg);"></li>
<li class="item" style="background-image: url(Foto/Slide13.jpg);"></li>
<li class="item" style="background-image: url(Foto/Slide14.jpg); background-size: contain;"></li>
<li class="item" style="background-image: url(Foto/Slide16.jpg); background-size: contain;"></li>
<li class="item" style="background-image: url(Foto/Slide24.jpg);"></li>
</ul>
</div>
</div>
</main>
</div>
</div>
<script src="FlexSlider/jquery.flexslider.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('.flexslider').flexslider({
slideshowSpeed: 4500,
directionNav: true,
animation: 'fade',
slideshow: true,
animationSpeed: 800,
animationLoop: true,
pauseOnAction: false,
controlNav: false
});
});
</script>
<script type="text/javascript">
$(document).ready(function() {
/* Every time the window is scrolled ... */
$(window).scroll( function(){
/* Check the location of each desired element */
$('.hideme').each( function(i){
var bottom_of_object = $(this).offset().top + $(this).outerHeight()/3;
var bottom_of_window = $(window).scrollTop() + $(window).height();
/* If the object is completely visible in the window, fade it it */
if( bottom_of_window > bottom_of_object ){
$(this).animate({'opacity':'1'},500);
}
});
});
});
</script>
</body>
Спасибо.
