Added parts animation for rental.

go.mod

@@ -5,6 +5,7 @@ go 1.13
 require (
 	github.com/emvi/iso-639-1 v0.0.0-20190602002026-5ad2c26993cd
 	github.com/emvi/logbuch v0.0.0-20191002134629-fd76a46de20c
-	github.com/mholt/certmagic v0.9.0 // indirect
-	github.com/rs/cors v1.7.0 // indirect
+	github.com/gorilla/mux v1.7.3
+	github.com/mholt/certmagic v0.9.0
+	github.com/rs/cors v1.7.0
 )

js/parts.js

@@ -0,0 +1,532 @@
+var offset = window.screen.width > 512 ? 20 : 10;
+
+var controller = new ScrollMagic.Controller();
+
+var part2 = new TweenMax.from("#part2", 1, {
+    x: "-100vw",
+    ease: Power2.easeOut
+});
+
+var part2Scene = new ScrollMagic.Scene({
+    triggerElement: "#rental",
+    duration: "250",
+})
+.setTween(part2)
+.addTo(controller);
+
+var part3 = new TweenMax.from("#part3", 1, {
+    x: "-100vw",
+    ease: Power2.easeOut
+});
+
+var part3Scene = new ScrollMagic.Scene({
+    triggerElement: "#rental",
+    duration: "250",
+    offset: this.offset
+})
+.setTween(part3)
+.addTo(controller);
+
+var part4 = new TweenMax.from("#part4", 1, {
+    x: "-100vw",
+    y: "100%",
+    rotation: 2,
+    ease: Power2.easeOut
+});
+
+var part4Scene = new ScrollMagic.Scene({
+    triggerElement: "#rental",
+    duration: "250",
+    offset: 2*this.offset
+})
+.setTween(part4)
+.addTo(controller);
+
+var part5 = new TweenMax.from("#part5", 1, {
+    x: "100vw",
+    ease: Power2.easeOut
+});
+
+var part5Scene = new ScrollMagic.Scene({
+    triggerElement: "#rental",
+    duration: "250"
+})
+.setTween(part5)
+.addTo(controller);
+
+var part6 = new TweenMax.from("#part6", 1, {
+    x: "100vw",
+    ease: Power2.easeOut
+});
+
+var part6Scene = new ScrollMagic.Scene({
+    triggerElement: "#rental",
+    duration: "250",
+    offset: 3*this.offset
+})
+.setTween(part6)
+.addTo(controller);
+
+var part7 = new TweenMax.from("#part7", 1, {
+    x: "100vw",
+    ease: Power2.easeOut
+});
+
+var part7Scene = new ScrollMagic.Scene({
+    triggerElement: "#rental",
+    duration: "250",
+    offset: 4*this.offset
+})
+.setTween(part7)
+.addTo(controller);
+
+var part8 = new TweenMax.from("#part8", 1, {
+    x: "-100vw",
+    y: "200%",
+    rotation: 4,
+    ease: Power2.easeOut
+});
+
+var part8Scene = new ScrollMagic.Scene({
+    triggerElement: "#rental",
+    duration: "250",
+    offset: 5*this.offset
+})
+.setTween(part8)
+.addTo(controller);
+
+var part9 = new TweenMax.from("#part9", 1, {
+    x: "-100vw",
+    y: "300%",
+    rotation: 4,
+    ease: Power2.easeOut
+});
+
+var part9Scene = new ScrollMagic.Scene({
+    triggerElement: "#rental",
+    duration: "250",
+    offset: 5*this.offset
+})
+.setTween(part9)
+.addTo(controller);
+
+var part10 = new TweenMax.from("#part10", 1, {
+    x: "100vw",
+    y: "600%",
+    rotation: -12,
+    ease: Power2.easeOut
+});
+
+var part10Scene = new ScrollMagic.Scene({
+    triggerElement: "#rental",
+    duration: "250",
+    offset: 6*this.offset
+})
+.setTween(part10)
+.addTo(controller);
+
+var part11 = new TweenMax.from("#part11", 1, {
+    x: "-100vw",
+    y: "800%",
+    rotation: 12,
+    ease: Power2.easeOut
+});
+
+var part11Scene = new ScrollMagic.Scene({
+    triggerElement: "#rental",
+    duration: "250",
+    offset: 7*this.offset
+})
+.setTween(part11)
+.addTo(controller);
+
+var part12 = new TweenMax.from("#part12", 1, {
+    x: "100vw",
+    y: "500%",
+    rotation: -16,
+    ease: Power2.easeOut
+});
+
+var part12Scene = new ScrollMagic.Scene({
+    triggerElement: "#rental",
+    duration: "250",
+    offset: 8*this.offset
+})
+.setTween(part12)
+.addTo(controller);
+
+var part13 = new TweenMax.from("#part13", 1, {
+    x: "100vw",
+    y: "400%",
+    rotation: -24,
+    ease: Power2.easeOut
+});
+
+var part13Scene = new ScrollMagic.Scene({
+    triggerElement: "#rental",
+    duration: "250",
+    offset: 9*this.offset
+})
+.setTween(part13)
+.addTo(controller);
+
+var part14 = new TweenMax.from("#part14", 1, {
+    x: "-100vw",
+    y: "400%",
+    rotation: 24,
+    ease: Power2.easeOut
+});
+
+var part14Scene = new ScrollMagic.Scene({
+    triggerElement: "#rental",
+    duration: "250",
+    offset: 10*this.offset
+})
+.setTween(part14)
+.addTo(controller);
+
+var part15 = new TweenMax.from("#part15", 1, {
+    x: "-100vw",
+    y: "400%",
+    rotation: 24,
+    ease: Power2.easeOut
+});
+
+var part15Scene = new ScrollMagic.Scene({
+    triggerElement: "#rental",
+    duration: "250",
+    offset: 11*this.offset
+})
+.setTween(part15)
+.addTo(controller);
+
+var part16 = new TweenMax.from("#part16", 1, {
+    x: "100vw",
+    y: "400%",
+    rotation: 24,
+    ease: Power2.easeOut
+});
+
+var part16Scene = new ScrollMagic.Scene({
+    triggerElement: "#rental",
+    duration: "250",
+    offset: 12*this.offset
+})
+.setTween(part16)
+.addTo(controller);
+
+var part17 = new TweenMax.from("#part17", 1, {
+    x: "-100vw",
+    y: "400%",
+    rotation: 24,
+    ease: Power2.easeOut
+});
+
+var part17Scene = new ScrollMagic.Scene({
+    triggerElement: "#rental",
+    duration: "250",
+    offset: 13*this.offset
+})
+.setTween(part17)
+.addTo(controller);
+
+var part181 = new TweenMax.from("#part18-1", 1, {
+    x: "100vw",
+    y: "800%",
+    rotation: -32,
+    ease: Power2.easeOut
+});
+
+var part181Scene = new ScrollMagic.Scene({
+    triggerElement: "#rental",
+    duration: "250",
+    offset: 14*this.offset
+})
+.setTween(part181)
+.addTo(controller);
+
+var part182 = new TweenMax.from("#part18-2", 1, {
+    x: "100vw",
+    y: "800%",
+    rotation: -32,
+    ease: Power2.easeOut
+});
+
+var part182Scene = new ScrollMagic.Scene({
+    triggerElement: "#rental",
+    duration: "250",
+    offset: 15*this.offset
+})
+.setTween(part182)
+.addTo(controller);
+
+var part191 = new TweenMax.from("#part19-1", 1, {
+    x: "-100vw",
+    y: "800%",
+    rotation: 32,
+    ease: Power2.easeOut
+});
+
+var part191Scene = new ScrollMagic.Scene({
+    triggerElement: "#rental",
+    duration: "250",
+    offset: 16*this.offset
+})
+.setTween(part191)
+.addTo(controller);
+
+var part192 = new TweenMax.from("#part19-2", 1, {
+    x: "-100vw",
+    y: "800%",
+    rotation: 32,
+    ease: Power2.easeOut
+});
+
+var part192Scene = new ScrollMagic.Scene({
+    triggerElement: "#rental",
+    duration: "250",
+    offset: 18*this.offset
+})
+.setTween(part192)
+.addTo(controller);
+
+var part20 = new TweenMax.from("#part20", 1, {
+    x: "100vw",
+    y: "800%",
+    rotation: -32,
+    ease: Power2.easeOut
+});
+
+var part20Scene = new ScrollMagic.Scene({
+    triggerElement: "#rental",
+    duration: "250",
+    offset: 19*this.offset
+})
+.setTween(part20)
+.addTo(controller);
+
+var part21 = new TweenMax.from("#part21", 1, {
+    x: "-100vw",
+    y: "800%",
+    rotation: 32,
+    ease: Power2.easeOut
+});
+
+var part21Scene = new ScrollMagic.Scene({
+    triggerElement: "#rental",
+    duration: "250",
+    offset: 20*this.offset
+})
+.setTween(part21)
+.addTo(controller);
+
+var part22 = new TweenMax.from("#part22", 1, {
+    x: "100vw",
+    y: "800%",
+    rotation: -32,
+    ease: Power2.easeOut
+});
+
+var part22Scene = new ScrollMagic.Scene({
+    triggerElement: "#rental",
+    duration: "250",
+    offset: 21*this.offset
+})
+.setTween(part22)
+.addTo(controller);
+
+var part23 = new TweenMax.from("#part23", 1, {
+    x: "-100vw",
+    y: "2400%",
+    rotation: 32,
+    ease: Power2.easeOut
+});
+
+var part23Scene = new ScrollMagic.Scene({
+    triggerElement: "#rental",
+    duration: "250",
+    offset: 22*this.offset
+})
+.setTween(part23)
+.addTo(controller);
+
+var part24 = new TweenMax.from("#part24", 1, {
+    x: "100vw",
+    y: "1000%",
+    rotation: -32,
+    ease: Power2.easeOut
+});
+
+var part24Scene = new ScrollMagic.Scene({
+    triggerElement: "#rental",
+    duration: "250",
+    offset: 23*this.offset
+})
+.setTween(part24)
+.addTo(controller);
+
+var part25 = new TweenMax.from("#part25", 1, {
+    x: "-100vw",
+    y: "1000%",
+    rotation: 32,
+    ease: Power2.easeOut
+});
+
+var part25Scene = new ScrollMagic.Scene({
+    triggerElement: "#rental",
+    duration: "250",
+    offset: 24*this.offset
+})
+.setTween(part25)
+.addTo(controller);
+
+var part26 = new TweenMax.from("#part26", 1, {
+    x: "100vw",
+    y: "1000%",
+    rotation: -32,
+    ease: Power2.easeOut
+});
+
+var part26Scene = new ScrollMagic.Scene({
+    triggerElement: "#rental",
+    duration: "250",
+    offset: 25*this.offset
+})
+.setTween(part26)
+.addTo(controller);
+
+var part27 = new TweenMax.from("#part27", 1, {
+    x: "-100vw",
+    y: "1600%",
+    rotation: 32,
+    ease: Power2.easeOut
+});
+
+var part27Scene = new ScrollMagic.Scene({
+    triggerElement: "#rental",
+    duration: "250",
+    offset: 26*this.offset
+})
+.setTween(part27)
+.addTo(controller);
+
+var part28 = new TweenMax.from("#part28", 1, {
+    x: "100vw",
+    y: "1600%",
+    rotation: -32,
+    ease: Power2.easeOut
+});
+
+var part28Scene = new ScrollMagic.Scene({
+    triggerElement: "#rental",
+    duration: "250",
+    offset: 33*this.offset
+})
+.setTween(part28)
+.addTo(controller);
+
+var part291 = new TweenMax.from("#part29-1", 1, {
+    x: "-100vw",
+    y: "1600%",
+    rotation: 32,
+    ease: Power2.easeOut
+});
+
+var part291Scene = new ScrollMagic.Scene({
+    triggerElement: "#rental",
+    duration: "250",
+    offset: 32*this.offset
+})
+.setTween(part291)
+.addTo(controller);
+
+var part292 = new TweenMax.from("#part29-2", 1, {
+    x: "-100vw",
+    y: "1600%",
+    rotation: 32,
+    ease: Power2.easeOut
+});
+
+var part292Scene = new ScrollMagic.Scene({
+    triggerElement: "#rental",
+    duration: "250",
+    offset: 31*this.offset
+})
+.setTween(part292)
+.addTo(controller);
+
+var part30 = new TweenMax.from("#part30", 1, {
+    x: "100vw",
+    y: "1600%",
+    rotation: -32,
+    ease: Power2.easeOut
+});
+
+var part30Scene = new ScrollMagic.Scene({
+    triggerElement: "#rental",
+    duration: "250",
+    offset: 34*this.offset
+})
+.setTween(part30)
+.addTo(controller);
+
+var part311 = new TweenMax.from("#part31-1", 1, {
+    x: "-100vw",
+    y: "3200%",
+    rotation: 32,
+    ease: Power2.easeOut
+});
+
+var part311Scene = new ScrollMagic.Scene({
+    triggerElement: "#rental",
+    duration: "250",
+    offset: 30*this.offset
+})
+.setTween(part311)
+.addTo(controller);
+
+var part312 = new TweenMax.from("#part31-2", 1, {
+    x: "-100vw",
+    y: "3200%",
+    rotation: 32,
+    ease: Power2.easeOut
+});
+
+var part312Scene = new ScrollMagic.Scene({
+    triggerElement: "#rental",
+    duration: "250",
+    offset: 29*this.offset
+})
+.setTween(part312)
+.addTo(controller);
+
+var part321 = new TweenMax.from("#part32-1", 1, {
+    x: "-100vw",
+    y: "3200%",
+    rotation: 32,
+    ease: Power2.easeOut
+});
+
+var part321Scene = new ScrollMagic.Scene({
+    triggerElement: "#rental",
+    duration: "250",
+    offset: 28*this.offset
+})
+.setTween(part321)
+.addTo(controller);
+
+var part322 = new TweenMax.from("#part32-2", 1, {
+    x: "-100vw",
+    y: "3200%",
+    rotation: 32,
+    ease: Power2.easeOut
+});
+
+var part322Scene = new ScrollMagic.Scene({
+    triggerElement: "#rental",
+    duration: "250",
+    offset: 27*this.offset
+})
+.setTween(part322)
+.addTo(controller);
+

