<div id="menuTrigger">
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
</div> 


SieheJS

Siehe CSS

<div id="call">
<a href="tel:">
<i class="ion-android-call"></i>
</a>
</div> 


Siehe CSS


<div id="social">
    <a href="https://www.facebook.com/" target="_blank"><i class="ion-social-facebook"></i></a>
</div>


Siehe CSS

<video playsinline="" muted="" loop="" id="bgvid" src="/uploads/video.mp4">
    <source src="/uploads/video.mp4" type="video/mp4">
</video>


// OPTIONAL MIT START/PAUSE (zB FÜR MOBILE)
<div id="video-controls">
<i class="icon ion-pause" id="pause" style="display: none;"></i>
<i class="icon ion-play" id="play" style="display: block;"></i>
</div>


SieheJS

Siehe CSS

.flex-image-trigger {
   > section {
      display: flex !important;
      flex-wrap: wrap;
      justify-content: space-between;
}

.ed-image {
      flex: 1 0 auto;
      margin-right: 20px;
      margin-bottom: 20px;

      &:nth-child(3n) { margin-right: 0; }
      &:last-child { margin-right: 0; }
      &:nth-last-child(-n+3) { margin-bottom: 0; }

  a {
      position: relative;
      display: block;
      background: #000;
      overflow: hidden;

  img {
      opacity: .5;
      @include vp(transition, all 1s ease);
  }

  span {
      position: absolute;
      display: flex !important;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      display: flex;
      justify-content: center;
      align-items: center;
      flex-direction: column;


    p {
      color: #fff;
      font-weight: bold;
      text-transform: uppercase;
      text-align: center;
      max-width: 80%;
      @include vp(transition, all 1s ease);
      }
   }

    &:hover, &.active {
      img { opacity: 1; }

      span p {
          @include vp(transform, scale(5));
          opacity: .0;
          }
       }
   }
}

@media screen and (max-width: 1023px) {
    .ed-image {
         margin-right: 20px !important;
         margin-bottom: 20px !important;

         &:nth-child(even) { margin-right: 0 !important; }
         &:nth-last-child(-n+2) { margin-bottom: 0 !important; }
         &:nth-last-child(-n+1) { margin-right: 0 !important; }
        }
     }
@media screen and (max-width: 767px) {
    .ed-image {
         width: 100%;

         &:nth-child(n) { margin-right: 0 !important; }
         &:nth-last-child(-n+2) { margin-bottom: 20px !important; }
         &:last-child { margin-bottom: 0 !important; }

            }
       }
}
.vSpacer_end [class*="span"]:not(:last-child) { margin-bottom: 20px; }
.vSpacer [class*="span"] { margin-bottom: 20px; }

.spalten {

    display: block;

    width: 100%;

    @include vp(column-count, 2);

    @include vp(column-gap, 20px);

}

.img_logos .ed-image {
    background: #fff;
    height: 100px;
    line-height: 100px;
    text-align: center;     

    img {
        max-height: 70%;
        max-width: 80%;
        width: auto !important;
        display: inline-block;
        vertical-align: middle;
    }

}
.leistungs-tabelle {
    -webkit-overflow-scrolling: touch;
    overflow-x: scroll;
    max-width: 100%;
}
@keyframes zoominout {
0% {
@include vp(transform, scale(1.0, 1.0);
}
50% {
@include vp(transform, scale(1.3, 1.3));
}
100% {
@include vp(transform, scale(1, 1));
}
}

div#c-1 .banner {
> section { overflow: hidden; }

.background-image-holder, .ed-slider-item {
-webkit-animation: 30s linear 1s normal none infinite zoominout;
animation: 30s linear 1s normal none infinite zoominout;
}
}
#call {
@media screen and (max-width: 960px) {
display: block;
position: fixed;
top: 15px;
left: 15px;
z-index: 101;

a {
display: inline-block;

i {
font-size: 42px;
color: $colorCorporate;
display: block;
width: 60px;
height: 60px;
line-height: 60px;
text-align: center;
}}
&.open {
a i { color: #fff !important; }
}}}


Siehe HTML

