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.

            
              <section id="one">
			<div class="inner">
				<h1>Star Wars VII</h1>
				<h2>The Force Awakens</h2>
				<p>In May 1977, George Lucas and Twentieth Century Fox released the first Star Wars movie. And from that moment on, you could say, the Force was with us. The Bond folks might disagree, but many would argue that no recent cultural phenomenon has achieved an international, multi-generational fan base of greater magnitude than Star Wars has.</p>
			</div>
		</section>
		<section id="two">
			<div class="inner">
				<p>We are now entering a new Star Wars universe, and without Lucas at the wheel: he sold his company to Disney in 2012 for $4 billion. Following the purchases of Marvel and Pixar, the acquisition of Lucasfilm marked yet another perfectly timed deal by Disney C.E.O. Bob Iger, perhaps the finest entertainment executive ever. As contributing editor Bruce Handy reports in “An Empire Reboots,” the inaugural installment of a third trilogy—Star Wars: The Force Awakens—will prove to be a test for its new creative team, led by director J. J. Abrams and producer Kathleen Kennedy. Abrams was the visionary who rebooted the Star Trek franchise. And Kennedy has had a hand not only in all the Indiana Jones films and all the Back to the Future films but in a slew of other iconic features as well. John Williams, the god of the impossible-to-forget movie score, is back for the ride. And so are the three stars of the original Star Wars adventure: Mark Hamill, Carrie Fisher, and Harrison Ford. By the way, is there an actor alive who has been in more superb blockbusters or who has provided more enjoyment to more moviegoers than Ford?</p>

				<p>Abrams and Kennedy are relying on the new film’s box-office success to regenerate fan interest for the long haul. To attract a new generation, they’ve added a number of fresh faces, including Adam Driver, Domhnall Gleeson, Lupita Nyong’o, and John Boyega. We’ll know whether the team’s high aims succeed this December, when the first of the new movies comes out. As Handy writes, the challenge the new Star Wars team faces is daunting: “recapturing the virgin rush of one’s first encounters with the series—which, I suppose, is a fancier way of saying everyone wants a new Star Wars movie to make them feel like a kid again.”</p>

				<p>When a fabled corporate titan begins to fade, the question of when he should retire and who should replace him tends to be fraught with high boardroom drama. In the case of Sumner Redstone, the 91-year-old controlling shareholder of not one but two publicly traded media giants—CBS and Viacom—the issue of succession becomes more than just a corporate or family matter. It becomes a French farce—with elements of Shakespearean tragedy thrown in for good measure. A complicating factor in the Redstone drama is the fact that he has stated many times, and as recently as last January, that he does not intend to die. There are many in Hollywood who don’t much care for Redstone. There are few, however, who don’t admire his accomplishments. Or his grim tenacity. And when Redstone says he’s not going to die, well, who’s to argue?</p>

				<p>As contributing editor William D. Cohan reports in “Endless Sumner,” Redstone is now virtually housebound, and the final act of this drama has begun. Front and center is Redstone’s daughter, Shari, the 61-year-old vice-chairman of both CBS and Viacom. Jostling for position are his former girlfriend Manuela Herzer, a wealthy 50-year-old divorcée of Argentinean descent, and his current girlfriend, Sydney Holland, aged 43, a onetime fashion entrepreneur and part-time real-estate investor (and, briefly, a professional matchmaker). Holland is in a legal tussle with another much younger woman, an erstwhile MTV reality-show star named Heather Naylor. Holland alleges that Naylor stole her laptop computer (and what was on it). Inasmuch as Holland lives with Redstone, and Herzer remains close, the two women are now the gatekeepers, and this mélange of Redstone women promises a colorful curtain call when the play ends.</p>

				<p>The physician and writer Oliver Sacks has no rival when it comes to unspooling the mysteries of the human brain to a broad but sophisticated audience. Sacks revealed a few months ago, in a moving essay published in The New York Times, that the cancer he has been fighting for many years has now metastasized, and that he has only a little more time to live. In “The Good Doctor,” Lawrence Weschler throws open a window onto Sacks’s early life and career—using material that comes with a backstory. In the early 1980s, before Sacks was well known, he and Weschler met in New York and grew to become lifelong friends. For a period of several years the two of them would often meet two or three times a week to talk, eat, and visit natural-history museums and parks, and sometimes to go on rounds at the nursing homes run by nuns where Sacks worked with patients.</p>

				<p>Weschler kept meticulous journals of these conversations, a record that eventually comprised 14 volumes. The notebooks sat in a closet for more than three decades. When Sacks went public with the news of his terminal illness, Weschler asked for, and received, his friend’s blessing to mine those journals for scenes from Sacks’s extraordinary early life. The result is an engaging medley, with Weschler a keen observer as Sacks talks about neurological illness, poetry, and his own long struggle as a gay man to come to terms with a sexual orientation that at first he seeks to resist. Sacks’s achievements as a doctor and as a writer of uncommon empathy and compassion constitute a monument that any man—any 10 men—would envy. The way he has lived his life is part of that monument, too, and it’s a rare privilege, but also a joy, to be able to convey a sense of the man himself.</p>
			</div>
		</section>
		<section id="three">
			<div class="inner">
				<img src="img/star-wars.jpg" />
			</div>
		</section>
            
          
!
            
              html, body {
				height: 100%;
				margin: 0;
}
h1 {
  padding: 20% 0 0 0;
  margin: 0;
  text-align: center;
  font-size: 20px;
}
p {
  text-align: left;
}
#two { position: relative; }
#one,
#three {
  height: 100%;
  position: relative;
}
.inner {
  margin: 0 auto;
  max-width: 45%;
}
section#one { background-color: #FFCD00; }
section#two { background-color: #CCCCCC; }
section#three { background-color: #FF8300; }
section#two p {
  font-size: 2em;
  line-height: 3;
}
.is-active {
  background-color: #222222;
}
            
          
!
            
              var ctrl = new ScrollMagic.Controller({
  globalScreenOptions: {
    triggerHook: 'onLeave'
  }
});

var scene1_trigger = new ScrollMagic.Scene({
  triggerElement: '#one',
  duration: 100
})
.setPin('#one')
.addIndicators()
.addTo(ctrl);

var scene2_trigger = new ScrollMagic.Scene({
  triggerElement: '#two'
})
.addIndicators()
.addTo(ctrl);

var scene3_trigger = new ScrollMagic.Scene({
  triggerElement: '#three',
  duration: 1600
})
.setPin('#three')
.addIndicators()
.addTo(ctrl);
            
          
!
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