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

0 Downloads
105 Views
Tweet
Download Now View Demo

HTML
CSS
JavaScript

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

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

  
</head>

<body>

  <head>
  

<title>Parallax Scrolling Page</title>

<link href="https://fonts.googleapis.com/css?family=Love+Ya+Like+A+Sister"rel="stylesheet">

<script src="https://ajax.googleapis.com/libs/jquery/3.2.1/jquery.min.js"> </script>
  
</head>

<body>
  <h1>FREEDOM</h1>
  <div class="content1"</div>
  <div class="content2">
    <h1 class="hidden"> FREEDOM </h1>
  </div>
  
  <div class="content3">
    <h1> Freedom </h1>
  </div>
</body>
  
  

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




</body>

</html>


/*Downloaded from https://www.codeseek.co/-_-Nina-_-/parallax-BJopRX */
body {
  background-image: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/1437301/mohamed-nohassi-229698.jpg");
  background-position: center;
  background-repeat: no-repeat;
  background-attachment: fixed;
  min-height: 800px;
  font-family: 'Love Ya Like A Sister', cursive;
}

h1 {
  margin-top: 15%;
  text-align: center;
  font-size: 200px;
  color: #ffffff;
  text-shadow: 1px 1px #000000;
}

.content1 {
  background-color: #FFFF8E;
  height: 900px;
}

.content2 {
  background-image: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/1437301/mohamed-nohassi-229698.jpg");
  background-position: center;
  background-repeat: no-repeat;
  background-attachment: fixed;
  min-height: 800px;
}

.hidden {
  visibility: hidden;
}

.content3 {
  background-color: #FFFF8E;
  height: 900x;
}


/*Downloaded from https://www.codeseek.co/-_-Nina-_-/parallax-BJopRX */
$(document).ready(function() {
  $(window).scroll (function() {
    $("h1").animate({
      opacity: 0.5}, "10000");
    
    $(".content1").css({
      'background-color' : 'pink', 'opacity' : '0.5'
    });
    
    $(".content2").css({
      'background-image' : 'url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/1437301/mohamed-nohassi-229698.jpg")'
    });
    
    $(".hidden").css({
      'visibility' : 'visible'
    });
    
    $(".content3").css({
      'background-color' : 'lightblue', 'opacity' : '0.5'
    });
    
    $("h1").click(function(){
      $("h1").hide();
    });
  });
});

Comments

More from -_-Nina-_-

Parallax

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

Technologies

Comments

More from -_-Nina-_-

ParallaxEffect

Parallax

Buried Treasure Game

jQuery Test

You Might Also Like

Full-height, middle scrolling - Flexbox

Local Weather

Responsive Menu full Screen

sandbox

Mnml Frm (Minimal Form)

A7_2_Gregory

UX Draft

Daily UI #021 Home Monitoring Dashboard - Under Construction