css Audio - Active file-generic CSS - Active Generic - Active HTML - Active JS - Active SVG - Active Text - Active file-generic Video - Active header Love html icon-new-collection icon-person icon-team numbered-list123 pop-out spinner split-screen star tv

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 class="animation-container clearfix">
        <div class="img-container clearfix">
            <img src="https://www.wired.com/wp-content/uploads/2016/02/jeff2.jpg" id="title-image" width="100%">
        </div>
        <div class="text-container clearfix">
            <div id="perspective-box">
                <div class="blur-hed" id="blur-text">close</div>
                <div class="blur-hed2" id="blur-text0">encounter</div>
                <div class="blur-dek" id="blur-text1">the enigmatic vision</div>
                <div class="blur-dek" id="blur-text2">of jeff nichols,</div>
                <div class="blur-dek" id="blur-text3">hollywood's next</div>
                <div class="blur-dek" id="blur-text4"> blockbuster auteur</div>
                <div class="blur-byline" id="blur-text5">by amy</div>
                <div class="blur-byline2" id="blur-text6">wallace</div>
                <div class="blur-byline3" id="blur-text7">photographs by</div>
                <div class="blur-byline4" id="blur-text8">dan winters</div>
            </div>
        </div>
    </div>
    <div class="dummy-text">
        <div class="text">
            <p>Blog pop-up keffiyeh chambray chicharrones, four dollar toast direct trade food truck bushwick banjo slow-carb tilde organic readymade asymmetrical. Thundercats tacos authentic, trust fund bicycle rights celiac gastropub cray 3 wolf moon gentrify blue bottle YOLO. Kitsch blue bottle chillwave whatever, you probably haven't heard of them umami brooklyn. Flexitarian slow-carb +1 retro beard taxidermy. Portland stumptown pinterest hoodie swag marfa. Lo-fi cardigan paleo, cornhole chillwave XOXO yuccie ethical chia 90's brunch. Pour-over church-key letterpress, meh sustainable gluten-free asymmetrical fanny pack microdosing whatever.</p>
            <p>Literally cray portland brooklyn lomo single-origin coffee food truck knausgaard vegan, master cleanse affogato tofu ethical next level. Put a bird on it +1 ennui, plaid migas iPhone bespoke affogato direct trade. Meh retro truffaut locavore, VHS synth williamsburg plaid. Meh neutra austin, venmo celiac gochujang franzen cred leggings single-origin coffee. Meditation bushwick shabby chic, brooklyn bicycle rights austin street art keffiyeh 90's humblebrag actually portland butcher. Flannel wayfarers hammock irony cred readymade shoreditch, tumblr fanny pack PBR&B everyday carry williamsburg plaid. Cold-pressed flannel you probably haven't heard of them, forage godard actually bespoke.</p>
            <p>Lo-fi chambray vinyl marfa direct trade intelligentsia. Umami dreamcatcher taxidermy cray flexitarian, intelligentsia brunch pickled. Wolf beard williamsburg, chicharrones tote bag gluten-free typewriter YOLO salvia keffiyeh fap tattooed ennui. Authentic jean shorts fanny pack, fixie health goth heirloom tilde fashion axe actually stumptown. Intelligentsia YOLO vice yuccie deep v semiotics. Tofu skateboard sartorial forage offal. Vegan plaid hammock, blog kombucha mumblecore photo booth beard +1.</p>
            <p>Marfa blue bottle heirloom, schlitz vinyl selvage flexitarian small batch mixtape biodiesel hella. Try-hard pop-up schlitz DIY, tousled bicycle rights pabst. Shabby chic blue bottle williamsburg, fashion axe lumbersexual single-origin coffee ugh scenester yuccie pickled drinking vinegar vice. Pork belly pitchfork roof party gentrify, meggings craft beer heirloom umami chicharrones PBR&B cred. Flexitarian mlkshk fashion axe, meggings squid vegan hashtag 90's vinyl kale chips affogato scenester brunch. Irony try-hard polaroid marfa, forage kitsch umami brunch butcher hammock wolf VHS narwhal gastropub. Fingerstache photo booth four loko banjo, cred fap beard blue bottle affogato.</p>
        </div>
    </div>
            
          
