Funktionen

Page für nützliche Funktionen

Container ein-/ausblenden

Container wird anhand eines Select fields in einem Formular ein oder ausgeblendet.

Dazu Container-CSS-ID festlegen, im Javascript die IDs der Liste definieren und im Select field die Auswahlparameter mit den IDs befüllen.

L’Horloger

Ein Uhrmacherzimmer aus vergangenen Tagen.

La Belle Dame

Die Wagenkomposition des kleinen roten CJ Zuges «La Belle Dame» kannst du gelegentlich nicht weit entfernt vorbeifahren sehen.

Fixed Background images

Bilder die ein fixed Attachment haben. Dazu das Bild im Background Overlay positionieren mit Attachment = Fixed.

Danach CSS noch hinzufügen um flickering auf Safari / iOS Geräten zu verhindern.

Stacked Scroll Container

Einzelne Container erstellen, dann jeweils den Z-Index setzen (1. Element soll geringster Z-Index besitzen), anschliessend unter Advanced > Motion Effects > Sticky Top: Stay in column (yes) und falls nötig ein Offset definieren.

1. Container

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. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.

2. Container

3. Container

GSAP Text Reveal

H2 Text hinzufügen (falls nicht H2 muss im GSAP-Quellcode entsprechend angepasst werden).
Überschrift so benennen, wie Text der zu Beginn gezeigt werden soll
CSS-Klasse «text-reveal» definieren (falls anders benannt muss im GSAP Code entsprechend angepasst werden)
Custom CSS bei der Überschrift hinzufügen

				
					selector{
overflow:hidden;
}

GSAP Code unter «Custom Code» hinzufügen. Ausspielen im END of Body und der entsprechenden Seite.

				
					<script>
;(function(){
  let chck_if_gsap_loaded = setInterval(function(){
      if(window.gsap){
          text_reveal();
          clearInterval(chck_if_gsap_loaded);
      }
  }, 500);

function text_reveal(){

	// New text headline

const textWidget = '.text-reveal h2';

const changeText = (newtext) => {
jQuery(textWidget).text(newtext);
};

const tl = gsap.timeline({ repeat: -1 });
tl.call(changeText, ['Sed diam nonumy eirmod tempor invidunt ut labore.']);
tl.fromTo(textWidget, { y: '100%' }, {y: '0%', ease: 'power.out' },'<25%' );
tl.to(textWidget, { y:'-100%', ease: 'power.out'},'+=5');
tl.call(changeText, ['At vero eos et accusam et justo duo dolores et ea rebum.']);
tl.fromTo(textWidget, { y: '100%' }, {y: '0%', ease: 'power.out' },'<25%' );
tl.to(textWidget, { y:'-100%', ease: 'power.out'}, '+=5');



}})();
	</script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.9.0/gsap.min.js"></script>

Sed diam nonumy eirmod tempor invidunt ut labore.

Smooth Infinite Loop Image/Logo Carousel

Slider erstellen mit Settings gemäss unterem Beispiel
Code zum Custom CSS vom Slider hinzufügen

				
					selector .swiper-wrapper{
  -webkit-transition-timing-function: linear !important;
  transition-timing-function: linear !important; 
}

Vertical Stroke Heading

Überschrift erstellen
Design > Text Stroke definieren
Advanced > Motion Effects > Horizontal Scroll definieren

#tempor invidunt ut
labore et dolore

The power
of fantastic
fonts.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.

Button Variants

Button Black (left to right)

				
					.my-btn .elementor-button::before{
    content:'';
    position: absolute;
    background: black; /*<-- Change fill color here*/
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    transform: scaleX(0);
    transform-origin: right; /*<-- Change fill out direction*/
    transition: transform .4s ease; /*<-- Change fill speed */
}

/*Hover class*/
.my-btn .elementor-button:hover::before{
    transform: scaleX(1);
    transform-origin: left; /*<-- Change fill in direction*/

}

/*Button text*/
.my-btn .elementor-button-text{
    z-index: 1;
}

/*Hover Icon*/
.my-btn:hover .elementor-button-icon{
    color: white; /*<-- Change Icon color here*/
    z-index: 1;
    transition: color .5s ease
}

/*Icone size */
.my-btn .elementor-button-icon{
    transform: scale(1.3); /*<-- Change icon size*/
    padding-left: 5px;
}

Button Black (right to left)

				
					.my-btn2 .elementor-button::before{
    content:'';
    position: absolute;
    background: black; /*<-- Change fill color here*/
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    transform: scaleX(0);
    transform-origin: left; /*<-- Change fill out direction*/
    transition: transform .4s ease; /*<-- Change fill speed */
}

/*Hover class*/
.my-btn2 .elementor-button:hover::before{
    transform: scaleX(1);
    transform-origin: right; /*<-- Change fill in direction*/

}

/*Button text*/
.my-btn2 .elementor-button-text{
    z-index: 1;
}

