<div id="menuTrigger"> <span></span> <span></span> <span></span> <span></span> <span></span> <span></span> </div>
<div id="social"> <a href="https://www.facebook.com/" target="_blank"><i class="ion-social-facebook"></i></a> </div>
<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>
.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; } }}}
#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; } } } }
#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 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 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'); });
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)]);
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
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'); });