![]() ![]() In said bug report a solution to the problem is mentioned: I did notice however that it will correctly re-render after manually zooming in and out on the page. Out of the box this technique unfortunately does not play that nice on iOS: MobileSafari does not seem to re-render the backgrounds during scroll. Versions 15.0 – 15.4 had a regression that prevented this fix from working, so those specific versions do not support pure CSS Scroll Shadows. The fix is no longer needed as of iOS 15.4. After you activate the snippet, your horizontal slide will work with some janky animation shown in the video below.Update 2022.07.05: The workaround listed below was necessary for iOS versions predating iOS 15. Now save change and activate the snippet. So, this code will enqueue the GSAP libraries and your custom script on page 72. This hook is called when the footer of the page is rendered. The add_action() function tells WordPress to run the gsap() function in the wp_footer hook. in_footer: Whether the script should be enqueued in the footer or the header.deps: An array of the names of any scripts that this script depends on.The enqueue_script() function takes the following arguments: trigger.js: This is a custom script that you have created.scroll-trigger.js: This is a plugin that allows you to create animations that are triggered by scrolling.If it is, then the function enqueues three scripts: This function checks if the current page is page 72. The code defines a function called gsap(). ![]() Wp_enqueue_script( 'trigger', '/wp-content/uploads/assets/gsap/trigger.js', array(), '1.0.0', 'all') Wp_enqueue_script( 'scrollTrigger', '/wp-content/uploads/assets/gsap/scroll-trigger.js', array(), '3.11.4', 'all') ![]() * end: () => "+=" + document.querySelector(".container").offsetWidth * xPercent: -100 * (sections.length - 1), When it matches, the associated function will run * // replace "=>" with "=>" arrow function otherwise it will not work trigger.js is the file I created and it should contains the code below. 72 is the page number, you need to identify the current page for yourself To stretch the child items container full width, we have to add a few lines of CSS to the Custom CSS area. Just like giving a parent container a CSS class, we will do the same things to the child items or flex-items by providing a CSS class as a “ panel“. Give a child item a unique CSS class name (in this case Light) Now, create your best designs place all the child containers inside the parent container, and stack vertically. Create child containers (flex-items) and place them inside the parent container We have added a unique CSS class “ container” to the parent container’s CSS class area. This way when we export our code, we can use it anywhere without causing any conflicts. Rather than using a selector CSS class to add our own custom CSS, we will define a unique CSS class for the parent container’s layout area. Give a Parent Container a unique CSS class name We will change the item’s settings when everything is properly set up.
0 Comments
Leave a Reply.AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |