HTML 5 Layerslider Animation

html-5-layerslider-animation.markdown

HTML 5 Layerslider Animation

A Pen by Richard Gonyeau on CodePen.

License.

index.html

<section id="layerslider2" style="width: 100%; height:300px; border:1px solid #ccc; padding:0;" class="container">


  <!-- first slide -->
  <div class="ls-slide" data-ls="transition2d: 5; slidedelay: 15500;">
    <div class="ls-l" style="width:100%; height:100%; background-color:#000;" data-ls="fadein:false; offsetxout:0; offsetxin:0;"></div>
    <img src="http://gonyeau.com/science/images/earth.jpg" class="ls-l" style="top:50%; left:50%;" alt="TestImage2" data-ls="offsetxin: 0; offsetxout:0;  showuntil: 0001; easingout:easeOutCubic; offsetyout:100; durationout: 9000; offsetyout: 100; durationin:3000;">
    <img src="http://gonyeau.com/science/images/flare.png" class="ls-l" style="top:30%; left:70%;" alt="TestImage2" data-ls="offsetxin: 0; offsetxout: 0; offsetyin: 800; delayin:3000; easingin:easeOutCubic; durationin:7000; showuntil:1000;">
    <h1 class="ls-l" style="top:50%; font-size:500%; left:21%; color:#fff;" data-ls="durationin: 1000; durationout: 2000; showuntil:4000; offsetxout: 0; scalexout:500; scaleyout:500;">Why</h1>
    <h1 class="ls-l" style="top:50%; font-size:500%; left:32%; color:#fff;" data-ls="durationin: 1500; durationout: 3000; showuntil:3800; offsetxout: 0; scalexout:500; scaleyout:500;">not</h1>
    <h1 class="ls-l" style="top:50%; font-size:500%; left:47%; color:#fff;" data-ls="durationin: 2000; durationout: 4000; showuntil:3600; offsetxout: 0; scalexout:500; scaleyout:500;">change</h1>
    <h1 class="ls-l" style="top:50%; font-size:500%; left:62%; color:#fff;" data-ls="durationin: 2500; durationout: 4000; showuntil:3400; offsetxout: 0; scalexout:500; scaleyout:500;">the</h1>
    <h1 class="ls-l" style="top:50%; font-size:500%; left:76%; color:#fff;" data-ls="durationin: 3000; durationout: 4000; showuntil:3400; offsetxout: 0; scalexout:500; scaleyout:500;">world?</h1>

    <h1 class="ls-l" style="top:20%; font-size:250%; width:80%; left:35%; color:#fff; text-align:center;" data-ls="durationin: 2000; delayin: 8000; offsetxout:0;">"With a degree in Biological Sciences from RPI,</h1>
    <h1 class="ls-l" style="top:38%; font-size:250%; width:80%; left:35%; color:#fff; text-align:center;" data-ls="durationin: 2000; delayin: 9500; offsetxout:0;">I literally had thousands of career options."</h1>
    <h1 class="ls-l" style="top:57%; font-size:150%; width:80%; left:50%; color:#fff; text-align:center;" data-ls="durationin: 2000; delayin: 10500; offsetxout:0;"><em>- Peter Mattingly, '13</em></h1>
    <p class="ls-l" style="top:80%; font-size:2em; width:80%; left:80%; color:#fff; text-align:center;" data-ls="offsetxin: 0; durationin: 4000; delayin: 12000; offsetxout:0;">Here are just a few:</p>

  </div>

  <!-- second slide -->
  <div class="ls-slide" data-ls="transition2d: 5; slidedelay: 7000;">
    <img src="http://gonyeau.com/science/images/bg5.jpg" class="ls-bg" alt="TestImage2">

    <h2 class="ls-l" style="padding:.25em .25em .5em; border-radius: 0 0 50% 50%; background-color:#577f04; width:25%; color:white; left:83%; text-align:center;" data-ls="offsetxin: 0; offsetyin:-10%; easingin:easeOutElastic; durationin:1000; offsetxout:0; offsetyout: -100%;">Environmental</h2>

    <h3 class="ls-l" style="color:#577f04; left:83%; top:30%; width:25%;text-align:center; white-space:nowrap;" data-ls="offsetxin:0;durationin:2500;delayin:0250;easingin:easeOutElastic;rotatexin:90;transformoriginin:50% top 0;offsetxout:0; offsetyout: 200;">Conservation Biology</h3>
    <h3 class="ls-l" style="color:#577f04; left:83%; top:43%; width:25%;text-align:center; white-space:nowrap;" data-ls="offsetxin:0;durationin:2500;delayin:0750;easingin:easeOutElastic;rotatexin:90;transformoriginin:50% top 0;offsetxout:0; offsetyout: 200;">Forestry</h3>
    <h3 class="ls-l" style="color:#577f04; left:83%; top:57%; width:25%;text-align:center; white-space:nowrap;" data-ls="offsetxin:0;durationin:2500;delayin:1250;easingin:easeOutElastic;rotatexin:90;transformoriginin:50% top 0;offsetxout:0; offsetyout: 200;">Environmental Advocacy</h3>
    <h3 class="ls-l" style="color:#577f04; left:83%; top:72%; width:25%;text-align:center; white-space:nowrap;" data-ls="offsetxin:0;durationin:2500;delayin:1750;easingin:easeOutElastic;rotatexin:90;transformoriginin:50% top 0;offsetxout:0; offsetyout: 200;">Agricultural Science</h3>
    <h3 class="ls-l" style="color:#577f04; left:83%; top:87%; width:25%;text-align:center; white-space:nowrap;" data-ls="offsetxin:0;durationin:2500;delayin:2250;easingin:easeOutElastic;rotatexin:90;transformoriginin:50% top 0;offsetxout:0; offsetyout: 200;">Renewable Energy</h3>

    <h2 class="ls-l" style="padding:.25em .25em .5em; border-radius: 0 0 50% 50%; width:25%; background-color:#577f04; color:white; left:55%; text-align:center;" data-ls="delayin:2750; offsetxin: 0; offsetyin:-10%; easingin:easeOutElastic; durationin:1000; offsetxout:0;  offsetyout: -100%;">Plant Biology</h2>

    <h3 class="ls-l" style="color:#577f04; left:55%; top:30%; width:25%;text-align:center; white-space:nowrap;" data-ls="offsetxin:0;durationin:2500;delayin:3000;easingin:easeOutElastic;rotatexin:90;transformoriginin:50% top 0;offsetxout:0; offsetyout: 200;">Botany</h3>
    <h3 class="ls-l" style="color:#577f04; left:55%; top:43%; width:25%;text-align:center; white-space:nowrap;" data-ls="offsetxin:0;durationin:2500;delayin:3500;easingin:easeOutElastic;rotatexin:90;transformoriginin:50% top 0;offsetxout:0; offsetyout: 200;">Ethnobotany</h3>
    <h3 class="ls-l" style="color:#577f04; left:55%; top:57%; width:25%;text-align:center; white-space:nowrap;" data-ls="offsetxin:0;durationin:2500;delayin:4000;easingin:easeOutElastic;rotatexin:90;transformoriginin:50% top 0;offsetxout:0; offsetyout: 200;">Horticulture</h3>
    <h3 class="ls-l" style="color:#577f04; left:55%; top:72%; width:25%;text-align:center; white-space:nowrap;" data-ls="offsetxin:0;durationin:2500;delayin:4500;easingin:easeOutElastic;rotatexin:90;transformoriginin:50% top 0;offsetxout:0; offsetyout: 200;">Landscaping</h3>
    <h3 class="ls-l" style="color:#577f04; left:55%; top:87%; width:25%;text-align:center; white-space:nowrap;" data-ls="offsetxin:0;durationin:2500;delayin:5000;easingin:easeOutElastic;rotatexin:90;transformoriginin:50% top 0;offsetxout:0; offsetyout: 200;">Molecular Breeding</h3>

  </div>

  <!-- second slide -->
  <div class="ls-slide" data-ls="transition2d: 5; slidedelay: 7000;">
    <img src="http://gonyeau.com/science/images/bg4.jpg" class="ls-bg" alt="TestImage2">

    <h2 class="ls-l" style="padding:.25em .25em .5em; border-radius: 0 0 50% 50%; background-color:#444C53; width:25%; color:white; left:83%; text-align:center;" data-ls="offsetxin: 0; offsetyin:-10%; easingin:easeOutElastic; durationin:1000; offsetxout:0; offsetyout: -100%;">Healthcare</h2>

    <h3 class="ls-l" style="color:#444C53; left:83%; top:30%; width:25%;text-align:center; white-space:nowrap;" data-ls="offsetxin:0;durationin:2500;delayin:0250;easingin:easeOutElastic;rotatexin:90;transformoriginin:50% top 0;offsetxout:0; offsetyout: 200;">Physician (MD, DO)</h3>
    <h3 class="ls-l" style="color:#444C53; left:83%; top:43%; width:25%;text-align:center; white-space:nowrap;" data-ls="offsetxin:0;durationin:2500;delayin:0750;easingin:easeOutElastic;rotatexin:90;transformoriginin:50% top 0;offsetxout:0; offsetyout: 200;">Veterinary (DVM)</h3>
    <h3 class="ls-l" style="color:#444C53; left:83%; top:57%; width:25%;text-align:center; white-space:nowrap;" data-ls="offsetxin:0;durationin:2500;delayin:1250;easingin:easeOutElastic;rotatexin:90;transformoriginin:50% top 0;offsetxout:0; offsetyout: 200;">Dentistry (DDS)</h3>
    <h3 class="ls-l" style="color:#444C53; left:83%; top:72%; width:25%;text-align:center; white-space:nowrap;" data-ls="offsetxin:0;durationin:2500;delayin:1750;easingin:easeOutElastic;rotatexin:90;transformoriginin:50% top 0;offsetxout:0; offsetyout: 200;">Optometry (OD)</h3>
    <h3 class="ls-l" style="color:#444C53; left:83%; top:87%; width:25%;text-align:center; white-space:nowrap;" data-ls="offsetxin:0;durationin:2500;delayin:2250;easingin:easeOutElastic;rotatexin:90;transformoriginin:50% top 0;offsetxout:0; offsetyout: 200;">Phlebotomy</h3>

    <h2 class="ls-l" style="padding:.25em .25em .5em; border-radius: 0 0 50% 50%; width:25%; background-color:#444C53; color:white; left:55%; text-align:center;" data-ls="delayin:2750; offsetxin: 0; offsetyin:-10%; easingin:easeOutElastic; durationin:1000; offsetxout:0; offsetyout: -100%;">Allied Health</h2>

    <h3 class="ls-l" style="color:#444C53; left:55%; top:30%; width:25%;text-align:center; white-space:nowrap;" data-ls="offsetxin:0;durationin:2500;delayin:3000;easingin:easeOutElastic;rotatexin:90;transformoriginin:50% top 0;offsetxout:0; offsetyout: 200;">Physical Therapy</h3>
    <h3 class="ls-l" style="color:#444C53; left:55%; top:43%; width:25%;text-align:center; white-space:nowrap;" data-ls="offsetxin:0;durationin:2500;delayin:3500;easingin:easeOutElastic;rotatexin:90;transformoriginin:50% top 0;offsetxout:0; offsetyout: 200;">Nursing (RN)</h3>
    <h3 class="ls-l" style="color:#444C53; left:55%; top:57%; width:25%;text-align:center; white-space:nowrap;" data-ls="offsetxin:0;durationin:2500;delayin:4000;easingin:easeOutElastic;rotatexin:90;transformoriginin:50% top 0;offsetxout:0; offsetyout: 200;;">Pharmacy (BS or PharmD)</h3>
    <h3 class="ls-l" style="color:#444C53; left:55%; top:72%; width:25%;text-align:center; white-space:nowrap;" data-ls="offsetxin:0;durationin:2500;delayin:4500;easingin:easeOutElastic;rotatexin:90;transformoriginin:50% top 0;offsetxout:0; offsetyout: 200;">Occupational Therapy</h3>
    <h3 class="ls-l" style="color:#444C53; left:55%; top:87%; width:25%;text-align:center; white-space:nowrap;" data-ls="offsetxin:0;durationin:2500;delayin:5000;easingin:easeOutElastic;rotatexin:90;transformoriginin:50% top 0;offsetxout:0; offsetyout: 200;">Dietitian/Nutrition</h3>


  </div>

  <!-- third slide -->
  <div class="ls-slide" data-ls="transition2d: 5; slidedelay: 7000;">
    <img src="http://gonyeau.com/science/images/bg3.jpg" class="ls-bg" alt="TestImage2">

    <h2 class="ls-l" style="padding:.25em .25em .5em; border-radius: 0 0 50% 50%; background-color:#665940; width:25%; color:white; left:83%; text-align:center;" data-ls="offsetxin: 0; offsetyin:-10%; easingin:easeOutElastic; durationin:1000; offsetxout:0; offsetyout: -100%;">Government</h2>

    <h3 class="ls-l" style="color:#665940; left:83%; top:30%; width:25%;text-align:center; white-space:nowrap;" data-ls="offsetxin:0;durationin:2500;delayin:0250;easingin:easeOutElastic;rotatexin:90;transformoriginin:50% top 0;offsetxout:0; offsetyout: 200;">National Health (FDA, CDC)</h3>
    <h3 class="ls-l" style="color:#665940; left:83%; top:43%; width:25%;text-align:center; white-space:nowrap;" data-ls="offsetxin:0;durationin:2500;delayin:0750;easingin:easeOutElastic;rotatexin:90;transformoriginin:50% top 0;offsetxout:0; offsetyout: 200;">Community Health Official</h3>
    <h3 class="ls-l" style="color:#665940; left:83%; top:57%; width:25%;text-align:center; white-space:nowrap;" data-ls="offsetxin:0;durationin:2500;delayin:1250;easingin:easeOutElastic;rotatexin:90;transformoriginin:50% top 0;offsetxout:0; offsetyout: 200;">Bioterrorism Expert</h3>
    <h3 class="ls-l" style="color:#665940; left:83%; top:72%; width:25%;text-align:center; white-space:nowrap;" data-ls="offsetxin:0;durationin:2500;delayin:1750;easingin:easeOutElastic;rotatexin:90;transformoriginin:50% top 0;offsetxout:0; offsetyout: 200;">Emissions Control</h3>
    <h3 class="ls-l" style="color:#665940; left:83%; top:87%; width:25%;text-align:center; white-space:nowrap;" data-ls="offsetxin:0;durationin:2500;delayin:2250;easingin:easeOutElastic;rotatexin:90;transformoriginin:50% top 0;offsetxout:0; offsetyout: 200;">Astrobiology</h3>

    <h2 class="ls-l" style="padding:.25em .25em .5em; border-radius: 0 0 50% 50%; width:25%; background-color:#665940; color:white; left:55%; text-align:center;" data-ls="delayin:2750; offsetxin: 0; offsetyin:-10%; easingin:easeOutElastic; durationin:1000; offsetxout:0; offsetyout: -100%;">Industry</h2>

    <h3 class="ls-l" style="color:#665940; left:55%; top:30%; width:25%;text-align:center; white-space:nowrap;" data-ls="offsetxin:0;durationin:2500;delayin:3000;easingin:easeOutElastic;rotatexin:90;transformoriginin:50% top 0;offsetxout:0; offsetyout: 200;">Pharmaceutical Research</h3>
    <h3 class="ls-l" style="color:#665940; left:55%; top:43%; width:25%;text-align:center; white-space:nowrap;" data-ls="offsetxin:0;durationin:2500;delayin:3500;easingin:easeOutElastic;rotatexin:90;transformoriginin:50% top 0;offsetxout:0; offsetyout: 200;">Drug Testing/Quality Control</h3>
    <h3 class="ls-l" style="color:#665940; left:55%; top:57%; width:25%;text-align:center; white-space:nowrap;" data-ls="offsetxin:0;durationin:2500;delayin:4000;easingin:easeOutElastic;rotatexin:90;transformoriginin:50% top 0;offsetxout:0; offsetyout: 200;">Food Safety Expert</h3>
    <h3 class="ls-l" style="color:#665940; left:55%; top:72%; width:25%;text-align:center; white-space:nowrap;" data-ls="offsetxin:0;durationin:2500;delayin:4500;easingin:easeOutElastic;rotatexin:90;transformoriginin:50% top 0;offsetxout:0; offsetyout: 200;">Zymurgy (Beer/Winemaking)</h3>
    <h3 class="ls-l" style="color:#665940; left:55%; top:87%; width:25%;text-align:center; white-space:nowrap;" data-ls="offsetxin:0;durationin:2500;delayin:5000;easingin:easeOutElastic;rotatexin:90;transformoriginin:50% top 0;offsetxout:0; offsetyout: 200;">Forensics</h3>

  </div>


  <!-- fourth slide -->
  <div class="ls-slide" data-ls="transition2d: 5; slidedelay: 17500;">
    <div class="ls-l" style="width:100%; height:100%; background-color:#000;" data-ls="offsetxin:0; offsetxout:0;"></div>

    <p class="ls-l" style="top:40%; font-size:250%; width:60%; left:33%; color:#fff; text-align:right;" data-ls="durationin: 2000; offsetxout:0; showuntil: 12500;">Why not become part of something</p>

    <p class="ls-l" style="top:40%; font-size:250%; width:60%; left:94%; color:#F9EDBF; text-align:left;" data-ls="durationin: 0001; durationout:2000; delayin: 2500; showuntil: 0001; offsetxout:0; offsetxin: 0;"><em>big?</em></p>
    <p class="ls-l" style="top:40%; font-size:250%; width:60%; left:94%; color:#F9EDBF; text-align:left;" data-ls="durationin: 0001; durationout:2000; delayin: 4000; showuntil: 0001; offsetxout:0; offsetxin: 0;"><em>far-reaching?</em></p>
    <p class="ls-l" style="top:40%; font-size:250%; width:60%; left:94%; color:#F9EDBF; text-align:left;" data-ls="durationin: 0001; durationout:1500; delayin: 5500; showuntil: 0001; offsetxout:0; offsetxin: 0;"><em>significant?</em></p>
    <p class="ls-l" style="top:40%; font-size:250%; width:60%; left:94%; color:#F9EDBF; text-align:left;" data-ls="durationin: 0001; durationout:1500; delayin: 6500; showuntil: 0001; offsetxout:0; offsetxin: 0;"><em>decisive?</em></p>
    <p class="ls-l" style="top:40%; font-size:250%; width:60%; left:94%; color:#F9EDBF; text-align:left;" data-ls="durationin: 0001; durationout:1500; delayin: 7400; showuntil: 0001; offsetxout:0; offsetxin: 0;"><em>meaningful?</em></p>
    <p class="ls-l" style="top:40%; font-size:250%; width:60%; left:94%; color:#F9EDBF; text-align:left;" data-ls="durationin: 0001; durationout:1500; delayin: 8300; showuntil: 0001; offsetxout:0; offsetxin: 0;"><em>critical?</em></p>
    <p class="ls-l" style="top:40%; font-size:250%; width:60%; left:94%; color:#F9EDBF; text-align:left;" data-ls="durationin: 0001; durationout:1500; delayin: 9000; showuntil: 0001; offsetxout:0; offsetxin: 0;"><em>relevant?</em></p>
    <p class="ls-l" style="top:40%; font-size:250%; width:60%; left:94%; color:#F9EDBF; text-align:left;" data-ls="durationin: 0001; durationout:1500; delayin: 9600; showuntil: 0001; offsetxout:0; offsetxin: 0;"><em>serious?</em></p>
    <p class="ls-l" style="top:40%; font-size:250%; width:60%; left:94%; color:#F9EDBF; text-align:left;" data-ls="durationin: 0001; durationout:1500; delayin: 10100; showuntil: 0001; offsetxout:0; offsetxin: 0;"><em>necessary?</em></p>
    <p class="ls-l" style="top:40%; font-size:250%; width:60%; left:94%; color:#F9EDBF; text-align:left;" data-ls="durationin: 0001; durationout:1000; delayin: 10500; showuntil: 0001; offsetxout:0; offsetxin: 0;"><em>great?</em></p>
    <p class="ls-l" style="top:40%; font-size:250%; width:60%; left:94%; color:#F9EDBF; text-align:left;" data-ls="durationin: 0001; durationout:1000; delayin: 10900; showuntil: 0001; offsetxout:0; offsetxin: 0;"><em>inlfuential?</em></p>
    <p class="ls-l" style="top:40%; font-size:250%; width:60%; left:94%; color:#F9EDBF; text-align:left;" data-ls="durationin: 0001; durationout:1000; delayin: 11200; showuntil: 0001; offsetxout:0; offsetxin: 0;"><em>impactful?</em></p>
    <p class="ls-l" style="top:40%; font-size:250%; width:60%; left:94%; color:#F9EDBF; text-align:left;" data-ls="durationin: 0001; durationout:1000; delayin: 11500; showuntil: 0001; offsetxout:0; offsetxin: 0;"><em>essential?</em></p>
    <p class="ls-l" style="top:40%; font-size:250%; width:60%; left:94%; color:#F9EDBF; text-align:left;" data-ls="durationin: 0001; durationout:1000; delayin: 11800; showuntil: 0001; offsetxout:0; offsetxin: 0;"><em>imperative?</em></p>
    <p class="ls-l" style="top:40%; font-size:250%; width:60%; left:94%; color:#F9EDBF; text-align:left;" data-ls="durationin: 0001; durationout:1000; delayin: 12000; showuntil: 0001; offsetxout:0; offsetxin: 0;"><em>weighty?</em></p>
    <p class="ls-l" style="top:40%; font-size:250%; width:60%; left:94%; color:#F9EDBF; text-align:left;" data-ls="durationin: 0001; durationout:1000; delayin: 12200; showuntil: 0001; offsetxout:0; offsetxin: 0;"><em>pressing?</em></p>
    <p class="ls-l" style="top:40%; font-size:250%; width:60%; left:94%; color:#F9EDBF; text-align:left;" data-ls="durationin: 0001; durationout:1000; delayin: 12400; showuntil: 0001; offsetxout:0; offsetxin: 0;"><em>marked?</em></p>
    <p class="ls-l" style="top:40%; font-size:250%; width:60%; left:94%; color:#F9EDBF; text-align:left;" data-ls="durationin: 0001; durationout:1000; delayin: 12600; showuntil: 0001; offsetxout:0; offsetxin: 0;"><em>esteemed?</em></p>
    <p class="ls-l" style="top:40%; font-size:250%; width:60%; left:94%; color:#F9EDBF; text-align:left;" data-ls="durationin: 0001; durationout:1000; delayin: 12800; showuntil: 0001; offsetxout:0; offsetxin: 0;"><em>considerable?</em></p>
    <p class="ls-l" style="top:40%; font-size:250%; width:60%; left:94%; color:#F9EDBF; text-align:left;" data-ls="durationin: 0001; durationout:1000; delayin: 12900; showuntil: 0001; offsetxout:0; offsetxin: 0;"><em>big-league?</em></p>
    <p class="ls-l" style="top:40%; font-size:250%; width:60%; left:94%; color:#F9EDBF; text-align:left;" data-ls="durationin: 0001; durationout:1000; delayin: 13000; showuntil: 0001; offsetxout:0; offsetxin: 0;"><em>paramount?</em></p>
    <p class="ls-l" style="top:40%; font-size:250%; width:60%; left:94%; color:#F9EDBF; text-align:left;" data-ls="durationin: 0001; durationout:1000; delayin: 13100; showuntil: 0001; offsetxout:0; offsetxin: 0;"><em>weighty?</em></p>
    <p class="ls-l" style="top:40%; font-size:250%; width:60%; left:94%; color:#F9EDBF; text-align:left;" data-ls="durationin: 0001; durationout:1000; delayin: 13200; showuntil: 0001; offsetxout:0; offsetxin: 0;"><em>pressing?</em></p>
    <p class="ls-l" style="top:40%; font-size:250%; width:60%; left:94%; color:#F9EDBF; text-align:left;" data-ls="durationin: 0001; durationout:1000; delayin: 13300; showuntil: 0001; offsetxout:0; offsetxin: 0;"><em>marked?</em></p>
    <p class="ls-l" style="top:40%; font-size:250%; width:60%; left:94%; color:#F9EDBF; text-align:left;" data-ls="durationin: 0001; durationout:1000; delayin: 13400; showuntil: 0001; offsetxout:0; offsetxin: 0;"><em>esteemed?</em></p>
    <p class="ls-l" style="top:40%; font-size:250%; width:60%; left:94%; color:#F9EDBF; text-align:left;" data-ls="durationin: 0001; durationout:1000; delayin: 13500; showuntil: 0001; offsetxout:0; offsetxin: 0;"><em>considerable?</em></p>
    <p class="ls-l" style="top:40%; font-size:250%; width:60%; left:94%; color:#F9EDBF; text-align:left;" data-ls="durationin: 0001; durationout:1000; delayin: 13600; showuntil: 0001; offsetxout:0; offsetxin: 0;"><em>big-league?</em></p>
    <p class="ls-l" style="top:40%; font-size:250%; width:60%; left:94%; color:#F9EDBF; text-align:left;" data-ls="durationin: 0001; durationout:1000; delayin: 13700; showuntil: 0001; offsetxout:0; offsetxin: 0;"><em>imperative?</em></p>
    <p class="ls-l" style="top:40%; font-size:250%; width:60%; left:94%; color:#F9EDBF; text-align:left;" data-ls="durationin: 0001; durationout:1000; delayin: 13800; showuntil: 0001; offsetxout:0; offsetxin: 0;"><em>weighty?</em></p>
    <p class="ls-l" style="top:40%; font-size:250%; width:60%; left:94%; color:#F9EDBF; text-align:left;" data-ls="durationin: 0001; durationout:1000; delayin: 13900; showuntil: 0001; offsetxout:0; offsetxin: 0;"><em>pressing?</em></p>
    <p class="ls-l" style="top:40%; font-size:250%; width:60%; left:94%; color:#F9EDBF; text-align:left;" data-ls="durationin: 0001; durationout:1000; delayin: 14000; showuntil: 0001; offsetxout:0; offsetxin: 0;"><em>marked?</em></p>
    <p class="ls-l" style="top:40%; font-size:250%; width:60%; left:94%; color:#F9EDBF; text-align:left;" data-ls="durationin: 0001; durationout:1000; delayin: 14100; showuntil: 0001; offsetxout:0; offsetxin: 0;"><em>esteemed?</em></p>
    <p class="ls-l" style="top:40%; font-size:250%; width:60%; left:94%; color:#F9EDBF; text-align:left;" data-ls="durationin: 0001; durationout:1000; delayin: 14200; showuntil: 0001; offsetxout:0; offsetxin: 0;"><em>considerable?</em></p>
    <p class="ls-l" style="top:40%; font-size:250%; width:60%; left:94%; color:#F9EDBF; text-align:left;" data-ls="durationin: 0001; durationout:1000; delayin: 14300; showuntil: 0001; offsetxout:0; offsetxin: 0;"><em>awesome?</em></p>

    <p class="ls-l" style="top:50%; font-size:250%; width:80%; left:50%; color:#fff; text-align:center;" data-ls="durationin: 2000; delayin: 15500; offsetxout:0; offsetxin: 0; easingin: easeOutQuint;">In other words...</p>


  </div>

</section>
<!-- END #layerslider -->

script.js

// Running the code when the document is ready
$(document).ready(function() {

  // Calling LayerSlider on the target element
  $('#layerslider2').layerSlider({
    responsiveUnder: 1450,
    layersContainer: 1900,
    skin: 'noskin',
    skinsPath: 'layerslider/skins/',
    pauseOnHover: false,
    showCircleTimer: false,
    navStartStop: false,
    navButtons: false

    // Slider options goes here,
    // please check the 'List of slider options' section in the documentation
  });
});

scripts

<script src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/510562/jquery.js"></script>
<script src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/510562/greensock.js"></script>
<script src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/510562/layerslider.transitions.js"></script>
<script src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/510562/layerslider.kreaturamedia.jquery.js"></script>

styles

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css" rel="stylesheet" />
<link href="https://s3-us-west-2.amazonaws.com/s.cdpn.io/510562/modern-business.css" rel="stylesheet" />
<link href="https://s3-us-west-2.amazonaws.com/s.cdpn.io/510562/layerslider.css" rel="stylesheet" />
<link href="https://s3-us-west-2.amazonaws.com/s.cdpn.io/510562/biology.css" rel="stylesheet" />