#social {
   position: fixed;
   z-index: 100;
   left: 0;
   top: 50%;
   @include vp(transform, translateY(-50%));

   a { text-decoration: none; }

   i {
   background: $colorSpecial;
   color: #fff;
   display: block;
   line-height: 32px;
   text-align: right;
   padding: 8px 16px 8px 0;
   margin: 4px 0;
   width: 30px;
   font-size: 30px;
   border: none;
   @include vp(transition, all 0.4s ease);
   border-top-right-radius: 10px;
   border-bottom-right-radius: 10px;

   &:hover {
      background: #3b5998;
      color: #fff;
      width: 55px;
      padding: 8px 8px 8px 0;
      text-align: right;
     }
}

&.open {
   a i { display: none !important; }
}

  @media screen and (max-width:960px) {
     @include vp(transform, translateY(0) !important);
     top: 10px !important;
     left: 70px;

a {
i {
     background: none !important;
     border-radius: 0 !important;
     font-size: 30px !important;
     color: $colorCorporate;
     width: 40px;
     text-align: center;
     height: 40px !important;
     line-height: 40px !important;
     padding: 0 !important;
     margin: 0 !important;
     border: 1px solid $colorCorporate;
    }
   }
  }
}

Siehe HTML

#social {
  position: fixed;
  z-index: 100;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
 
    a { text-decoration: none; }

    i {
       background: $colorCorporate;
       color: #fff;
       display: block;
       line-height: 2rem;
       text-align: center;
       padding: .5rem .5rem .5rem 0;
       margin: 4px 0;
       width: 3rem;
       font-size: 1.8rem;
       border: none;
       transition: $transition-base;
       border-top-right-radius: 10px;
       border-bottom-right-radius: 10px;
       font-family: fontAwesome;

       &:hover {
         background: #3b5998;
         color: #fff;
         width: 55px;
         padding: 8px 8px 8px 0;
       }

    &.ion-social-googleplus {
    &:hover { background: #dd4b39; }
    }
  }

  @media screen and (max-width: $breakpoint-md-max) {
    display: none;
  }
}
#menuTrigger {
    display: none;

    @media screen and (max-width: 960px) {
      display: block;
    }

    @include vp(transform, rotate(0deg);
    @include vp(transition, .25s ease);
    opacity: 1;
    margin: 0;
    padding: 0;
    width: 60px;
    height: 45px;
    padding: 0;
    position: fixed;
    top: 5px;
    right: 10px;
    margin: 20px auto;
    z-index: 101;
    display: none;
    cursor: pointer;

    &:before {
        @include vp(transition, .25s ease);
        content: '';
       font-family: $fontDefault;
       font-size: 16px;
       line-height: 41px;
       position: relative;
       left: -60px;
       text-transform: uppercase;
       color: $colorCorporate;
       opacity: 1;
       }

       &.hide-title {
       &:before { opacity: 0; }
       }

       span {
              @include vp(transform, rotate(0deg));
              @include vp(transition, .25s ease);
              display: block;
              position: absolute;
              height: 4px;
              width: 50%;
              background: $colorCorporate;
              opacity: 1;

       &:nth-child(even) {
              left: 50%;
              border-radius: 0 9px 9px 0;
       }

       &:nth-child(odd) {
              left: 0px;
              border-radius: 9px 0 0 9px;
       }

       &:nth-child(1),
       &:nth-child(2) { top: 0px; }

       &:nth-child(3),
       &:nth-child(4) { top: 18px; }

       &:nth-child(5),
       &:nth-child(6) { top: 36px; }

       &:nth-child(5),
       &:nth-child(6) { top: 36px; }

       &:nth-child(5),
       &:nth-child(6) { top: 36px; }
       }

       &.open {
              opacity: 1;
         &:before {
              opacity: 0;
              visibility: hidden;
       }

       span {
              background-color: $colorCorporate;
              &:nth-child(1),
              &:nth-child(6) {
                     @include vp(transform, rotate(45deg));
              }

              &:nth-child(2),
              &:nth-child(5) {
                     @include vp(transform, rotate(-45deg));
              }

              &:nth-child(1) {
                     left: 5px;
                     top: 7px;
              }

              &:nth-child(2) {
                     left: calc(50% - 5px);
                     top: 7px;
              }

              &:nth-child(3) {
                     left: -50%;
                     opacity: 0;
              }

              &:nth-child(4) {
                     left: 100%;
                     opacity: 0;
              }

              &:nth-child(5) {
                     left: 5px;
                     top: 29px;
              }

              &:nth-child(6) {
                     left: calc(50% - 5px);
                     top: 29px;
                     }
              }
       }
}

