Tagged: 

Viewing 30 posts - 1 through 30 (of 38 total)
  • Author
    Posts
  • #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 Code

    const 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
    mickhb

    • This topic was modified 1 week ago by mickhb.
    • This topic was modified 1 week ago by mickhb.
    • This topic was modified 1 week ago by mickhb.
    • This topic was modified 1 week ago by mickhb.
    #1472422

    Hey 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,
    Ismael

    #1472475

    Hi 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.
    #1472479

    may 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.

    https://webers-web.info/

    where did you “inject” your script? – via child-theme functions.php ?

    #1472480

    for 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' );
    #1472481

    Hi Guenni,
    Of course you can see the page.
    I have integrated the script via the CodeSnippet app.
    Best regards
    Mick

    #1472482

    by the way: not A One One

    document.querySelectorA11
    // guess you mean:
    document.querySelectorAll

    and where is your “eintrag” set?

    #1472483

    As mentioned above – i’m participant as you are – so i can not see private content messages.

    #1472484

    Hi Guenni,
    Thanks for your code. Do the scripts only work if you install it in the child theme?
    Mick

    #1472486

    My Testsite

    • This reply was modified 6 days, 15 hours ago by mickhb.
    #1472489

    no – but your script had to be correct – see my hints above.

    #1472490

    wo sind die Elemente, die die Klasse: scrollanimation haben

    das sind die Text elemente ?

    #1472491

    I 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.
    #1472493

    dghdfgh

    • This reply was modified 6 days, 15 hours ago by Guenni007.
    #1472494

    Is it ok to implement JavaScript via the app or does it only work directly in the child theme?

    #1472496

    can 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 classes

    #1472497

    Could it be that the Javascript only works with Childtheme and not via an app?

    #1472498

    ich 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.

    #1472499

    Natürlich. Ich habe den Text entfernt. Ich kann ja eine generelle klasse in jedem Container in dem Entwickler Einstellungen davor setzen. Zum Beispiel .scrollanimation

    #1472500

    nimm 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

    #1472502

    oder 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);
    }
    #1472503

    eventuell 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);
    			});
    	  	}
    });
    #1472505

    vergiss 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);
    }
    #1472506

    Kannst du das gar nicht in den Developer Tools testen?
    Ich muss das Skript direkt laden. Über die App funktioniert das nicht. CSS ja.

    #1472507

    ich 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)

    #1472508

    Wie, 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?

    #1472509

    nun 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.

    #1472510

    PS : 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.

    #1472511

    Das CSS wird aktiviert und deaktiviert. Das sieht man auch im WebEntwickler. Nur die Animation wird nicht ausgeführt. Ist die Animation bei dir sichtbar?

    #1472512

    wo hast du dieses CSS eingefügt:

    .scrollanimation {
    	opacity:0;
    	transition: opacity 5s ease;
    }
    .scrollanimation.sichtbar {
    	opacity:1;
    }
Viewing 30 posts - 1 through 30 (of 38 total)
  • You must be logged in to reply to this topic.