/*Hover Icon*/
.my-btn2:hover .elementor-button-icon{
    color: white; /*<-- Change Icon color here*/
    z-index: 1;
    transition: color .5s ease
}

/*Icone size */
.my-btn2 .elementor-button-icon{
    transform: scale(1.3); /*<-- Change icon size*/
    padding-left: 5px;
}

Button Black (mid to out)

				
					.my-btn3 .elementor-button::before{
    content:'';
    position: absolute;
    background: black; /*<-- Change fill color here*/
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    transform: scaleX(0);
    transform-origin: bottom; /*<-- Change fill out direction*/
    transition: transform .4s ease; /*<-- Change fill speed */
}

/*Hover class*/
.my-btn3 .elementor-button:hover::before{
    transform: scaleX(1);
    transform-origin: bottom; /*<-- Change fill in direction*/

}

/*Button text*/
.my-btn3 .elementor-button-text{
    z-index: 1;
}

/*Hover Icon*/
.my-btn3:hover .elementor-button-icon{
    color: white; /*<-- Change Icon color here*/
    z-index: 1;
    transition: color .5s ease
}

/*Icone size */
.my-btn3 .elementor-button-icon{
    transform: scale(1.3); /*<-- Change icon size*/
    padding-left: 5px;
}

Button Black (gradient background)

				
					.my-button .elementor-button::before{
    content: '';
    position: absolute;
    background: linear-gradient(90deg, rgba(131,58,180,1) 0%, rgba(253,29,29,1) 50%, rgba(252,176,69,1) 100%);;
    width: 100%;
    height: 100%;
    top: 8px;
    left: 8px;
    z-index: -1;
    transition: all 1s;
}

/* Blur gradient on hover */
.my-button:hover .elementor-button::before{
    content: '';
    filter: blur(8px);
 -webkit-filter: blur(8px);
  transition: all 1s;
}

Button Transparent (gradient background)

				
					.my-button-w2 .elementor-button::before{
    content: '';
    position: absolute;
    background: linear-gradient(90deg, rgba(131,58,180,1) 0%, rgba(253,29,29,1) 50%, rgba(252,176,69,1) 100%);;
    width: 100%;
    height: 100%;
    top: 8px;
    left: 8px;
    z-index: -1;
    transition: all 1s;
}

/* Blur gradient on hover */
.my-button-w2:hover .elementor-button::before{
    content: '';
    filter: blur(8px);
 -webkit-filter: blur(8px);
  transition: all 1s;
}

Button White (left to right)

				
					.my-btn-w-1 .elementor-button::before{
    content:'';
    position: absolute;
    background: #f0f0f0; /*<-- Change fill color here*/
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    transform: scaleX(0);
    transform-origin: right; /*<-- Change fill out direction*/
    transition: transform .4s ease; /*<-- Change fill speed */
}

/*Hover class*/
.my-btn-w-1 .elementor-button:hover::before{
    transform: scaleX(1);
    transform-origin: left; /*<-- Change fill in direction*/

}

/*Button text*/
.my-btn-w-1 .elementor-button-text{
    z-index: 1;
}


/*Hover Icon*/
.my-btn-w-1:hover .elementor-button-icon{
    color: black; /*<-- Change Icon color here*/
    z-index: 1;
    transition: color .5s ease
}

/*Icone size */
.my-btn-w-1 .elementor-button-icon{
    transform: scale(1.3); /*<-- Change icon size*/
    padding-left: 5px;
}

Button White (right to left)

				
					.my-btn-w-2 .elementor-button::before{
    content:'';
    position: absolute;
    background: #f0f0f0; /*<-- Change fill color here*/
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    transform: scaleX(0);
    transform-origin: left; /*<-- Change fill out direction*/
    transition: transform .4s ease; /*<-- Change fill speed */
}

/*Hover class*/
.my-btn-w-2 .elementor-button:hover::before{
    transform: scaleX(1);
    transform-origin: right; /*<-- Change fill in direction*/

}

/*Button text*/
.my-btn-w-2 .elementor-button-text{
    z-index: 1;
}


/*Hover Icon*/
.my-btn-w-2:hover .elementor-button-icon{
    color: black; /*<-- Change Icon color here*/
    z-index: 1;
    transition: color .5s ease
}

/*Icone size */
.my-btn-w-1 .elementor-button-icon{
    transform: scale(1.3); /*<-- Change icon size*/
    padding-left: 5px;
}

Button White (mid to out)

				
					.my-btn-w-3 .elementor-button::before{
    content:'';
    position: absolute;
    background: #f0f0f0; /*<-- Change fill color here*/
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    transform: scaleX(0);
    transform-origin: right; /*<-- Change fill out direction*/
    transition: transform .4s ease; /*<-- Change fill speed */
}

/*Hover class*/
.my-btn-w-3 .elementor-button:hover::before{
    transform: scaleX(1);
    transform-origin: left; /*<-- Change fill in direction*/

}

