A Gallery of Hearting Animations

Developer
Neil Renicker
Size
5,560 Kb
Views
14,168
  1. A Gallery of Hearting Animations Previews
  2. A Gallery of Hearting Animations HTML Codes
  3. A Gallery of Hearting Animations CSS Codes
  4. A Gallery of Hearting Animations JS Codes

How do I make an a gallery of hearting animations?

Don't just turn my heart pink when I click it. Make it jump. Make it bounce. I went to all the trouble of clicking your heart, so gimme a reward.. What is a a gallery of hearting animations? How do you make a a gallery of hearting animations? This script and codes were developed by Neil Renicker on 22 November 2022, Tuesday.

A Gallery of Hearting Animations Previews
IQ Test

A Gallery of Hearting Animations - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>A Gallery of Hearting Animations</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <script type="text/x-handlebars" data-template-name="application"> {{heart-demo-ghost title='Ghost' caption='Grow and fade out'}} {{heart-demo-emote title='Emote' caption='A rapid shake, then scale and fade out'}} {{heart-demo-bounce title='Bounce' caption='A quick double pulse'}} {{heart-demo-squishy title='Squish' caption='Skew toward the left, then scale and skew toward the right' hoverTransition=false}} {{outlet}}
</script>
<script type="text/x-handlebars" data-template-name="_heart-demo"> <h1 class="gallery-item--title">{{title}}</h1> <h1 class="gallery-item--caption">{{caption}}</h1> <div class="gallery-item--demo-wrapper js-appendable-container"> <a {{action 'toggleIsHearted'}} class="gallery-item--demo" href="#"> <svg {{bind-attr class="hoverTransition:hover-transition :svg--heart :js-svg-heart"}} xmlns="http://www.w3.org/2000/svg" viewBox="0 0 15 13.1" enable-background="new 0 0 15 13.1" width="15" height="13.1"> <path fill="#000000" d="M7.5 2.1C3.7-2.2.1.9 0 3.8c-.1 3.2 5.3 7.6 7.3 9.3.1 0 .1 0 .2.1.1 0 .1 0 .2-.1 2-1.6 7.4-6.1 7.3-9.3-.1-2.9-3.7-6-7.5-1.7z"/> </svg> </a> </div>
</script>
<script type="text/x-handlebars" id="components/heart-demo-ghost"> {{partial 'heart-demo'}}
</script>
<script type="text/x-handlebars" id="components/heart-demo-emote"> {{partial 'heart-demo'}}
</script>
<script type="text/x-handlebars" id="components/heart-demo-bounce"> {{partial 'heart-demo'}}
</script>
<script type="text/x-handlebars" id="components/heart-demo-squishy"> {{partial 'heart-demo'}}
</script> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script src='http://builds.emberjs.com/tags/v1.11.0-beta.5/ember-template-compiler.js'></script>
<script src='http://builds.emberjs.com/tags/v1.11.0-beta.5/ember.min.js'></script>
<script src='http://cdn.jsdelivr.net/velocity/1.2.2/velocity.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

A Gallery of Hearting Animations - Script Codes CSS Codes

/**
*
* RESET
*
**/
body { font-family: 'Helvetica', sans-serif; margin: 0;
}
h1, h2, h3, h4, h5, h6 { margin: 0;
}
/**
*
* VARIABLES
*
**/
/**
*
* BLOCK:
* GALLERY-ITEM
*
**/
.gallery-item { position: relative; background-color: #e6e6e6; padding: 5em 5%;
}
.gallery-item:nth-of-type(even) { background-color: #f7f7f7;
}
.gallery-item--title { position: absolute; font-weight: bold; bottom: 2rem; left: 1rem; font-size: 0.75rem; letter-spacing: 0.1rem; color: #66B2BC; text-transform: uppercase;
}
.gallery-item--caption { position: absolute; font-weight: normal; bottom: 1rem; left: 1rem; font-size: 0.8rem; color: #b3b3b3; text-transform: lowercase;
}
.gallery-item--demo-wrapper { display: block; position: relative; margin: 0 auto; width: 2em; height: 2em;
}
.svg--heart { position: absolute; width: 100%; height: 100%; z-index: 1;
}
.svg--heart.hover-transition { -webkit-transition: -webkit-transform 150ms ease-out; transition: -webkit-transform 150ms ease-out; transition: transform 150ms ease-out; transition: transform 150ms ease-out, -webkit-transform 150ms ease-out;
}
.svg--heart.hover-transition:hover { -webkit-transform: scale(1.04); transform: scale(1.04);
}
.svg--heart.hover-transition:active { -webkit-transform: scale(0.98); transform: scale(0.98);
}
.svg--heart path { -webkit-transition: fill 100ms ease-out; transition: fill 100ms ease-out; fill: #bfbfbf;
}
.svg--heart path:hover { fill: #b3b3b3;
}
.is-hearted .svg--heart path { fill: #E04F8E;
}
.is-hearted .svg--heart path:hover { fill: #d62672;
}

