Jump to content
Search Community

dieKachba

Members

  • Posts

    2

  • Joined

  • Last visited

dieKachba's Achievements

  • Week One Done
  • First Post Rare
  • Conversation Starter Rare

Recent Badges

1

Reputation

  1. dieKachba
    Sorry I don't know how to put the Codepen inside the textbox. I hope the direct link to the Pens that i did on my account still help out, to figure out where the problem is. If I put the excact same code in Visual Studio Code my hompage remains black. https://codepen.io/david-buble/pen/wvjgzab But I got the GSAP ScrollTrigger.js file and the GSAP.js file in my Code(in Visual Studio Code). But it's still a blackscreen. <!DOCTYPE> <html> <head> .... </head> <body> .... .... <script src="https://unpkg.com/gsap@3/dist/ScrollTrigger.min.js"></script> <script src="https://unpkg.co/gsap@3/dist/gsap.min.js"></script> </body> </html> So I copy pasted my Code in Codepen and I added two importent js files: 1.GSAP 3.x 2. GSAP ScrollTrigger 3.x This is the link to the working code. https://codepen.io/david-buble/pen/BaxpLoE So on CodePen it's working but on my homepage it's still the blackscreen. EDIT: I solved the Problem. I was putting the script file in the body of the code but that was stupid. So i putted the js file in the head of my code and wrote type="text/javascript" into the script and it worked.
  2. dieKachba
    Hello, so I am using the Program for 4 days now and i can't solve the Problem. I have a black Screen and my goal is it to see an image from a car and when you scroll its zooming in and fade away and behind that section is a new image with some text. But somehow I only receive a blackscreen. html <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Autohaus Kaya</title> <link rel="stylesheet" href="zzzzzzzzzzzzzzzzzzzzzzzzzTest.css"> <link rel="preconnect" href="https://fonts.googleapis.com"> <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> <link href="https://fonts.googleapis.com/css2?family=Dancing+Script:wght@700&display=swap" rel="stylesheet"> <link href="https://fonts.googleapis.com/css2?family=Dancing+Script:wght@700&family=Oooh+Baby&display=swap" rel="stylesheet"> <link href="https://fonts.googleapis.com/css2?family=Satisfy&display=swap" rel="stylesheet"> <link href="https://fonts.googleapis.com/css2?family=Qwitcher+Grypen:wght@700&display=swap" rel="stylesheet"> <link href="https://pro.fontawsome.com/releases/v5.10.0/css/all.css" rel="stylesheet"> <link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"> <link href="https://fonts.googleapis.com/css2?family=Dancing+Script&display=swap" rel="stylesheet"> <link rel="stylesheet" href="https://unpkg.com/aos@next/dist/aos.css" /> <link rel="stylesheet" type="text/css" href="style.css"> <link href="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.11.1/gsap.min.js"> <!-- CSS only --> <link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/gh/kenwheeler/slick@1.8.0/slick/slick-theme.css"/> <link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/gh/kenwheeler/slick@1.8.0/slick/slick.css"/> <link rel="stylesheet" type="text/css" href="slick.css"> <link rel="stylesheet" type="text/css" href="slick-theme.css"/> <style> html{ scroll-behavior: smooth; scrollbar-width: normal; } </style> </head> <body> <section><div class="zoom-element">Panel 1</div></section> <section><div class="zoom-element">Panel 2</div></section> <section><div class="zoom-element">Panel 3</div></section> <script src="https://unpkg.com/aos@next/dist/aos.js"></script> <script> AOS.init({ duration: 800, once: true, }); </script> <script src="zzzzzzzzzzzzzzzzzzzzzzzzzTest.js"></script> <script src="gaso/gsap-public/esm/ScrollToPlugin.js"></script> <script src="gaso/gsap-public/esm/ScrollTrigger.js"></script> <script src="gaso/gsap-public/minified/ScrollTrigger.min.js"></script> <script src="gaso/gsap-public/minified/ScrollToPlugin.min.js.map"></script> <script src="gaso/gsap-public/minified/ScrollTrigger.min.js"></script> <script src="gaso/gsap-public/minified/ScrollTrigger.min.js.map"></script> <script src="gaso/gsap-public/src/ScrollToPlugin.js"></script> <script src="gaso/gsap-public/src/ScrollTrigger.js"></script> <script src="gaso/gsap-public/umd/ScrollToPlugin.js"></script> <script src="gaso/gsap-public/umd/ScrollTrigger.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.11.1/gsap.min.js"></script> <script src="gaso/gsap-public/minified/gsap.min.js"></script> <script src="gaso/gsap-public/esm/ScrollToPlugin.js"></script> <script src="jquery-3.6.1.min.js"></script> <script src="https://code.jquery.com/jquery-3.6.1.js"></script> <script src="jquery.cycle2.min.js"></script> </body> </html> css *{ box-sizing: border-box; margin: 0; padding: 0; } body{ background: black; color: white; } section{ height: 100vh; width: 100%; padding: 10vw; display: flex; align-items: center; justify-content:center; } .zoom-element{ width: calc(100% - 10vw); height: calc(100% - 10vw); display: flex; font-size: 100px; position: fixed; top: 5vw; left: 5vw; align-items: center; justify-content:center; transform: scale(0.1); opacity:0; border: 5px solid white; } js gsap.registerPlugin(ScrollTrigger); // BLUR PLUGIN (function() { const blurProperty = gsap.utils.checkPrefix("filter"), blurExp = /blur\((.+)?px\)/, getBlurMatch = target => (gsap.getProperty(target, blurProperty) || "").match(blurExp) || []; gsap.registerPlugin({ name: "blur", get(target) { return +(getBlurMatch(target)[1]) || 0; }, init(target, endValue) { let data = this, filter = gsap.getProperty(target, blurProperty), endBlur = "blur(" + endValue + "px)", match = getBlurMatch(target)[0], index; if (filter === "none") { filter = ""; } if (match) { index = filter.indexOf(match); endValue = filter.substr(0, index) + endBlur + filter.substr(index + match.length); } else { endValue = filter + endBlur; filter += filter ? " blur(0px)" : "blur(0px)"; } data.target = target; data.interp = gsap.utils.interpolate(filter, endValue); }, render(progress, data) { data.target.style[blurProperty] = data.interp(progress); } }); })(); // SCROLL TIMELINE SET UP console.clear(); select = (e) => document.querySelector(e); selectAll = (e) => document.querySelectorAll(e); const zoomTrigger = selectAll("section"); // ZOOM IN zoomTrigger.forEach((zoomTrigger, i) => { let zoomAnimation = gsap.timeline({ scrollTrigger: { id: "zoom-element", trigger: zoomTrigger, scrub:1, start: "top bottom", end: "center center", pin:false, //markers: {startColor: "orange", endColor: "blue"}, toggleActions: "play reset play reset", }, }); zoomAnimation .to(zoomTrigger.querySelectorAll(".zoom-element"), { scale: 1, opacity: 1, }, ); }); // FADE OUT zoomTrigger.forEach((zoomTrigger, i) => { let fadeAnimation = gsap.timeline({ scrollTrigger: { id: "fade", trigger: zoomTrigger, scrub:1, start: "center center", end: "center 0%", pin:false, markers: false, toggleActions: "play reset play reset", }, }); fadeAnimation .to(zoomTrigger.querySelectorAll(".zoom-element"), { opacity: 0, scale:15, //blur:3, }, ); }); Thank you all for your help
×
×
  • Create New...