Pen Settings

HTML

CSS

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URLs added here will be added as <link>s in order, and before the CSS in the editor. You can use the CSS from another Pen by using its URL and the proper URL extension.

+ add another resource

JavaScript

Babel includes JSX processing.

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

Packages

Add Packages

Search for and use JavaScript packages from npm here. By selecting a package, an import statement will be added to the top of the JavaScript editor for this package.

Behavior

Auto Save

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.

Format on Save

If enabled, your code will be formatted when you actively save your Pen. Note: your code becomes un-folded during formatting.

Editor Settings

Code Indentation

Want to change your Syntax Highlighting theme, Fonts and more?

Visit your global Editor Settings.

HTML

              
                <h1>New York Stories</h1>
<h2>Scroll</h2>
<span id="directionality">▼</span>
<p>In my younger and more vulnerable years my father gave me some advice that I've been turning over in my mind ever since.</p>
<p>"Whenever you feel like criticizing anyone," he told me, "just remember that all the people in this world haven't had the advantages that you've had."</p>
<p>He didn't say any more but we've always been unusually communicative in a reserved way, and I understood that he meant a great deal more than that. In consequence I'm inclined to reserve all judgments, a habit that has opened up many curious natures to me and also made me the victim of not a few veteran bores. The abnormal mind is quick to detect and attach itself to this quality when it appears in a normal person, and so it came about that in college I was unjustly accused of being a politician, because I was privy to the secret griefs of wild, unknown men. Most of the confidences were unsought--frequently I have feigned sleep, preoccupation, or a hostile levity when I realized by some unmistakable sign that an intimate revelation was quivering on the horizon--for the intimate revelations of young men or at least the terms in which they express them are usually plagiaristic and marred by obvious suppressions. Reserving judgments is a matter of infinite hope. I am still a little afraid of missing something if I forget that, as my father snobbishly suggested, and I snobbishly repeat a sense of the fundamental decencies is parcelled out unequally at birth.</p>
<p>And, after boasting this way of my tolerance, I come to the admission that it has a limit. Conduct may be founded on the hard rock or the wet marshes, but after a certain point I don’t care what it’s founded on. When I came back from the East last autumn I felt that I wanted the world to be in uniform and at a sort of moral attention forever; I wanted no more riotous excursions with privileged glimpses into the human heart. Only Gatsby, the man who gives his name to this book, was exempt from my reaction — Gatsby, who represented everything for which I have an unaffected scorn. If personality is an unbroken series of successful gestures, then there was something gorgeous about him, some heightened sensitivity to the promises of life, as if he were related to one of those intricate machines that register earthquakes ten thousand miles away. This responsiveness had nothing to do with that flabby impressionability which is dignified under the name of the “creative temperament.”— it was an extraordinary gift for hope, a romantic readiness such as I have never found in any other person and which it is not likely I shall ever find again. No — Gatsby turned out all right at the end; it is what preyed on Gatsby, what foul dust floated in the wake of his dreams that temporarily closed out my interest in the abortive sorrows and short-winded elations of men.</p>
	
              
            
!

CSS

              
                @font-face {
			font-family: 'Calluna';
			src: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/4273/CallunaSansRegular.otf") format("opentype");
}
* {
	box-sizing: border-box;
}

body {
	font-family: Calluna, Arial, sans-serif;
	background: -webkit-linear-gradient(rgba(255, 255, 255, 0), rgba(255, 255, 255, 0)), url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/4273/times-square-perspective.jpg);
	background: linear-gradient(rgba(255, 255, 255, 0), rgba(255, 255, 255, 0)), url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/4273/times-square-perspective.jpg);
	background-repeat: no-repeat;
	background-attachment: fixed !important;
	background-size: 100% !important;
	background-position: center top !important;
	padding: 1rem;
	padding-top: 45%;
	color: #fff;
}

h1 {~
	font-size: 4rem;
	text-shadow: 0 0 5px rgba(0, 0, 0, 0.5);
	line-height: 1;
	position: absolute;
	top: 10px;
	font-weight: 100;
}

p {
	font-size: 1.3rem;
	text-align: left;
	line-height: 1.6;
	margin-left: 8rem;
	margin-right: 8rem;
	color: #000;
}

h2 {
	text-align: center;
	text-transform: uppercase;
	margin-bottom: 0;
}

span {
	display: block;
	margin: 0;
	text-align: center;
	font-size: 3rem;
}
              
            
!

JS

              
                var firstTextOffsetTop = document.querySelector("p").offsetTop; // 첫 번째 p 요소의 offsetTop 값
// console.log(firstTextOffsetTop);
// 516
window.onscroll = function() { // 윈도우 스크롤이 발생하면 실행..
	if (window.pageYOffset > 0) { // 윈도우 창의 Y 오프셋 값이 0 이상이라면..
		var setOpacity = (window.pageYOffset / firstTextOffsetTop);
		console.log(setOpacity);
		// 선형 그라디언트로 rgba 를 적용, 그라디언트 위에서 아래가 기본값으로 방향 생략함, 텍스트가 있는 영역에 가까울수록 opacity 증가. 즉, 1이 될때까지...
		document.body.style.background = "linear-gradient(rgba(255, 255, 255, " + setOpacity + "), rgba(255, 255, 255, " + setOpacity + ")), url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/4273/times-square-perspective.jpg) no-repeat";
	}
}
              
            
!
999px

Console