Top Fadey Thing Page 2

HTML
<link href="https://fonts.googleapis.com/css?family=Lato|Roboto:100,400,500" rel="stylesheet"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> <div class="container bg-2" style="background-image:url(https://s3.amazonaws.com/imglibs/camera.jpeg);"> <div class="overlay fadey dark"> <div class="logo fadeout"><img class="main-logo" src="https://s3.amazonaws.com/imglibs/sample_logo.svg"/><br /><img class="mouse-logo" src="https://s3.amazonaws.com/imglibs/mouse.png"/> </div> </div> </div> <div class="container"> <div class="copy"> <h1>Page Two</h1> <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam dapibus eu ante dapibus sodales. Integer malesuada tortor ac velit dignissim, ac vulputate felis vulputate. Mauris vitae sodales lectus. Etiam id tortor sit amet nisl gravida rutrum nec non turpis. Vivamus vitae euismod est, quis lacinia est. Ut suscipit tortor eu libero interdum fringilla ac vitae mauris. Cras feugiat mi sit amet eleifend condimentum. Cras eget lectus nec leo facilisis laoreet. Curabitur egestas vestibulum quam eu lobortis. Curabitur imperdiet lacinia sapien nec iaculis. Fusce semper sem non urna fringilla, vel mattis massa porta. Fusce tristique, ligula et pellentesque elementum, elit lacus elementum urna, sit amet lobortis tellus magna id eros. Nunc egestas pellentesque finibus. Nunc semper turpis rutrum nunc tempus malesuada.</p> <p>Sed egestas justo mi, sed interdum tellus finibus eu. Mauris et libero id ex commodo tempor quis sodales odio. Etiam quam ante, laoreet a nisi efficitur, egestas cursus lorem. Donec at imperdiet lectus. Duis sed consectetur erat, quis venenatis tortor. Duis consectetur odio accumsan, varius enim nec, consectetur lectus. Pellentesque nec risus eget nibh aliquet vestibulum sed vitae est. Nulla pulvinar lectus congue posuere facilisis. Maecenas mauris mauris, iaculis vel orci a, vestibulum hendrerit est. Cras elementum vehicula pulvinar. Curabitur iaculis diam quis mollis commodo. Nulla consequat, libero eu vestibulum auctor, urna metus fermentum lectus, eget tincidunt eros quam in ligula. Phasellus justo felis, elementum at convallis at, finibus vel massa. Donec venenatis interdum est, a euismod justo pharetra non. Fusce pretium nulla sed ex ultricies posuere.</p> <p>Fusce sed purus nec urna scelerisque tincidunt. Pellentesque eleifend molestie lacus, in commodo lorem dictum ac. Maecenas tincidunt mattis elit, ac feugiat purus pretium in. Sed auctor velit sed blandit porttitor. Vestibulum arcu tortor, imperdiet vel malesuada sed, congue a turpis. Morbi vel cursus nisi. In feugiat erat at suscipit vestibulum. Proin posuere leo libero, eget suscipit diam luctus id. Integer pellentesque nisl sit amet sem feugiat, sed lobortis eros dignissim. Etiam sagittis sagittis quam, eu placerat velit pulvinar vel. Vivamus laoreet feugiat metus vel semper. <a class="page-link" href="https://preview.codepad.co/playground/preview/a8FhLe32/1">Go To Page One</a> </p> </div> </div>
CSS
body{ display:none; font-family: 'Lato', sans-serif; } .container{ position:relative; width:100%; display:block; min-height:100vh; height: auto; background:no-repeat top center; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; background-color:#efefef; } .overlay{ position:relative; display:table; width:100%; height:100vh; top:0; left:0; text-align:center; } .logo{ display:table-cell; vertical-align:middle; } .main-logo{ max-width:450px; width:90vw; opacity:0.6; -webkit-opacity: 0.6; } .mouse-logo{ display:block; position: relative; top:40px; right:2px; margin:0 auto 0 auto; width:24px; opacity:0.6; -webkit-opacity: 0.6; } .dark{ background-color:#000; } .light{ background-color:#fff; } .copy{ max-width:960px; padding:20px; display:block; position:relative; margin:0 auto; color: #999; } a.page-link{ color: #999; display: block; position:relative; text-align:center; width:100%; } .copy p{ line-height:2em; } h1, h2{ font-weight:100; font-family: 'Roboto', sans-serif; } h1{ text-align:center; }
JAVASCRIPT
$( document ).ready(function() { /** * Author: Heather Corey * jQuery Simple Parallax Plugin * */ $('body').fadeIn('1000'); $(".fadey").css("opacity", 0.6); $(".logo img").css("margin-top", '0px'); (function($) { $.fn.parallax = function(options) { var windowHeight = $(window).height(); // Establish default settings var settings = $.extend({ speed : 0.15 }, options); // Iterate over each object in collection return this.each( function() { // Save a reference to the element var $this = $(this); // Set up Scroll Handler $(document).scroll(function(){ var scrollTop = $(window).scrollTop(); var offset = $this.offset().top; var height = $this.outerHeight(); // Check if above or below viewport if (offset + height <= scrollTop || offset >= scrollTop + windowHeight) { return; } var yBgPosition = Math.round((offset - scrollTop) * settings.speed); // Apply the Y Background Position to Set the Parallax Effect $this.css('background-position', 'center ' + yBgPosition + 'px'); }); }); }; $(window).scroll(function(){ $(".top").css("opacity", 1 - $(window).scrollTop() / 750); $(".fadey").css("opacity", 0.6 - $(window).scrollTop() / 750); $(".logo img").css("margin-top", '300' + $(window).scrollTop() / 1500); }); }(jQuery)); $( ".page-link" ).click(function( event ) { event.preventDefault(); var goTo = this.getAttribute("href"); $('body').fadeOut(500, function(){ window.location = goTo; }); }); $('.bg-1').parallax({ speed : -0.2 }); $('.bg-2').parallax({ speed :-0.13 }); });
Expand for more options Login