FOPENP

CSS: vertical scrolling with bump

In this example I have implemented a web page divided into two sections, with CSS. The two sections are separated by a bump.

There is a menu which initially has black text. Then, thanks to the mix-blend-mode: difference attribute, the text becomes white when it comes into contact with the black background.

Click here to see the example page.

    1 <!DOCTYPE html>
    2 <html>
    3     <head>
    4         <meta charset="utf-8">
    5         <meta name="viewport" content="width=device-width, initial-scale=1.0">
    6         <title>Vertical Scroll</title>
    7         <style>
    8             body {
    9                 margin: 0;
   10                 background-color: white;
   11             }
   12             .options {
   13                 position: fixed;
   14                 font-size: 3em;
   15                 font-family: sans-serif;
   16                 width: 100%;
   17                 text-align: center;
   18                 color: white;
   19                 mix-blend-mode: difference;
   20                 top: 0;
   21             }
   22             .options > a {
   23                 text-decoration: none;
   24                 color: white;
   25             }
   26             .bump {
   27                 margin: -5px;
   28             }
   29             .bumpsvg {
   30                 width: 100%;
   31                 height: 100%;
   32                 background-size: cover;
   33             }
   34             .sect1 {
   35                 margin-top: 25vh;
   36                 height: 100vh;
   37             }
   38             .sect2 {
   39                 background-color: black;
   40                 color: white;
   41                 height: 100vh;
   42             }
   43         </style>
   44     </head>
   45     <body>
   46         <div class="options">
   47             <a href="#">HOME</a> · <a href="#">ABOUT</a> · <a href="#">BLOG</a>
   48         </div>
   49         <div class="sect1">
   50             This is the section n.1
   51         </div>
   52         <div class="bump">
   53             <svg
   54                 width="1920"
   55                 height="200"
   56                 class="bumpsvg"
   57                 viewBox="0 0 507.99999 52.916666"
   58                 version="1.1"
   59                 id="svg5"
   60                 xmlns="http://www.w3.org/2000/svg"
   61                 xmlns:svg="http://www.w3.org/2000/svg">
   62                 <defs
   63                     id="defs2" />
   64                 <g
   65                     id="layer1">
   66                     <path
   67                     style="fill:#000000;fill-opacity:1;stroke:none;stroke-width:0.545999"
   68                     d="m -0.49781301,35.577036 c 0,0 130.79241301,-19.116019 232.21351301,-19.116019 101.42109,0 276.65127,19.647019 276.65127,19.647019 l 0.18774,17.129831 -508.81986484,0.0945 z"
   69                     id="path283" />
   70                 </g>
   71             </svg>
   72         </div>
   73         <div class="sect2">
   74             This is the section n.2
   75         </div>
   76     </body>
   77 </html>

As you can see in the code, the bump is an SVG shape that has been embedded into the page.

2024
Jan, 14