123

Pen Settings

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URL's added here will be added as <link>s in order, and before the CSS in the editor. If you link to another Pen, it will include the CSS from that Pen. If the preprocessor matches, it will attempt to combine them before processing.

+ add another resource

You're using npm packages, so we've auto-selected Babel for you here, which we require to process imports and make it all work. If you need to use a different JavaScript preprocessor, remove the packages in the npm tab.

Add External Scripts/Pens

Any URL's added here will be added as <script>s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.

+ add another resource

Use npm Packages

We can make npm packages available for you to use in your JavaScript. We use webpack to prepare them and make them available to import. We'll also process your JavaScript with Babel.

⚠️ This feature can only be used by logged in users.

Code Indentation

     

Save Automatically?

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

HTML Settings

Here you can Sed posuere consectetur est at lobortis. Donec ullamcorper nulla non metus auctor fringilla. Maecenas sed diam eget risus varius blandit sit amet non magna. Donec id elit non mi porta gravida at eget metus. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.

            
              <div id="scroll-animate">
  <div id="scroll-animate-main">
    <div class="wrapper-parallax">
      <header>
        <div class="headertext">
          <h1>Unscarred</h1>
          <h2>Karli Butler survived assault:</h2> <h2>she healed, she forgave.</h2>
        </div>
      </header>

      <section class="content">
        <p>Karli Butler rubbed her eyes. An incessant burn was all over her body. She was in incredible pain. It was everywhere. It was intensifying. It was maddening. She thought, how the hell could this be happening…again?</p>
        <p>Karli is an acid attack survivor. In 2006, Karli was assaulted in two separate but related attacks. In March, a group of men tried to kidnap her in a parking garage in Chicago’s South Loop. The group of men beat her, threw her in the trunk of
          her car, and then threw acid on her. It was a cold day though, and luckily, her winter coat absorbed most of the acid.</p>

        <p>Karli escaped using her wits. She found the trunk's release lever and devised a quick plan. She knew how many revolutions the car would need to get out of the garage from its fourth floor spot. She counted the turns. 8, 7, 6, 5, 4, 3, 2, 1. She popped the trunk, jumped out, and flagged down a neighbor to help. </p>

        <p>But a few months later, she was assaulted again in the Chicago suburb of Skokie. This time, two women held her at gunpoint. This time, she couldn't get away. This time, the effect of the acid was more serious.</p>

        <p>The acid from the second attacked burned a third of her body after burning straight through her clothes. The third degree burns destroyed the nerves in her face, head, torso, arms, and upper thigh areas.</p>

        <h3>When the Scars Formed</h3>
        <p>Karli’s recovery was hard. She fought for her life in intensive care for six and a half weeks, enduring over a dozen surgeries to rebuild the skin that the acid destroyed. Scars left from the acid, and from skin grafts to fix those areas, cover over half of her body. She needed triple the amount of calories every day so a feeding tube kept her body nourished. Controlling her body temp became a problem since the sweat glands in burned areas were destroyed. And, because she was in a bed for a month and a half, she had to practice walking again.</p>

        <p>But, these external burns were far from the most damaging, and internally, Karli didn’t know who she was anymore.</p>

        <img class="karliwall" src=http://arionne.com/wp-content/uploads/2016/11/Karli-BW-Wall.jpg>
        <blockquote class="idquote">"It was hard for me to assume a full new identity: I was one person one day, and I was someone completely different the next day, physically and emotionally."</blockquote>
        <video class="Karlivid" autoplay loop>
          <source width="560" height="315" src=http://arionne.com/wp-content/uploads/2016/11/MVI_7369.mp4 type="video/mp4">
        </video>
        <h3>Facing Off</h3>
        <p> Confronting who she saw in the mirror wasn't necessarily about appearance. Karli, someone who never broke the law, had been involved in two vicious attacks that had nothing to do with her. Though the exact reason for the attack was never made clear, all signs pointed back to someone close to Karli: her boyfriend at the time. </p>
        <p>Her ex had claimed that he knew nothing of what was going on and that if there was a reason for her to be attacked, it had nothing to do with him. Evidence later pointed to the opposite, but the damage had been done.</p>
         <p>Could she have done something different? Should she have asked more questions? And because she didn't, she'd lost so much: time, how she looked, her previous lifestyle. Everything was different and the emotional toll was overwhelming.</p>
        <blockquote class="diffquote">"So I had one horrible night when I did not sleep and I was thinking about what it would be like if I weren’t here anymore. And, when I woke up the next morning, I felt guilty for that. I said, 'I just can’t live like this. I just can’t do it.'"
        </blockquote>
        <img class="karliup" src=http://arionne.com/wp-content/uploads/2016/11/Karli-Up.jpg>
        <img class="karlilaugh" src=http://arionne.com/wp-content/uploads/2016/11/Karli-Laugh.jpg>
        <h3>A Controlled Pain</h3>
        <p class="audiodesc">After all she’d gone through, it was the emotional damage that Karli struggled with the most. She needed to focus on something else. So, she turned to something that she could control; something that healed the scars that no one else could see. <em>Click below to hear how the Chicago Marathon helped Karli overcome trauma.</em></p>
        <iframe width="100%" height="450" scrolling="no" frameborder="no" src="https://w.soundcloud.com/player/?url=https%3A//api.soundcloud.com/tracks/242026841&amp;auto_play=false&amp;hide_related=false&amp;show_comments=true&amp;show_user=true&amp;show_reposts=false&amp;visual=true"></iframe>
        <h3>The Forgiving Spirit</h3>
        <p>After Karli was physically and mentally rehabilitated, it was time to bring her healing full circle. Her spirit was still heavy with anger and hurt. Two times, she was unfairly attacked. Two times, she came face-to-face with groups of assailants who she'd never met. Two times, she was left scarred.</p>

        <p>There was something else she needed to do: forgive. She knew she needed to forgive her attackers, her ex, and above all else, herself.</p>
        <p>In an act of compassion, she wrote a letter to one of her attackers. She explained that she forgave the attacker for her actions, and she wished her a good life.</p>
        <p>There was no response.</p>
        <video class="Karlivid" autoplay loop>
          <source width="560" height="315" src=http://arionne.com/wp-content/uploads/2016/11/Karli-Video-2.mp4 type="video/mp4">
        </video>
        <p><em>Connect with Karli on her website, <a href="http://BurnedBeauty.com" target="_blank">BurnedBeauty.com</a>, for more stories and inspiration.</em></p>
        <p class="footercont"><a href="http://arionne.com" target="_blank">Arionne.com 2015</a></p>
      </section>

      <footer>

      </footer>
    </div>
  </div>
