This margin is added to all the elements, except the first one, so that you can see the cards that are behind it. As you can see in the code, the margin is defined as 10 ( elementsMargin = 10). We chose the “Top” view, and we will add the class “stackedcards-origin-top” that defines the transform-origin (to change the position of transformed elements) of the elements on the component. The StackedOptions (Bottom, Top, or None) and the margin that were added (elementsMargin) will enter the accounts of the organization. Because they will be reusable, all actions are isolated.Īt this stage, the settings we defined will influence the organization on the screen. So now we count the elements and set the active element of the stack. In JavaScript, I defined the variables we’ll need, as well as the selectors of elements that we are going to use and manage:Īt this stage, we should know how many elements there are for the component to organize. For this example, I set the card size, and this can be changed in the CSS: The cards have a default style and size I have defined that the first card determines the size of all the other cards. After that, we can remove the ‘init’ class. When we have organized all the elements, we then assign the necessary classes and the calculations that we need for the component. Because we previously added ”DOMContentLoaded,” we know exactly when we can remove this class. ![]() I created a CSS class called ”init” that is added to the component to keep everything hidden until the DOM is fully loaded. This event is fired when the HTML document has been completely loaded and parsed with stylesheets, images, and HTML structure.Īll the code that will be developed must be inside this EventListener: I added an EventListener to the HTML named DOMContentLoaded. For that, we need to be sure that the DOM is fully loaded. Organizing the Elements of the ComponentĪchieving the proper interactions requires a lot of calculations based on the device screen. UseOverlays: Enables or disables the overlays for swipe elements. And, when you like a destination? Just swipe right. A swipe to the top bookmarks the category to your favorites. To dismiss (“Unlike”) a vacation category, you swipe left. The example shows a vacation planning app called “What Kind Of Traveler Are You?” Categories such as “Art and Culture,” “City Breaks,” and “Adventure and Outdoor” are displayed on a single card, and the cards are stacked. Let’s look at a potential way to use my component. You’ll save a lot of time and effort later on. Think about where and how you can simplify and only then start developing. Before anything else, stop, analyze, and consider the largest number of scenarios. So, it was time to do what I always recommend for building component. The world needs more swipeable cards, and it was up to me to pick up the slack. This discovery showed me that I was on the right track. And, if you develop mobile applications, you must be familiar with the pain involved in achieving a standard that works for all devices, right? Ouch! Next, I noticed that there was very little information about how to build a swipeable stacked card component with smooth performance on all devices. I started out installing Tinder on my smartphone and trying it out myself… you know, for the sake of research. So, my solution is going to take reusability into account. Tinder has done an excellent job of creating a component for online dating and hookups, but I wanted to create one that can be used more widely by all kinds of applications. ![]() ![]() So, inspired by Tinder, I decided to build a component that can be used for a number of things. Each direction triggers a different action swiping right, for example, means we like someone’s profile on the app. On Tinder, a profile is displayed on a bunch of stacked cards that can be swiped to the left, to the right, or to the top of the screen. With the meteoric rise in the use of touch screens on mobile devices, glamorous touch gestures have become a standard for interacting with applications. With the swipe of his finger, he could choose three different actions it was totally intuitive. So, when a friend of mine showed me Tinder on his phone, I noticed the swipe feature and immediately recognized a bunch of ways to use this touch-based interaction. Most of us appreciate applications that pair good UI design with a “WOW factor” that enriches our experience, right?
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |