<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 HTMLconsole.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'); });