Presentation Template with Animation

Developer
Andy Hullinger
Size
4,597 Kb
Views
26,312
  1. Presentation Template with Animation Previews
  2. Presentation Template with Animation HTML Codes
  3. Presentation Template with Animation CSS Codes
  4. Presentation Template with Animation JS Codes

How do I make an presentation template with animation?

A quick port of the Reveal.js framework into codepen so that I can house my presentations for the classes I teach.. What is a presentation template with animation? How do you make a presentation template with animation? This script and codes were developed by Andy Hullinger on 15 September 2022, Thursday.

Presentation Template with Animation Previews
IQ Test

Presentation Template with Animation - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Presentation Template with Animation</title> <link rel='stylesheet prefetch' href='http://dev.andyhullinger.com/reveal/css/reveal.min.css'>
<link rel='stylesheet prefetch' href='http://dev.andyhullinger.com/reveal/css/theme/blood.css'> <style> /* NOTE: The styles were added inline because Prefixfree needs access to your styles and they must be inlined if they are on local disk! */ body{
background: radial-gradient(ellipse at center, #e53437 0%,#c90404 30%,#680600 70%);
}
.reveal p{ font-size: 1.2em; line-height: 1.3em;
}
.reveal p.shadow{	margin-top: 100px; text-shadow: 2px 2px 6px #000;
}
.reveal p small{	font-size: .8em;	color:rgba(0,0,0,.6); margin: 50px;
} </style> <script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
</head>
<body> <div class="reveal white"> <div class="slides"> <section> <h1>Direct <strike>Mail</strike> Response</h1> </section> <section>	<h1>TV, Radio, Print</h1> <hr /> <h4>above and below the line</h4> <hr /> <h2>Direct, Promotions, Online, OOH, Everything else...</h2> </section> <section data-background="https://s3-us-west-2.amazonaws.com/s.cdpn.io/1412/lester.png" data-background-size="50%" data-background-position="center 20px" > <p class='shadow'>“Advertising ought to be totally accountable. If people are going to spend money on it they ought to know what effect the expense is having.”<br/> <q>-Lester Wunderman</q> </p> </section> <section data-state="traitsSlide"> <h2>DRM Traits</h2> <ul id="list"> <li>Data “Based”</li> <li>Addressabilty</li> <li>Elicit A Response</li> <li>Measurable</li> </ul> <p><small>A singular focus on getting individual customers to take action and tracking when, where, and if they do.</small></p> </section> <section> <section> <h3>Direct Marketing Channels</h3> <ul> <li>Direct Mail</li> <li>Telemarketing</li> <li>eMail Marketing</li> <li>Direct Response TV</li> <li>Online Display Advertising</li> <li>Direct Selling</li> </ul> </section> <section> <h3>Commonly Known As...</h3> <ul> <li>Junk Mail</li> <li>1-800 Numbers</li> <li>SPAM</li> <li>Infomercials</li> <li>Banner Ads</li> <li>Tupperware Parties</li> </ul> </section> </section> <section> <h3>The DMA</h3> <p><a href="http://en.wikipedia.org/wiki/Direct_Marketing_Association_(United_States)">The Direct Marketing Association</a></p> <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/1412/DMA.png"/> </section> <section data-state="adAgeSlide" data-background="http://www.thedofl.com/blog/wp-content/uploads/2010/10/adage1.jpg"> <h1 id="title"><a href="http://adage.com/">Ad Age</a></h1> </section> <section> <h3>Efficacy of Best DRM Tactics</h3> <ul> <li><b>Targeting:</b> up to 6 times the response</li> <li><b>Offer:</b> up to 3 times the response</li> <li><b>Timing:</b> up to 2 times the response</li> <li><b>Ease:</b> up to 1.35 times the response</li> <li><b>Creativity:</b> up to 1.2 times the response</li> </ul> </section> <section> <section> <h2>Call To Action</h2> <ol> <li>What do I want a subscriber to do?</li> <li>How will they know what to do?</li> <li>Why should they do it?</li> </ol> </section> <section> <h4>Avoid Weak or Passive Language</h4> <h2>Click Here</h2> <p>While “click here” may seem like a great CTA (in that it tells you exactly what to do), it really doesn’t give any incentive for taking action or describe the value or what will happen you do click the link.</p> </section> <section> <h4>Use descriptive verbs<br/>create sense of urgency.</h4> <ul> <li>Shop our Fall collection now</li> <li>Access your account</li> <li>Get 50% off today</li> <li>Start testing</li> <li>Learn more</li> </ul> </section> <section> <h4><strike>BUY NOW</strike> vs SHOP NOW</h4> <p>High commitment propositions, like alluding to spending time or money, can be intimidating. <strong>LEARN MORE</strong> drives consideration and rewards attention.</p> </section> </section> <section> <section data-background="https://s3-us-west-2.amazonaws.com/s.cdpn.io/1412/gunn.jpg"> </section> <section data-background="https://s3-us-west-2.amazonaws.com/s.cdpn.io/1412/gunn.jpg"> <h1><a href="https://www.youtube.com/watch?v=8CCcJZgOGlQ">12 Types of Ads</a></h1> <h3>Donald Gunn, Leo Burnett, 1978</h3> </section> <section> <ol> <li>Demo</li> <li>Show the Need or Problem</li> <li>Symbol, Analogy, Exaggerated PROBLEM</li> <li>Comparison</li> <li>Exemplary Story</li> <li>Benefit Causes Story</li> <li>Testimonial</li> <li>Characters and Celebrities</li> <li>Symbol, Analogy, Exaggerated BENEFIT</li> <li>Associated User Imagery</li> <li>Unique Personality Property</li> <li>Parody or borrowed format</li> </ol>
</section>
</section> </div>
</div> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script src='http://dev.andyhullinger.com/reveal/lib/js/head.min.js'></script>
<script src='http://dev.andyhullinger.com/reveal/js/reveal.min.js'></script>
<script src='http://cdnjs.cloudflare.com/ajax/libs/gsap/1.12.1/TweenMax.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

Presentation Template with Animation - Script Codes CSS Codes

body{
background: radial-gradient(ellipse at center, #e53437 0%,#c90404 30%,#680600 70%);
}
.reveal p{ font-size: 1.2em; line-height: 1.3em;
}
.reveal p.shadow{	margin-top: 100px; text-shadow: 2px 2px 6px #000;
}
.reveal p small{	font-size: .8em;	color:rgba(0,0,0,.6); margin: 50px;
}

Presentation Template with Animation - Script Codes JS Codes

/*A quick port of the Reveal.js framework into codepen so that I can house my presentations for the classes I teach.
I'm combining the essentials of Hakim El Hattab's excellent Reveal.js presentation framework. (https://github.com/hakimel/reveal.js) with Jack Doyle's GSAP "greensock" animation platform (https://www.greensock.com/) to see if I can rival Keynote's slidey goodness.*/
Reveal.initialize({ slideNumber: true, history:true,
});
/*Quick use of the TweenMax with Reveal.js simply add the Reveal "data-state" attribute to the section (slide) you want to add animation to and with the Reveal.addEventListener API call you wrap you Tween in an anonymous function. HINT: Using the ".from" method of TweenMax is perfect for building your slide into view
*/
Reveal.addEventListener('traitsSlide', function(){ TweenMax.staggerFrom('#list li', 0.5, {delay:1, scale:0, alpha:0, ease:'Back.easeOut'}, 0.25);
});
Reveal.addEventListener('adAgeSlide', function(){ TweenMax.from('#title', .7, {delay:2, scale:4, alpha:0, ease:'Power1.easeOut'});
});
Presentation Template with Animation - Script Codes
Presentation Template with Animation - Script Codes
Home Page Home
Developer Andy Hullinger
Username andyhullinger
Uploaded September 15, 2022
Rating 4
Size 4,597 Kb
Views 26,312
Do you need developer help for Presentation Template with Animation?

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!

Andy Hullinger (andyhullinger) Script Codes
Name
Banner Example
A Pen by Andy Hullinger
Example Infographic
Landing Page Demo
Solved By Flexbox - an excerpt
Simple Parallax ala Nike Better World
Rolling Stone Example
Semantic HTML for animated menus
Simple example infographic pen
Mageractive Class 1
Create amazing sales emails 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!