/*Button text*/
.my-btn-w-3 .elementor-button-text{
    z-index: 1;
}


/*Hover Icon*/
.my-btn-w-3:hover .elementor-button-icon{
    color: black; /*<-- Change Icon color here*/
    z-index: 1;
    transition: color .5s ease
}

/*Icone size */
.my-btn-w-3 .elementor-button-icon{
    transform: scale(1.3); /*<-- Change icon size*/
    padding-left: 5px;
}

Button White (gradient background)

				
					.my-button-w1 .elementor-button::before{
    content: '';
    position: absolute;
    background: linear-gradient(90deg, rgba(131,58,180,1) 0%, rgba(253,29,29,1) 50%, rgba(252,176,69,1) 100%);;
    width: 100%;
    height: 100%;
    top: 8px;
    left: 8px;
    z-index: -1;
    transition: all 1s;
}

/* Blur gradient on hover */
.my-button-w1:hover .elementor-button::before{
    content: '';
    filter: blur(8px);
 -webkit-filter: blur(8px);
  transition: all 1s;
}

Button Transparent (gradient background)

				
					.my-button-w2 .elementor-button::before{
    content: '';
    position: absolute;
    background: linear-gradient(90deg, rgba(131,58,180,1) 0%, rgba(253,29,29,1) 50%, rgba(252,176,69,1) 100%);;
    width: 100%;
    height: 100%;
    top: 8px;
    left: 8px;
    z-index: -1;
    transition: all 1s;
}

/* Blur gradient on hover */
.my-button-w2:hover .elementor-button::before{
    content: '';
    filter: blur(8px);
 -webkit-filter: blur(8px);
  transition: all 1s;
}

Vertical Stroke Heading

Die Farbe des Glow-Effekts wird über die Background-Farbe des Blobs gesteuert.

Code

CSS für INNER Section

				
					/* css goes in .card */

selector {
    --blob-size:250px;
}

selector .inner{
    backdrop-filter: blur(80px);
    height: 100%;
}

selector .blob{
    width: var(--blob-size);
    height: 80%;
    left: calc(50% - calc(var(--blob-size)/2));
    filter: blur(40px);
    z-index: -1;
    opacity: 0;    
    transition: opacity 300ms 300ms linear;

}

selector .fakeblob {
  visibility: hidden;
  z-index: -1;
  height: 100%;
}

JavaScript

				
					<script type="text/javascript">
    
      const cards = document.querySelectorAll(".card");


window.addEventListener("mousemove", (ev) => {
  
  cards.forEach((e) => {
    const blob = e.querySelector(".blob");
    const fblob = e.querySelector(".fakeblob");
    const rec = fblob.getBoundingClientRect();

  
    blob.animate(
      [
        {
          transform: `translate(${
            (ev.clientX - rec.left) - (rec.width / 2)
          }px,${(ev.clientY - rec.top) - (rec.height / 2)}px)`
        }
      ],
      {
        duration: 300,
        fill: "forwards"
      }
    );
  
    blob.style.opacity = "1";
      
  });
  
});

    
    
</script>

Video

Add Your Heading Text Here

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.

Add Your Heading Text Here

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.

Stacked Cards Effect

Die einzelnen Karten überlappen sich, können aber im Navigator ein und ausgeblendet werden.

Zur Website

Our Features

Our benefit

promote financial wellbeing.

Our benefit

design perfect solutions.

Our benefit

find great people.

Cookie	Dauer	Beschreibung
cookielawinfo-checkbox-analytics	11 months	This cookie is set by GDPR Cookie Consent plugin. The cookie is used to store the user consent for the cookies in the category "Analytics".
cookielawinfo-checkbox-functional	11 months	The cookie is set by GDPR cookie consent to record the user consent for the cookies in the category "Functional".
cookielawinfo-checkbox-necessary	11 months	This cookie is set by GDPR Cookie Consent plugin. The cookies is used to store the user consent for the cookies in the category "Necessary".
cookielawinfo-checkbox-others	11 months	This cookie is set by GDPR Cookie Consent plugin. The cookie is used to store the user consent for the cookies in the category "Other.
cookielawinfo-checkbox-performance	11 months	This cookie is set by GDPR Cookie Consent plugin. The cookie is used to store the user consent for the cookies in the category "Performance".
viewed_cookie_policy	11 months	The cookie is set by the GDPR Cookie Consent plugin and is used to store whether or not user has consented to the use of cookies. It does not store any personal data.

Funktionen

Table of Contents

Container ein-/ausblenden

Fixed Background images

Stacked Scroll Container

GSAP Text Reveal

Sed diam nonumy eirmod tempor invidunt ut labore.

Smooth Infinite Loop Image/Logo Carousel

Vertical Stroke Heading

Button Variants

Vertical Stroke Heading

CSS für INNER Section

JavaScript

Stacked Cards Effect

Öffnungszeiten