MEDIUM-STYLE PAGE TRANSITION

    Rating: ★★★★☆
    View: 223
    Download: 160
    Từ khóa:

    Medium, a blogging platform which has gained popularity over the past several months, has one of the smoothest, most polished user interfaces on the web. As you click and touch the interface, you’ll notice that great attention has been paid to transitions, white space, color, fonts, imagery, and iconography.

    In this article, I will outline how to achieve Medium’s page transition effect—an effect that can be seen by clicking anywhere on the “Read Next” footer at the bottom of the page. This effect is characterized by the lower article easing upward as the current article fades up and out. See the animation below for an illustration of this effect.

    article-animation

    HTML

    In this demo, the page first loads with barebones HTML, which we’ll use as a template that will be filled in later with Ajax’d-in data. Below is what our  looks like on initial page load. One main 

     tag. Pretty simple, eh?

    
      
    
    Once the content is Ajax’d-in, the  looks something like so:
    
      

    The page currently being viewed has a class of current, and the next article has a class of next. The next article only has its large image being shown at the bottom of the page, which, when clicked on, brings it into focus.

    CSS

    The styles in this demo which control the article transitions are both applied dynamically via jQuery’s css() method, as well as by applying classes to the 

    elements using jQuery’s addClass() method.

    Here’s a rundown of the pertinent classes used:

    article.page.hidden { 
        display: none
    }
     
    article.page.content-hidden .content { 
        display: none
    }
     
    article.fade-up-out {
        opacity: 0;
        transform: scale(0.8) translate3d(0, -10%, 0);
        transition: all 450ms cubic-bezier(0.165, 0.840, 0.440, 1.000);
    }
     
    article.easing-upward {
        transition: all 450ms cubic-bezier(0.165, 0.840, 0.440, 1.000);
    }

    JAVASCRIPT

    Before getting into the Javascript code, I want to first outline the algorithm used to transition the “next” article upward, and transition the “current” article up and away.

    User clicks on big image of next article:

    1. Disable scrolling on the page
    2. Fade current article to opacity of 0, a scale of 0.8, and move it upward by 10%.
    3. Show the next article’s content, give it smooth transitions, then move it upward to the top of the window
    4. After 500ms:
      1. Remove the current article from the DOM
      2. Remove smooth transitions from next article
      3. Scroll to top of page programmatically.
      4. Make next article the current article
      5. Enable scroll on the page
      6. Make Ajax request for next article’s content

    The Code

    ArticleAnimator.animatePage = function(callback){
      var self              = this;
      var translationValue  = this.$next.get(0).getBoundingClientRect().top;
      this.canScroll        = false;
     
      this.$current.addClass('fade-up-out');
     
      this.$next.removeClass('content-hidden next')
           .addClass('easing-upward')
           .css({ "transform": "translate3d(0, -"+ translationValue +"px, 0)" });
     
      setTimeout(function(){
          scrollTop();
          self.$next.removeClass('easing-upward')
              self.$current.remove();
     
          self.$next.css({ "transform": "" });
              self.$current = self.$next.addClass('current');
     
          self.canScroll = true;
          self.currentPostIndex = self.nextPostIndex( self.currentPostIndex );
     
          callback();
      }, self.animationDuration + 300 );
    }

    Throughout the CSS & Javascript code, you’ll notice that, in order to achieve fluid animations, I am using transform: translate3d(x,y,z) to move my DOM elements. By doing this, we “hardware accelerate” the DOM elements movement. This method is preferred over animating an element using top/left or transform: translate(x,y,z), which are not hardware accelerated by default.

    loading Đang tải...

    template được ưa chuộng