marvin/schnittfest
1
0
Fork 0
mirror of https://github.com/Kugelschieber/schnittfest.git synced 2026-01-18 10:20:27 +00:00
Code Issues Packages Projects Releases Wiki Activity

More work.

Browse Source
This commit is contained in:
Daniel Schramm
2020-01-20 23:31:42 +01:00
parent 8a09e4832b
commit 5938662704
9 changed files with 166 additions and 118 deletions
Download Patch File Download Diff File Expand all files Collapse all files

21
LICENSE
View File

@@ -1,21 +0,0 @@
MIT License
Copyright (c) 2019 Marvin Blum
Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:
The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
SOFTWARE.

2
js/hero.js
View File

@@ -2,7 +2,7 @@ var x = window.screen.width > 512 ? 160 : 80;
var controller = new ScrollMagic.Controller();
var hero = new TweenMax.from("#hero", 1, {
var hero = new TweenMax.to("#hero", 1, {
x: this.x,
ease: Power1.easeOut
});

72
js/parts.js
View File

@@ -8,7 +8,7 @@ var part2 = new TweenMax.from("#part2", 1, {
});
var part2Scene = new ScrollMagic.Scene({
triggerElement: "#rental",
triggerElement: "#parts",
duration: 250,
})
.setTween(part2)
@@ -20,7 +20,7 @@ var part3 = new TweenMax.from("#part3", 1, {
});
var part3Scene = new ScrollMagic.Scene({
triggerElement: "#rental",
triggerElement: "#parts",
duration: 250,
offset: this.offset
})
@@ -35,7 +35,7 @@ var part4 = new TweenMax.from("#part4", 1, {
});
var part4Scene = new ScrollMagic.Scene({
triggerElement: "#rental",
triggerElement: "#parts",
duration: 250,
offset: 2*this.offset
})
@@ -48,7 +48,7 @@ var part5 = new TweenMax.from("#part5", 1, {
});
var part5Scene = new ScrollMagic.Scene({
triggerElement: "#rental",
triggerElement: "#parts",
duration: 250
})
.setTween(part5)
@@ -60,7 +60,7 @@ var part6 = new TweenMax.from("#part6", 1, {
});
var part6Scene = new ScrollMagic.Scene({
triggerElement: "#rental",
triggerElement: "#parts",
duration: 250,
offset: 3*this.offset
})
@@ -73,7 +73,7 @@ var part7 = new TweenMax.from("#part7", 1, {
});
var part7Scene = new ScrollMagic.Scene({
triggerElement: "#rental",
triggerElement: "#parts",
duration: 250,
offset: 4*this.offset
})
@@ -88,7 +88,7 @@ var part8 = new TweenMax.from("#part8", 1, {
});
var part8Scene = new ScrollMagic.Scene({
triggerElement: "#rental",
triggerElement: "#parts",
duration: 250,
offset: 5*this.offset
})
@@ -103,7 +103,7 @@ var part9 = new TweenMax.from("#part9", 1, {
});
var part9Scene = new ScrollMagic.Scene({
triggerElement: "#rental",
triggerElement: "#parts",
duration: 250,
offset: 5*this.offset
})
@@ -118,7 +118,7 @@ var part10 = new TweenMax.from("#part10", 1, {
});
var part10Scene = new ScrollMagic.Scene({
triggerElement: "#rental",
triggerElement: "#parts",
duration: 250,
offset: 6*this.offset
})
@@ -133,7 +133,7 @@ var part11 = new TweenMax.from("#part11", 1, {
});
var part11Scene = new ScrollMagic.Scene({
triggerElement: "#rental",
triggerElement: "#parts",
duration: 250,
offset: 7*this.offset
})
@@ -148,7 +148,7 @@ var part12 = new TweenMax.from("#part12", 1, {
});
var part12Scene = new ScrollMagic.Scene({
triggerElement: "#rental",
triggerElement: "#parts",
duration: 250,
offset: 8*this.offset
})
@@ -163,7 +163,7 @@ var part13 = new TweenMax.from("#part13", 1, {
});
var part13Scene = new ScrollMagic.Scene({
triggerElement: "#rental",
triggerElement: "#parts",
duration: 250,
offset: 9*this.offset
})
@@ -178,7 +178,7 @@ var part14 = new TweenMax.from("#part14", 1, {
});
var part14Scene = new ScrollMagic.Scene({
triggerElement: "#rental",
triggerElement: "#parts",
duration: 250,
offset: 10*this.offset
})
@@ -193,7 +193,7 @@ var part15 = new TweenMax.from("#part15", 1, {
});
var part15Scene = new ScrollMagic.Scene({
triggerElement: "#rental",
triggerElement: "#parts",
duration: 250,
offset: 11*this.offset
})
@@ -208,7 +208,7 @@ var part16 = new TweenMax.from("#part16", 1, {
});
var part16Scene = new ScrollMagic.Scene({
triggerElement: "#rental",
triggerElement: "#parts",
duration: 250,
offset: 12*this.offset
})
@@ -223,7 +223,7 @@ var part17 = new TweenMax.from("#part17", 1, {
});
var part17Scene = new ScrollMagic.Scene({
triggerElement: "#rental",
triggerElement: "#parts",
duration: 250,
offset: 13*this.offset
})
@@ -238,7 +238,7 @@ var part181 = new TweenMax.from("#part18-1", 1, {
});
var part181Scene = new ScrollMagic.Scene({
triggerElement: "#rental",
triggerElement: "#parts",
duration: 250,
offset: 14*this.offset
})
@@ -253,7 +253,7 @@ var part182 = new TweenMax.from("#part18-2", 1, {
});
var part182Scene = new ScrollMagic.Scene({
triggerElement: "#rental",
triggerElement: "#parts",
duration: 250,
offset: 15*this.offset
})
@@ -268,7 +268,7 @@ var part191 = new TweenMax.from("#part19-1", 1, {
});
var part191Scene = new ScrollMagic.Scene({
triggerElement: "#rental",
triggerElement: "#parts",
duration: 250,
offset: 16*this.offset
})
@@ -283,7 +283,7 @@ var part192 = new TweenMax.from("#part19-2", 1, {
});
var part192Scene = new ScrollMagic.Scene({
triggerElement: "#rental",
triggerElement: "#parts",
duration: 250,
offset: 18*this.offset
})
@@ -298,7 +298,7 @@ var part20 = new TweenMax.from("#part20", 1, {
});
var part20Scene = new ScrollMagic.Scene({
triggerElement: "#rental",
triggerElement: "#parts",
duration: 250,
offset: 19*this.offset
})
@@ -313,7 +313,7 @@ var part21 = new TweenMax.from("#part21", 1, {
});
var part21Scene = new ScrollMagic.Scene({
triggerElement: "#rental",
triggerElement: "#parts",
duration: 250,
offset: 20*this.offset
})
@@ -328,7 +328,7 @@ var part22 = new TweenMax.from("#part22", 1, {
});
var part22Scene = new ScrollMagic.Scene({
triggerElement: "#rental",
triggerElement: "#parts",
duration: 250,
offset: 21*this.offset
})
@@ -343,7 +343,7 @@ var part23 = new TweenMax.from("#part23", 1, {
});
var part23Scene = new ScrollMagic.Scene({
triggerElement: "#rental",
triggerElement: "#parts",
duration: 250,
offset: 22*this.offset
})
@@ -358,7 +358,7 @@ var part24 = new TweenMax.from("#part24", 1, {
});
var part24Scene = new ScrollMagic.Scene({
triggerElement: "#rental",
triggerElement: "#parts",
duration: 250,
offset: 23*this.offset
})
@@ -373,7 +373,7 @@ var part25 = new TweenMax.from("#part25", 1, {
});
var part25Scene = new ScrollMagic.Scene({
triggerElement: "#rental",
triggerElement: "#parts",
duration: 250,
offset: 24*this.offset
})
@@ -388,7 +388,7 @@ var part26 = new TweenMax.from("#part26", 1, {
});
var part26Scene = new ScrollMagic.Scene({
triggerElement: "#rental",
triggerElement: "#parts",
duration: 250,
offset: 25*this.offset
})
@@ -403,7 +403,7 @@ var part27 = new TweenMax.from("#part27", 1, {
});
var part27Scene = new ScrollMagic.Scene({
triggerElement: "#rental",
triggerElement: "#parts",
duration: 250,
offset: 26*this.offset
})
@@ -418,7 +418,7 @@ var part28 = new TweenMax.from("#part28", 1, {
});
var part28Scene = new ScrollMagic.Scene({
triggerElement: "#rental",
triggerElement: "#parts",
duration: 250,
offset: 33*this.offset
})
@@ -433,7 +433,7 @@ var part291 = new TweenMax.from("#part29-1", 1, {
});
var part291Scene = new ScrollMagic.Scene({
triggerElement: "#rental",
triggerElement: "#parts",
duration: 250,
offset: 32*this.offset
})
@@ -448,7 +448,7 @@ var part292 = new TweenMax.from("#part29-2", 1, {
});
var part292Scene = new ScrollMagic.Scene({
triggerElement: "#rental",
triggerElement: "#parts",
duration: 250,
offset: 31*this.offset
})
@@ -463,7 +463,7 @@ var part30 = new TweenMax.from("#part30", 1, {
});
var part30Scene = new ScrollMagic.Scene({
triggerElement: "#rental",
triggerElement: "#parts",
duration: 250,
offset: 34*this.offset
})
@@ -478,7 +478,7 @@ var part311 = new TweenMax.from("#part31-1", 1, {
});
var part311Scene = new ScrollMagic.Scene({
triggerElement: "#rental",
triggerElement: "#parts",
duration: 250,
offset: 30*this.offset
})
@@ -493,7 +493,7 @@ var part312 = new TweenMax.from("#part31-2", 1, {
});
var part312Scene = new ScrollMagic.Scene({
triggerElement: "#rental",
triggerElement: "#parts",
duration: 250,
offset: 29*this.offset
})
@@ -508,7 +508,7 @@ var part321 = new TweenMax.from("#part32-1", 1, {
});
var part321Scene = new ScrollMagic.Scene({
triggerElement: "#rental",
triggerElement: "#parts",
duration: 250,
offset: 28*this.offset
})
@@ -523,7 +523,7 @@ var part322 = new TweenMax.from("#part32-2", 1, {
});
var part322Scene = new ScrollMagic.Scene({
triggerElement: "#rental",
triggerElement: "#parts",
duration: 250,
offset: 27*this.offset
})

BIN
static/1.jpeg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 290 KiB

BIN
static/hero.mp4
View File

Binary file not shown.

2
static/main.css
View File

File diff suppressed because one or more lines are too long

4
style/sass/_grid.scss
View File

@@ -496,13 +496,13 @@
}
}
@media only screen and (max-width: 785px) {
@media only screen and (max-width: 767px) {
.hide-sm {
display: none !important;
}
}
@media only screen and (min-width: 786px) {
@media only screen and (min-width: 768px) {
.col-md,
.col-md-1,
.col-md-2,

137
style/sass/main.scss
View File

@@ -18,6 +18,10 @@ body {
overflow-x: hidden;
}
section {
width: 100vw;
}
h1, h2, h3, p {
margin-block-start: 0;
margin-block-end: 0;
@@ -102,20 +106,6 @@ button {
}
}
.p { // padding
&-t { // top
&-l { // large
padding-top: 192px;
}
}
&-b { // bottom
&-l { // large
padding-bottom: 192px;
}
}
}
.header {
position: sticky;
top: 0;
@@ -186,6 +176,7 @@ button {
video {
width: 100%;
max-width: 100%;
transform: scale(1.004);
}
}
@@ -205,6 +196,8 @@ button {
}
.section-service {
padding: 96px 0 128px;
.container {
padding: 0;
}
@@ -236,10 +229,26 @@ button {
}
}
.section-image {
width: 100vw;
max-height: 80vh;
display: flex;
justify-content: center;
align-items: center;
overflow: hidden;
img {
width: 100%;
display: block;
}
}
.section-work {
padding: 128px 0;
h1 {
position: sticky;
top: 256px;
top: 128px;
margin-left: 64px;
color: black;
writing-mode: vertical-lr;
@@ -256,10 +265,16 @@ button {
}
}
.section-instagram {
padding: 64px 0;
}
.section-rental {
.text {
padding: 128px 0;
.square {
position: sticky;
top: 256px;
top: 128px;
padding: 32px;
h2 {
@@ -270,6 +285,17 @@ button {
p {
color: black;
}
button {
display: inline-flex;
color: black;
background-color: var(--yellow);
margin-top: 48px;
&:hover {
background-color: var(--beige);
}
}
}
.parts {
@@ -516,20 +542,32 @@ button {
}
h2 {
font-size: 32px;
font-size: 36px;
}
.p { // padding
&-t { // top
&-l { // large
padding-top: 128px;
.section-work {
h1 {
writing-mode: initial;
margin-left: 0;
margin-bottom: 32px;
}
.videos > div {
margin-bottom: 16px;
}
}
&-b { // bottom
&-l { // large
padding-bottom: 128px;
.section-rental {
.container {
padding: 0;
}
.square {
position: static;
}
.parts {
overflow: hidden;
}
}
}
@@ -546,21 +584,15 @@ button {
}
h2 {
font-size: 28px;
font-size: 32px;
}
.p { // padding
&-t { // top
&-l { // large
padding-top: 64px;
}
.container {
padding: 0 16px;
}
&-b { // bottom
&-l { // large
padding-bottom: 64px;
}
}
.header {
height: 64px;
}
.section-start {
@@ -570,6 +602,37 @@ button {
}
.section-service {
padding-bottom: 0;
padding-top: 32px;
h1 {
margin-left: 16px;
margin-bottom: 64px;
}
h2 {
margin-bottom: 16px;
}
button {
margin-top: 32px;
}
.square {
padding: 32px 16px;
}
}
.section-rental {
.square {
padding: 32px 16px;
h2 {
margin-bottom: 16px;
}
button {
margin-top: 32px;
}
}
}
}

36
template/landing_page.html
View File

@@ -58,7 +58,7 @@
</div>
</nav>
<section id="service" class="section-service bg-black p-t-l p-b-l">
<section id="service" class="section-service bg-black">
<div class="container">
<h1 data-aos="fade-in">Film, auf den Frame genau.</h1>
<div class="squares">
@@ -81,12 +81,16 @@
</div>
</section>
<section id="work" class="section-work bg-beige p-t-l p-b-l">
<div class="container row reverse">
<div class="headline col-lg-1">
<section id="image-1" class="section-image">
<img src="/static/1.jpeg" alt="Schnittfest" data-aos="fade-in" />
</section>
<section id="work" class="section-work bg-beige">
<div class="container row reverse start-lg start-md start-sm start-xs">
<div class="headline col-lg-1 col-md-12 col-sm-12 col-xs-12">
<h1 data-aos="fade-in">Referenzen</h1>
</div>
<div class="videos col-lg-10">
<div class="videos col-lg-10 col-md-12 col-sm-12 col-xs-12">
<div style="padding:41.77% 0 0 0;position:relative;" data-aos="fade-in">
<iframe src="https://player.vimeo.com/video/267008499?color=fff&title=0&byline=0&portrait=0" style="position:absolute;top:0;left:0;width:100%;height:100%;" frameborder="0" allow="autoplay; fullscreen" allowfullscreen></iframe>
</div>
@@ -107,20 +111,21 @@
</section>
<section id="instagram" class="section-instagram bg-black">
</section>
<section id="rental" class="section-rental bg-beige p-t-l p-b-l">
<div class="container">
<iframe src="//lightwidget.com/widgets/120f6220e1895e639660c488bda317d2.html" scrolling="no" allowtransparency="true" class="lightwidget-widget" style="width:100%;border:0;overflow:hidden;"></iframe> </section>
</div>
<section id="rental" class="section-rental bg-beige">
<div class="container">
<div class="row">
<div class="col-lg-4" style="z-index: 1;">
<div class="text bg-red" data-aos="fade-in">
<div class="col-lg-4 col-md-12 col-sm-12 col-xs-12" style="z-index: 1;">
<div class="square bg-red" data-aos="fade-in">
<h2>Rental</h3>
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.</p>
<button class="primary">Jetzt buchen</button>
</div>
</div>
<div class="col-lg-8">
<div class="parts" data-aos="fade-in" data-aos-delay="100">
<div class="col-lg-8 col-md-12 col-sm-12 col-xs-12">
<div id="parts" class="parts" data-aos="fade-in" data-aos-delay="100">
<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">
@@ -163,7 +168,7 @@
</div>
</div>
</div>
</section>-->
</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>
@@ -172,9 +177,10 @@
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.7/ScrollMagic.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.7/plugins/animation.gsap.min.js"></script>
<script type="text/javascript" src="https://unpkg.com/aos@2.3.1/dist/aos.js"></script>
<script type="text/javascript" src="https://cdn.lightwidget.com/widgets/lightwidget.js"></script>
<script type="text/javascript" src="js/hero.js"></script>
<script type="text/javascript" src="js/parts.js"></script>
<script type="text/javascript" src="instafeed.min.js"></script>
<script type="text/javascript" src="js/instafeed.min.js"></script>
<script>
AOS.init({