Contact us

More related articles

Discover how smart driver technology generates more sustainable operation

What defines a high quality UV Lamp Driver?

var fixed = document.getElementById('hamburger'); fixed.addEventListener('touchmove', function(e) { e.preventDefault(); }, false); jQuery( document ).ready(function() { var url = jQuery('.iframe-link').text(); console.log(url); console.log('test'); jQuery('#iframe').attr('src', url); }); /* Slick documentation: https://kenwheeler.github.io/slick/ */ $('[r-slider]').on('beforeChange', function () { $('.c-move-to-bottom').removeClass('c-move-to-bottom'); }); $('[r-slider]').on('afterChange', function () { addClass(); }); function addClass() { $('.slick-active .c-slide_image').each(function (i, e) { if (i % 2 !== 0) return; $(e).addClass('c-move-to-bottom'); }); } $('[scroll=enable]').click(function() { unLockScroll(); }); $('[scroll=disable]').click(function() { lockScroll(); }); let scrollPosition = []; let marginB; let marginR; const $html = $('html'); const $body = $('body'); function lockScroll(){ setTimeout(function () { let initWidth = $body.outerWidth(); let initHeight = $body.outerHeight(); scrollPosition = [ self.pageXOffset || document.documentElement.scrollLeft || document.body.scrollLeft, self.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop ]; $html.css('overflow', 'hidden'); window.scrollTo(scrollPosition[0], scrollPosition[1]); }, 10); } function unLockScroll(){ setTimeout(function () { $html.css('overflow', 'initial'); window.scrollTo(scrollPosition[0], scrollPosition[1]); $body.css({'margin-right': 0, 'margin-bottom': 0}); }, 10); } .letter {display: inline-block;} .tricksword {white-space: nowrap;} // Copyright start // © Code by T.RICKS, https://www.tricksdesign.com/ // You have the license to use this code in your projects but not redistribute it to others // Find all text with .tricks class and break each letter into a span var tricksWord = document.getElementsByClassName("tricks"); for (var i = 0; i < tricksWord.length; i++) { var wordWrap = tricksWord.item(i); wordWrap.innerHTML = wordWrap.innerHTML.replace(/(^|<\/?[^>]+>|\s+)([^\s<]+)/g, '$1<span class="tricksword">$2</span>'); } var tricksLetter = document.getElementsByClassName("tricksword"); for (var i = 0; i < tricksLetter.length; i++) { var letterWrap = tricksLetter.item(i); letterWrap.innerHTML = letterWrap.textContent.replace(/\S/g, "<span class='letter'>$&</span>"); } // Copyright end // Slide In Animation var slideIn = anime.timeline({ loop: false, autoplay: false, }); slideIn .add({ targets: '.slide-in .letter', opacity: [0,1], easing: "easeInOutQuad", duration: 2250, delay: (el, i) => 150 * (i+1) }).add({ targets: '.slide-in', opacity: 0, duration: 1000, easing: "easeOutExpo", delay: 1000 }); // Slide Up Animation var slideUp = anime.timeline({ loop: false, autoplay: false, }); slideUp .add({ targets: '.slide-up .letter', translateY: ["1.1em", 0], opacity: [0,1], translateZ: 0, duration: 750, delay: (el, i) => 50 * i }).add({ targets: '.slide-up', opacity: 0, duration: 1000, easing: "easeOutExpo", delay: 1000 }); // Fade Up Animation var fadeUp = anime.timeline({ loop: false, autoplay: false, }); fadeUp .add({ targets: '.fade-up .letter', translateY: [100,0], translateZ: 0, opacity: [0,1], easing: "easeOutExpo", duration: 1400, delay: (el, i) => 300 + 30 * i // }).add({ // targets: '.fade-up .letter', // translateY: [0,-100], // opacity: [1,0], // easing: "easeInExpo", // duration: 1200, // delay: (el, i) => 100 + 30 * i }); // Rotate In Animation var rotateIn = anime.timeline({ loop: false, autoplay: false, }); rotateIn .add({ targets: '.rotate-in .letter', translateY: ["1.1em", 0], translateX: ["0.55em", 0], translateZ: 0, rotateZ: [180, 0], duration: 750, easing: "easeOutExpo", delay: (el, i) => 50 * i }).add({ targets: '.rotate-in', opacity: 0, duration: 1000, easing: "easeOutExpo", delay: 1000 }); // Pop In Animation var popIn = anime.timeline({ loop: false, autoplay: false, }); popIn .add({ targets: '.pop-in .letter', scale: [0, 1], duration: 1500, elasticity: 600, delay: (el, i) => 45 * (i+1) }).add({ targets: '.pop-in', opacity: 0, duration: 1000, easing: "easeOutExpo", delay: 1000 }); // Play your animation with these fadeUp.play(); slideUp.play(); slideIn.play(); rotateIn.play(); popIn.play(); // Wait before playing animation setTimeout(() => { // Put the play below this line }, 800); // Play animaton when something is clicked $( ".your-button-class" ).click(function() { // Put the play below this line }); // Play animaton when hovered in $( ".your-button-class" ).mouseenter(function() { // Put the play below this line }); // Play animation when scrolled into view $('#heading-container').on('inview', function(event, isInView) { if (isInView) { // Put the play below this line } else { } });