main.go

@@ -16,6 +16,8 @@ import (
 const (
 	staticDir       = "static"
 	staticDirPrefix = "/static/"
+	jsDir       	= "js"
+	jsDirPrefix 	= "/js/"
 	envPrefix       = "SCHNITTFEST_"
 	pwdString       = "PASSWORD" // do not log passwords!
 
@@ -63,6 +65,16 @@ func setupRouter() *mux.Router {
 		fs.ServeHTTP(w, r)
 	}).Methods("GET")
 
+	// js
+	js := http.StripPrefix(jsDirPrefix, http.FileServer(http.Dir(jsDir)))
+	router.PathPrefix(jsDirPrefix).HandlerFunc(func(w http.ResponseWriter, r *http.Request) {
+		if !disableCache {
+			w.Header().Add("Cache-Control", "max-age=3600")
+		}
+
+		js.ServeHTTP(w, r)
+	}).Methods("GET")
+
 	// pages
 	router.HandleFunc("/", pages.LandingPageHandler).Methods("GET")
 

style/sass/main.scss

@@ -13,6 +13,10 @@ html {
     --purple: #571B47;
 }
 
+body {
+    overflow-x: hidden;
+}
+
 h1, h2, h3, p {
     margin-block-start: 0;
     margin-block-end: 0;
@@ -85,15 +89,15 @@ button {
 }
 
 .p { // padding
-    &-t, &-b { // top
+    &-t { // top
         &-l { // large
-            padding-top: 256px;
+            padding-top: 192px;
         }
     }
 
     &-b { // bottom
         &-l { // large
-            padding-bottom: 256px;
+            padding-bottom: 192px;
         }
     }
 }
@@ -173,7 +177,7 @@ button {
     }
 
     button.secondary {
-        color: var(--yellow);
+        color: var(--beige);
         background-color: var(--purple);
 
         &:hover {
@@ -233,3 +237,244 @@ button {
         }
     }
 }
+
+.section-rental {
+    overflow: hidden;
+
+    .parts {
+        position: relative;
+        max-width: 720px;
+        min-height: 256px;
+        margin: 0 auto;
+
+        img:not(#part0) {
+            position: absolute;
+            filter: contrast(1.3) saturate(0.6) sepia(0.1);
+        }
+
+        #part0 {
+            width: 100%;
+        }
+
+        #part1 {
+            width: 29%;
+            left: 34%;
+        }
+    
+        #part2 {
+            width: 8.5%;
+            left: 24%;
+            margin-top: 2%;
+        }
+
+        #part3 {
+            width: 19%;
+            left: 0;
+            margin-top: 2%;
+        }
+
+        #part4 {
+            width: 17%;
+            left: 2%;
+            margin-top: 15%;
+        }
+
+        #part5 {
+            width: 5.5%;
+            left: 70%;
+            margin-top: 9%;
+        }
+
+        #part6 {
+            width: 22%;
+            left: 64%;
+            margin-top: 1%;
+        }
+
+        #part7 {
+            width: 12.5%;
+            left: 87.5%;
+            margin-top: 1%;
+        }
+
+        #part8 {
+            width: 37%;
+            left: 30%;
+            margin-top: 28%;
+        }
+
+        #part9 {
+            width: 22.5%;
+            left: 0;
+            margin-top: 28%;
+        }
+
+        #part10 {
+            width: 49%;
+            left: 20%;
+            margin-top: 40%;
+        }
+
+        #part11 {
+            width: 14%;
+            left: 2%;
+            margin-top: 36%;
+        }
+
+        #part12 {
+            width: 27%;
+            left: 72%;
+            margin-top: 31%;
+        }
+
+        #part13 {
+            width: 24%;
+            left: 48%;
+            margin-top: 48%;
+        }
+
+        #part14 {
+            width: 19%;
+            left: 24%;
+            margin-top: 48%;
+        }
+
+        #part15 {
+            width: 4.5%;
+            left: 15%;
+            margin-top: 47%;
+        }
+
+        #part16 {
+            width: 24%;
+            left: 75%;
+            margin-top: 48%;
+        }
+
+        #part17 {
+            width: 7.5%;
+            left: 2%;
+            margin-top: 44%;
+        }
+
+        #part18-1 {
+            width: 14%;
+            left: 46%;
+            margin-top: 72%;
+        }
+
+        #part18-2 {
+            width: 14%;
+            left: 46%;
+            margin-top: 86%;
+        }
+
+        #part19-1 {
+            width: 17%;
+            left: 22%;
+            margin-top: 70%;
+        }
+
+        #part19-2 {
+            width: 17%;
+            left: 22%;
+            margin-top: 84%;
+        }
+
+        #part20 {
+            width: 13.5%;
+            left: 66%;
+            margin-top: 73%;
+        }
+
+        #part21 {
+            width: 11.5%;
+            left: 6%;
+            margin-top: 73%;
+        }
+
+        #part22 {
+            width: 13.5%;
+            left: 84%;
+            margin-top: 73%;
+        }
+
+        #part23 {
+            width: 28%;
+            left: 22%;
+            margin-top: 102%;
+        }
+
+        #part24 {
+            width: 37.5%;
+            left: 60%;
+            margin-top: 100%;
+        }
+
+        #part25 {
+            width: 20%;
+            left: 14%;
+            margin-top: 105%;
+        }
+
+        #part26 {
+            width: 40%;
+            left: 43%;
+            margin-top: 106%;
+        }
+
+        #part27 {
+            width: 22.5%;
+            left: 20%;
+            margin-top: 115%;
+        }
+
+        #part28 {
+            width: 22%;
+            left: 47%;
+            margin-top: 130%;
+        }
+
+        #part29-1 {
+            width: 3%;
+            left: 4%;
+            margin-top: 106%;
+        }
+
+        #part29-2 {
+            width: 3%;
+            left: 8%;
+            margin-top: 106%;
+        }
+
+        #part30 {
+            width: 19%;
+            left: 70%;
+            margin-top: 116%;
+        }
+
+        #part31-1 {
+            width: 2.5%;
+            left: 13%;
+            margin-top: 125.5%;
+        }
+
+        #part31-2 {
+            width: 2.5%;
+            left: 16%;
+            margin-top: 125.5%;
+        }
+
+        #part32-1 {
+            width: 2.75%;
+            left: 20%;
+            margin-top: 126%;
+        }
+
+        #part32-2 {
+            width: 2.75%;
+            left: 24%;
+            margin-top: 126%;
+        }
+    }
+}

