tburette/stagger-sample.html

## stagger-sample.html
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Stagger sample</title>
    <style>
        /* stagger related code */

        /* Must specify a point where the stagger effect start
        Typically a @media{} breakpoint
        Drawback : cannot use var(--breakpoint) inside @media
        This means that the breakpoint value must be duplicated:
        - once in the @media
        - once as a variable*/
        :root {
            --breakpoint: 500px;
        }

        .box {
            height: 100px;
            width: 100px;
        }

        .box-1 {
            /* Adjustments possible:
            - --breakpoint : when the effect starts
            - -10rem : the maximum stagger
            - /2 : how quikly the stagger occur*/

            /* Must do :
            if change a value in a box, must change value in the other box
            - clamp(min,..) of .box-1 must be twice .box-2
            - division (/ 2) of .box-1 must be twice that of .box-2 */
            transform: translateX(clamp(-10rem, calc((var(--breakpoint) - 100vw) / 2), 0px));
            /* transform: translateX(-4rem); */
        }

        .box-2 {
            transform: translateX(clamp(-5rem, calc((var(--breakpoint) - 100vw) / 4), 0px));
            /* transform: translateX(-2rem); */
        }

        /* other code (general setup, visual) */
        main {
            border: 4px solid;
            margin: 3em;
        }

        /* breakpoint marker */
        html::before {
            content: '';
            position: absolute;
            height: 100%;
            left: var(--breakpoint);
            border-left: 4px dotted hotpink;
        }

        .box {
            border: 4px dashed;
            margin-left: auto;
        }

        .box-1 {
            color: lightcoral;
        }

        .box-2 {
            color: purple;
        }
    </style>
</head>

<body>
    <main>
        <div class="box box-1"></div>
        <div class="box box-2"></div>
        <div class="box box-3"></div>
    </main>
</body>

</html>
	<!DOCTYPE html>
	<html lang="en">

	<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Stagger sample</title>
	<style>
	/* stagger related code */

	/* Must specify a point where the stagger effect start
	Typically a @media{} breakpoint
	Drawback : cannot use var(--breakpoint) inside @media
	This means that the breakpoint value must be duplicated:
	- once in the @media
	- once as a variable*/
	:root {
	--breakpoint: 500px;
	}

	.box {
	height: 100px;
	width: 100px;
	}

	.box-1 {
	/* Adjustments possible:
	- --breakpoint : when the effect starts
	- -10rem : the maximum stagger
	- /2 : how quikly the stagger occur*/

	/* Must do :
	if change a value in a box, must change value in the other box
	- clamp(min,..) of .box-1 must be twice .box-2
	- division (/ 2) of .box-1 must be twice that of .box-2 */
	transform: translateX(clamp(-10rem, calc((var(--breakpoint) - 100vw) / 2), 0px));
	/* transform: translateX(-4rem); */
	}

	.box-2 {
	transform: translateX(clamp(-5rem, calc((var(--breakpoint) - 100vw) / 4), 0px));
	/* transform: translateX(-2rem); */
	}

	/* other code (general setup, visual) */
	main {
	border: 4px solid;
	margin: 3em;
	}

	/* breakpoint marker */
	html::before {
	content: '';
	position: absolute;
	height: 100%;
	left: var(--breakpoint);
	border-left: 4px dotted hotpink;
	}

	.box {
	border: 4px dashed;
	margin-left: auto;
	}

	.box-1 {
	color: lightcoral;
	}

	.box-2 {
	color: purple;
	}
	</style>
	</head>

	<body>
	<main>
	<div class="box box-1"></div>
	<div class="box box-2"></div>
	<div class="box box-3"></div>
	</main>
	</body>

	</html>