In the following pages, we will try to achieve the common "overlay looming (toggle)" effect on hover. In this article, we take the hovering effect of the carousel image on the woshipm official website as an example to achieve the following effects: phone number list Show/hide the "previous" and "next" entries when the mouse moves in/out Overlay appears when hovering, and line animation (Go directly to the homepage carousel, the screenshot of the gif is a bit stuck) This effect is common in the carousel of major websites. The switch entry is not displayed by default, and is displayed only when the mouse is hovered. Now, let's try to achieve the effect with axure in turn.
Quick preview of results: https://4o2c1f.axshare.com The carousel of the woshipm homepage –phone number list the floating layer appears when hovering, and the line is animated 1.1 Overview Required components: Picture element * 1 Dynamic Panel*2 icons * 2 - left, right. placed in the dynamic panel Involving interaction events (use cases): when the mouse moves in when the mouse is out Actions involved: show/hide Involving animation: Swipe left Swipe right Note the operation: Component combination - if not combined, there will be a bug 1.2 Material production Drag in a picture - the width and height of the example: 574*335; Drag into a dynamic panel and name it "Previous" - example settings: width and height 50*60, background color 000000 (pure black), opacity 30; Double-click to enter the dynamic panel "Previous", drag in the icons to the left - example settings: fill color ffffff (pure white), width and height 17*30, coordinates (17,15) (visually centered); Follow the steps 2 and 3 to make the dynamic panel "next" (you can also hold down ctrl and drag the "previous" to copy and then adjust it) - pay attention to the icons to the right.
After proper typography alignment, the effect is as follows: 1.3 Interactive actions Set "Previous" and "Next" to be hidden -phone number list not displayed by default; Click the picture to add a use case: when the mouse is moved in, and when the mouse is moved out; Enter the use case editing, add actions: show/hide the dynamic panel "previous" and "next". The corresponding settings are as follows
Axure: Hover effect of common picture booths on PC (3)
-
- Posts: 2
- Joined: Sun Apr 17, 2022 4:48 am