</div>
            
          
!
            
              @import url(https://fonts.googleapis.com/css?family=Playfair+Display:400,400italic,700,700italic,900,900italic);

/*#scroll-animate {
  overflow: hidden;
}*/

#scroll-animate-main {
  width: 100%;
  left: 0;
  position: fixed;
}

#heightPage,
#heightScroll {
  width: 10px;
  top: 0;
  position: absolute;
  z-index: 99;
}

#heightPage {
  left: 0;
}

#heightScroll {
  right: 0;
}

header {
  width: 100%;
  height: 100%;
  background: url(http://arionne.com/wp-content/uploads/2016/11/Karli-BW.jpg) no-repeat 50% 50%;
  background-size: cover;
  top: 0;
  position: fixed;
  z-index: -1;
}

.headertext {
  position: absolute;
  float: right;
  right: 5%; 
  top: 30%;
  width: 40%;
  margin-right: 5%;
}

.Karlivid {
  width: 100%;
  align: center;
}

.audiodesc {
  width: 100%;
  float: left;
}

.karliwall {
  width: 50%;
  margin-right: 5%;
  margin-bottom: 5%;
  margin-top: 4%;
  float: left;
}

.idwall {
  width: 30%;
  float: left;
  font-size: 2em;
}

.karliup {
  width: 50%;
  margin-left: 5%;
  margin-top: 2%;
  float: right;
  padding: 1%;
}

.karlilaugh {
  width: 50%;
  margin-left: 5%;
  float: right;
  padding: 1%;
}

.diffquote {
  width: 30%;
  float: left;
  font-size: 2em;
}

footer {
  width: 100%;
  height: 200px;
  background: gray;
  bottom: 5px;
  right: 5px;
  
  position: fixed;
  z-index: -1;
}

.content {
  padding-left: 20%;
  padding-right: 20%;
  padding-top: 5%;
  padding-bottom: 5%;
  height: 70px;
  min-height: 4100px;
  background: #ededed;
  position: relative;
  z-index: 1;
  font-family: Playfair Display;
}

.content::first-letter {
  font-size: 10em;
  font-style: italic;
  float: left;
  margin-right: 10px;
  margin-bottom: 20px;
  padding: 10px;
  line-height: .4;
}

blockquote {
  font-size: 2em;
  padding: 2%;
  margin: 2%;
}

.wrapper-parallax {
  margin-top: 100%;
  margin-bottom: 300px;
  box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.5);
}