A Gallery of Hearting Animations - Script Codes JS Codes

(function() { var App; App = Ember.Application.create(); App.ApplicationView = Ember.View.extend({ animateIn: (function() { return $('body').velocity('fadeIn', { duration: 1800, easing: 'easeOutCubic' }); }).on('didInsertElement') }); App.HeartDemoComponentMixin = Ember.Mixin.create({ tagName: 'section', classNames: ['gallery-item', 'gallery-item_heart'], classNameBindings: 'isHearted:is-hearted', hoverTransition: true, isHearted: false, $appendableContainer: (function() { return this.$('.js-appendable-container'); }).property(), $heart: (function() { return this.$('.js-svg-heart'); }).property().volatile(), $tempHeart: (function() { return this.get('$heart').clone(); }).property('$heart').volatile(), actions: { toggleIsHearted: function() { if (!this.get('isHearted')) { this.animateHeart(); } return this.toggleProperty('isHearted'); } } }); App.HeartDemoGhostComponent = Ember.Component.extend(App.HeartDemoComponentMixin, { animateHeart: function() { var $appendableContainer, $tempHeart; $tempHeart = this.get('$tempHeart'); $appendableContainer = this.get('$appendableContainer'); return $tempHeart.appendTo($appendableContainer).velocity({ scale: 5 }, 150).velocity({ opacity: 0 }, { queue: false, duration: 375, easing: 'easeOutQuad', complete: function(elements) { return $(elements).remove(); } }); } }); App.HeartDemoEmoteComponent = Ember.Component.extend(App.HeartDemoComponentMixin, { animateHeart: function() { var $appendableContainer, $heart, $tempHeart; $heart = this.get('$heart'); $tempHeart = this.get('$tempHeart'); $appendableContainer = this.get('$appendableContainer'); $heart.velocity({ rotateZ: '-30deg' }, { duration: 50, easing: 'easeOutQuad' }).velocity({ rotateZ: '30deg' }, { duration: 50, easing: 'easeOutQuad' }).velocity('reverse').velocity('reverse').velocity({ rotateZ: '0deg' }, { duration: 50, easing: 'easeOutQuad' }); return Ember.run.later((function() { return $tempHeart.appendTo($appendableContainer).velocity({ scale: 4 }, { duration: 150 }).velocity({ opacity: 0 }, { queue: false, duration: 330, easing: 'easeOutQuad', complete: function(elements) { return $(elements).remove(); } }); }), 250); } }); App.HeartDemoBounceComponent = Ember.Component.extend(App.HeartDemoComponentMixin, { animateHeart: function() { var $heart; $heart = this.get('$heart'); return $heart.velocity({ scale: '1.3' }, { duration: 100, easing: 'easeInQuint' }).velocity('reverse', { easing: 'easeOutQuint' }).velocity({ scale: '1.6' }, { duration: 150, easing: 'easeInQuint' }).velocity('reverse', { easing: 'easeOutQuint' }); } }); App.HeartDemoSquishyComponent = Ember.Component.extend(App.HeartDemoComponentMixin, { animateHeart: function() { var $appendableContainer, $heart; $heart = this.get('$heart'); $appendableContainer = this.get('$appendableContainer'); return $heart.velocity({ rotateY: '10deg', scale: 0.9, begin: function() { return $appendableContainer.css('perspective', '25px'); } }, { duration: 250, easing: 'easeInQuart' }).velocity({ rotateY: '-45deg', scale: 1.2 }, { duration: 350, easing: 'easeInQuart' }).velocity({ rotateY: '0deg', scale: 1 }, { duration: 300, easing: 'easeOutQuart', complete: function() { return $appendableContainer.css('perspective', 'none'); } }); } });
}).call(this);
A Gallery of Hearting Animations - Script Codes
A Gallery of Hearting Animations - Script Codes
Home Page Home
Developer Neil Renicker
Username tinystride
Uploaded November 22, 2022
Rating 4.5
Size 5,560 Kb
Views 14,168
Do you need developer help for A Gallery of Hearting Animations?

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!

Neil Renicker (tinystride) Script Codes
Name
Subtle Radial Shadow Underline
Max-width on header elements
Animations and pseudo-elements
World Map with Pulsing Dots
Pure CSS Loading Block
Chicago Flag in CSS
A Pen by Neil Renicker
React Lifecycle Demo
Vmin Intrinsic Ratio
Webgl
Create amazing blog posts 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!