Jump to content
Search Community

Rubenemilio

Members

  • Posts

    2

  • Joined

  • Last visited

Rubenemilio's Achievements

  • First Post Rare
  • Conversation Starter Rare

Recent Badges

0

Reputation

  1. Rubenemilio
    Hi, Rodrygo! The script.js file is the second code i uploaded, it doesn t seem to have the trial version in it, does it?
  2. Rubenemilio started following Oops! Trial version of SplitText deployed || I am not using SplitText
  3. Rubenemilio
    Hi everyone! The error i stated above shows on my website: "Oops! Trial version of SplitText deployed". It's the GSAP redirect, but i am not using SplitText. I am only using Observer. Below is the code: <!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <title>LuksCommerce | Dein kaffee freund</title> <link rel='stylesheet' href='https://cdn.jsdelivr.net/npm/swiper@10/swiper-bundle.min.css'><link rel="stylesheet" href="./style.css"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"> </head> <body> <!-- partial:index.partial.html --> <body> <div class="topnav" id="myTopnav" style="z-index:100000;position: absolute;"> <a href="index.html" class="active">Home</a> <a href="uberuns.html">Über uns</a> <a href="produkte.html"> Produkte</a> <a href="kontakt.html">Kontakt</a> <a href="javascript:void(0);" class="icon" onclick="myFunction()"> <i class="fa fa-bars"></i> </a> </div> <section> <div class="outer"> <div class="inner"> <div class="bg home"> <div class="scroll"> <p>Wir sind LuksCommerce</p> <p>Dein Kaffeefreund</p> </div> <img src="main.png" alt="" /> <div class="home-content"> <h1> Schön, dich kennenzulernen! </h1> <p> Wir sind LuksCommerce, der Kumpel, den jede Tasse Kaffee braucht!</br></br> Wir sind seit 2023 auf die Bereitstellung der besten Lösungen für Kaffee- und Heißgetränkezusätze spezialisiert und streben danach, jeden Tag besser zu werden! </br> </br> Unsere Mission ist es, Ihre tägliche Tasse Kaffee und Tee zu einem unvergesslichen Moment zu machen! </p> <ul class="links"> <li> <a href="#" ><ion-icon class="icon" name="logo-apple"></ion-icon ></a> </li> <li> <a href="#" ><ion-icon class="icon" name="logo-google"></ion-icon ></a> </li> <li> <a href="#" ><ion-icon class="icon" name="logo-youtube"></ion-icon ></a> </li> <li> <a href="#" ><ion-icon class="icon" name="logo-instagram"></ion-icon ></a> </li> </ul> </div> </div> </div> </div> <img class="mouse-move" src="https://github.com/ecemgo/mini-samples-great-tricks/assets/13468728/28313e5d-95f1-4e38-ac49-16b4cf006014" alt="" /> </section> <section> <div class="outer"> <div class="inner"> <div class="bg content"> <div class="swiper"> <h2 style= "text-align:center;align-items:center;font-size:30px;font-family:sans-serif;font-weight:100;"> Unsere Partner</h2></br> <div class="swiper-wrapper"> <div class="swiper-slide"> <img src="barbera.png" alt="Barbera" /> <div class="title"> <h2>Caffe Barbera</h2> <p>Beste Kaffeebohnen</p> </div> </div> <div class="swiper-slide"> <img src="theus.png" alt="Theus" /> <div class="title"> <h2>Theus</h2> <p>Herzhafter, duftend Tee</p> </div> </div> <div class="swiper-slide"> <img src="dells.jpg" alt="dells" /> <div class="title"> <h2>Dell's Lemonades</h2> <p>geschmackvolle Toppings</p> </div> </div> <div class="swiper-slide"> <img src="flair.png" alt="FLAIR" /> <div class="title"> <h2>FLAIR</h2> <p>Reines Teekonzentrat</p> </div> </div> </div> </div> </div> <div class="swiper-pagination"></div> </div> </div> </div> </div> </section> <section> <div class="outer"> <div class="inner"> <div class="bg info"> <video id="coffeeVideo" autoplay loop muted> <source src="coffee.mp4" type="video/mp4"> Your browser does not support the video tag. </video> <div class="info-content"> <h1 style="color: rgba(187, 168, 76, 0.87);">Warum LuksCommerce?</h1> <p id="typedText"> </p> <!--<div class="tag-container"> <span>Timeless Hits</span> <span>Selected Playlists</span> <span>Remember & Discover</span> <span>Offline Enjoyment</span> <span>Ad-Free Nostalgia</span> </div>--> </div> </div> </div> </div> </section> <section> <div class="outer"> <div class="inner"> <div class="bg content"> <div class="swiper"> <h2 style= "text-align:center;align-items:center;font-size:30px;font-family:Nunito, sans-serif;font-weight:450; display:block; width: 70%; margin-left: 15%;"> Möchten Sie mit uns zusammenarbeiten? <b>Kontaktiere uns jetzt!</b></h2> <h3 style="font-family:nunito, sans serif; font-weight: 800; font-size: 25px; color:#292f36; display:block; width: 68%;margin-left: 16%; align-items: center; text-align: center; margin-top: 30px;"> Email uns an</br> <b style="font-weight: 300;"><a href="#" style="text-decoration:none;color:#292f36;">kontakt@lukscommerce.at</a></b> </h3> </br> <hr style="width:80%;margin-left: 10%;"> <div class="logolinksss" style="display:block; width: 100%; align-items: center; justify-content: center; text-align:center;"> <ul class="f-links" style="justify-content:center;align-items:center;"> <li> <a href="#"style="height: 30px; width: 30px;" ><ion-icon class="icon" name="logo-google"></ion-icon ></a> </li> <li> <a href="#" ><ion-icon class="icon" name="logo-youtube"></ion-icon ></a> </li> <li> <a href="#"style="height: 25px; width: 25px;" ><ion-icon class="icon" name="logo-instagram"></ion-icon ></a> </li> </ul> </div> <div class="swiper-wrapper"> </div> </div> </div> <div class="swiper-pagination"></div> </div> </div> </div> </div> </section> </body> <!-- partial --> <script src='https://cdn.jsdelivr.net/npm/swiper@10/swiper-bundle.min.js'></script> <script src='https://unpkg.com/ionicons@7.1.0/dist/ionicons/ionicons.esm.js'></script> <script src='https://unpkg.com/ionicons@7.1.0/dist/ionicons/ionicons.js'></script> <script src='https://cdnjs.cloudflare.com/ajax/libs/gsap/3.10.4/gsap.min.js'></script> <script src='https://cdnjs.cloudflare.com/ajax/libs/gsap/3.10.4/Observer.min.js'></script> <script src="./script.js"></script> <script> function myFunction() { var x = document.getElementById("myTopnav"); if (x.className === "topnav") { x.className += " responsive"; } else { x.className = "topnav"; } } document.getElementById('coffeeVideo').addEventListener('click', function() { if (this.muted) { this.muted = false; } else { this.muted = true; } }); const text = "Wenn Sie eine gute Tasse belebenden Kaffee lieben oder gerne an einer heißen Tasse Tee nippen, wissen Sie, wie wichtig die kleinen Momente im Leben sind.Deshalb sind wir hier, um diese kleinen Momente unvergesslich zu machen!Mit einer großen Auswahl von über 100 Produkten und einer lebenslangen Zusammenarbeit mit großen Marken in der HoReCa-Branche bieten wir sowohl dem Normalverbraucher als auch den großen Unternehmen eine Lösung! \n\n Trinken Sie so gut Sie können, genießen Sie jeden Schluck!"; const typedTextElement = document.getElementById('typedText'); let index = 0; function type() { typedTextElement.textContent += text[index]; index++; if (index < text.length) { setTimeout(type, 30); // Adjust the delay (in milliseconds) for typing speed } } type(); </script> </body> </html> // GSAP gsap.registerPlugin(Observer); console.clear(); let sections = document.querySelectorAll("section"), background = document.querySelectorAll(".bg"), outerWrappers = gsap.utils.toArray(".outer"), innerWrappers = gsap.utils.toArray(".inner"), currentIndex = -1, wrap = gsap.utils.wrap(0, sections.length - 1), animating; let clamp = gsap.utils.clamp(0, sections.length - 1); gsap.set(outerWrappers, { yPercent: 100 }); gsap.set(innerWrappers, { yPercent: -100 }); function gotoSection(index, direction) { index = clamp(index); // make sure it's valid // If they are the same, it's either the first or last slide if (index === currentIndex) { return; } animating = true; let fromTop = direction === -1, dFactor = fromTop ? -1 : 1, tl = gsap.timeline({ defaults: { duration: 1.25, ease: "power1.inOut" }, onComplete: () => (animating = false), }); if (currentIndex >= 0) { // The first time this function runs, current is -1 gsap.set(sections[currentIndex], { zIndex: 0 }); tl.to(background[currentIndex], { yPercent: -15 * dFactor }).set( sections[currentIndex], { autoAlpha: 0 } ); } gsap.set(sections[index], { autoAlpha: 1, zIndex: 1 }); tl.fromTo( [outerWrappers[index], innerWrappers[index]], { yPercent: (i) => (i ? -100 * dFactor : 100 * dFactor) }, { yPercent: 0 }, 0 ).fromTo(background[index], { yPercent: 15 * dFactor }, { yPercent: 0 }, 0); currentIndex = index; return tl; } Observer.create({ type: "wheel, pointer", wheelSpeed: -1, onDown: () => { !animating && gotoSection(currentIndex - 1, -1); }, onUp: () => { !animating && gotoSection(currentIndex + 1, 1); }, tolerance: 200, allowClicks: true, preventDefault: true, }); gotoSection(0, 1).progress(1); // SWIPER var swiper = new Swiper(".swiper", { effect: "coverflow", grabCursor: true, centeredSlides: true, initialSlide: 1, slidesPerView: "auto", coverflowEffect: { rotate: 50, stretch: 0, depth: 100, modifier: 1, slideShadows: false, }, pagination: { el: ".swiper-pagination", }, });
×
×
  • Create New...