FoldingDOM/index4.html at master · Anemolo/FoldingDOM · 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
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
<!DOCTYPE html>
<html lang="en" class="no-js">

<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>3D Folded Layout | Demo 4 | Codrops</title>
    <meta name="description" content="An experiemntal 3D layout technique for HTML elements." />
    <meta name="keywords" content="3d, layout, html, css, bending, javascript, demo" />
    <meta name="author" content="Codrops" />
    <link rel="shortcut icon" href="favicon.ico" />
    <link rel="stylesheet" href="https://use.typekit.net/grh5akv.css">
    <link rel="stylesheet" type="text/css" href="css/base.css" />
    <link rel="stylesheet" type="text/css" href="css/follow.css" />
    <script>
    document.documentElement.className = "js";
    var supportsCssVars = function() {
        var e,
            t = document.createElement("style");
        return (
            (t.innerHTML = "root: { --tmp-var: bold; }"),
            document.head.appendChild(t),
            (e = !!(
                window.CSS &&
                window.CSS.supports &&
                window.CSS.supports("font-weight", "var(--tmp-var)")
            )),
            t.parentNode.removeChild(t),
            e
        );
    };
    supportsCssVars() ||
        alert(
            "Please view this demo in a modern browser that supports CSS Variables."
        );
    </script>
</head>

<body class="demo-4 loading">
    <main>
        <div class="message">Some message for mobile (if needed).</div>
        <div class="frame">
            <h1 class="frame__title">3D Folded Layout</h1>
            <div class="frame__links">
                <a href="">Previous Demo</a>
                <a href="">Article</a>
                <a href="">GitHub</a>
            </div>
            <div class="frame__demos">
                <a href="index.html" class="frame__demo">demo 1</a>
                <a href="index2.html" class="frame__demo">demo 2</a>
                <a href="index3.html" class="frame__demo">demo 3</a>
                <a href="index4.html" class="frame__demo frame__demo--current">demo 4</a>
                <a href="index5.html" class="frame__demo">demo 5</a>
            </div>
        </div>
        <div class="content">
            <div class="fold-content" id="base-content">
                <!-- CONTENT INSIDE HERE -->
                <h2 class="content__headline">Utopian dreamer</h2>
                <p class="content__type">
                    The Utopia of a modern dreamer must needs differ in one fundamental
                    aspect from the Nowheres and Utopias men planned before Darwin
                    quickened the thought of the world.
                </p>
                <img class="content__img" src="img/18.jpg" alt="Some image" />
                <h2 class="content__headline">All perfect</h2>
                <p class="content__type">
                    Those were all perfect and
                    static States, a balance of happiness won for ever against the
                    forces of unrest and disorder that inhere in things.
                    One beheld a
                    healthy and simple generation enjoying the fruits of the earth in
                    an atmosphere of virtue and happiness, to be followed by other
                    virtuous, happy, and entirely similar generations, until the Gods
                    grew weary.
                </p>
                <img class="content__img" src="img/19.jpg" alt="Some image" />
                <h2 class="content__headline">Invincible dams</h2>
                <p class="content__type">
                    Change and development were dammed back by invincible
                    dams for ever. But the Modern Utopia must be not static but kinetic,
                    must shape not as a permanent state but as a hopeful stage, leading
                    to a long ascent of stages.
                </p>
                <img class="content__img" src="img/20.jpg" alt="Some image" />
                <h2 class="content__headline">Do not resist</h2>
                <p class="content__type">
                    Nowadays we do not resist and overcome
                    the great stream of things, but rather float upon it. We build now
                    not citadels, but ships of state. For one ordered arrangement of
                    citizens rejoicing in an equality of happiness safe and assured
                    to them and their children for ever, we have to plan "a flexible
                    common compromise, in which a perpetually novel succession of
                    individualities may converge most effectually upon a comprehensive
                    onward development."
                </p>
                <img class="content__img" src="img/21.jpg" alt="Some image" />
                <h2 class="content__headline">Modern conceptions</h2>
                <p class="content__type">
                    That is the first, most generalised difference
                    between a Utopia based upon modern conceptions and all the Utopias
                    that were written in the former time.
                </p>
            </div>
            <div class="screen">
                <div class="folds" id="folds">
                    <div class="fold fold-center" id="fold-center"></div>
                    <div class="fold-3d fold-3d-top top-wrapper">
                        <div class="fold fold-top" id="fold-top"></div>
                    </div>
                    <div class="fold-3d fold-3d-bottom bottom-wrapper">
                        <div class="fold fold-bottom" id="fold-bottom"></div>
                    </div>
                </div>
            </div>
            <button class="btn-debug" id="btn-debug">See Planes</button>
        </div>
    </main>
    <script src="./js/imagesloaded.pkgd.min.js"></script>
    <script src="./js/follow.js"></script>
</body>

</html>