Image-Scroll-with-Parallax-Effect-using-HTML-CSS-JS/index.html at master · Rajacharles/Image-Scroll-with-Parallax-Effect-using-HTML-CSS-JS · 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
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Image Scroll with Parallax Effect using HTML CSS JS</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>

    <div class="background" data-image="bg1.jpg"></div>
    <section>
        <p>
            Lorem, ipsum dolor sit amet consectetur adipisicing elit. Officiis perspiciatis quasi alias quisquam unde explicabo obcaecati repudiandae illum odio, iste esse labore dolorum eaque autem laudantium mollitia pariatur eveniet modi. Maxime dicta distinctio, animi fuga laudantium ratione reprehenderit delectus quasi. Adipisci ratione, repudiandae autem consequatur et, nemo vero impedit hic fugiat illo dolor optio fuga nihil, quibusdam mollitia eaque nostrum! Eum architecto ex dolorem possimus, expedita praesentium quia aliquid sequi delectus beatae error voluptas repellat omnis quidem adipisci suscipit pariatur veniam! Eos, voluptates omnis aliquid neque quos quis officiis eligendi nihil sit reiciendis voluptatem praesentium cumque perferendis voluptas minus aliquam!
        </p>
        <p>
            Lorem, ipsum dolor sit amet consectetur adipisicing elit. Officiis perspiciatis quasi alias quisquam unde explicabo obcaecati repudiandae illum odio, iste esse labore dolorum eaque autem laudantium mollitia pariatur eveniet modi. Maxime dicta distinctio, animi fuga laudantium ratione reprehenderit delectus quasi. Adipisci ratione, repudiandae autem consequatur et, nemo vero impedit hic fugiat illo dolor optio fuga nihil, quibusdam mollitia eaque nostrum! Eum architecto ex dolorem possimus, expedita praesentium quia aliquid sequi delectus beatae error voluptas repellat omnis quidem adipisci suscipit pariatur veniam! Eos, voluptates omnis aliquid neque quos quis officiis eligendi nihil sit reiciendis voluptatem praesentium cumque perferendis voluptas minus aliquam!
        </p>
    </section>

    <div class="background" data-image="bg2.jpg"></div>
    <section>
        <p>
            Lorem, ipsum dolor sit amet consectetur adipisicing elit. Officiis perspiciatis quasi alias quisquam unde explicabo obcaecati repudiandae illum odio, iste esse labore dolorum eaque autem laudantium mollitia pariatur eveniet modi. Maxime dicta distinctio, animi fuga laudantium ratione reprehenderit delectus quasi. Adipisci ratione, repudiandae autem consequatur et, nemo vero impedit hic fugiat illo dolor optio fuga nihil, quibusdam mollitia eaque nostrum! Eum architecto ex dolorem possimus, expedita praesentium quia aliquid sequi delectus beatae error voluptas repellat omnis quidem adipisci suscipit pariatur veniam! Eos, voluptates omnis aliquid neque quos quis officiis eligendi nihil sit reiciendis voluptatem praesentium cumque perferendis voluptas minus aliquam!
        </p>
        <p>
            Lorem, ipsum dolor sit amet consectetur adipisicing elit. Officiis perspiciatis quasi alias quisquam unde explicabo obcaecati repudiandae illum odio, iste esse labore dolorum eaque autem laudantium mollitia pariatur eveniet modi. Maxime dicta distinctio, animi fuga laudantium ratione reprehenderit delectus quasi. Adipisci ratione, repudiandae autem consequatur et, nemo vero impedit hic fugiat illo dolor optio fuga nihil, quibusdam mollitia eaque nostrum! Eum architecto ex dolorem possimus, expedita praesentium quia aliquid sequi delectus beatae error voluptas repellat omnis quidem adipisci suscipit pariatur veniam! Eos, voluptates omnis aliquid neque quos quis officiis eligendi nihil sit reiciendis voluptatem praesentium cumque perferendis voluptas minus aliquam!
        </p>
    </section>

    <div class="background" data-image="bg3.jpg"></div>
    <section>
        <p>
            Lorem, ipsum dolor sit amet consectetur adipisicing elit. Officiis perspiciatis quasi alias quisquam unde explicabo obcaecati repudiandae illum odio, iste esse labore dolorum eaque autem laudantium mollitia pariatur eveniet modi. Maxime dicta distinctio, animi fuga laudantium ratione reprehenderit delectus quasi. Adipisci ratione, repudiandae autem consequatur et, nemo vero impedit hic fugiat illo dolor optio fuga nihil, quibusdam mollitia eaque nostrum! Eum architecto ex dolorem possimus, expedita praesentium quia aliquid sequi delectus beatae error voluptas repellat omnis quidem adipisci suscipit pariatur veniam! Eos, voluptates omnis aliquid neque quos quis officiis eligendi nihil sit reiciendis voluptatem praesentium cumque perferendis voluptas minus aliquam!
        </p>
        <p>
            Lorem, ipsum dolor sit amet consectetur adipisicing elit. Officiis perspiciatis quasi alias quisquam unde explicabo obcaecati repudiandae illum odio, iste esse labore dolorum eaque autem laudantium mollitia pariatur eveniet modi. Maxime dicta distinctio, animi fuga laudantium ratione reprehenderit delectus quasi. Adipisci ratione, repudiandae autem consequatur et, nemo vero impedit hic fugiat illo dolor optio fuga nihil, quibusdam mollitia eaque nostrum! Eum architecto ex dolorem possimus, expedita praesentium quia aliquid sequi delectus beatae error voluptas repellat omnis quidem adipisci suscipit pariatur veniam! Eos, voluptates omnis aliquid neque quos quis officiis eligendi nihil sit reiciendis voluptatem praesentium cumque perferendis voluptas minus aliquam!
        </p>
    </section>

    <div class="background" data-image="bg4.jpg"></div>
    <section>
        <p>
            Lorem, ipsum dolor sit amet consectetur adipisicing elit. Officiis perspiciatis quasi alias quisquam unde explicabo obcaecati repudiandae illum odio, iste esse labore dolorum eaque autem laudantium mollitia pariatur eveniet modi. Maxime dicta distinctio, animi fuga laudantium ratione reprehenderit delectus quasi. Adipisci ratione, repudiandae autem consequatur et, nemo vero impedit hic fugiat illo dolor optio fuga nihil, quibusdam mollitia eaque nostrum! Eum architecto ex dolorem possimus, expedita praesentium quia aliquid sequi delectus beatae error voluptas repellat omnis quidem adipisci suscipit pariatur veniam! Eos, voluptates omnis aliquid neque quos quis officiis eligendi nihil sit reiciendis voluptatem praesentium cumque perferendis voluptas minus aliquam!
        </p>
        <p>
            Lorem, ipsum dolor sit amet consectetur adipisicing elit. Officiis perspiciatis quasi alias quisquam unde explicabo obcaecati repudiandae illum odio, iste esse labore dolorum eaque autem laudantium mollitia pariatur eveniet modi. Maxime dicta distinctio, animi fuga laudantium ratione reprehenderit delectus quasi. Adipisci ratione, repudiandae autem consequatur et, nemo vero impedit hic fugiat illo dolor optio fuga nihil, quibusdam mollitia eaque nostrum! Eum architecto ex dolorem possimus, expedita praesentium quia aliquid sequi delectus beatae error voluptas repellat omnis quidem adipisci suscipit pariatur veniam! Eos, voluptates omnis aliquid neque quos quis officiis eligendi nihil sit reiciendis voluptatem praesentium cumque perferendis voluptas minus aliquam!
        </p>
    </section>

    <script src="https://code.jquery.com/jquery-2.2.4.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/modernizr/2.8.3/modernizr.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/parallax-imagescroll@0.2.3/jquery.imageScroll.min.js"></script>

    <script>
        var touch = Modernizr.touch;
        $('.background').imageScroll({
            imageAttribute: (touch === true) ? 'image-mobile' : 'image',
            touch: touch
        });
    </script>

</body>
</html>