Is it possible to create a dynamic zig-zag design with CSS that

Question

Is it possible to create a dynamic zig-zag design with CSS that

I am looking to design a dynamic snake/zigzag layout that consists of square images and circles, starting from the center of the container and descending in a winding fashion.

The number of elements is not fixed and is generated based on data received from the server.

Is there a way to accomplish this using only CSS?

Below is an example code snippet:

<div class="container">
  <div class="square"></div>
  <div class="circle"></div>
  <div class="circle"></div>
  <div class="square"></div>
  <div class="circle"></div>
  <div class="circle"></div>
  <div class="circle"></div>
  <div class="circle"></div>
  <div class="square"></div>
/<div>

View the complete Codepen here

javascript html css

Answer 1

Answer №1

I have devised a highly intricate workaround (codepen). However, it is not recommended for use in production. Furthermore, this workaround is only effective for three "hops," where the elements move from left to right, bounce around, and then disappear into oblivion.

The workaround functions by calculating the necessary position from the left for each possible "hop." For the first hop, it's $i * 50px (where $i represents the zero-based index of the element). The calculation for the second hop is 200vw - $i * 50px, and for the third hop, it's $i * 50px - 200vw.

To determine the maximum value between the first two calculations and the third calculation, we utilize a special element placed before the figure:

.spacer {
  display: inline-block;
  max-width: 50px; /* first */
  min-width: 500px; /* third */
}

.spacer > span {
  display: inline-block;
  max-width: 300px; /* second */
  width: 10000px;
}

(You can experiment with this spacer concept in a separate codepen.)

It is important to note that this workaround is convoluted and sluggish. It is advisable to rely on JavaScript instead until a more efficient CSS-only solution is developed.

Answer 2

I have devised a highly intricate workaround (codepen). However, it is not recommended for use in production. Furthermore, this workaround is only effective for three "hops," where the elements move from left to right, bounce around, and then disappear into oblivion.

The workaround functions by calculating the necessary position from the left for each possible "hop." For the first hop, it's $i * 50px (where $i represents the zero-based index of the element). The calculation for the second hop is 200vw - $i * 50px, and for the third hop, it's $i * 50px - 200vw.

To determine the maximum value between the first two calculations and the third calculation, we utilize a special element placed before the figure:

.spacer {
  display: inline-block;
  max-width: 50px; /* first */
  min-width: 500px; /* third */
}

.spacer > span {
  display: inline-block;
  max-width: 300px; /* second */
  width: 10000px;
}

(You can experiment with this spacer concept in a separate codepen.)

It is important to note that this workaround is convoluted and sluggish. It is advisable to rely on JavaScript instead until a more efficient CSS-only solution is developed.

Is it possible to create a dynamic zig-zag design with CSS that

Answer №1

Similar questions

JavaScript appendChild method not functioning properly with dynamically created image elements in JavaScript code

The use of the `foreach` loop

"Efficiently Browsing Through Various Links with the Help of Greasemon

Manipulate a JSON object with JavaScript

Upon refreshing the datatable, I encountered a issue where the checkbox cannot be selected

Blurred entities aligning in front of one another (THREE.JS)

Using the bootstrap CSS file causes my document to shrink in size when I convert it from HTML to PDF using iTextSharp in C# Winforms

Embracing Divs Similar to the Grid Selector in Windows Phone

I've encountered some issues with importing pagination from modules after installing SwiperJs

Adjust the width of content within a wrapper using HTML and CSS to automatically resize

Utilizing Angular Filters to Assign Values to an Object within a Controller

Card columns with dropdown extending into adjacent column

The text box is intersecting with the photo

Invoke a function on React whenever the context is updated

React Router's default component for nested routes

Instructions on displaying the main page even with just inputting the default directory in the URL

Attempting to align DIV horizontally in the center

Leveraging the power of react routes for efficient navigation within a react-based application

Located at the lower section of the parent container

Enhance User Experience with JQuery Autocomplete for Internet Explorer 8 Using ASMX Web Services