LOADING...

Preview

Pen ID
Unlock Campus Themeforest adv

 

Code

iMac

With Retina 5k Display

The most stunningly powerful iMac yet.

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Saepe consequuntur consectetur ipsam sit aspernatur tenetur natus enim voluptates fuga ea eius fugit vero esse nesciunt delectus eveniet, error, nihil earum?

Action Link >

OS X Yosemite. The world’s most advanced desktop operating system.

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Saepe consequuntur consectetur ipsam sit aspernatur tenetur natus enim voluptates fuga ea eius fugit vero esse nesciunt delectus eveniet, error, nihil earum?

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Libero illo voluptatum, eos magni illum quaerat, cupiditate tenetur commodi. Architecto nobis blanditiis expedita quae error voluptatem quaerat deleniti itaque fugiat mollitia?Facere est fugit natus earum quod eaque corrupti similique, accusantium aliquid magnam voluptatem, minus consequatur ut ratione nostrum libero quia nisi at veniam, officia reprehenderit! Culpa libero, id quos tempora.

Action Link >

The world’s most advanced desktop operating system.

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Saepe consequuntur consectetur ipsam sit aspernatur tenetur natus enim voluptates fuga ea eius fugit vero esse nesciunt delectus eveniet, error, nihil earum?

Action Link >

Our best built-in apps. The best they’ve ever looked.OS X Yosemite.

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Saepe consequuntur consectetur ipsam sit aspernatur tenetur natus enim voluptates fuga ea eius fugit vero esse nesciunt delectus eveniet, error, nihil earum?

Action Link >
CSS
.text-content {
  width: 50%;
  padding-left: 5%;
  margin-left: 50%;
  padding-top: 200px;
  z-index: 1;
  position: relative;
  min-height: 200px;
}

.imac-scrolling {
  position: relative;
  padding-bottom: 100px;
}

.imac-container {
  position: absolute;
  top: 0;
  z-index: 1;
  height: 100%;
}
.imac-container.fixed {
  position: fixed;
  top: 1px;
}

.retina-imac {
  background: url("https://www.apple.com/v/imac-with-retina/a/images/overview/apps_start_large_2x.jpg");
  display: block;
  position: absolute;
  height: 1494px;
  width: 766px;
  margin: 0;
  padding: 0;
  background-size: 766px 1494px;
  position: absolute;
  margin-left: -253px;
  top: 0;
  bottom: auto;
}
.retina-imac.fixed {
  position: fixed;
  top: 1px;
}

* {
  box-sizing: border-box;
}

body {
  color: #333;
}

a {
  color: #08c;
  text-decoration: none;
}

p {
  font-size: 16px;
  font-weight: 100;
  line-height: 1.45em;
}

h1 {
  font-family: "Myriad Set Pro","Helvetica Neue","Lucida Grande","Helvetica","Arial","Verdana","sans-serif";
  font-weight: 100;
  font-size: 3em;
}

.wrapper {
  width: 900px;
  margin: 0 auto;
  max-width: 100%;
}

.arrow {
  display: inline-block;
  position: relative;
  margin: 0 auto;
  margin-top: 80px;
  height: 100px;
  width: 100px;
}
.arrow:before, .arrow:after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 50px;
  height: 1px;
  background-color: black;
  display: block;
  transform-origin: right bottom;
  transform: rotate(140deg);
}
.arrow:after {
  transform: rotate(40deg);
}

.intro {
  min-height: 300px;
  text-align: center;
  margin-top: 100px;
}
.intro h1 {
  font-size: 8em;
  margin-bottom: 0;
  line-height: .65em;
}
.intro p {
  text-transform: uppercase;
  letter-spacing: .1em;
}

footer {
  height: 1000px;
  display: block;
  background-color: rgba(0, 0, 0, 0.1);
}
JS
    var scrollPos, sectionHeight, imgWrapStop,
            scrollSection = $('.imac-scrolling'),
            imac          = scrollSection.find('.retina-imac'),
            imacWrap      = $('.imac-container'),
            imacOffset    = imac.offset().top,
            $window       = $(window); 


    setVars = function(){
      scrollPos     = $window.scrollTop();
      sectionHeight = scrollSection.outerHeight();
      imgWrapStop   = ((imacOffset + sectionHeight) - (imac.outerHeight()));
    }

    toggleFixed = function(img, imgWrap, imgTop){
      var isFixed = scrollSection.hasClass('fixed');

      if (scrollPos >= imgTop && !isFixed && scrollPos <= imgWrapStop) {  // When we're in the zone
         imgWrap.addClass('fixed');
         img.css({
           top:0,
           bottom: 'auto'
         });
      } else if (scrollPos >= imgWrapStop) { // when we're out of the zone
         img.css({
           bottom:0,
           top: 'auto'
         });
        imgWrap.removeClass('fixed');
      } else {
        imgWrap.removeClass('fixed');
      }
    }  

    translateScroll = function(selector, value, startPos, endPos) {
      if (scrollPos > startPos && scrollPos < endPos) { // Only run if we're in the zone
          var disToScroll = (startPos - endPos),
              disScrolled = (scrollPos - startPos),  // Distance already scrolled
              transY = ((value / disToScroll) * disScrolled ),
              transYround = +transY.toFixed(2),
              transCss = 'translate3d( 0, ' + transYround +'px, ' + '0)';


          function prefixTransform(selector, translate) {// prefixer function
             selector.css('transform', translate);
             selector.css('-moz-transform', translate);
             selector.css('-webkit-transform', translate);
             selector.css('-o-transform', translate);
             selector.css('-ms-transform', translate);
          }
          prefixTransform(selector, transCss);
         
      }
    }


    scrollFix = function(){
      window.requestAnimationFrame(function(){
        setVars();
        toggleFixed(imac, imacWrap, imacOffset);
        translateScroll(imac, 50, imacOffset, imgWrapStop);
      });
    }
    init = function(){ scrollIntervalID = setInterval(scrollFix, 10);}
    init();
Host Instantly Drag and Drop Website Builder

 

Description

Toggling fixed position while animating translate3d (one of the inexpensive css3 properties) to maintain user expectations with scrolling, just like on the iMac retina site.
Term
Mon, 11/27/2017 - 21:48

Related Codes

Pen ID
Pen ID
Pen ID