Tagged: animation
-
AuthorPosts
-
November 27, 2024 at 1:27 pm #1472361
Hi Everyone,
I have animated texts on my site that I only want to animate when they are visible.
I have inserted a JavaScript code for this purpose. Unfortunately, this does not respond. Do you know why or do you have another possibility? I have provided the text elements with the class .scrollanimation.
JavaSkript Codeconst animierteElemente = document.querySelectorA11(".scrollanimation"); const konfiguration = {threshold: [0, 0.75]}: const observer = new IntersectionObserver( (elemente) => { elemente.forEach((element) => { if(element.intersectionRatio › 0.75) { element.target.classList.add("sichtbar"); } }); }, konfiguration ); animierteElemente.forEach((eintrag) => { observer.observe(eintrag); });
CSS Code
.scrollanimation { opacity:0; } .sichtbar { opacity:1; transition: opacity 5s; }
Thank you
mickhbNovember 28, 2024 at 6:35 am #1472422Hey mickhb,
Thank you for the inquiry.
Have you tried using the Animation options of the Column elements instead? The animation should only be triggered once the element is visible on the viewport. Please check the documentation below for more info.
Best regards,
IsmaelNovember 28, 2024 at 11:51 am #1472475Hi Ismael,
To be honest, no. Why should I take the complicated route and install the animation option in Enfold first? Everything works so wonderfully. Only the Javascript is not addressed. What is the best way to implement this?
I have solved this via CodeSnippet.
Best Regard
Mick- This reply was modified 6 days, 16 hours ago by mickhb.
November 28, 2024 at 12:08 pm #1472479may i see your page too? As participant i can not see private content area – so if it is possible to post here …
see here for example an enfold page with implementing Intersection Observer ( scroll to “Dienstleistungen” ) –
big advantage is that each time the objects comes into viewport – animation starts again.by the way all h2 headings are animated that way.
where did you “inject” your script? – via child-theme functions.php ?
November 28, 2024 at 12:16 pm #1472480for example my snippet for those h2 headings goes to child-theme functions.php:
function observe_headings_on_homepage() { ?> <script type="text/javascript"> const wrappers = document.querySelectorAll(".av-special-heading"); const targets = document.querySelectorAll(".av-special-heading-tag"); const animClass = ["in-view"]; const observer = new IntersectionObserver((entries, observer) => { entries.forEach(entry => { const currentIndex = Array.from(wrappers).indexOf(entry.target) if (entry.isIntersecting) { targets[currentIndex].classList.add(animClass); } else { targets[currentIndex].classList.remove(animClass); } }) }, { root: null, threshold: 0.1, rootMargin: "-120px 0px -100px 0px", }); wrappers.forEach(wrapper => { observer.observe(wrapper) }); </script> <?php } add_action( 'wp_footer', 'observe_headings_on_homepage' );
November 28, 2024 at 12:21 pm #1472481Hi Guenni,
Of course you can see the page.
I have integrated the script via the CodeSnippet app.
Best regards
MickNovember 28, 2024 at 12:23 pm #1472482by the way: not A One One
document.querySelectorA11 // guess you mean: document.querySelectorAll
and where is your “eintrag” set?
November 28, 2024 at 12:25 pm #1472483As mentioned above – i’m participant as you are – so i can not see private content messages.
November 28, 2024 at 12:30 pm #1472484Hi Guenni,
Thanks for your code. Do the scripts only work if you install it in the child theme?
MickNovember 28, 2024 at 12:32 pm #1472486- This reply was modified 6 days, 15 hours ago by mickhb.
November 28, 2024 at 12:36 pm #1472489no – but your script had to be correct – see my hints above.
November 28, 2024 at 12:39 pm #1472490wo sind die Elemente, die die Klasse: scrollanimation haben
das sind die Text elemente ?
November 28, 2024 at 12:49 pm #1472491I have corrected this thanks for your information. I scanned the text from a screenshot, that’s where the error with the 11 came from.
There is a class in the CSS .scrollanimation, which is addressed via the Javascript.- This reply was modified 6 days, 15 hours ago by mickhb.
November 28, 2024 at 12:52 pm #1472493dghdfgh
- This reply was modified 6 days, 15 hours ago by Guenni007.
November 28, 2024 at 1:01 pm #1472494Is it ok to implement JavaScript via the app or does it only work directly in the child theme?
November 28, 2024 at 1:06 pm #1472496can you place instead :
const wrappers = document.querySelectorAll(".av_textblock_section"); const targets = document.querySelectorAll(".scrollanimation"); const animClass = ["sichtbar"]; const observer = new IntersectionObserver((entries, observer) => { entries.forEach(entry => { const currentIndex = Array.from(wrappers).indexOf(entry.target) if (entry.isIntersecting) { targets[currentIndex].classList.add(animClass); } else { targets[currentIndex].classList.remove(animClass); } }) }, { root: null, threshold: 0.1, rootMargin: "-120px 0px -100px 0px", }); wrappers.forEach(wrapper => { observer.observe(wrapper) });
you can change later the rootMargin to your needs.
PS: and sorry the selector on document.querySelectorAll should be with dot on classesNovember 28, 2024 at 1:14 pm #1472497Could it be that the Javascript only works with Childtheme and not via an app?
November 28, 2024 at 1:16 pm #1472498ich kann denke ich deutsch mit dir schreiben?
entferne mal bitte dein script. da du auch andere Texte die nicht im Textblock sind beieinflussen willst muss es noch ein wenig anders gemacht werden.
November 28, 2024 at 1:23 pm #1472499Natürlich. Ich habe den Text entfernt. Ich kann ja eine generelle klasse in jedem Container in dem Entwickler Einstellungen davor setzen. Zum Beispiel .scrollanimation
November 28, 2024 at 1:30 pm #1472500nimm jetzt mal – ich beobachte jetzt nur noch das Element selbst – nicht mehr den Wrapper – da du die klasse mal im Textblock hast – mal als heading – dann wieder im Footer – egal so geht es:
bei dem Plugin könnte es sein, dass man <script> mit dabei haben muss? das kann ich dir nicht beantworten deshalb mal so wie du es vorhin hattest:var elements = [].slice.call(document.querySelectorAll(".scrollanimation")); if ("IntersectionObserver" in window && "IntersectionObserverEntry" in window && "intersectionRatio" in window.IntersectionObserverEntry.prototype){ let elementObserver = new IntersectionObserver(function(entries, observer) { entries.forEach(function(entry) { if (entry.isIntersecting) { entry.target.classList.add("sichtbar"); } else { entry.target.classList.remove("sichtbar"); } }); }, { root: null, threshold: 0.1, rootMargin: "-100px 0px -100px 0px", }); elements.forEach(function(element) { elementObserver.observe(element); }); }
und ins quick css dann:
.scrollanimation { opacity:0; transition: opacity 5s ease; } .scrollanimation.sichtbar { opacity:1; }
PS: 5s scheint mir recht lang
November 28, 2024 at 1:58 pm #1472502oder damit man mal was sieht stattdessen:
.scrollanimation { opacity:0; transform: translateX(-50%); transition: opacity 5s ease, transform 2s ease; } .scrollanimation.sichtbar { opacity:1; transform: translateX(0); }
November 28, 2024 at 2:01 pm #1472503eventuell kannst du noch abwarten bis das DOM geladen ist :
(das kann ich in den Developer Tools nicht testen)document.addEventListener("DOMContentLoaded", function() { var elements = [].slice.call(document.querySelectorAll(".scrollanimation")); if ("IntersectionObserver" in window && "IntersectionObserverEntry" in window && "intersectionRatio" in window.IntersectionObserverEntry.prototype){ let elementObserver = new IntersectionObserver(function(entries, observer) { entries.forEach(function(entry) { if (entry.isIntersecting) { entry.target.classList.add("sichtbar"); } else { entry.target.classList.remove("sichtbar"); } }); }, { root: null, threshold: 0.1, rootMargin: "-100px 0px -100px 0px", }); elements.forEach(function(element) { elementObserver.observe(element); }); } });
November 28, 2024 at 2:29 pm #1472505vergiss nicht das css ins quick css zu setzen.
.scrollanimation { opacity:0; transform: translateX(-50%); transition: opacity 5s ease, transform 2s ease; } .scrollanimation.sichtbar { opacity:1; transform: translateX(0); }
November 28, 2024 at 2:38 pm #1472506Kannst du das gar nicht in den Developer Tools testen?
Ich muss das Skript direkt laden. Über die App funktioniert das nicht. CSS ja.November 28, 2024 at 2:59 pm #1472507ich sehe doch das es funktioniert – die Klasse sichtbar wird dynamisch eingefügt/entfernt.
nur das css ist noch nicht vorhanden.Eventuell musst du das Merging von Enfold neu laden. ( unter Perfomance ganz unten – switch setzen und “Delete Old CSS And JS Files?” ausführen)
November 28, 2024 at 3:05 pm #1472508Wie, was?
Das CSS ist vorhanden, zumindest sind die Änderungen sichtbar. Die Animation läuft nur am Anfang und nicht bei Sichtbarkeit.
Warum siehst du das?November 28, 2024 at 3:17 pm #1472509nun ich kann im DOM sehen, das die Klasse “sichtbar” da ist wenn das Element im Viewport ist – und weg ist wenn nicht:
allerdings hast du das File Merging aktiv. Das behält manchmal ein einmal gesetztes css im “Zwischenspeicher”
Das wie oben beschreiben kann man allerdings bei Enfold – Performance ( in Deutsch steht da eventuell Leistung) erneuern lassen.November 28, 2024 at 3:20 pm #1472510PS : Lies mal bitte den Absatz oben bei : Enfold – Performance dort steht unter anderem :
HTTP/2 is optimized for using minified files and compression of files is no longer recommended: read more. Therefore since 5.7 by default minified files are selected.
daher empfehle ich auch eher die Minified Files zu nutzen.
November 28, 2024 at 3:40 pm #1472511Das CSS wird aktiviert und deaktiviert. Das sieht man auch im WebEntwickler. Nur die Animation wird nicht ausgeführt. Ist die Animation bei dir sichtbar?
November 28, 2024 at 3:48 pm #1472512wo hast du dieses CSS eingefügt:
.scrollanimation { opacity:0; transition: opacity 5s ease; } .scrollanimation.sichtbar { opacity:1; }
-
AuthorPosts
- You must be logged in to reply to this topic.