Item: ParallaxEffect
Rating: 3.4
Author: -_-Nina-_-

2 Downloads
138 Views
Tweet
Download Now View Demo

HTML
CSS
JavaScript

<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  <title>ParallaxEffect</title>
  
  
  
      <link rel="stylesheet" href="css/style.css">

  
</head>

<body>

  <html>
<head>
  
  <title>
    
  </title>
  
  <link href='https://fonts.googleapis.com/css?family=Bree Serif' rel='stylesheet' type='text/css'>
  
</head>

<body>
  
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.2/jquery.min.js"> </script>
  
  <h3>Parallax is awesome!</h3>
  
  <div class="fixed-bg"> 
  <div class="superman"></div>
  </div>
  
  <div class="scroll-block">
    <p>This div is only here to enable scrolling.</p>
    <p>First, we use CSS to set up the fixed background image. Then, we'll add jQuery to create animations when the user scrolls.</p>
  </div>

</body>

</html>
  
  

    <script  src="js/index.js"></script>




</body>

</html>


/*Downloaded from https://www.codeseek.co/-_-Nina-_-/parallaxeffect-KZwyqm */
body {
  font-family: 'Bree Serif';
}

.fixed-bg {
  background-image: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/1437301/buildings_bg.jpg");
  min-height: 800px; /*1469px;*/
  background-attachment: fixed;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  position: relative;
}

.superman {
  height: 256px;
  width: 100%;
  background-image: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/1437301/superman.png");
  background-position: center;
  background-repeat: no-repeat;
  position: absolute;
  top: 80%;
  margin-top: -80px;
}

.scroll-block {
  height: 900px;
  background-color: lightgreen;
  padding: 5px;
}


/*Downloaded from https://www.codeseek.co/-_-Nina-_-/parallaxeffect-KZwyqm */
window.onload = function() {
  alert("Welcome");
};

$(document).ready(function() {
  $(window).scroll(function(){
    $(".superman").animate({
      top: "+=-50", left: "+=-25"}, "10000")
  });
});

Comments

More from -_-Nina-_-

ParallaxEffect

In this example below you will see how to do a ParallaxEffect with some HTML / CSS and Javascript

Technologies

Comments

More from -_-Nina-_-

ParallaxEffect

Parallax

Buried Treasure Game

jQuery Test

You Might Also Like

Same-Height Divs - jQuery Extension

Video (p5.dom.js)

React Pie Chart

wdad2_oef1

Navbar2

Stretchy SVGs

A Pen by Abteilung für Gestaltung GmbH

Product collection