!
            
              body {
  margin: 0px;
}
.animation-container {
  background-color: #000;
  color: #fff;
  font-family: Futura, Futura-Medium, "Futura Medium", "Century Gothic", CenturyGothic, "Apple Gothic", AppleGothic, "URW Gothic L", "Avant Garde", sans-serif;
  font-weight: 600;
}

.img-container {
  width: 45%;
  float: left;
  position: relative;
}

.img-container img {
opacity: 0;
}


.text-container {
  position:relative;
  width: 50%;
  height: 100vh;
  float: right;
  display: flex;
  flex-direction: column;
  justify-content: center;
/*  -webkit-mask-image: url(texture4.png);*/
}

#perspective-box {

    color: rgba(255,255,255,0.5);
    text-transform: uppercase;
    margin-left: -350px;
    width: 1100px;
    height: 1000px;
    -webkit-perspective: 1400px; /* Chrome, Safari, Opera */
    -webkit-perspective-origin: 75% 40%; /* Chrome, Safari, Opera */
    perspective: 1400px;
    perspective-origin: 75% 40%;
    opacity: 0;
/*    -webkit-transition: perspective 500ms ease-in-out !important;
    transition: perspective 500ms ease-in-out !important;*/

}

.blur-hed {
    font-size: 170px;
    line-height: 150px;
    position: relative;
    -webkit-transform: rotateY(-40deg); /* Chrome, Safari, Opera */
    transform: rotateY(-50deg);
  letter-spacing: 26px;
  margin: auto;
  width: 1100px;
}
.blur-hed2 {
    font-size: 140px;
    line-height: 120px;
    position: relative;
    -webkit-transform: rotateY(-40deg); /* Chrome, Safari, Opera */
    transform: rotateY(-50deg);
  letter-spacing: 34px;
  margin: auto;
  width: 1100px;
}
.blur-dek {
    position: relative;
    -webkit-transform: rotateY(-50deg); /* Chrome, Safari, Opera */
    transform: rotateY(-50deg);
    text-align: right;
    font-weight: 500;
    font-size: 44px;
    line-height: 66px;
    width: 1100px;
    letter-spacing: 6px;
}
.blur-byline {
    position: relative;
    -webkit-transform: rotateY(-50deg); /* Chrome, Safari, Opera */
    transform: rotateY(-50deg);
    font-size: 44px;
    font-weight: 700;
    width: 1100px;
    letter-spacing: 28px;
    line-height: 60px;
}
.blur-byline2 {
    position: relative;
    -webkit-transform: rotateY(-50deg); /* Chrome, Safari, Opera */
    transform: rotateY(-50deg);
    font-size: 60px;
    font-weight: 700;
    width: 1100px;
    letter-spacing: 46px;
    line-height: 50px;
}
.blur-byline3 {
    position: relative;
    -webkit-transform: rotateY(-50deg); /* Chrome, Safari, Opera */
    transform: rotateY(-50deg);
    font-size: 30px;
    font-weight: 700;
    width: 1100px;
    letter-spacing: 20px;
    line-height: 50px;
}
.blur-byline4 {
    position: relative;
    -webkit-transform: rotateY(-50deg); /* Chrome, Safari, Opera */
    transform: rotateY(-50deg);
    font-size: 48px;
    font-weight: 700;
    width: 1100px;
    letter-spacing: 30px;
    line-height: 50px;
}
.blur-byline5 {
    position: relative;
    -webkit-transform: rotateY(-50deg); /* Chrome, Safari, Opera */
    transform: rotateY(-50deg);
    font-size: 90px;
    font-weight: 700;
    width: 1100px;
    letter-spacing: 34px;
    line-height: 10px;
}
.clearfix:after {
     visibility: hidden;
     display: block;
     font-size: 0;
     content: " ";
     clear: both;
     height: 0;
     }
.clearfix { display: inline-block; }
/* start commented backslash hack \*/
* html .clearfix { height: 1%; }
.clearfix { display: block; }
/* close commented backslash hack */

