ExampleEdit

In this example below you will see how to do a ExampleEdit with some HTML / CSS and Javascript

Thumbnail
This awesome code was written by 0_7734, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright 0_7734 ©

Technologies

  • HTML
  • CSS
  • JavaScript
<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  <title>ExampleEdit</title>
  
  
  
      <link rel="stylesheet" href="css/style.css">

  
</head>

<body>

  
<br><br><br><br><br><br>
<br><br><br><br><br><br>
<div class="panel" data-speed="4" data-type="background" style="background-image:url('http://media.cdn.mclaren.com/images/articles/livestream/crop/1992_MON_22_edited_2Jqvjr9.jpg');">
</div>
<div class="panel" data-speed="4" data-type="background" style="background-image:url('http://media.cdn.mclaren.com/images/articles/livestream/crop/1992_MON_22_edited_2Jqvjr9.jpg')">
</div> 
<div class="panel" data-speed="4" data-type="background" style="background-image:url('http://media.cdn.mclaren.com/images/articles/livestream/crop/1992_MON_22_edited_2Jqvjr9.jpg');">
</div>
<div class="panel" data-speed="4" data-type="background" style="background-image:url('http://media.cdn.mclaren.com/images/articles/livestream/crop/1992_MON_22_edited_2Jqvjr9.jpg');">Below
</div>
<div class="panel fixed" style="transform: translate3d(0,0,0);transform: translate3d(0,0,0);
  -moz-transform: translate3d(0,0,0);
  -webkit-transform: translate3d(0,0,0); position: relative; "><div class="overflow-hidden">
	<picture class="section-background-image text-over-media-background-image">
        <source media="(min-aspect-ratio: 1/1)" srcset="https://news.bbcimg.co.uk/news/special/shorthands/35478/media/1920xxpc_l1254-lr.jpg 1001w,
                https://news.bbcimg.co.uk/news/special/shorthands/35478/media/1920xxpc_l1254-mr.jpg 1401w,
                https://news.bbcimg.co.uk/news/special/shorthands/35478/media/1920xxpc_l1254-hr.jpg">

        
          <source media="(max-aspect-ratio: 1/1)" srcset="https://news.bbcimg.co.uk/news/special/shorthands/35478/media/new1440xxpc_l1254-lr.jpg 1001w,
                https://news.bbcimg.co.uk/news/special/shorthands/35478/media/new1440xxpc_l1254-mr.jpg 1401w,
                https://news.bbcimg.co.uk/news/special/shorthands/35478/media/new1440xxpc_l1254-hr.jpg">
        

        <img src="https://news.bbcimg.co.uk/news/special/shorthands/35478/media/1920xxpc_l1254-mr.jpg" data-object-fit="cover" data-autoscale-content-ratio="1.77777777778">
      </picture>
</div></div>
<div class="panel" data-speed="4" data-type="background" style="background-image:url('http://media.cdn.mclaren.com/images/articles/livestream/crop/1992_MON_22_edited_2Jqvjr9.jpg');">Above
</div>
<div class="panel" data-speed="4" style="background-image:url('http://media.cdn.mclaren.com/images/articles/livestream/crop/1992_MON_22_edited_2Jqvjr9.jpg')" data-type="background">
</div>
<div class="panel" data-speed="4" data-type="background" style="background-image:url('http://media.cdn.mclaren.com/images/articles/livestream/crop/1992_MON_22_edited_2Jqvjr9.jpg');">
</div>
<br><br><br><br><br><br>
<br><br><br><br><br><br>
  <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js'></script>

  

    <script  src="js/index.js"></script>




</body>

</html>

/*Downloaded from https://www.codeseek.co/0_7734/exampleedit-dRxOxx */
body {
  margin: 0; padding: 0;
  background: #000;
}
.overflow-hidden {
  overflow:hidden;
  width:100%;
  height:100%;
}
.section-background-image {
    display: block;
    position: absolute;
  position: fixed;
    -moz-transform: translateZ(0);
    -webkit-transform: translateZ(0);
    -webkit-backface-visibility: hidden;
    -moz-backface-visibility: hidden;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    width: 100%;
    height: 100%;
    z-index: 3;
}
.panel {
  width: 100%; height: 30vw;
  background-color: #000;
  border-bottom: 1px solid #999;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center center;
  text-align: center; color: #fff;
}

/*Downloaded from https://www.codeseek.co/0_7734/exampleedit-dRxOxx */
$('document').ready(function(){
  
  var parallax = function(){
        $('[data-type="background"]').each(function(){
          
          var oT = $(this).offset().top;
          var h = $(this).height();
          var scT = $(window).scrollTop();
          
            var st = (oT+h)-scT;
          
          $(this).css({'background-position':'center '+((st/100)*$(this).data('speed'))+'%'});
          
        });
  }
  parallax();
  $(window).on('scroll touchmove', parallax);
})

Comments