template/landing_page.html

@@ -30,7 +30,7 @@
     <title>Schnittfest</title>
 </head>
 <body>
-    <nav class="header bg-black">
+    <!--<nav class="header bg-black">
         <div class="container">
             <img src="static/wordmark-white.svg" alt="Schnittfest">
             <ul class="hide-sm">
@@ -40,7 +40,7 @@
                 <li>Kontakt</li>
             </ul>
         </div>
-    </nav>
+    </nav>-->
 
     <section id="start" class="section-start bg-black p-t-l p-b-l">
         <div class="container row">
@@ -101,6 +101,58 @@
             </div>
         </div>
     </section>
+
+    <section id="rental" class="section-rental bg-beige p-t-l p-b-l">
+        <div class="container">
+            <div class="parts">
+                <img id="part0" src="static/blank.png" alt="0">
+                <img id="part1" src="static/part1.png" alt="1">
+                <img id="part2" src="static/part2.png" alt="2">
+                <img id="part3" src="static/part3.png" alt="3">
+                <img id="part4" src="static/part4.png" alt="4">
+                <img id="part5" src="static/part5.png" alt="5">
+                <img id="part6" src="static/part6.png" alt="6">
+                <img id="part7" src="static/part7.png" alt="7">
+                <img id="part8" src="static/part8.png" alt="8">
+                <img id="part9" src="static/part9.png" alt="9">
+                <img id="part10" src="static/part10.png" alt="10">
+                <img id="part11" src="static/part11.png" alt="11">
+                <img id="part12" src="static/part12.png" alt="12">
+                <img id="part13" src="static/part13.png" alt="13">
+                <img id="part14" src="static/part14.png" alt="14">
+                <img id="part15" src="static/part15.png" alt="15">
+                <img id="part16" src="static/part16.png" alt="16">
+                <img id="part17" src="static/part17.png" alt="17">
+                <img id="part18-1" src="static/part18.png" alt="18-1">
+                <img id="part18-2" src="static/part18.png" alt="18-2">
+                <img id="part19-1" src="static/part19.png" alt="19-1">
+                <img id="part19-2" src="static/part19.png" alt="19-2">
+                <img id="part20" src="static/part20.png" alt="20">
+                <img id="part21" src="static/part21.png" alt="21">
+                <img id="part22" src="static/part22.png" alt="22">
+                <img id="part23" src="static/part23.png" alt="23">
+                <img id="part24" src="static/part24.png" alt="24">
+                <img id="part25" src="static/part25.png" alt="25">
+                <img id="part26" src="static/part26.png" alt="26">
+                <img id="part27" src="static/part27.png" alt="27">
+                <img id="part28" src="static/part28.png" alt="28">
+                <img id="part29-1" src="static/part29.png" alt="29-1">
+                <img id="part29-2" src="static/part29.png" alt="29-2">
+                <img id="part30" src="static/part30.png" alt="30">
+                <img id="part31-1" src="static/part31.png" alt="31-1">
+                <img id="part31-2" src="static/part31.png" alt="31-2">
+                <img id="part32-1" src="static/part32.png" alt="32-1">
+                <img id="part32-2" src="static/part32.png" alt="32-1">
+            </div>
+        </div>
+    </section>
+
+    <section style="height: 100vh; display: flex; justify-content: center; align-items: center; font-family: monospace; font-size: 32px; color: white; background-color: black;">Spacer</section>
+
     <script src="https://player.vimeo.com/api/player.js"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.0.4/gsap.min.js"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.7/ScrollMagic.min.js"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.7/plugins/animation.gsap.min.js"></script>
+    <script src="js/parts.js"></script>
 </body>
 </html>