h1 {
  text-align: right;
  padding: 0;
  margin: 0;
  width: 100%;
  height: auto;
  font-family: Playfair Display;
  font-size: 150px;
  color: #fff;
}

h2 {
 text-align: right;
  padding: 0;
  margin: 0;
  width: 100%;
  height: auto;
  font-family: Playfair Display;
  font-size: 40px;
  color: #fff;
}

h3 {
 text-align: left;
  padding-top: 5%;
  margin: 0;
  width: 100%;
  height: auto;
  font-family: Playfair Display;
  font-size: 32px;
  float: left;
}

caption {
float: left;

}

header {
  height: 100%;
}

.footercont {
  font-family: Playfair Display;
  font-size: 0.9em;
  text-align: right;
  font-style: italic;
}

header,
footer,
#scroll-animate-main {
  -webkit-transition-property: all;
  -moz-transition-property: all;
  transition-property: all;
  -webkit-transition-duration: 0.4s;
  -moz-transition-duration: 0.4s;
  transition-duration: 0.4s;
  -webkit-transition-timing-function: cubic-bezier(0, 0, 0, 1);
  -moz-transition-timing-function: cubic-bezier(0, 0, 0, 1);
  transition-timing-function: cubic-bezier(0, 0, 0, 1);
}
            
          
!
            
              function scrollFooter(scrollY, heightFooter)
{
    console.log(scrollY);
    console.log(heightFooter);

    if(scrollY >= heightFooter)
    {
        $('footer').css({
            'bottom' : '0px'
        });
    }
    else
    {
        $('footer').css({
            'bottom' : '-' + heightFooter + 'px'
        });
    }
}

$(window).load(function(){
    var windowHeight        = $(window).height(),
        footerHeight        = $('footer').height(),
        heightDocument      = (windowHeight) + ($('.content').height()) + ($('footer').height()) - 20;

    // Element size
    $('#scroll-animate, #scroll-animate-main').css({
        'height' :  heightDocument + 'px'
    });

    // Size of the header elements and content
    $('header').css({
        'height' : windowHeight + 'px',
    });

    $('.wrapper-parallax').css({
        'margin-top' : windowHeight + 'px'
    });

    scrollFooter(window.scrollY, footerHeight);

    // Scrolling
    window.onscroll = function(){
        var scroll = window.scrollY;

        $('#scroll-animate-main').css({
            'top' : '-' + scroll + 'px'
        });
        
        $('header').css({
            'background-position-y' : 50 - (scroll * 100 / heightDocument) + '%'
        });

        scrollFooter(scroll, footerHeight);
    }
});
            
          
!
999px
🕑 One or more of the npm packages you are using needs to be built. You're the first person to ever need it! We're building it right now and your preview will start updating again when it's ready.

Console