Siehe HTML

Siehe JS

// FULLSCREEN VIDEO
#video-container {
     position: relative;
     bottom: 0;
     left: 0;
     right: 0;
     z-index: 2;
     overflow: hidden;
     width: 100%;
   height: 100%;

video {
    margin: 0 !important;
   }
}


#video-controls {
    position: absolute;
    top: 10px;
    right: 10px;
    height: 50px;
    width: 50px;
    z-index: 9;
    background: $colorSpecial;
    border-radius: 100%;
    text-align: center;

   i {
   color:$colorCorporate;
   font-size:30px;
   cursor:pointer;
   transition:all .5s ease;
   -webkit-transition:all .5s ease;
   -moz-transition:all .5s ease;
   line-height: 50px;

   &:hover {
      color:rgba(#000,.5);
   }
}

   #play {display:none;}
}


Siehe HTML

Siehe JS

//menu trigger
$('#menuTrigger').click(function() {
$(this).toggleClass('open');
$('#call').toggleClass('open');
$('.menuWrapper, body').toggleClass('open');
});

//Responsive Menu close
$('.ed-menu ul li a').click(function() {
$('.menuWrapper').removeClass('open');
$('#menuTrigger, #call').removeClass('open');
});


Siehe HTML

Siehe CSS


viewport.scrollTo($(this.hash), 'top', 500);
(function() {
        var str = location.hash;
var res = str.split("#");
for (x = 0; x < res.length; x++) {
    var $elm = $('#' + res[x]);
    if ($elm.length) {
        $('#' + res[x])[0].element.animate();
    }
}
    })();
$('a[href^="' + document.location.pathname + '#"]').each(function() {
$(this).attr('href', this.hash).addClass('wv-link-elm');
});
var elmVideo = document.getElementById('bgvid'),
        $butPlay = $('#play'),
        $butPause = $('#pause');

    elmVideo.onplay = function() {
        $butPlay.hide();
        $butPause.show();
    };
    elmVideo.onpause = function() {
        $butPlay.show();
        $butPause.hide();
    };
    $butPlay.on('click', function(e) { e.preventDefault(); elmVideo.play(); });
    $butPause.on('click', function(e) { e.preventDefault(); elmVideo.pause(); });

------------------------
EXTRA: RANDOMIZED VIDEO!
------------------------
var urls = [
        '/images/0/1586702/JASMIN_FINAL.m4v',
        '/images/0/1586701/DIOR_FINAL.m4v',
        '/images/0/1586703/LY_FINAL.m4v',
        '/images/0/1586704/SEBASTIAN_FINAL.m4v'
    ];

    var $iframe = $('#bgvid');
    $iframe.attr('src', urls[Math.floor(Math.random() * urls.length)]);


Siehe HTML

Siehe CSS

if (document.location.hash) {
        var $target = $(document.location.hash);
        if($target.length) {
            console.log("Target found", $target);
            viewport.scrollTo($target, 'top', 500, -100);
        }
    }
if (!$('body').hasClass('index')) {
$(document).ready(function() {
$('html,body').delay(1000).animate({
scrollTop: $('#impressum').offset().top - 140
});
}); Siehe HTML

Siehe CSS


console.log($(".table tr td").siblings().hide());
console.log($(".table tr td:contains('Online-Stellung')").siblings().show());

<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no" />

<meta name="format-detection" content="telephone=no">

//menu trigger $('#menuTrigger').click(function() {     $(this).toggleClass('open');     $('#call').toggleClass('open');     $('.menuWrapper, body').toggleClass('open'); }); //Responsive Menu close $('.ed-menu ul li a').click(function() {     $('.menuWrapper').removeClass('open');     $('#menuTrigger, #call').removeClass('open'); });

Siehe HTML