html-demo-2/parallax.html at master · Neelimamadhuri13/html-demo-2 · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
<html>
    <head>
        <title>
                PARALLAX WEBSITE
        </title>
        <link rel="stylesheet" href="link.css">

    </head>
    <body>
         <div class="one">
          <div class="text">
            <span class ="border">
                Parallax Website
            </span>
          </div>

         </div>
    <section class="section-light">
        <h2> Select One</h2>
        <p>
            this is a section one. this is used to crestr the parallax effect.Parallax scrolling is a web site trend where the background content (i.e. an image) is moved at a different speed than the foreground content while scrolling. Click on the links below to see the difference between a website with and without parallax scrolling.


            Use a container element and add a background image to the container with a specific height. Then use the background-attachment: fixed to create the actual parallax effect. The other background properties are used to center and scale the image perfectly:

            Example with pixelsUse a container element and add a background image to the container with a specific height. Then use the background-attachment: fixed to create the actual parallax effect. The other background properties are used to center and scale the image perfectly:

            Example with pixelsUse a container element and add a background image to the container with a specific height. Then use the background-attachment: fixed to create the actual parallax effect. The other background properties are used to center and scale the image perfectly:

            Example with pixelsUse a container element and add a background image to the container with a specific height. Then use the background-attachment: fixed to create the actual parallax effect. The other background properties are used to center and scale the image perfectly:

            Example with pixelsUse a container element and add a background image to the container with a specific height. Then use the background-attachment: fixed to create the actual parallax effect. The other background properties are used to center and scale the image perfectly:

            Example with pixels
            Parallax scrolling does not always work on mobile devices/smart phones. However, you can use media queries to turn off the effect on mobile devices (see last example on this page).
        </p>
    </section>

    <div class="TWO">
            <div class="text2">
              <span class ="border">
                  Parallax Website TWO
              </span>
            </div>

           </div>
      <section class="section-dark">
          <h2> Select Two</h2>
          <p>
              this is a section TWO. this is used to crestr the parallax effect.Use a container element and add a background image to the container with a specific height. Then use the background-attachment: fixed to create the actual parallax effect. The other background properties are used to center and scale the image perfectly:

              Example with pixelsUse a container element and add a background image to the container with a specific height. Then use the background-attachment: fixed to create the actual parallax effect. The other background properties are used to center and scale the image perfectly:

              Example with pixelsUse a container element and add a background image to the container with a specific height. Then use the background-attachment: fixed to create the actual parallax effect. The other background properties are used to center and scale the image perfectly:

              Example with pixelsUse a container element and add a background image to the container with a specific height. Then use the background-attachment: fixed to create the actual parallax effect. The other background properties are used to center and scale the image perfectly:

              Example with pixelsUse a container element and add a background image to the container with a specific height. Then use the background-attachment: fixed to create the actual parallax effect. The other background properties are used to center and scale the image perfectly:

              Example with pixelsUse a container element and add a background image to the container with a specific height. Then use the background-attachment: fixed to create the actual parallax effect. The other background properties are used to center and scale the image perfectly:

              Example with pixels
          </p>
      </section>

      <div class="three">
            <div class="text3">
              <span class ="border">
                  EFFECT
              </span>
            </div>

           </div>
      <section class="section-white                                             ">
          <h2> Select One</h2>
          <p>
              this is a section THREE. this is used to crestr the parallax effect.he example above used pixels to set the height of the image. If you want to use percent, for example 100%, to make the image fit the whole screen, set the height of the parallax container to 100%. Note: You must also apply height: 100% to both <html> and <body>:

                Example with percenthe example above used pixels to set the height of the image. If you want to use percent, for example 100%, to make the image fit the whole screen, set the height of the parallax container to 100%. Note: You must also apply height: 100% to both <html> and <body>:

                    Example with percenthe example above used pixels to set the height of the image. If you want to use percent, for example 100%, to make the image fit the whole screen, set the height of the parallax container to 100%. Note: You must also apply height: 100% to both <html> and <body>:

                        Example with percent
          </p>
      </section>
    </body>
</html>