Take Action talk bubbles with SVG
How do I make an take action talk bubbles with svg?
Hover over bubbles to scale up; click on bubbles to reveal content in div below -- yay!. What is a take action talk bubbles with svg? How do you make a take action talk bubbles with svg? This script and codes were developed by Shannon Range on 10 November 2022, Thursday.
Take Action talk bubbles with SVG Previews
Take Action talk bubbles with SVG - Script Codes HTML Codes
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Take Action talk bubbles with SVG</title> <link rel="stylesheet" href="css/style.css">
</head>
<body>
<div id="bubble-container">
<h3>How will you change the conversation? Use The Raising of America to talk about:</h3>
<svg id="talk-bubble5" width="180" height="180" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 200 200" style="enable-background:new 0 0 200 200;" xml:space="preserve"> <style type="text/css"> .st1{stroke:#442f4a; stroke-width:0;stroke-miterlimit:10;}
</style>
<path class="st1" fill="#be83cf" d="M174.4,77.6c0,42.5-38.9,77-86.9,77c-9.7,0-19.1-1.4-27.8-4l-46.1,15.1c0,0,15.4-31.1,14.2-32.1 c-16.8-14-27.2-33.9-27.2-56c0-42.5,38.9-77,86.9-77S174.4,35.1,174.4,77.6z"/> <text font-size="21" font-family="sans-serif" fill="#000" text-anchor="middle"> <tspan x="90" y="3em">...how</tspan> <tspan x="90" y="4.1em">change is</tspan> <tspan x="90" y="4.7em" style="font-weight:bold;font-size:24;">possible</tspan> </text>
</svg>
<svg id="talk-bubble4" width="220" height="220" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 200 200" style="enable-background:new 0 0 200 200;" xml:space="preserve"> <style type="text/css"> .st1{stroke:#002a45; stroke-width:0;stroke-miterlimit:10;}
</style> <path class="st1" fill="#e15829" d="M174.4,77.6c0,42.5-38.9,77-86.9,77l-7.5-0.3l-25.5,24.8c0,0-0.3-28.9-0.4-28.9C19.4,142.7,0.6,99.6,0.6,77.6 c0-42.5,38.9-77,86.9-77S174.4,35.1,174.4,77.6z"/> <text font-size="14" font-family="sans-serif" fill="#000" text-anchor="middle"> <tspan x="90" y="3em">...why our</tspan> <tspan x="90" y="4.5em">youngest children are</tspan> <tspan x="90" y="6em">one of our nation's</tspan> <tspan x="90" y="5.9em" style="font-weight:bold;font-size:18;">best investments</tspan> </text>
</svg>
<svg id="talk-bubble3" width="210" height="210" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 200 200" style="enable-background:new 0 0 200 200;" xml:space="preserve">
<style type="text/css"> .st1{stroke:#002a45; stroke-width:0;stroke-miterlimit:10;}
</style> <path class="st1" fill="#92b995" d="M0.6,77.6c0,42.5,38.9,77,86.9,77c9.7,0,19.1-1.4,27.8-4l46.1,15.1c0,0-15.4-31.1-14.2-32.1 c16.8-14,27.2-33.9,27.2-56c0-42.5-38.9-77-86.9-77S0.6,35.1,0.6,77.6z"/> <text font-size="14" font-family="sans-serif" fill="#000" text-anchor="middle"> <tspan x="90" y="2.5em">...how the best</tspan> <tspan x="90" y="4em">parenting programs</tspan> <tspan x="90" y="5.5em">may have</tspan> <tspan x="90" y="5.6em" style="font-weight:bold;font-size:18;">nothing to do</tspan> <tspan x="90" y="6.8em" style="font-weight:bold;font-size:18;">with parenting</tspan> </text>
</svg>
<svg id="talk-bubble2" width="165" height="165" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 200 200" style="enable-background:new 0 0 200 200;" xml:space="preserve">
<style type="text/css"> .st1{stroke:#002a45; stroke-width:0;stroke-miterlimit:10;}
</style> <path class="st1" fill="#d49000" d="M174.4,77.6c0,42.5-38.9,77-86.9,77l-7.5-0.3l-25.5,24.8c0,0-0.3-28.9-0.4-28.9C19.4,142.7,0.6,99.6,0.6,77.6 c0-42.5,38.9-77,86.9-77S174.4,35.1,174.4,77.6z"/> <text font-size="18" font-family="sans-serif" fill="#000" text-anchor="middle"> <tspan x="90" y="2.2em">...why</tspan> <tspan x="90" y="3em" style="font-weight:bold;font-size:21;">blaming</tspan> <tspan x="90" y="4em" style="font-weight:bold;font-size:21;">parents</tspan> <tspan x="90" y="6em">is the easy</tspan> <tspan x="90" y="7.2em">way out</tspan> </text>
</svg>
<svg id="talk-bubble1" width="180" height="180" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 200 200" style="enable-background:new 0 0 200 200;" xml:space="preserve"> <style type="text/css"> .st1{stroke:#002a45; stroke-width:0;stroke-miterlimit:10;}
</style> <path class="st1" fill="#0093f0" d="M0.6,77.6c0,42.5,38.9,77,86.9,77c9.7,0,19.1-1.4,27.8-4l46.1,15.1c0,0-15.4-31.1-14.2-32.1 c16.8-14,27.2-33.9,27.2-56c0-42.5-38.9-77-86.9-77S0.6,35.1,0.6,77.6z"/> <text font-size="21" font-family="sans-serif" fill="#000" text-anchor="middle"> <tspan x="90" y="2.5em">...how what</tspan> <tspan x="90" y="3.8em">surrounds us</tspan> <tspan x="90" y="4.5em" style="font-weight:bold; font-size:24;">shapes us</tspan> </text>
</svg>
</div><!--bubble-container-->
<div id="bubble-content"> <div id="bubble-content0"><p style="font-size:1rem;text-align:center;display:block;padding:100px;font-family:sans-serif;fnt-style:italic;"><strong>Pssst!</strong><br/>Hover over the talk bubbles to learn more :-)</p></div>
<div id="bubble-content1"><h4>What surrounds us shapes us</h4><p>We are born with most of our 86 billion brain cells (neurons), but those cells are only weakly connected together. It's our experiences during the first years of life which literally wire together and shape the architecture of our developing brains, setting the foundation for our future learning, earnings, and mental and physical health. This is why safe, stable, nurturing relationships and environments are among the most powerful and protective forces in a young child's life.<p></div> <div id="bubble-content2"><h4>Blaming parents is the easy way out</h4><p>Too many parents in the U.S. are cut adrift without paid family leave, high-quality affordable child care, affordable housing, and living wage jobs. The squeeze for time, money and resources makes parenting much harder than in most other rich nations, and the anxiety and stress parents feel can ‘drip down’ on babies and alter their developmental pathways. Families don’t live in a bubble.</p></div> <div id="bubble-content3"><h4>The best parenting programs have nothing to do with parenting</h4><p>We are quick to advocate for programs that teach parenting skills—but managing stress is not the same as reducing the sources of stress. Improving conditions for parents, caregivers and communities--living wages, quality, affordable housing, paid parental leave, high-quality childcare, flex time, social inclusion, better transit-- improve young children’s chances for growing into healthy, compassionate and responsible adults.</p></div> <div id="bubble-content4"><h4>Young children are the most prudent investment</h4><p>To know how our nation will be doing tomorrow, we only need look at how our youngest children are doing today—and the numbers show we are falling behind. We can catch up if we make a strong start the birthright of every child so they have the opportunity for a strong start, the opportunity to fulfill their capacity for healthy emotional, intellectual and social development. If we do that, we can become will have a healthier, safer, better educated, more prosperous and more equitable nation.</p></div> <div id="bubble-content5"><h4>Change is possible</h4><p>The conditions and policies which impede the efforts of parents and caregivers to provide for their children aren’t natural, aren’t etched in stone; they are the result of decisions we, as a body politic, have made. The U.S. has a long thistory radition of social movements which have improved conditions for families with young children—from ending child labor and creating the 8- hour work day to the civil rights and women’s movements. We’ve done it before, we can do it again.</p></div>
</div><!--bubble-content--> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script> <script src="js/index.js"></script>
</body>
</html>
Take Action talk bubbles with SVG - Script Codes CSS Codes
body {font-family:sans-serif;font-size:16px;line-height:1.6}
h4 {font-size:1.5rem;}
#bubble-container {width:920px;height:275px;border:1px solid;}
#talk-bubble1, #talk-bubble2, #talk-bubble3, #talk-bubble4, #talk-bubble5 { position:absolute; -webkit-transition:all .3s ease-in-out;
}
#talk-bubble1:hover, #talk-bubble2:hover, #talk-bubble3:hover, #talk-bubble4:hover, #talk-bubble5:hover { cursor:pointer; transform:scale(2);
}
#talk-bubble1 {left:0px;top:130px;}
#talk-bubble2 {left:190px;top:160px;}
#talk-bubble3 {left:370px;top:120px;}
#talk-bubble4 {left:570px;top:180px;}
#talk-bubble5 {left:770px;top:140px;}
#bubble-content { width:920px; height:400px; position:relative; overflow:hidden;
}
#bubble-content0 { position:absolute; left:100px; top:50px; padding:0px; width:650px;
}
#bubble-content1 { position:absolute; left:1100px; top:50px; padding:0px; width:650px;
}
#bubble-content2 { position:absolute; left:2100px; top:50px; padding:0px; width:650px;
}
#bubble-content3 { position:absolute; left:3100px; top:50px; padding:0px; width:650px;
}
#bubble-content4 { position:absolute; left:4100px; top:50px; padding:0px; width:650px;
}
#bubble-content5 { position:absolute; left:5100px; top:50px; padding:0px; width:650px;
}Take Action talk bubbles with SVG - Script Codes JS Codes
$('#talk-bubble1').mouseenter(function(){ $('#bubble-content0').animate({left:'-900px'},800); $('#bubble-content1').animate({left:'100px'},800); $('#bubble-content2').animate({left:'1100px'},800); $('#bubble-content3').animate({left:'2100px'},800); $('#bubble-content4').animate({left:'3100px'},800); $('#bubble-content5').animate({left:'4100px'},800);
});
$('#talk-bubble2').mouseenter(function(){ $('#bubble-content0').animate({left:'-1900px'},800); $('#bubble-content1').animate({left:'-900px'},800); $('#bubble-content2').animate({left:'100px'},800); $('#bubble-content3').animate({left:'1100px'},800); $('#bubble-content4').animate({left:'2100px'},800); $('#bubble-content5').animate({left:'3100px'},800);
});
$('#talk-bubble3').mouseenter(function(){ $('#bubble-content0').animate({left:'-2900px'},800); $('#bubble-content1').animate({left:'-1900px'},800); $('#bubble-content2').animate({left:'-900px'},800); $('#bubble-content3').animate({left:'100px'},800); $('#bubble-content4').animate({left:'1100px'},800); $('#bubble-content5').animate({left:'2100px'},800);
});
$('#talk-bubble4').mouseenter(function(){ $('#bubble-content0').animate({left:'-3900px'},800); $('#bubble-content1').animate({left:'-2900px'},800); $('#bubble-content2').animate({left:'-1900px'},800); $('#bubble-content3').animate({left:'-900px'},800); $('#bubble-content4').animate({left:'100px'},800); $('#bubble-content5').animate({left:'1100px'},800);
});
$('#talk-bubble5').mouseenter(function(){ $('#bubble-content0').animate({left:'-4900px'},800); $('#bubble-content1').animate({left:'-3900px'},800); $('#bubble-content2').animate({left:'-2900px'},800); $('#bubble-content3').animate({left:'-1900px'},800); $('#bubble-content4').animate({left:'-900px'},800); $('#bubble-content5').animate({left:'100px'},800);
});
| Developer | Shannon Range |
| Username | silentkrange |
| Uploaded | November 10, 2022 |
| Rating | 3 |
| Size | 4,528 Kb |
| Views | 18,216 |
Do you need developer help for Take Action talk bubbles with SVG?
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!
Shannon Range (silentkrange) Script Codes
| Name | Size |
| D3 Productivity-Wage Gap bar chart | 3,647 Kb |
| Info card jquery slideToggle | 2,168 Kb |
| Count up with commas | 4,999 Kb |
| A Pen by Shannon Range | 1,865 Kb |
| Drawing svg line with Lazy Line Painter | 2,437 Kb |
| Powerball Odds | 2,178 Kb |
| D3 line chart 2 | 2,196 Kb |
| 700 Synapses Per Second | 2,138 Kb |
| Hover.css | 13,814 Kb |
| Animated bar charts in sequence | 2,195 Kb |
Create amazing captions 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!
Similar Scripts & Codes
| Name | Username | Size |
| About Us | Francescaedits | 1,902 Kb |
| React Markdown Previewer | C0d0er | 3,190 Kb |
| Monochrome Form | AlienPiglet | 3,096 Kb |
| Responsive slide | Thorien | 2,400 Kb |
| A simple log in form made with css | Mayurelbhar | 2,160 Kb |
| Day 1 - Portfolio | Chpecson | 3,532 Kb |
| Highbrow Basic HTML Lesson 8 | Kimlarocca | 2,094 Kb |
| Scroll using CSS | Casperovic | 2,159 Kb |
| React Template | Isac | 1,241 Kb |
| Basic 3D Fullscreen Transition | Apetrov | 3,270 Kb |
Do you want hide your ip address?
Surf anonymously, prevent hackers from acquiring your IP address, send anonymous email, and encrypt your Internet connection. High speed, ultra secure, and easy to use. Instant setup. Hide Your IP Now!