Viewing 9 posts - 1 through 9 (of 9 total)
  • Author
    Posts
  • July 1, 2024 at 7:35 pm #1460837
    pierremartin311

    Hello,
    I use this script wich works fine on laptop bur i just see that it doesn’t works on mobiles:

    <script>
function scrollTrigger(selector, options = {}){
    let els = document.querySelectorAll(selector)
    els = Array.from(els)
    els.forEach(el => {
        addObserver(el, options)
    })
}

function addObserver(el, options){
    if(!('IntersectionObserver' in window)){
        if(options.cb){
            options.cb(el)
        }else{
            entry.target.classList.add('active')
        }
        return
    }
    let observer = new IntersectionObserver((entries, observer) => { //this takes a callback function which receives two arguments: the elemts list and the observer instance
        entries.forEach(entry => {
            if(entry.isIntersecting){
                if(options.cb){
                    options.cb(el)
                }else{
                    entry.target.classList.add('active')
                }
                observer.unobserve(entry.target)
            }
        })
    }, options)
    observer.observe(el)
}
// Example usages:
scrollTrigger('.intro-text')

scrollTrigger('.scroll-reveal', {
    rootMargin: '-200px',
})

scrollTrigger('.loader', {
    rootMargin: '-200px',
    cb: function(el){
        el.innerText = 'Loading...'
        setTimeout(() => {
            el.innerText = 'Task Complete!'
        }, 1000)
    }
})
</script>

    I use it for an animation on this page: https://vernissageduvar.com/

    Is it normal? is it a solution to make it working?

    Thanks!!
    July 1, 2024 at 8:37 pm #1460842
    Guenni007

    well – i can see the animation above “Quelques Exemples …” on my iPhone – and on devtools too on mobile simulation.

    July 1, 2024 at 9:38 pm #1460849
    pierremartin311

    Hello,
    On phone i did it wittout this script… the animation doesn’t start like on lapetop when you arrive to the élement but it strats when the page is load….because his script doesn’t works on mobile…

    July 2, 2024 at 4:56 am #1460869
    Ismael

    Hi,

    Thank you for the inquiry.

    How did you create the animation? You may need to set the opacity of the elements with the class name “scroll-reveal” to zero to make them invisible on initial load. Once the elements are scrolled into view, the script above should add the “active” class name to the element, which can be used to reset the opacity back to 1, making the elements visible. However, please note that the script above might not be able to control when the animation starts

    .scroll-reveal { 
  opacity: 0;
}

.scroll-reveal.active {
  opacity: 1;
}

    Best regards,
    Ismael

    July 2, 2024 at 7:10 am #1460880
    Guenni007

    the section itself is set to : av-small-hide av-mini-hide.
    those flex_columns with .scroll-reveal trigger are set on visibility : av-hide-on-mobile
    look at the column advanced tab under responsive. Your added Class could not work on that – because it is set to display : none by your responsive settings.

    is it because you are working with the other option to show that animation?

    if this section and the columns are set to be there on responsive case the class “active” is added.

    _____________________

    by the way – this is my observer sccript to get a new class added to flex-columns that comes into viewport.
    ( i do not stop observing, because i like the animation on scroll-in/out again and again ;)

    function observe_columns() {
?>
<script type="text/javascript">	
	document.addEventListener("DOMContentLoaded", function() {
	  var flexcolumns = [].slice.call(document.querySelectorAll(".flex_column"));
		
		if ("IntersectionObserver" in window && "IntersectionObserverEntry" in window && "intersectionRatio" in window.IntersectionObserverEntry.prototype){
			let flexcolumnObserver = new IntersectionObserver(function(entries, observer) {
				entries.forEach(function(entry) {
					if (entry.isIntersecting) {
						entry.target.classList.add("visible");

					}
					else {
						entry.target.classList.remove("visible");
					}  
				});

			}, {
				root: null,
				threshold: 0.1,
				rootMargin: "20px 0px -10px 0px",
			});
			
			flexcolumns.forEach(function(flexcolumn) {
				flexcolumnObserver.observe(flexcolumn);
			});
	  	}
	});
</script>
<?php
}
add_action( 'wp_footer', 'observe_columns' );

    see in action f.e. under “Dienstleistungen”
    https://webers-web.info/

    July 2, 2024 at 4:08 pm #1461052
    pierremartin311

    Hello,
    thanks for your answer.
    i put my responsive setings like this because it wasn’t working anyway..
    Now, it seems to be ok , it works when i use the adaptive view tools of firefox but it doesn’t works on my Iphone..
    Thanks for your script but it was already so long to make working the one i use now! I’m really bad in java and not so much better with all this!

    Can you tell me please what could be the resaons why it doesn’t work on my phone although it’s ok on my laptop?

    July 2, 2024 at 5:07 pm #1461073
    pierremartin311

    and in fact i don’t need a script spécific for flex colums, I put 4 pictures in the middle of my page inside nothing just before the place i want to make my animation… i don’t now if it’s the good method…

    July 2, 2024 at 9:57 pm #1461117
    pierremartin311

    hello,
    I think it’s OK now… in fact it works on an other Iphone but it doesn’t work on mine.. I don’t know why!
    My problem was only the position of my pictures who were set outside the screen…
    Thanks anyway for your help!

    July 3, 2024 at 9:54 pm #1461256
    Mike

    Hi,
    Glad Guenni007 could help, thank you Guenni007, if you have any further questions please create a new thread and we will gladly try to help you. Thank you for using Enfold.

    Best regards,
    Mike

  • Author
    Posts
Viewing 9 posts - 1 through 9 (of 9 total)
  • The topic ‘Script doesn’t work on mobile’ is closed to new replies.