.dummy-text {
  background-color: #ffffff;
  color: #000;
  font-family: Georgia;
  font-weight: 100;
  font-size: 24px;
}
.text {
  max-width: 650px;
  padding: 50px;
  margin: auto;
}

@media only screen and (max-device-width: 1024px) {
  .img-container {
    width: 100%;

  }
  .text-container {
    width: 100%;

    }
}
            
          
!
            
              //in this codepen i wrap letters in spans, which allows me to modify each letter programatically. i then create a function to modify the blur factor on each letter based on the distance from the center of the word, and apply an additional blur and fade effect on scroll based on the users scroll position. finally, because the div containing the text must have an absolute pixel width because of the perspective shift, i use a function to apply a scale to the text container which allows the text to scale responsively to the screen.

        $(document).ready(function() {

        //variables for animations and for perspective-div resizing
        var $textContainer = $(".text-container");
        var $perspectiveBox = $("#perspective-box");
        var $img = $(".img-container img");
        var pageWidth, pageHeight;
        var basePage = {
            width: 1100,
            height: 1000,
            scale: 1,
            scaleX: 1,
            scaleY: 1
        };
        var $page = $('#perspective-box');



        function wrapWithSpans(classToWrap) {
            var i = 0;
            //creates a div to hold all the text with spans
            var holderDiv = $('<div class=".text-holder"></div>')
                //adds spans to all the text in the div we want to blur ('blur-text'), and adds the text with spans to the holder div
            while (i < $(classToWrap).text().length) {
                holderDiv.append($('<span id="char-' + i + '">' + $(classToWrap).text()[i] + '</span>'));

                i++;
            }
            //delete contents of blur-text
            $(classToWrap).empty();

            //add contents of holder div to blur-text div
            $(classToWrap).append(holderDiv.html());
        }

        function blurTheText(classToBlur, extraBlur) {
            //Add a blur effect to each span
            var i = 0;
            var letterToBlurClass = $(classToBlur + " span");
            var numberOfSpans = $(classToBlur + " > span").length;
            while (i < numberOfSpans) {
                var letterToBlur = letterToBlurClass.eq(i);
                //get the amount to blur each letter
                var returnedBlurAmount = getBlurAmount(i, numberOfSpans, letterToBlurClass, extraBlur);
                //adds the new blurry CSS to each letter that we want to blur
                letterToBlur.css({
                    "text-shadow": "0 0 " + (returnedBlurAmount) + "px rgba(255,255,255,0.8)",
                    "color": "transparent",
                });
                i++

            }
        };

        //determines how much to blur each letter, using index and number of letters (spans)
        function getBlurAmount(i, numberOfSpans, letterToBlurClass, extraBlur) {
            var middleOfString = numberOfSpans / 2
            var fontSize = parseFloat(letterToBlurClass.css("font-size"));
            var blurAmount
            extraBlur = extraBlur || 0;
            if (i < middleOfString) {
                blurAmount = (middleOfString - i) * (fontSize / 28) + extraBlur;
            } else {
                blurAmount = (i - middleOfString) * (fontSize / 28) + extraBlur;
            }
            return blurAmount;
        };

        var textLinesArr = ["#blur-text","#blur-text0","#blur-text1","#blur-text2","#blur-text3",
        "#blur-text4","#blur-text5","#blur-text6","#blur-text7","#blur-text8","#blur-text9"];

        function wrapAllLinesWithSpans () {
          var i = 0;
          while (i < textLinesArr.length) {
            wrapWithSpans(textLinesArr[i]);
            i++;
          }
        }
        wrapAllLinesWithSpans();

        //determines the extra blur amount which we use to adjust the blur while scrolling
        function adjustBlur(scrollBlurAmount) {
          var i = 0;
          while (i < textLinesArr.length) {
            blurTheText(textLinesArr[i], scrollBlurAmount);
            i++;
          }
        };
        adjustBlur(0);

        //grabbed now and debounce functions from underscore so I don't need cdn
        //debounce makes sure our resize  and our on scroll don't fire too many times
        var now = Date.now || function() {
            return new Date().getTime();
        };

        var debounce = function(func, wait, immediate) {
            var timeout, args, context, timestamp, result;

            var later = function() {
                var last = now() - timestamp;

                if (last < wait && last >= 0) {
                    timeout = setTimeout(later, wait - last);
                } else {
                    timeout = null;
                    if (!immediate) {
                        result = func.apply(context, args);
                        if (!timeout) context = args = null;
                    }
                }
            };

            return function() {
                context = this;
                args = arguments;
                timestamp = now();
                var callNow = immediate && !timeout;
                if (!timeout) timeout = setTimeout(later, wait);
                if (callNow) {
                    result = func.apply(context, args);
                    context = args = null;
                }

                return result;
            };
        };

        //animates the image on the left with a fade in
        function fadeInAnimation() {
          $img.animate({
              "opacity": 1
          }, 3000, "linear");
        }
        fadeInAnimation();

        var isSafari = Object.prototype.toString.call(window.HTMLElement).indexOf('Constructor') > 0;

        if (!isSafari) {
            //animates the perspective box to skew and blur on scroll
            $(window).scroll(debounce(function() {
                if ($(window).scrollTop() > $textContainer.height()) {
                    return
                }
                else {
                    //get the height of the perspective box container
                    var perspectiveBoxHeight = $textContainer.height();
                    var distanceFromTopOfScreen = $(window).scrollTop();
                    var percentageOfTotalScrollDistance = (distanceFromTopOfScreen / perspectiveBoxHeight);
                    var amountToChangePerspective = 500 * percentageOfTotalScrollDistance;
                    var amountToChangeOpacity = 1 - percentageOfTotalScrollDistance;
                    var extraBlur = 50 * percentageOfTotalScrollDistance;
                    debounce(adjustBlur, 150)(extraBlur);
                    $perspectiveBox.css("perspective", 1100 - amountToChangePerspective + "px");
                    $img.css("opacity", amountToChangeOpacity);
                }
            }, 1));
        }

        //resize the perspective box div responsively (as modified from https://codepen.io/cRckls/pen/mcGCL)

        //defines the size of the box we want to fill
        function getPageSize() {
            pageHeight = $textContainer.height();
            pageWidth = $textContainer.width();
        }

        //here are the functions we're using to resize the box

        getPageSize();
        scalePages($page, pageWidth, pageHeight);
        addMargins($page);

        $page.animate({
            "opacity": "1",
            "perspective": "1100px"
        }, 4000, "swing", function() {
            $page.css({
                "transition": "all 500ms ease-in-out, perspective 1ms",
                "-webkit-transition": "all 500ms ease-in-out, perspective 1ms"
            });
        });

        //using underscore to delay resize method till finished resizing window
        $(window).resize(debounce(function() {
            getPageSize();
            scalePages($page, pageWidth, pageHeight);
            addMargins($page);
        }, 150));

        //calculates and adds the scale value to the css on blur-text box
        function scalePages(page, maxWidth, maxHeight) {
            var scaleX = 1,
                scaleY = 1;
            scaleX = (maxWidth / basePage.width) * 1.3;
            scaleY = (maxHeight / basePage.height) * 1.3;
            basePage.scaleX = scaleX;
            basePage.scaleY = scaleY;
            basePage.scale = (scaleX > scaleY) ? scaleY : scaleX;

            var newLeftPos = Math.abs(Math.floor(((basePage.width * basePage.scale) - maxWidth) / 2));
            var newTopPos = Math.abs(Math.floor(((basePage.height * basePage.scale) - maxHeight) / 2));

            page.css({
                "-webkit-transform": "scale(" + basePage.scale + ")",
                "transform": "scale(" + basePage.scale + ")",
                "left": newLeftPos + "px",
                "top": newTopPos + "px"
            });
        }

        //above function doesn't position the resized box very well. this adjusts margins to help out.
        function addMargins(page) {
            var newTopMarg = 0;
            var newLeftMarg = -350;
            if (pageWidth >= 775) {
                newTopMarg = (pageWidth * .25);
                newLeftMarg = -250;
            } else {
                newTopMarg = -(140 - (pageWidth * .13));
            }
            page.css({
                "margin-top": newTopMarg + "px",
                "margin-left": newLeftMarg + "px"
            });
        }
    });
            
          
!
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.
Loading ..................

Console