Sakura petals falling with CSS and JS


by Jeremy Caudle
notes

I worked with my sakura petals again today. I wanted to see if I could animate the petals falling and randomize their positions to some extent. Luckily with the help of Chris Ferdinandi's concise and insightful posts on his website, I was able to add some vanilla JavaScript to help me do just that.

Refresh this page for more petals. :)

Big thanks to Chris Ferdinandi at https://gomakethings.com. His posts on applying inline styles with Javascript and generating random numbers with vanilla JS helped me create the effect on today's practice.

View the code:

HTML and JS 
<div class="codedoodle-block">
<!-- Original petal -->
        <svg x="0px" y="0px" width="0" height="0">
<symbol id="petal" height="98" width="85" >
    <path d="M42.501,11.25c0,0-2.75-14.5-17.75-6.75S2.501,44.25,3.251,53s11.75,22.75,13.75,27
        s21,15.75,26,15.75S65.751,82,69.251,77.5s8.25-13.5,7.5-19.25c1.75-8.75,7.5-18.75-0.25-32.25c-8.25-9-10.5-11.25-11.75-14.25
        s-13-6.75-16-6.75S42.251,8.25,42.501,11.25z"/>
</symbol>
</svg>

<!-- Flower petal -->
<div class="flower">
    <h1>Refresh this page for more petals. :)</h1>
    <p><strong>Big thanks to Chris Ferdinandi</strong> at <a href="https://gomakethings.com">https://gomakethings.com</a>. His posts on <a href="https://gomakethings.com/two-ways-to-set-an-elements-css-with-vanilla-javascript/">applying inline styles with Javascript</a> and <a href="https://gomakethings.com/generating-random-numbers-with-vanilla-js/">generating random numbers with vanilla JS</a> helped me create the effect on today's practice.</p>

    <svg class="petal" id="petal1">
        <use xlink:href="#petal" />
    </svg>

    <svg class="petal" id="petal2">
        <use xlink:href="#petal" />
    </svg>

    <svg class="petal" id="petal3">
        <use xlink:href="#petal" />
    </svg>

    <svg class="petal" id="petal4">
        <use xlink:href="#petal" />
    </svg>

    <svg class="petal" id="petal5">
        <use xlink:href="#petal" />
    </svg>
</div>


    </div>
		
		<script>
		var petal1pos = document.querySelector('#petal1');
var petal2pos = document.querySelector('#petal2');
var petal3pos = document.querySelector('#petal3');
var petal4pos = document.querySelector('#petal4');
var petal5pos = document.querySelector('#petal5');

var randomNumber = function (min, max) {
	return Math.floor(Math.random() * (max - min + 1) + min);
};

// Logs something like 37
var rand = randomNumber(-30, 210);
var rand2 = randomNumber(-30, 210);
var rand3 = randomNumber(-30, 210);
var rand4 = randomNumber(-30, 210);
var rand5 = randomNumber(-30, 240);
console.log(rand);

// Set left position to a random number between 85px and 210px
petal1pos.style.left = rand + 'px';
petal2pos.style.left = rand2 + 'px';
petal3pos.style.left = rand3 + 'px';
petal4pos.style.left = rand4 + 'px';
petal5pos.style.left = rand5 + 'px';
</script>
CSS 
/* Code Block styles */

        div.codedoodle-block {
            margin: 3rem auto;
            width: auto;
            max-width:300px;
            height: 300px;
            background-color: transparent;
            border-radius: 50%;
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            perspective: 700px;
            background-repeat: no-repeat;
            background-clip: border-box;
        }

        @keyframes rotate {
            from{transform: translateY(-300%) translateX(-5%) rotate3d(-.5,.1, -.55,0deg);}
            to{transform: translateY(150%) translateX(5%) rotate3d(.25,0,.45,100deg);}
        }

        @keyframes rotatetwo {
            from{transform: translateY(-170%) translateX(-20%) rotate3d(1.25,0,-.25,0deg);}
            to{transform: translateY(150%) translateX(20%) rotate3d(.25,0,.75,100deg);}
        }

        @keyframes rotatethree {
            from{transform: translateY(-240%) translateX(0%) rotate3d(-.25,0,1.25,270deg);}
            to{transform: translateY(150%) translateX(-150%) rotate3d(.25,0,-.25,100deg);}
        }
        
        @keyframes rotatefour {
            from{transform: translateY(-250%) translateX(0%) rotate3d(.25,0,.75,240deg);}
            to{transform: translateY(150%) translateX(-30%) rotate3d(.25,0,.95,100deg);}
        }
                
        @keyframes rotatefive {
            from{transform: translateY(-200%) translateX(0%) rotate3d(.25,0,1.25,-70deg);}
            to{transform: translateY(150%) translateX(30%) rotate3d(.25,0,.32,100deg);}
        }
                
        @keyframes longfade {
            from{opacity: 1;}
            to{opacity: 0;}
        }

        .flower {
            height: 100%;
            width: 100%;
            background-color: rgba(253, 56, 89, 0.0125);
            position: relative;
            
        }

        .petal {
            display: block;
            position: absolute;
            max-width: 85px;
            max-height: 98px;
            top: 44px;
            left: 107.5px;
            -webkit-transform-origin: center 110%;
            transform-origin: center 110%;
            fill:rgba(255, 192, 202, 0.9);
            animation: rotate 8s ease-out 0s 1 normal forwards, longfade 13s ease-out 0s 1 normal forwards;
            transition: all 1s ease-out;
        }
        
        .petal:hover, .petal:focus, .petal:active {
            fill:rgba(255, 92, 119, 0.9);
            stroke: rgba(255, 92, 110, 1);
        }

        .petal:nth-of-type(1) {
            animation-name: rotate, longfade;
        }

        .petal:nth-of-type(2) {
            animation-name: rotatetwo, longfade;
        }
        
        .petal:nth-of-type(3) {
            animation-name: rotatethree, longfade;
}

        .petal:nth-of-type(4) {
                    animation-name: rotatefour, longfade;
        }

        .petal:nth-of-type(5) {
                    animation-name: rotatefive, longfade;
        }

        .codedoodle-block p {
            margin: 1rem auto;
            max-width: 40em;
            font-size: 16px;
            line-height: 1.4;
            color: #999;
        }

Tags