Flower expansion

Developer
Sylvain Reucherand
Size
3,425 Kb
Views
26,312
  1. Flower expansion Previews
  2. Flower expansion HTML Codes
  3. Flower expansion CSS Codes
  4. Flower expansion JS Codes

How do I make an flower expansion?

What is a flower expansion? How do you make a flower expansion? This script and codes were developed by Sylvain Reucherand on 07 November 2022, Monday.

Flower expansion Previews
IQ Test

Flower expansion - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Flower expansion</title> <link href="https://fonts.googleapis.com/css?family=Montserrat:400,700"> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div class="flower-motion-stage">	<span class="flower-pistillate"></span>
</div>
<button class="btn-play">Let's play</button> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script src='http://lab.sylvainreucherand.fr/resources/jquery.velocity.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

Flower expansion - Script Codes CSS Codes

/* The version of Bourbon used in this Pen was 4.* */
@import "bourbon";
/* Variables */
$light-blue: #567bae;
/* Common */
body { font-family: 'Montserrat', sans-serif;
}
input,
button { @include appearance(none);
}
/* Motion */
.flower-motion-stage { position: relative; width: 256px; height: 256px; margin: auto;
}
.flower-petal { display: none; position: absolute; left: 50%; width: 50px; height: 128px; margin-left: -25px; background-color: grey; border-radius: 100%; @include radial-gradient(ellipse at center, #ffffff 0%, #cccccc 100%); @include transform-origin(bottom center);
}
.flower-pistillate { display: none; position: absolute; z-index: 2; top: 50%; left: 50%; margin-top: -12px; margin-left: -12px; width: 24px; height: 24px; background-color: yellow; border-radius: 100%; @include radial-gradient(ellipse at center, #fff132 0%, #b2ae60 100%);
}
/* UI */
.btn-play { display: block; padding: 10px 15px; margin: auto; margin-top: 50px; font-family: 'Montserrat', sans-serif; font-size: 18px; font-weight: bold; text-transform: uppercase; color: $light-blue; background: transparent; border: 3px solid $light-blue; cursor: pointer;
}
.btn-play:before { content: ''; display: block; float: left; margin-top: 4px; @include triangle(15px, $light-blue, right);
}
.btn-play:focus { outline: none;
}

Flower expansion - Script Codes JS Codes

var petals = [{ degree: -5, delay: 0
}, { degree: 65, delay: 5
}, { degree: 95, delay: 2
}, { degree: 120, delay: 1
}, { degree: 160, delay: 7
}, { degree: -150, delay: 4
}, { degree: -100, delay: 3
}, { degree: -60, delay: 6
}];
$('.btn-play').on('click', function () { animation();
});
var animation = function () { // Clean stage $('.flower-motion-stage .flower-petal').remove(); $('.flower-pistillate').hide().velocity('stop'); // Adds and animate petals for(var i=0; i<petals.length; i++) { $('<span>')	.addClass('flower-petal flower-petal-' + i)	.appendTo($('.flower-motion-stage')) .velocity({ scale: [(Math.round(Math.random() * 2) + 9) / 10, 0], rotateZ: [petals[i].degree +'deg', petals[i].degree - 45 + 'deg'] }, { duration: 1250, delay: 100 * petals[i].delay, display: 'block', easing: 'easeOutElastic' }); } // Animate pistillate $('.flower-pistillate').velocity({ scale: [1, 0] }, { duration: 1500, display: 'block', easing: 'easeOutElastic' });
};
Flower expansion - Script Codes
Flower expansion - Script Codes
Home Page Home
Developer Sylvain Reucherand
Username sreucherand
Uploaded November 07, 2022
Rating 3
Size 3,425 Kb
Views 26,312
Do you need developer help for Flower expansion?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Sylvain Reucherand (sreucherand) Script Codes
Name
Closest point of a polygon to another point
Spinner
Mousewheel indicator animation
Blurred text
UI Buttons animation
A Pen by Sylvain Reucherand
Create amazing SEO content with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!