cssAudio - Activefile-genericCSS - ActiveGeneric - ActiveHTML - ActiveImage - ActiveJS - ActiveSVG - ActiveText - Activefile-genericVideo - ActiveLovehtmlicon-new-collectionicon-personicon-teamlog-outoctocatpop-outspinnerstartv

Pen Settings

CSS Base

Vendor Prefixing

Add External CSS

These stylesheets will be added in this order and before the code you write in the CSS editor. You can also add another Pen here, and it will pull the CSS from it. Try typing "font" or "ribbon" below.

Quick-add: + add another resource

Add External JavaScript

These scripts will run in this order and before the code in the JavaScript editor. You can also link to another Pen here, and it will run the JavaScript from it. Also try typing the name of any popular library.

Quick-add: + add another resource

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.

            
              <!-- WATCH FULLSCREEN FOR A BETTER EXEPRIENCE-->

<div class="header-photo">
  <div class="article">
    <div class="title">Riding High</div>
  <div class="subtitle">What’s a Rascal Rodeo? Think Special Olympics in dirt<br><span>TIP FROM ME: watch fullscreen</span></div>
  </div>
</div>
<div class="container-text">  
  <div class="intro">Ann-Erica Whitemarsh wanted to be a cowgirl. Growing up in Pasco, Washington, not far from the Oregon and Idaho borders, she hoped to follow in the bootsteps of her older brother, who made it to the national steer-wrestling finals for high school students.</div>
  <div class="plain-text">
    <p>She tagged along to those finals, and in the process heard about a number of different events that occurred alongside steer-wrestling, one of which in particular piqued her interest. Even more rewarding than riding and roping, it seemed to Whitemash, was the so-called “exceptional rodeo,” for people with special needs</p>
    <p>Think Special Olympics in dirt. Dozens of kids and adults with various mental and physical disabilities rode ponies and participated in rodeo-like events. They roped wooden steer, ran around with stick horses, and sat on barrels that rocked back and forth like bulls. Whitemarsh could not help but be inspired by the stories.In 2001, when it was time to do her high school senior project, Whitemash decided to organize an exceptional rodeo in Pasco. It was a success. She went off to college for business and spent a few more years working in a cubicle, but she couldn’t shake the feeling that what she really wanted to do was organize exceptional rodeos.</p>
    <p>Whitemarsh lassoed her dream in 2011, incorporating the nonprofit Rascal Rodeo to produce rodeos for people with special needs. The first RR was held at the Kennewick (Washington) Fair, with thirty participants. The following year, RR produced four events (two each in Washington and Oregon) and seven in 2013, and is on pace to do at least twelve this year, expanding into Idaho.</p>
    <p>Rascal Rodeos take place on the same day and at the same location as professional rodeo events. Whitemarsh arranges for her group’s equipment to be set up either in the arena or just outside it, and the Rascal Rodeos usually start at 10 a.m. and run about an hour and a half.</p>
    <p>Each event draws participants from nearby communities, who register online or by phone. They have ranged in age from 2 to 70, and no disability is excluded. RR has had participants with autism, Down syndrome, schizophrenia, and other mental challenges; some of the wheelchair participants are disabled as the result of accidents.</p>
    <p>She also loves doing it so she can show parents of special needs kids that their children can do things they never imagined possible. The parents, she says, are often wary to get involved due to their experience with their kids’ limitations, and many need convincing just to show up.</p>
    <p>But here’s how it usually goes: “After a couple of minutes their child wants to see everything and touch everything, and then they really warm up and want to ride a horse,” Whitemarsh says, “and by that time the parents are crying.”</p>
    <p>At other times, it’s the kids themselves who need some persuading. That was the case with Jacob, whose mother, Laurie Sarver, brought him to his first Rascal Rodeo at the Kennewick County Fair three years ago, when he was six. It was crowded and loud, and Jacob, who has high-functioning autism, was overwhelmed.</p>
    Text + photo from <a href="https://medium.com/storytelling-for-good/riding-high-d5cd442ce318">Medium</a>
  </div>
</div>
            
          
!
            
              @import url(https://fonts.googleapis.com/css?family=Lato:300,400,700,400italic);
@import url(https://fonts.googleapis.com/css?family=Noto+Serif:400italic);

body{
  font-family: 'Lato', sans-serif;
  position:relative;
}
.header-photo{
  width:100%;
  height: 100%;
  position: relative;
  text-align: center;
  background:url("https://d262ilb51hltx0.cloudfront.net/max/1600/1*tUIJ2H14wOUGbMmrIUhn_Q.jpeg");
  background-size: cover;
  background-position: 50% 0%;
}
.header-photo:after{
  content:'';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 1;
  background-color: rgba(21,21,21,.6);
}
.container-text{
  max-width: 80%;
  width: 960px;
  margin: 0 auto;
  line-height: 1.5;
  font-size: 20px;
  text-align: center;
  margin-top: 60px;
 }
.article{
  position: absolute;
  bottom: 120px;  
  z-index:2;
  color: white;
  width: 100%;
  padding-bottom: 20px;
}
.title{
  font-size: 80px;
  font-weight: 700;
  position:relative;
  color: white;
}
.subtitle{
  font-weight: 300;
  font-size: 22px;
  padding-top: 10px;
  color: rgba(255,255,255,.6);
}
.intro{
  font-style: italic;
  font-weight: 400;
  font-size:22px;
  font-family: 'Noto Serif', serif;
}
.plain-text{
  padding: 0px 70px;
  text-align: left;  
  font-weight: 300;
}
            
          
!
            
              function fullheight(){
  var vh =$(window).height();
  $(".header-photo").css({"height": vh + "px"});
}
function scrolling(){
  var postitle = $(".article").offset().top;
  var heighttitle = $(".article").height();
  var plus = 20;
  var heighttitleplus = heighttitle + plus;
  var vh = $(window).height();
  var scrolled;
  var marginscroll = 60 + heighttitleplus;
  $(window).scroll(function(){
    scrolled = $(window).scrollTop();
    if(scrolled >= postitle){
      $(".article").css({
        "position" : "fixed", 
        "top": "0px",
        "bottom" : "auto"
      });
    }
    else{
      $(".article").css({
        "position" : "absolute", 
        "top": "auto",
        "bottom" : "120px"
      });
    }
    if(scrolled >= (vh-heighttitleplus)){
      $(".header-photo").css({
        "position": "fixed",
        "top" : -(vh-heighttitleplus) + "px"
      });
      $(".container-text").css({
        "margin-top": (vh+60) + "px"
      });      
    }
    else{
      $(".header-photo").css({
        "position": "relative",
        "top" : "auto"
      });
      $(".container-text").css({
        "margin-top": (60) + "px"
      });
    }
  });
}
function parallax(){
  var docheight = $(document).height();
  var scrolled;
  $(window).scroll(function(){
    scrolled = $(window).scrollTop();
    $(".header-photo").css({
      "background-position" : "50% " + ((scrolled/docheight)*100) + "%"
    });
  });
}

$(document).ready(function(){
  fullheight();
  scrolling();
  parallax();
});
$(window).resize(function(){
  fullheight();
  scrolling();
  parallax();
});
            
          
!
999px
Close

Asset uploading is a PRO feature.

As a PRO member, you can drag-and-drop upload files here to use as resources. Images, Libraries, JSON data... anything you want. You can even edit them anytime, like any other code on CodePen.

Go PRO

Loading ..................

Console