How can the CSS scroll() function be used to create parallax effects?
It is first important to highlight two points regarding the scope of this article:
Parallax effects can be generated using CSS or JavaScript for enhanced and reactive features. However, in this article, the focus will solely be on CSS, particularly when utilising the scroll function.
While parallax effects can be crafted with increasing complexity and layers, this article is restricted to the simplest form involving a single background image. Its purpose is to introduce the concept of parallax effects.
What is parallax effects?
The aim of parallax effects is primarily visual, aiming to generate the illusion of depth across various layers on a webpage as users scroll. Following the definition of “parallel,” which denotes events occurring simultaneously or in a similar manner, this leads to the concept of parallax scrolling. Here, different layers on a website move at varying speeds in parallel as users scroll.
An example in relation to the scope of this article, where parallax effect is used on the background image (created by Andrej Sharapov, 15 March 2019).
How to create parallax effect with CSS?
In the following example, we will attempt to create a parallax effect with a basic background image that covers the whole viewport.
Set the height of ”body, html” to 100%
Place the background image in a container element
Set the height of the image to fit the whole viewport
Set the background image properties
Identify the container element
We will focus and explain the CSS properties that describe the background image.
background-attachment: fixed;
Purpose: Determines if a background image’s position is fixed within the viewport, or scrolls with its containing block.
background-attachment: scroll; /* Default */
Background image scrolls along with the content when the element is scrolled.
Background image scrolls with viewport but not with container
Background image will scroll with the page.
Background image does not scroll with contents.
https://www.youtube.com/watch?v=6hZZ4tIxBkE
background-attachment: local;
Background image scrolls along with the content of the element, similar to scroll
If the element has a scrolling mechanism (e.g., overflow: auto), the background scrolls with the element’s contents instead of the viewport.
This behaviour is not widely supported by all browsers.
Purpose: Defines an x/y coordinate, to place an item relative to the edges of an element’s box.
List of values
background-position: top;
background-position: bottom;
background-position: left;
background-position: right;
background-position: center;
background-repeat: no-repeat;
Purpose: To enable a background image to be repeated along the horizontal and vertical axes, or not repeated at all. By default, the repeated images are clipped to the size of the element.
background-repeat: repeat; /* Default */
The image is repeated as much as needed to cover the whole background image painting area.
The last image will be clipped if it doesn’t fit.
background-repeat: repeat-x;
The image is repeated along the x-axis as much as needed to cover the whole horizontal image painting area.
The last image will be clipped if it doesn’t fit.
background-repeat: repeat-y;
The image is repeated along the y-axis as much as needed to cover the whole vertical image painting area.
The last image will be clipped if it doesn’t fit.
background-repeat: space;
The image is repeated as much as possible without clipping.
The first and last images are pinned to either side of the element, and whitespace is distributed evenly between the images.
The background-position property is ignored unless only one image can be displayed without clipping.
background-repeat: round;
As the allowed space increases in size, the repeated images will stretch (leaving no gaps) until there is room (space remaining ≥ half of the image width) for another one image to be added.
When the next image is added, all of the current ones compress to allow room.
background-repeat: no-repeat;
The image is not repeated (and hence the background image painting area will not necessarily be entirely covered).
The position of the non-repeated background image is defined by the background-position CSS property.
background-size: cover;
Purpose: Determines the size of a background image’s relative to its containing block.
background-size: auto; /* Default */
Background image will be used at its intrinsic proportions are maintained.
If the background image is smaller than the element’s dimensions, it will be repeated to fill the background area by default
background-size: cover;
Scales the image (while preserving its ratio) to the smallest possible size to fill the container (that is: both its height and width completely cover the container), leaving no empty space.
If the proportions of the background differ from the element, the image is cropped either vertically or horizontally.
background-size: contain;
Scales the image as large as possible within its container without cropping or stretching the image.
If the container is larger than the image, this will result in image tiling, unless the background-repeat property is set to no-repeat.
Conclusion
The parallax effect enhances visual depth by incorporating multiple layers on a website. While this article provides a foundational understanding and outlines the potential of the parallax effect, its application isn’t restricted to a single background image. By experimenting with various CSS properties tailored to the page’s design and its layers, diverse visual effects can be achieved. However, it’s essential to acknowledge that the parallax effect may have limitations on mobile responsiveness, which can be addressed by deactivating it through media queries.
As a foodie and frequent online grocery shopper, I was most inclined to choose the Robinson and Daughter fine food site. Back in Singapore, I often shop at fine food grocers as well, frequenting shops such as https://scoopwholefoodsshop.com, https://www.cheeseshop.sg, https://www.ourchoice.com.
While all three function as e-commerce platforms, two also boast brick-and-mortar stores, seamlessly integrating their online presence as a promotional extension.
These sites share common best practices:
A prominent and recognisable logo/business name in the header.
Clear and intuitive menu navigation bar.
A dynamic hero banner, often in carousel style, featuring crucial information and promotions to immediately capture viewers’ attention.
A categorised list of products on the homepage, providing easy navigation to other pages.
I’ve implemented effective standards on my site, aligning with common practices observed across successful small business websites. One consistent design approach I employ is limiting the content width to a container of 960px. This ensures neatness and consistency across various screen dimensions, contributing to a visually appealing and user-friendly layout.
In terms of the site’s artistic aspect, a deliberate choice was made in the colour scheme, primarily brown and white. This selection aims to convey an earthy (brown) and clean (white) impression. Brown, associated with nature and earth, communicates the idea that the business’s products are natural and healthy, steering away from artificial flavors and sources. To maintain a visually cohesive look, especially considering the variety of colours in product images, white was chosen as the primary background colour. This decision prevents the site from appearing overly busy or complicated.
Embracing a simple and clean theme, the business name is displayed in plain text. The font choice, Georgia, a serif font, imparts a traditional and formal vibe, signaling the business’s seriousness about its products. Given the significance of the name “Robinson” in the business, conveying a personal reputation, a serious tone is maintained. Throughout the rest of the site, Gill Sans is employed, striking a slightly less formal tone with playful character while ensuring readability.
A strategic use of cards individualises each product, featuring a photo and caption to captivate viewers. The smaller cards on the homepage offer a sneak peek into subsequent pages where larger, more detailed cards await exploration. This design allows for a quick visual summary on the homepage, encouraging viewers to delve deeper into subsequent pages if desired. Adding a subtle shadow effect to each card introduces depth, preventing the site from feeling static and infusing a sense of liveliness.
Regarding mobile responsiveness, a strategic adjustment occurs at 680px, where the cards are arranged to display one per row. This modification addresses the challenge of narrow cards at this width, ensuring ample space for displaying caption details. For pages with extensive caption content, an automatic adjustment of caption borders prevents the page from becoming excessively long, maintaining a balanced and user-friendly layout.
I will be adopting design thinking concepts into my major project user experience planning, the process being: empathise, define, ideate, prototype, test.
From Design Thinking for Everyday Life by Amira Budi Mutiara, 10 Dec 2019
I will be following the design thinking process for the overall UX planning and also incorporating them into each step of the way.
In planning for my project, I will utilise the following steps and artefacts:
Problem Statement:
Define and explain the problem statement
Include user interviews to identify emergent themes, forming the problem statement during the empathise and define stages.
Objectives:
Identify the main objective set by the problem statement.
Define sub-objectives framing the solution during the ideate stage.
Ideation:
Develop an idea addressing the main objectives.
State plans addressing sub-objectives and scope the idea for the primary objectives for the major project.
Personas:
Identify primary and secondary target audiences.
Prioritise the primary target audience in the submission stage, forming the foundation of the platform where most network effects and adoption will occur during the ideate stage.
Journey Maps:
Document the main flows facilitating the completion of solution objectives during the ideate stage.
Map and Connect Between Possible User Objectives:
Create a swim lane diagram to document user flows across screens and ensure comprehensive coverage.
Wireframes as Mid-Fi Prototypes on Figma:
Develop wireframes based on the swim lane diagram to ensure all components and functions are considered, including edge cases.
User Testing:
Conduct user testing at different stages:
Stage 0: First to conduct online surveys to receive results of substantial sample size then semi-structured interviews with a smaller sample of participants with a divergence on possible user groups to deconstruct the problem during empathise and define.
Stage 1: Semi-structured interviews with the goal of zooming in on the target audience to understand their objectives of the platform hence forming the personas and distinguishing the primary target audience from the rest.
Stage 2: User testing with wireframes to assess whether users can achieve their objectives.
Stage 3: Hi-fi prototype testing to refine the design and testing the usability of the site.
Empathise
My major project is inspired by the increasing trend among young adults and young families in Singapore who often rely on takeaways or restaurant meals due to limited cooking abilities or time constraints. Many of these individuals express a desire for healthier, homemade meals but lack easy access to such options. This need is more pronounced among younger couples and families compared to households with older individuals who are accustomed to preparing their own meals. The aim is to bridge the gap between the demand for home-cooked meals and the potential supply. Given that over 90% of Singaporeans reside in apartments, there is a significant proximity and volume of both demand and supply possibilities, making this initiative feasible and impactful.
With this in mind, the problem statement I have curated is shown below.
Define
Stage 0: Problem deconstruction
I will initially use Google Forms to augment the sample size of results and then conduct semi-structured user interviews, incorporating both planned and open-ended questions with further probing. Sample questions will include:
How do you typically approach your meals?
What are your dietary preferences?
How often do you cook at home, and why?
What considerations influence your day-to-day meal choices?
The objective is to comprehend the current behaviour and habits of Singaporeans in their daily meal consumption. Subsequently, questions will be formulated to determine if there is a demand and to understand users’ objectives concerning a platform facilitating the exchange of homemade meals among fellow Singaporeans. These insights will be instrumental in refining the hypothesised objectives.
Participants will be recruited through a combination of random sampling and snowball sampling, with a focus on adults, including employed individuals, unemployed persons, and retirees, given their significant roles in decision-making regarding meal choices. To determine the appropriate age group composition, additional research will be conducted, particularly focusing on the percentage of the population categorised as “young adults and families.” This may involve examining government statistical information regarding the prevalence of Singaporean households that do not cook or prepare their own meals. Alternatively, a pre-survey of a broader population can be conducted to assess the prevalence of home-cooked meals. Subsequently, the margin of error can be calculated, guiding the determination of an advised sample size.
Objective
Ideate
During the ideation phase, incorporating concept testing becomes crucial, involving participants to contribute innovative ideas. Simultaneously, I aim to collect feedback on the viability of implementing a web application as the platform for facilitating meal-sharing activities. It is imperative to emphasise that conducting concept testing should be prioritised for the early stages of this process. This approach helps prevent any premature influence on participants, avoiding premature convergence of ideas.
Stage 1: Objectives of target audience
Personas
In my hypothesis, personas are classified into primary and secondary audiences, as depicted below. The major project will prioritise and focus on the primary target audience. Consequently, the initial release must fulfil the majority of user flows and objectives for the primary target audience, while considerations for the secondary target audience can be incorporated in future developments.
Semi-structured interviews will be conducted with participants filtered from stage 0, these participants will be broadly divided from the previous results into three groups:
Participants who fulfil the description of the hypothesised primary target audience.
Participants who fulfil the description of the hypothesised secondary target audience.
Participants who are presently not interested in meal-sharing activities. (This is still important as these participants may be converted into future users of the platform. Therefore, the interviews will focus on understanding the reasons behind their disinterest in meal-sharing and identifying incentives that could encourage their participation).
In this phase, it is vital to gather information from the primary target audience regarding their specific needs, requirements, and various objectives they may have when utilising the platform.
Participants will engage in key activities to determine user flows, such as:
Illustrating Steps to Meet Objectives:
Participants will outline the steps they envision to fulfill their objectives on the platform. For example:
“What do you intend to do on the platform?”
“Since you want to XXX, please draw out the steps you envisage to meet this objective.”
Card Sorting Steps to Objectives (Usability Testing):
Participants will organise and demonstrate steps to achieve specific objectives, emphasising functions like search and navigation.
“Here is a list of steps. Can you organise them and show us how you expect to reserve a meal on DDMMYYY on HH:MM for a serving of 1 person?”
Card Sorting Categories on the Site:
Participants will categorise elements related to hypothesised exploratory functions, such as “cuisine” and “ingredients.”
“Given a list of search results, how would the participant filter them?”
These activities aim to uncover user expectations, preferences, and behaviours, providing valuable insights into the design of user-friendly and efficient flows within the platform.
Swim lane diagram
I will compile all potential user flows into a swim lane diagram, as illustrated below. This guarantees the inclusion of all flows and the consideration of edge cases. It also identifies areas where error messages need to be developed. The swim lane diagram categorises all conceivable pages along the horizontal headers and involves three entities on the vertical header (consumers, producers, system). The diagram visually represents interactions across all three entities, incorporating start, end, and decision nodes.
Swim lane diagram
User journeys
With a completed swim lane diagram, I will then be able to create user journeys for all personas with varying scenarios. An example of a happy flow is shown below for the worker persona.
Prototype
Stage 2: Testing with wireframes
After collating and synthesising findings from the initial two stages, the focus shifts to crafting wireframes. By this point, there should be a clear understanding of the number and specifics of screens to be developed. With a definite understanding of the primary target audience, it is also important at the wire framing stage to do feature prioritisation. User testing enters an iterative phase, marked by precise observations targeting objective completion.
At this stage, one of the UX testing methods I will employ is tree testing, involving participants who will be assigned tasks to locate specific information within the site or accomplish predefined tasks. Another significant test will be A/B testing, specifically aimed at discerning preferences in information display and evaluating the superiority of one flow over another.
This phase also allows for a comprehensive evaluation of the quantity of components and their potential reuse across the site. This consideration extends beyond development and performance, encompassing the maintenance of a consistent design system. Utilising Figma for clickable prototyping alongside wireframes enables the collection of essential UX metrics, including task success rate, time on task, and user error rate.
Collecting UX metrics early in terms of user behaviour, prior to designing screens, serves not only to streamline design efforts but also to highlight considerations that can be addressed in design, such as employing colour to emphasise a primary call to action.
WireframeWireframe of Home page
Test
Stage 3: Testing with screens
At this point, the end-to-end flows of the entire website should be well-established. Iterations in this stage should primarily focus on visual design elements, including colour, typography, and proportions, among others. Accessibility rules will be applied and tested during this phase. Before embarking on screen design, I will create a design system to ensure consistency across the site. The design system not only contributes to brand identity but also establishes the underlying tone of the site. A minimum viable product (MVP) should be available at the stage.
Tests similar to those conducted during the wireframing stages will also be implemented at this juncture, albeit with distinct objectives. For instance, A/B testing in this phase will shift its focus from flows to the user’s emotional responses.
In the concluding stages, post-production UX testing becomes imperative at various points, particularly considering the implications of network effects as the application scales. As the user base expands, usability dynamics may evolve, necessitating iterative adjustments. Beyond the previously collected UX metrics in the wireframing stage, additional crucial metrics like bounce rate should be meticulously recorded. Furthermore, conducting more semi-structured interviews is essential to delve deeper into underlying issues, deciphering whether they stem from a suboptimal user experience or extend to broader business considerations.
This is my bed table that I bought for university. The use case was to be able to work on a portable surface that I can place on my bed. This table is relatively light, at less than 2 kilos, making it easy to lift up to the bed & bring back down to the floor. It comes in various sizes but I got the smallest, most compact size that sufficiently fits my laptop and tablet. On that point, it has multiple uses then as it can be used as its primary purpose – bed table and bedside table. The The main selling point of this compared the rest of the bed tables in the market is it’s configurability. The table height and surface angle can be adjusted which supports multiple uses such as a taller height for eating or an angled surface for typing on a laptop. It also comes with removable stoppers so that the laptop does not slide off when the table surface is angled.
Extendable rod
This is an extendable rod I bought for university. The use case was to be able to hang up damp clothes in my room to air dry. Prior to coming to the university accommodation I was unsure of the dimensions and area where and I will be able to hang up my clothes. Therefore the solution I sought had to be able to accommodate different frame lengths or areas as much as possible. I brought this from home, which was initially used on my bedroom door as I had Japanese curtains. The main selling point of this is that it is configurable from 45cm to 145cm in length. It is also relatively light, less than 300g, yet strong as it is made of metal and encased in plastic. I used it at the window of my bedroom as it is the area where it is best ventilated and gets the sunlight. It uses the simple concept of friction as support, bypassing any tedious or permanent installations. With just a rubber cap with some rails gripping the contact surfaces, it is amazing how strong it is & can hold up multiple heavy fabric.
Rack
This is a rack at my sink that I bought for university. The use case was to be able to place my toothbrush and retainers on a clean surface above the sink. Staying at the university accommodation, I most definitely cannot install a permanent fixture nor is it wise to spend too much money on one. I looked for something that could stick on the surface without causing damage to the surface and it has to be strong enough to support the items placed on it. It is made of coated aluminium hence a cheap material but does not rust. One important thing I look out for is the grille design. Back home my permanent bathroom rack is also this grille design instead of the common cups people put their toothbrushes in. The reason why I like it this way is so that there is ventilation for my things to dry and not get mouldy, and water does not accumulate where one has to drain or empty it.
